十字的个人博客

仅在桌面端浏览器出现，点击这里去复现：https://wsd.pages.dev/preview/backdrop-filter

可以看到元素尺寸变化的时候，背景模糊并没有跟随变化

移动端反而没出现这个问题

在除了语言专用的插件 和 LanguageService 之外，还有很多非常方便的插件：

1. file-size 在状态栏看到文件大小
2. indent-rainbow 用不同的彩虹颜色来标记缩进
3. TODO-Highlight 高亮指定的关键字 “ TODO / Console ”等，方便快速在源码中定位 TODO

4. es6-string-* 在模版字符串中解析另一种语法，用于拼接一些其他语法的字符串，这是一类插件，包括这些：

   • es6-string-css
   • es6-string-html
   • es6-string-javascript
   • inline-sql
5. Gitless 是 Gitlens 的 Fork 品，不含付费项目
6. CodeGeeX 类似于 Github Copilot 的代码辅助工具，不聪明也不太蠢，至少免费

主要重点在于单端口并且同一个路径提供不同服务，首先需要满足以下条件：

1. 首先根据官方教程完成部署，并使用pm2 start ./server/main.js --node-args="-r esm" --name hackchat启动服务。
2. 假设在创建配置时，默认选择的是 6060 端口作为 websocket 端口。
3. 假设需要使用 once.chat 这个域名，但是只想使用 443 端口，不希望 websocket 走 6060。

流程：

1. 修改 client/client.js，在 320 行找到 var wsPath = ':6060';改为 var wsPath = '/';。
2. 根据普通的 Nginx 配置流程，完成端口监听，SSL 等配置，我这边用的 BT面板，就不再详细说了。

3. 修改 Nginx 配置，对于 localtion / 进行如下配置

   location / {
        root  /www/wwwroot/hackchat/client;
        if ( $http_upgrade = "websocket" ) {
          proxy_pass http://127.0.0.1:6060;
            }
          proxy_set_header Host $host:$server_port;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header REMOTE-HOST $remote_addr;
          add_header X-Cache $upstream_cache_status;
          proxy_set_header X-Host $host:$server_port;
          proxy_set_header X-Scheme $scheme;
          proxy_connect_timeout 30s;
          proxy_read_timeout 86400s;
          proxy_send_timeout 30s;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
    }

此时打开网页，即可正常加载静态资源的同时，也能用根路径连接到 websocket 服务。

如果嫌麻烦的话呢，也可以修改 wsPath ，带上 /chat-ws 这样的 path (官方的实现方式)，在 Nginx 中就可以直接通过 location 进行区分了，配置起来更简单一点。

欢迎体验: once.chat

主要优化了以下几个方面

1. 对于折叠和滚动的代码区域进行了修改，让代码能够换行并且完全展示
2. 对于页面元素进行了精简
3. 调整了布局和颜色

如果有看到好文章，欢迎使用网页打印功能记录为 PDF 或者纸质文稿。

ps: 如果看到页眉页脚，可能是浏览器默认设置的，可以在打印的更多设置里面取消勾选

在微信浏览器想要打开对应公众号，目前有两个方法，功能和实现不一样。

中转页放公众号二维码

属于用户使用门槛比较高的一种，直接跳转到中转页，提示用户长按识别二维码

好处是可以保留 scene 等信息，跳过去可以带一定的参数，对方公众号不需要做开发

跳微信公众号消息页

微信公众号消息页会在首部显示公众号和 “去关注” 按钮。

这种方法跳转，用户操作步骤少，比较容易接受，该跳转路径不接受场景值，如果传参，最好目标公众号的额外提供中转页做好openid 绑定，假设从 A 公众号导流 到 B 公众号。

1. A业务页面重定向到 B 的中转页，带A的识别参数，例如 channelCode
2. B中转页完成微信 Oauth 鉴权，拿到 B Openid_b , B 中转页取 channelCode ，与该用户绑定
3. B中转页继续重定向到微信消息页，引导用户关注。

跳转的微信消息页的链接格式为：

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUyODgxNjE1OA==&scene=124#wechat_redirect

其中 __biz=MzUyODgxNjE1OA== 是关键参数，后面的这串 MzUyODgxNjE1OA== 是公众号的身份标识。

这个值有两种获取办法

1. 第一种方法比较复杂，需要使用 devTools

   1. 浏览器打开公众号推文
   2. F12 或者 ctrl + shift + c 打开 devTools
   3. 切换到 network 页签，然后刷新页面
   4. 点击搜索图标
   5. 输入 __biz=
   6. 点击找到的请求记录，点开 payload
   7. 查看 payload 的 queryString 即可看到 __biz　的值

   

2. 第二种方法稍微简单，需要进入公众号后台

   1. 最左边找到公众号设置
   2. 找到下载二维码，点开
   3. 复制二维码下载地址的链接，粘贴出来，可以看到链接中有一个类似于 fakeid=12345678，将这串数字拷贝出来
   4. 找一个 base64 encode 工具，例如 OSchina/base64 或者 直接在浏览器控制台执行 btoa(12345678) ，得到一个字符串，这个就是 __biz

通过上述两个方法得到 __biz 后，拼接到下面这个链接中即可。

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【__biz的值】&scene=124#wechat_redirect