非你网

import log4js from "log4js";

const config = {
  appenders: {
    console: { 
        type: "console",
        layout: {
            type: "pattern",
            pattern: "%d{yyyy-MM-dd hh:mm:ss} - %m", // 这里定义了时间格式
        },
    },
    file: {
      type: "dateFile",
      filename: "logs/log",
      encoding: 'utf-8',
      compress: true,
      numBackups: 7,
      keepFileExt: true,
      alwaysIncludePattern: true,
      pattern: "yyyy-MM-dd.log",
      fileNameSep: '-',
      layout: {
        type: "pattern",
        pattern: "%d{yyyy-MM-dd hh:mm:ss} - [%p] - %m", // 这里定义了时间格式
      },
    },
  },
  categories: {
    default: { appenders: ["console", "file"], level: "info" },
  },
};

let logger;
if (!logger) {
  log4js.configure(config);
  logger = log4js.getLogger();
}

export default logger;

阅读全文 >>

6月 05

web 全景图，vr，ar

发表于 2024年6月5日 • 119 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日 • 137 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日 • 134 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日 • 131 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日 • 180 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日 • 224 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

阅读全文 >>

Write the Code. Change the World.

写在前面

webrtc

log4js

自言自语

步骤

步骤

准备 dockerfile

准备 nginx.conf

准备 docker-compose.yaml 文件

生成镜像，构建容器

检查

相关文章

生成 ssh-key

指定 ssh-key

历史

常规操作

1、先创建一个 vue3 项目

2、安装 sass

3、创建一个 scss 文件

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

参考

2024年 7月
一	二	三	四	五	六	日
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	31