非你网

6月 05

web 全景图，vr，ar

发表于 2024年6月5日 • 224 views • 没有评论!

前端

https://aframe.io/

https://skybox.blockadelabs.com/

https://blog.csdn.net/kittyzc/article/details/108018508

https://github.com/simply4784/panorama.github.io

阅读全文 >>

5月 29

wordpress 可能会用到的东西

发表于 2024年5月29日 • 239 views • 没有评论!

工具

fontawesome 字体。如果主题中直接引用 cdn 的字体，经常出现 404 等情况。可以将字体下载下来，放在主题目录下，使用本地的会更好。
https://fontawesome.dashgame.com/#google_vignette

获取当前主题的 url。比如存在某个主题 A，在主题 A 下有 ·/css/your-stylesheet.css 文件，就可以通过下边的方法来处理。这样渲染出来就是 https://xxx.com/xx/xx/css/your-stylesheet.css。如果你的域名是 https://xxx.com 的话。这样就可以防止硬编码了。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/your-stylesheet.css">

自言自语

在 wordpress 中，我安装了一个主题，在这个主题的 header.php 中，我引用了该文件夹下的一个 css 文件，怎么获取当前的 css 文件的路径呢

阅读全文 >>

5月 27

vue3 项目，使用 ts，怎么允许某些组件不使用 ts

发表于 2024年5月27日 • 229 views • 没有评论!

vue,前端

vue3 项目，配置了 ts 来开发。如果某一些组件，不使用 ts，编译的时候会报错。有时候并不是不想用 ts，只是那些文件是第三方编写的，又耦合比较高。这个时候，允许这些文件继续使用 js 来编写是一个需求。

这里以一个 LivePlayer 组件为例。

步骤

创建一个 src/components/LivePlayer/LivePlayer.vue。部分代码如下。这里没有设置 lang='ts',也没有使用 ts 的强类型。

components<template>
    <div class="relative overflow-hidden shrink-0 w-[320px] h-[405px]">
        <div id="remoteVideo" class="w-[720px] h-[405px] ml-[-200px]"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const playIng = false

const urls = ref([])

function play(value) {
    urls.push(value)

    playVideo()
}

function playVideo() {
    if (playIng) {
        return
    }

    const url = urls.shift()
    if (!url) {
        return
    }

    playIng = true
    // todo
}

defineExpose({ play })
</script>

tsconfig.app.json 中加入黑名单，ts 编译器对这些文件不做处理。如：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*", "src/components/LivePlayer/LivePlayer.vue"],
  …

添加类型声明。在 typings 目录下，增加类型声明。typings 目录根据实际项目配置为准。

// 定义一个接口来描述暴露给模板的属性或方法  
interface LivePlayerExpose {  
    speakMessage: (value:string) => void
}

// 声明一个 Vue 组件实例类型，它扩展了 Vue 组件的基础类型，并添加了 LivePlayerExpose 接口  
declare type LivePlayerComponent = InstanceType<DefineComponent<{}, {}, {}, {}>> & LivePlayerExpose

declare module '@/components/LivePlayer/LivePlayer.vue' {  
    import { DefineComponent } from 'vue'

    const component: DefineComponent<{}, {}, {}, {}> & {  
        // 注意：这里我们并不直接导出 component，而是声明了它的类型  
        // 在实际使用时，Vue 会处理 component 的导出和注册  
    };  

    // 导出的是组件的实例类型，以便在模板或其他组件中引用时具有正确的类型  
    export default component
    // 导出组件实例类型以供外部使用  
    export type Instance = LivePlayerComponent
  }

项目中使用组件

components<template>
    <div class="w-full">
        <LivePlayer ref="livePlayerRef" />
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';

const livePlayerRef = ref<InstanceType<typeof LivePlayer> | null>(null)

onMounted(() => {
    livePlayerRef.value?.play("xxx")
})
</script>

阅读全文 >>

5月 26

使用 Docker 安装和配置 nginx+brotli

发表于 2024年5月26日 • 229 views • 没有评论!

docker,工具

brotli 有很好的解压缩效率，但 nginx 默认又不包含 brotli 模块，只能额外搞了

步骤

准备 Dockerfile 文件
准备 nginx.conf 文件
准备 docker-compose.yaml 文件
生成镜像，构建容器

准备 dockerfile

先

# 创建一个 env 目录,基于该目录为项目根目录
mkdir env && cd env

# 下载 Dockerfile
curl -o docker/nginx/Dockerfile https://raw.githubusercontent.com/nginxinc/docker-nginx/master/modules/Dockerfile

准备 nginx.conf

https://github.com/google/ngx_brotli/blob/master/README.md

这里 nginx.conf 位于 ./conf/nginx/nginx.conf 中。

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

 load_module modules/ngx_http_brotli_filter_module.so;
 load_module modules/ngx_http_brotli_static_module.so;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
     brotli on;
    include /etc/nginx/conf.d/*.conf;
}

准备 docker-compose.yaml 文件

docker-compose.yaml 文件直接就在项目根目录下。

…
nginx:
    build:
      context: ./docker/nginx
      args:
        ENABLED_MODULES: brotli
    image: xr-nginx-brotli
    container_name: xr-nginx-brotli
    restart: always
    privileged: false
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./conf/nginx/nginx.conf:/etc/nginx/nginx.conf

生成镜像，构建容器

# 生成镜像
docker-compose build nginx

# 构建启动容器
docker-compose up

其实，可以直接执行 docker-compose up, 没有镜像的时候，会先去生成镜像的

检查

当你发起请求经过 nginx 时，返回的请求头中有 Accept-Encoding: br 表示 brotli 生效了。

生成 ssh-key

ssh-keygen -t rsa -C xxx@xx.com -f xxx-github

指定 ssh-key

方式一（到当前目录下）：

git config core.sshCommand "ssh -i ~/.ssh/xxx-github"

方式二

# 添加
ssh-add ~/.ssh/xxx-github

# 删除
ssh-add -d ~/.ssh/xxx-github

# 查看
ssh-add -l

推荐使用方式一，这样每个项目都会对应好自己的 ssh-key，不会影响其他的项目。

历史

https://blog.vini123.com/1070

https://blog.vini123.com/1134

阅读全文 >>

5月 08

Laravel 11

发表于 2024年5月8日 • 276 views • 没有评论!

php

Laravel 11 和 Laravel Reverb 现已发布。Reverb 是 Laravel 生态系统的最新成员，是第一方、可扩展的 WebSocket 服务器，旨在为用户的应用程序提供强大的实时功能。

Laravel 11 引入了：极简应用结构、默认使用 SQLite、实现 health routing、提供每秒速率限制、支持优雅的加密密钥轮换、改进队列测试、引入新的 Artisan 命令、添加 Resend 邮件传输、集成 Prompt validator、新的 Artisan commands、Model Casts 改进、The once function、改进了使用内存数据库进行测试时的性能、改进了对 MariaDB 的支持等等，

Laravel 11 使用的 PHP 版本最低要求是 PHP 8.2。

阅读全文 >>

5月 04

vite + vue3，配置使用 sass 失效的问题

发表于 2024年5月4日 • 342 views • 没有评论!

vite,vue,前端

vite 支持自动处理 scss，less 等文件，但需要下载对应的包 https://cn.vitejs.dev/guide/features#css-pre-processors。如果，你想单独写 scss 这些，可以在 vite.confit.ts 中进行配置

常规操作

1、先创建一个 vue3 项目

# 创建 vue 项目
pnpm add vue

pnpm format

pnpm dev

# 添加 git 版本控制
git init -b main
git add .

2、安装 sass

pnpm add sass

3、创建一个 scss 文件

touch ./src/assets/css/base.scss

# 填充下边内容
body {
    background-color: #f00;
}

4、在 vite.config.ts 中进行配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/base.scss";`
      }
    }
  },
  plugins: [vue(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这个时候，发现 base.scss 中的样式不生效。真的很郁闷，查了一些文档和资料，就是这么写的，偏偏不行。还好在 segmentfault 上找到了一个解释。就是你必须至少在 .vue 文件里边至少使用 <style lang="scss"><style>。于是，手动这样加了一下，果真样式生效了。当下用的是最新版本的 vite（vite5），依然存在这个问题。

参考

https://segmentfault.com/a/1190000041425201

阅读全文 >>

4月 30

本地部署 MuseV，试试文字生视频，图片生视频，视频生视频

发表于 2024年4月30日 • 441 views • 没有评论!

AI

官方地址：https://github.com/TMElyralab/MuseV

在这里，可以看到生成的样例。这里总结下部署和安装，几乎和官网一样。

环境准备

电脑配有 nvidia 显卡
梯子
docker 环境
huggingface cli 工具 https://blog.vini123.com/1099

开始

先创建一个项目目录， museVtask。将 github 代码拉下来。
git clone --recursive https://github.com/TMElyralab/MuseV.git 这里一定要加上recursive参数，这样会将 diffusers 等子模块一起下载下来。
下载模型文件。这里不使用 git 下载，毕竟模型文件 32.3 G。使用 huggingface cli,还得要梯子。huggingface-cli download --resume-download TMElyralab/MuseV --local-dir ./MuseV/checkpoints
在下载的同时，可以将 docker-compose 配置文件搞起来。先创建 Dockerfile 文件，代码如下：

FROM anchorxia/musev:latest  

# 设置工作目录  
WORKDIR /workspace/MuseV  

# 将宿主机的 MuseV 目录复制到容器的对应目录  
COPY ./MuseV /workspace/MuseV  

# 设置 PYTHONPATH 环境变量  
ENV PYTHONPATH=/workspace/MuseV:${PYTHONPATH}  
ENV PYTHONPATH=/workspace/MuseV/MMCM:${PYTHONPATH}  
ENV PYTHONPATH=/workspace/MuseV/diffusers/src:${PYTHONPATH}  
ENV PYTHONPATH=/workspace/MuseV/controlnet_aux/src:${PYTHONPATH}  

# 这里可以设置默认的命令，但如果你想要 bash 交互式 shell，则不需要  
# CMD ["python", "your_script.py"]

再创建 docker-compose.yaml 文件，代码如下：

services:
  musev:
    build:
      context: .
      dockerfile: Dockerfile
    image: musev
    container_name: musev-latest
    runtime: nvidia
    restart: always
    volumes:
      - ./MuseV:/workspace/MuseV
    stdin_open: true
    tty: true

如果报错 docker: Error response from daemon: unknown or invalid runtime name: nvidia，请参考 https://blog.vini123.com/1206

阅读全文 >>

4月 30

RuntimeError: Found no NVIDIA driver on your system. Please check that you have an NVIDIA GPU and installed a driver from http://www.nvidia.com/Download/index.aspx 错误

发表于 2024年4月30日 • 291 views • 没有评论!

docker,工具

在 docker 容器中运行 python 项目时，报 RuntimeError: Found no NVIDIA driver on your system. Please check that you have an NVIDIA GPU and installed a driver from http://www.nvidia.com/Download/index.aspx 错误，这个时候需要 docker 开启 nvidia engin 的支持。至少电脑是装了 nvidia 的显卡的。

docker 中启用 nvidia：
https://blog.vini123.com/1206

阅读全文 >>

4月 30

docker: Error response from daemon: unknown or invalid runtime name: nvidia 问题处理

发表于 2024年4月30日 • 270 views • 没有评论!

docker,工具

在 docker 中，docker-compose.yaml 配置了 nvida 参数时，执行 docker-compose up -d 时报docker: Error response from daemon: unknown or invalid runtime name: nvidia 错误。

如果是非 win 系统，修改 /etc/docker/daemon.json,并添加以下配置。

{
  "runtimes": {
    "nvidia": {
      "path": "nvidia-container-runtime",
      "runtimeArgs": []
    }
  },
  "default-runtime": "nvidia"
}

然后重启 docker。

如果是 win 系统，需要手动打开 docker 桌面应用，点击右上角的设置，进入 docker engine 项进行配置。配置内容也是和上边的一样。如下截图。

阅读全文 >>

Write the Code. Change the World.

自言自语

步骤

步骤

准备 dockerfile

准备 nginx.conf

准备 docker-compose.yaml 文件

生成镜像，构建容器

检查

相关文章

生成 ssh-key

指定 ssh-key

历史

常规操作

1、先创建一个 vue3 项目

2、安装 sass

3、创建一个 scss 文件

4、在 vite.config.ts 中进行配置

参考

环境准备

开始

2024年 9月
一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30