Ctanhuawu の Blog

Hexo 字体分片加载实践

Tue, 02 Dec 2025 07:30:26 GMT

前言

众所周知，中文字体的体积实在夸张，动不动就十几 MB。再加上白嫖 CDN 的带宽本来就小，页面一加载就慢得让人头疼，首屏甚至能卡到怀疑人生。可同时，大家又都希望通过自定义字体给博客加点个性，让站点看起来更有味道。于是问题就出现了：既想保持风格，又不想让网站加载速度变成 PPT，这就必须想办法把字体优化一下。

技术原理

既然中文字体大得夸张，要优化加载速度，最核心的一步就是把大块的 TTF 切成小巧的 WOFF2 分片。手动切肯定是不现实的，所以一般会借助现成的字体分片工具。它们能自动分析你需要的字符，然后生成只保留必要字形的字体文件。

常见做法就是用工具把字体拆成几个片段，比如常用汉字、扩展汉字、英文数字、标点符号等等。这样浏览器遇到中文就加载中文那片，需要英文就加载英文那片，实现真正的按需加载。

比如使用一些在线子集化工具。核心目的都是一样的：减少字体内容，让每个片段越小越好，然后在 CSS 里用 unicode-range 让浏览器自动选择它该加载哪一片。

最终效果就是：原本十几 MB 的字体，可能被拆成几个几十 KB 的小文件；加载速度提升明显，博客的个性化字体也保留，几乎两全其美。

在线字体分包器

项目地址	在线使用
cn-font-split	在线字体分包器

实践（以 Hexo anzhiyu 为例）

:::note 准备字体 -> 上传到主题 -> 写 CSS -> 配置主题 -> 完成。 :::

使用在线工具生成分片字体

将未分包的字体上传到在线字体分包器中，点击 点击开始字体分包，等待完成后再点击 压缩下载 zip。

每个文件大概几十 KB，非常轻量。

把下载的分片文件 zip 放到 /source/fonts/ 中，如果没有的话就自己建一个文件夹即可。

最终目录示例：

fonts/
└── myfont/
    ├── MyFont-basic.woff2
    ├── MyFont-extA.woff2
    ├── MyFont-latin.woff2
    ├── MyFont-symbol.woff2
    └── result.css

添加自定义 CSS

在 _config.anzhiyu.yml 中：

# Inject
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

在 source/css/custom.css 中：

@import '/fonts/myfont/result.css';

在安知鱼主题中启用字体

在 _config.anzhiyu.yml 中：

font:
  global-font-size: 16px
  code-font-size:
  font-family: "FZFW ZhuZi A YuanS D <- yourfont"
  code-font-family: MapleMono-Regular, consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

这样全站都使用你刚才分片后的字体了。

效果展示

可以看到分片加载的速度非常快。

由于 CDN 下线导致的，安知鱼主题图片无法显示/加载

Sat, 16 Aug 2025 06:01:26 GMT

引言

在一次更新和调试中，我突然发现自己的博客所有图片都加载不出来，文章二维码也失效了。起初我还以为是主题配置出了错，但仔细排查后才发现，真正的原因是字节跳动公共静态资源库被下线，导致主题依赖的外部 JS 资源无法正常获取。

这篇文章记录了我定位问题的过程，以及通过替换 CDN 链接来解决故障的方法，希望能帮到遇到同样问题的朋友。

典型症状

全站图片无法加载且控制台中显示多个依赖无法加载
部分功能无法使用，如文章二维码
从主页进入文章可显示图片，但在文章页面刷新后无法显示图片

故障原因

字节跳动静态资源公共库因黑产问题下线

解决方法

定位故障原因

在故障页面按下 <kbd>F12</kbd>，进入网络页面点击刷新查看 JS 获取情况。

以 `qrcode.min.js` 无法加载为例

复制请求 URL，使用编辑器搜索定位后替换为可用的 CDN 即可，比如 VSCode。

将 https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js

替换为 https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js

可能的隐患

在 themes\anzhiyu\sw-rules.js 里还有对 bytecdntp.com 的引用。

Linux Server 使用 Clash TUN 模式实现透明代理（Clash + Yacd 管理界面）保姆级教程

Fri, 15 Aug 2025 07:19:10 GMT

:::warning 已有更加优雅的实现，详见 clash-for-linux-install。 :::

引言

在使用 Linux 服务器的过程中，常常遇到这样的问题：在 Clash 启动后还要为各种应用或服务设置系统代理，还可能遇到一些无法设置代理的软件导致无法访问。所以我们可以通过 Clash 的 TUN 模式实现系统级透明代理，让所有应用无需单独配置代理即可直接访问外网。再配合 Yacd 可视化管理面板，我们就能更直观地管理和切换节点，大大提升使用体验。

开始前准备

安装脚本依赖
git
iproute
nftables
Yacd 依赖
docker

安装 Clash-TUN

安装 clash-tun

克隆项目

git clone https://github.com/blue7wings/clash-tun
# 连不上 github 可使用反代
# 如： git clone https://gh.llkk.cc/https://github.com/blue7wings/clash-tun
cd clash-tun

配置设置

sudo mkdir /srv/clash/
sudo mv config.yaml Country.mmdb /srv/clash/
sudo mv clash /usr/bin/

安装 clash-core

下载 Clash Core 并解压

# AMD64 架构为例
wget https://downloads.clash.wiki/ClashPremium/clash-linux-amd64-2023.08.17.gz
# 使用 gunzip 解压
gunzip clash-linux-amd64-2023.08.17.gz

安装 Clash 并设置权限

sudo mv clash-linux-amd64-2023.08.17 /usr/bin/clash
sudo chmod 775 /usr/bin/clash

完成安装

sudo ./installer.sh install

安装 Yacd

docker run -p 1234:80 -d --name yacd ghcr.io/haishanh/yacd:master

安装后可通过 http://hostip:1234 访问。

修改 `config.yaml` 以开启 TUN 和 Web 管理

通过 `vim` 修改配置文件

sudo vim /srv/clash/config.yaml

向配置文件中修改以下选项

# 主机修改为 0.0.0.0 以支持外部访问
# 端口号修改为 9091 以避免与 web 管理冲突
external-controller: "0.0.0.0:9091"
# 启用 tun
tun:
  enable: true

修改后的配置文件示例

mixed-port: 7890
allow-lan: true
bind-address: "*"
mode: rule
log-level: info
external-controller: "0.0.0.0:9091"
tun:
  enable: true
dns:
  enable: true
  ipv6: true
  default-nameserver: [223.5.5.5, 119.29.29.29]
  enhanced-mode: fake-ip
  fake-ip-range: 198.18.0.1/16
  use-hosts: true
  nameserver: [223.5.5.5, 119.29.29.29, 8.8.8.8, 1.1.1.1]
  fallback:
    [8.8.4.4, 1.0.0.1, "https://dns.twnic.tw/dns-query", "tls://8.8.4.4:853"]
  fallback-filter: { geoip: true, ipcidr: [240.0.0.0/4, 0.0.0.0/32] }
proxies:

:::tip 修改后就能通过 Web 管理选择连接节点了。 :::

最终效果

服务管理

设置开机自启（如有需要）

sudo systemctl enable clash

启动 clash

sudo systemctl start clash

查看服务状态

sudo systemctl status clash

一些疑难杂症

Yacd 无法连接到 Clash 解决方案

方法一：放行 external-controller 端口 sudo firewall-cmd --add-port=9091/tcp
方法二：关闭防火墙

:::warning 尽量不要关闭防火墙，这样会使你的服务器更易受到攻击。 :::

sudo systemctl stop firewalld.service

飞牛OS 申请 SSL 证书并实现自动续签（1Panel + ln -s 软连接）

Wed, 23 Jul 2025 05:35:10 GMT

开始前准备

1Panel
DNS 账号（本文以 Cloudflare 为例）
有手就行

创建证书推送文件夹

在用户目录下创建一个接收证书的文件夹，1Panel 申请的证书将会推送到这里。

:::note 建议右键文件夹后在文件夹详细信息中复制原始路径备用。 :::

使用 1Panel 申请 SSL 证书

1. 进入证书页添加域名 DNS 账号

进入证书页后点击 DNS 账户按钮添加 DNS 账户。

进入 Cloudflare Dashboard 获取 API 令牌，点击创建令牌创建具有编辑 DNS 权限的令牌。

2. 创建 Acme 账户

填写邮箱后点击确定。

3. 申请域名并设置推送文件夹证书

输入主域名后按需填写选项，开启自动续签，并设置证书推送目录

设置重命名脚本

1Panel 申请的证书默认为 fullchain.pem 和 privkey.pem，重命名后更方便管理。

# xxx 改为你的主域名
mv fullchain.pem xxx.crt
mv privkey.pem xxx.key

最后点击确认，等待几分钟即可申请到证书。

将证书上传到 FnOS

将推送目录的证书下载后上传到 FnOS，中间证书可不填。

使用软链接实现证书自动续签

1. 进入终端（可使用 1Panel 中的终端）

先进入飞牛 NAS 的证书存放目录，这里存放了添加到系统中的域名证书。

cd /usr/trim/var/trim_connect/ssls

继续进入需要自动续签的域名目录，如 /usr/trim/var/trim_connect/ssls/xxx.com/1753268297/，这目录下存放了该域名的证书和私钥。

2. 使用命令软链接私钥和证书

:::warning 需要先删除原有的证书和私钥文件。 :::

# 删除原有证书文件
sudo rm xxx.crt xxx.key

# 添加软链接文件（如有需要请更改链接路径）
sudo ln -s /vol1/1000/Certs/xxx.crt xxx.crt
sudo ln -s /vol1/1000/Certs/xxx.key xxx.key

如有需要可通过 cat 命令查看是否链接成功。

cat xxx.crt
cat xxx.key

大功告成

可能遇到的问题

如遇到申请证书时出现错误，可以尝试打开 禁用 CNAME 选项

更新到 Ubuntu 24.10 后 Xrdp 连接后闪退修复

Sun, 09 Feb 2025 07:02:50 GMT

问题描述

Ubuntu 更新到 24.10 后，使用 apt 安装 xrdp

sudo apt install xrdp

添加 gnome-session 到 ~/.xsession

echo "gnome-session" | tee ~/.xsession

在 Windows 上使用远程桌面连接 Ubuntu 登录 Xorg 后闪退。

查看 .xorgxrdp.10.log 发现客户端的版本比预期的要旧，但是更新客户端版本也不行。

[ 10160.761] rdpClientConProcessMsgClientInfo:
[ 10160.761] expected xrdp client_info version 20230425, got 20210723
[ 10160.761] (EE)
Fatal server error:
[ 10160.761] (EE) Incompatible xrdp version detected  - please recompile(EE)
[ 10160.761] (EE)
Please consult the The X.Org Foundation support
         at http://wiki.x.org
 for help.
[ 10160.761] (EE) Please also check the log file at ".xorgxrdp.10.log" for additional information.
[ 10160.761] (EE)
[ 10160.762] rdpmouseControl: what 4
[ 10160.762] rdpkeybControl: what 4
[ 10160.762] (II) AIGLX: Suspending AIGLX clients for VT switch
[ 10160.762] rdpLeaveVT:
[ 10160.764] (EE) Server terminated with error (1). Closing log file.

其实这是 Ubuntu Oracular 源 Xrdp 的一个 Bug。

在 Oracular 中，Xrdp 和 xorgxrdp 被编译为不同的版本

解决方法

方法一、使用旧版的 xorgxrdp 包

1. 下载旧版 xorgxrdp 包

wget http://launchpadlibrarian.net/640882094/xorgxrdp_0.9.19-1_amd64.deb

2. 使用 dpkg 安装

sudo dpkg -i xorgxrdp_0.9.19-1_amd64.deb

3. 重启 xrdp 服务

sudo systemctl restart xrdp

4. 禁止 xorgxrdp 自动更新

sudo apt-mark hold xorgxrdp

方法二、修改 apt 更新源并更新 Xorgxrdp

:::warning 此方法我尝试了也没成功，有效性待定。 :::

1. 编辑 `/etc/apt/sources.list.d/ubuntu.sources`，在 `oracular-backports` 后面添加 `oracular-proposed`

2. `sudo apt update` 更新软件源

3. `sudo install xrdp/oracular-proposed`，使用指定软件源更新 `xrdp`

使用远程桌面连接测试

参考资料

xorg - Remote desktop connections from Windows to stopped working after upgrading to Ubuntu 24.10 - Ask Ubuntu

Ctanhuawu の Blog

Hexo 字体分片加载实践

前言

技术原理

在线字体分包器

实践（以 Hexo anzhiyu 为例）

效果展示

由于 CDN 下线导致的，安知鱼主题图片无法显示/加载

引言

典型症状

故障原因

解决方法

定位故障原因

以 qrcode.min.js 无法加载为例

可能的隐患

Linux Server 使用 Clash TUN 模式实现透明代理（Clash + Yacd 管理界面）保姆级教程

引言

开始前准备

安装 Clash-TUN

安装 clash-tun

安装 clash-core

完成安装

安装 Yacd

修改 config.yaml 以开启 TUN 和 Web 管理

通过 vim 修改配置文件

向配置文件中修改以下选项

修改后的配置文件示例

最终效果

服务管理

一些疑难杂症

Yacd 无法连接到 Clash 解决方案

飞牛OS 申请 SSL 证书并实现自动续签（1Panel + ln -s 软连接）

开始前准备

创建证书推送文件夹

使用 1Panel 申请 SSL 证书

1. 进入证书页添加域名 DNS 账号

2. 创建 Acme 账户

3. 申请域名并设置推送文件夹证书

输入主域名后按需填写选项，开启自动续签，并设置证书推送目录

设置重命名脚本

将证书上传到 FnOS

使用软链接实现证书自动续签

1. 进入终端（可使用 1Panel 中的终端）

2. 使用命令软链接私钥和证书

大功告成

可能遇到的问题

更新到 Ubuntu 24.10 后 Xrdp 连接后闪退修复

问题描述

解决方法

方法一、使用旧版的 xorgxrdp 包

1. 下载旧版 xorgxrdp 包

2. 使用 dpkg 安装

3. 重启 xrdp 服务

4. 禁止 xorgxrdp 自动更新

方法二、修改 apt 更新源并更新 Xorgxrdp

1. 编辑 /etc/apt/sources.list.d/ubuntu.sources，在 oracular-backports 后面添加 oracular-proposed

2. sudo apt update 更新软件源

3. sudo install xrdp/oracular-proposed，使用指定软件源更新 xrdp

使用远程桌面连接测试

参考资料

以 `qrcode.min.js` 无法加载为例

修改 `config.yaml` 以开启 TUN 和 Web 管理

通过 `vim` 修改配置文件

1. 编辑 `/etc/apt/sources.list.d/ubuntu.sources`，在 `oracular-backports` 后面添加 `oracular-proposed`

2. `sudo apt update` 更新软件源

3. `sudo install xrdp/oracular-proposed`，使用指定软件源更新 `xrdp`