安小歪 Hexo https://blog.anxw.cn/ All rights reserved 2026, 安小歪 1+1=2 安小歪の小窝 2025-09-02T09:50:58.000Z 安小歪 Hexo AI 摘要插件（自用）

参考博主LiuShen
灵感来源:LiuShen
插件仓库

这是一个 Hexo 插件，用于自动生成文章的摘要。支持腾讯混元、OpenAI 或任何兼容 OpenAI 协议的模型接口，支持并发处理、自定义摘要字段、摘要覆盖控制等功能。

该插件不能保证不造成错误问题以及混乱，使用前请注意备份！
此类文章摘要也可以本地运行，只需合适的 js 文件，博客根目录运行 node ai.js 也可以达到 AI 摘要的效果。

安装

1
npm install hexo-ai-summary-anxiaowai --save

配置项

添加到 _config.yml 或主题配置文件中：

token 可以自行申请免费的腾讯 Hunyuan 模型

1
2
3
4
5
6
7
8
9
10
11
12
13
aisummary:
  enable: true                                                   # 是否启用插件
  api: https://api.hunyuan.cloud.tencent.com/v1/chat/completions # OpenAI 或腾讯云的 Hunyuan 模型
  token: sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx             # OpenAI 或兼容模型的密钥
  model: hunyuan-standard                                        # 使用模型名称
  summary_field: summary                                         # 摘要字段
  cover_all: false                                               # 是否启用全部覆盖（即重新生成）
  concurrency: 2                                                 # 并发处理数
  max_input_length: 3000  # 输入文本长度限制（腾讯推荐 2000 字以内）
  prompt: "请用简体中文生成一段简洁的摘要，要求：1.长度在 80-120 字之间 2.包含文章核心观点 3.输出内容开头为"这里小歪 AI，这篇文章"4. 不要包含代码和公式"
  max_tokens: 120       # 混元模型建议稍大的 token 限制
  temperature: 0.5      # 创造性稍高的温度值（0.1~2.0）
  timeout: 10000        # 腾讯 API 建议稍长的超时时间

指定文章禁用 AI 摘要

在文章 front-matter 中添加：

1
2
3
4
---
title: xxxxxxxxxxx
summary: false
---

修改文章模板

修改文件：hexo\themes\butterfly\layout\post.pug

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug

+    //- AI 摘要卡片（含延迟动画）
+    if page.summary && page.summary !== false
+      .ai-summary-wrapper
+        .ai-summary-header
+          .mac-window-dots
+            span.dot.red
+            span.dot.yellow
+            span.dot.green
+          .ai-source 安小歪のAI摘要
+        .ai-summary-body
+          .ai-loading 正在思考中ing…
+          .ai-text(data-delay="2000" data-text=page.summary)
+        .ai-footer
+          .ai-tip 此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
+          .ai-model hunyuan-standard

    article#article-container.container.post-content
      if theme.noticeOutdate.enable && page.noticeOutdate !== false 
        include includes/post/outdate-notice.pug
      else
        !=page.content
    include includes/post/post-copyright.pug
    .tag_share
      if (page.tags.length > 0 && theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
      include includes/third-party/share/index.pug
        
    if theme.reward.enable && theme.reward.QR_code
      !=partial('includes/post/reward', {}, {cache: true})

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    if theme.post_pagination
      include includes/pagination.pug
    if theme.related_post && theme.related_post.enable
      != related_posts(page,site.posts)

    if page.comments !== false && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

添加自定义 CSS

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
/* =====AI 摘要基础样式===== */
.ai-summary-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 0.95rem;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: all 0.4s ease; /* 过渡动画 */
}

.ai-summary-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.6rem;
}

.mac-window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mac-window-dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background-color 0.3s ease; /* 颜色过渡 */
}

.mac-window-dots .red { background-color: #ff5f56; }
.mac-window-dots .yellow { background-color: #ffbd2e; }
.mac-window-dots .green { background-color: #27c93f; }

.ai-source {
  font-size: 0.75rem;
  color: white;
  margin-left: auto;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  box-shadow: 0 2px 8px rgba(106, 126, 247, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;
}

.ai-source::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: 0.6s;
  z-index: -1;
}

.ai-source:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(106, 126, 247, 0.4);
}

.ai-source:hover::before {
  left: 100%;
}

.ai-source::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 20px;
  height: 100px;
  background: rgba(255,255,255,0.15);
  transform: rotate(30deg);
  pointer-events: none;
}

.ai-summary-body {
  min-height: 1.6em;
  padding: 0.2rem 0;
}

.ai-loading {
  color: #888;
  font-style: italic;
  transition: color 0.3s ease; /* 颜色过渡 */
}

.ai-text {
  display: none;
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 1.2em;
}

.ai-footer {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  color: #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed #ddd;
  padding-top: 0.5rem;
  transition: all 0.3s ease; /* 过渡动画 */
}

@media (max-width: 768px) {
  .ai-summary-wrapper {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }
  .ai-source {
    font-size: 0.65rem;
    padding: 3px 8px;
    letter-spacing: normal;
  }
}

/* ===== Butterfly 主题黑暗模式适配 ===== */
[data-theme="dark"] .ai-summary-wrapper {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
}

[data-theme="dark"] .ai-source {
  background: linear-gradient(135deg, #5b67d8, #805ad5);
  box-shadow: 0 2px 10px rgba(91, 103, 216, 0.5);
}

[data-theme="dark"] .ai-source:hover {
  box-shadow: 0 4px 16px rgba(91, 103, 216, 0.7);
}

[data-theme="dark"] .ai-source::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

[data-theme="dark"] .ai-source::after {
  background: rgba(255,255,255,0.1);
}

[data-theme="dark"] .mac-window-dots .red { background-color: #fc8181; }
[data-theme="dark"] .mac-window-dots .yellow { background-color: #f6ad55; }
[data-theme="dark"] .mac-window-dots .green { background-color: #68d391; }

[data-theme="dark"] .ai-loading {
  color: #a0aec0;
}

[data-theme="dark"] .ai-footer {
  color: #a0aec0;
  border-top-color: #4a5568;
}

/* 系统级黑暗模式支持 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-summary-wrapper {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    color: #e2e8f0;
  }
  /* 其他样式与 [data-theme="dark"] 相同 */
}

添加自定义 JS

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
(function() {
  // 配置参数
  const DEFAULT_DELAY = 0;    // 默认延迟时间 (ms)
  const TYPING_SPEED = 50;    // 打字速度 (ms/字符)

  // 查找所有 AI 摘要元素
  const aiTextElements = document.querySelectorAll('.ai-text');
  
  if (!aiTextElements.length) return;

  aiTextElements.forEach(el => {
    const fullText = el.dataset.text || '';
    const delay = Math.max(0, parseInt(el.dataset.delay)) || DEFAULT_DELAY;
    const loadingEl = el.previousElementSibling?.classList?.contains('ai-loading') 
      ? el.previousElementSibling 
      : null;

    // 初始设置 - 确保不会产生空行
    el.style.display = 'none';
    el.style.overflow = 'hidden';
    el.style.borderRight = 'none';
    el.style.margin = '0';
    el.style.padding = '0';
    
    if (!fullText.trim()) {
      if (loadingEl) loadingEl.style.display = 'none';
      return;
    }

    const showContent = () => {
      if (loadingEl) {
        // 平滑过渡：先隐藏"正在思考中..."
        loadingEl.style.opacity = '0';
        loadingEl.style.transition = 'opacity 0.2s ease';
        
        // 在过渡完成后完全移除 loading 元素
        setTimeout(() => {
          loadingEl.style.display = 'none';
          // 立即显示内容，避免出现空白期
          el.style.display = 'block';
          startTyping();
        }, 200);
      } else {
        el.style.display = 'block';
        startTyping();
      }
    };

    const startTyping = () => {
      el.textContent = '';
      let i = 0;
      const printChar = () => {
        if (i < fullText.length) {
          el.textContent += fullText.charAt(i);
          i++;
          setTimeout(printChar, TYPING_SPEED);
        }
      };
      printChar();
    };

    delay <= 0 ? setTimeout(showContent, 0) : setTimeout(showContent, delay);
  });
})();
]]> https://blog.anxw.cn/posts/13.html 2025-09-02T09:50:58.000Z 自用 Hexo 插件开源分享：一键接入 AI 摘要生成，支持多模型 + 并发处理 + 主题定制，含完整配置教程与前端代码。 HEXO-AI摘要插件 2025-09-02T09:50:58.000Z 安小歪 我的世界联机

可能大多数玩家都用的局域网联机或者内网穿透的方法进行联机，但是缺点：必须装相同的 mod，而且有时候延迟高并且卡顿。

本地开服联机工具

我原来使用的是以下工具：

  1. 樱花内网穿透：https://www.natfrp.com
  2. OPL 联机工具：使用教程
  3. Radmin LAN：联机教程 - MC Java 版 使用 Radmin LAN 进行远程联机

人少的话联机体验还是很好的，如果人多的话就会出现卡顿。

MCSManager

官方文档：https://docs.mcsmanager.com/zh_cn

MCSManager 是一款开源、分布式、一键部署、支持 Minecraft 和 Steam 游戏服务器的控制面板。

MCSManager 在 Minecraft 和其他游戏社区内已有一定的流行程度，它可以帮助你：

  • 集中管理多个物理服务器
  • 动态在任何主机上创建游戏服务端
  • 提供安全可靠的多用户权限系统
  • 轻松管理多个服务器

开始部署

环境要求

  • 安装 OpenJDK 环境
  • 镜像部署需要有 Docker 环境

注意事项

  1. 如果通过脚本安装 MCSManager，需要在节点页面安装镜像，并且要应用上。
  2. 如果通过 Docker 部署，则不需要手动安装 JDK 环境，直接上传核心然后启动即可。

部署过程

这里我用1Panel 来管理 MCSManager（用 1Panel 来管理 MCSManager 也是不错的选择）

如果已经安装了 1Panel，就不用另外安装 Docker 环境了，1Panel 安装过程中会自动安装 Docker 环境。
1Panel 的安装教程

MCSManager 的 Linux 自动安装

因为需要注册到系统服务，一键安装脚本必须使用 root 权限 运行。

一键安装命令

1
sudo su -c "wget -qO- https://script.mcsmanager.com/setup_cn.sh | bash"

注意事项

  • 脚本安装的面板，大概率不用手动配置节点。
  • 如果需要手动配置节点，请参考官方文档：节点配置文档

1Panel 使用 Docker 部署 MCSManager

1Panel 应用商店内有 MCSManager，但不是最新版，因此我们还是使用 Docker 来一键部署 MCSManager。

部署步骤

  1. 进入 1Panel，选择 容器 → 编排
  2. 输入以下内容创建 docker-compose.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# docker-compose.yml
services:
  web:
    image: githubyumao/mcsmanager-web:latest
    ports:
      - "23333:23333"
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /opt/1panel/apps/mcsm/web/data:/opt/mcsmanager/web/data
      - /opt/1panel/apps/mcsm/web/logs:/opt/mcsmanager/web/logs

  daemon:
    image: githubyumao/mcsmanager-daemon:latest
    restart: unless-stopped
    ports:
      - "24444:24444"
    environment:
      - MCSM_DOCKER_WORKSPACE_PATH=/opt/1panel/apps/mcsm/daemon/data/InstanceData
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /opt/1panel/apps/mcsm/daemon/data:/opt/mcsmanager/daemon/data
      - /opt/1panel/apps/mcsm/daemon/logs:/opt/mcsmanager/daemon/logs
      - /var/run/docker.sock:/var/run/docker.sock

注意事项

  • Docker 安装的面板需要手动配置节点。
  • 节点配置请参考官方文档：节点配置文档

记得在防火墙中开放以下端口：

  • 23333：MCSManager Web 面板端口
  • 24444：MCSManager 守护进程端口
  • 25565：Minecraft 游戏内默认端口

初始设置

安装完成后打开 MCSManager，第一步设置账号和密码。然后可以跳过教程（基本没什么用）。

初始设置 1
初始设置 2
初始设置 3

配置 JDK 环境镜像

  1. 打开 节点页面 → 镜像管理 → 新增镜像，下载你需要的 JDK 版本
  2. 如果列表中没有你需要的版本，点击 使用 DockerFile 自定义创建
  3. 打开创建 OpenJDK 17 环境镜像复制里面的内容到使用 DockerFile 自定义创建
  4. 将 Dockerfile 中的 17 改为 21 即可创建 JDK21 环境
  5. 构建完成后即可使用

部署 Minecraft 服务器

  1. 下载服务端核心

首先选择你的加载器并下载服务端 .jar 文件：

需要下载服务端（server）的 .jar 结尾文件。

  1. 打开 MCSManager 的 应用实例页面，点击 新增应用（前提你得有节点存在）
  2. 选择 Minecraft Java 版游戏服务器 → 继续
  3. 选择 上传单个服务端软件，输入实例名称
  4. 将启动命令修改为：
1
java -server -Dfile.encoding=UTF-8 -Duser.language=zh -Duser.country=CN -jar ${ProgramName} -installServer

  1. 上传你下载的核心文件，此时启动命令会自动发生变化

  2. 创建完成后，点击 应用实例设置 → 容器化

  3. 启用 Docker 容器，Docker 镜像选择合适的版本（例如 mcsm-custom:21）

  4. 网络模式改为 host，保存后点击 开启启动

  5. 修改启动命令

等待实例加载完成后会自动停止。打开 文件管理，找到以下文件之一：

  • minecraft_server.1.12.2.jar（版本号不同显示不同）
  • run.sh

然后打开 应用实例设置，修改启动命令：

1
2
3
4
5
# 如果使用 jar 文件启动
java -Dfile.encoding=UTF-8 -jar minecraft_server.1.12.2.jar

# 如果使用 run.sh 启动
bash run.sh

根据文件管理内生成的不同文件自行选择或更改为合适的命令。

  1. 同意 EULA 并启动

启动命令更改完成以后再次点击 开启运行实例，观察终端输出，系统会提示你打开服务端配置文件，将 eula.txt 中的：

1
eula=false

修改为：

1
eula=true

然后再次运行实例，成功后会显示加载世界等绿色成功信息。

  1. 非正版玩家设置

如果你不是正版玩家，打开服务端配置文件 server.properties，修改正版验证选项：

1
online-mode=false

每次修改配置后需要重新启动实例才能生效。

客户端连接

前面我们放行的游戏内端口是 25565，使用以下格式连接：

1
你的服务器IP:25565

在本地使用 PCL 启动器下载对应的 Minecraft 版本和 mod 加载器即可。

IPv4 端口占用问题

如果你的服务器没有 IPv6 只有 IPv4，可能会报错提示端口被占用无法绑定 25565。此时可以打开服务端配置文件 server.properties，将 server-ip 设置为：

1
server-ip=0.0.0.0

MOD 安装

  1. 在 MC 百科等平台查看该 MOD 是否需要双端安装，还是仅需客户端或服务端安装
  2. 服务端 MOD 放在文件管理内根目录的 mods 文件夹中
  3. 重启服务即可生效

整合包安装

  1. 找到你想玩的整合包的 .zip 文件
  2. 在 MCSManager 中上传整合包服务端文件 .zip
  3. 确保压缩包内包含 server.jar 核心文件
  4. 修改启动命令：
1
java -jar server.jar --installServer
  1. 方法同上，首次运行后找到生成的启动文件，再次修改启动命令

如果服务端整合包内有run.sh也可以直接运行该命令

  1. 本地需要安装版本相同的客户端整合包才可以正常游玩

Minecraft 支持插件的服务端核心对比

仅支持插件（无模组）

核心插件生态模组性能维护状态一句话总结
PaperBukkit/Spigot❌★★★★★活跃生产环境首选，极致优化
SpigotBukkit/Spigot❌★★★☆☆活跃经典稳定，生态最老
PurpurBukkit/Spigot❌★★★★☆活跃Paper 的超集，特性自由开关
PufferfishBukkit/Spigot❌★★★★☆活跃高并发优化，适合大服
TuinityBukkit/Spigot❌★★★★☆已并入 Paper多线程优化，已停更
YatopiaBukkit/Spigot❌★★★★☆已停更Tuinity 的再优化版

插件 + Forge 模组（混合端）

核心插件生态模组版本范围维护状态一句话总结
MohistPaper/SpigotForge1.16–1.21活跃最主流插件+Forge 混合端
ArclightPaper/SpigotForge1.19–1.21活跃轻量级混合端，1.20+ 推荐
SpongeSpongeAPIForge/Fabric1.16+活跃高版本 Mod 支持，插件生态小
CatServerBukkit/SpigotForge1.12.2–1.16.5已停更国内早期混合端
KCauldron/Thermos/UraniumBukkit/SpigotForge≤1.7.10已停更老版本专用

快速选择指南

需求场景推荐核心
只要插件Paper / Purpur
插件 + Forge ModMohist（1.16–1.21） / Arclight（1.20+）
插件 + Fabric ModSponge（Fabric）

下载入口

插件服安装（皮肤插件）

如果你学会了上面的安装教程，也可以看一下插件服的安装过程

Paper 核心安装与插件部署

安装步骤

  1. 在 MCSManager 中创建实例，上传下载好的 Paper 核心文件（例如 paper-1.20.4.jar）
  2. 修改启动命令为安装命令：
1
java -jar server.jar --installServer

注意：请将 server.jar 替换为你实际上传的核心文件名称。

  1. 点击启动，等待安装完成后实例会自动停止

安装完成后，修改启动命令为：

1
java -jar server.jar -nogui

注意：请将 server.jar 替换为实际文件名称。

插件安装

安装完成后，打开 文件管理，你会看到根目录下多了一个 plugins 文件夹，这就是存放插件的地方。

  • 将下载好的 .jar 格式插件文件上传至 plugins

Fabric 服务端通过模组支持 Bukkit 插件

通过 Cardboard 模组，Fabric 服务端可以兼容运行 Bukkit/Spigot 插件。

下载 Fabric 服务端

访问官方页面下载对应版本的 Fabric 服务端：

按照与 Paper 服务端相同的方式部署并运行一次，完成基础环境初始化。

安装必要模组

在文件管理中找到 mods 文件夹，上传以下模组文件（需下载与服务器版本对应的版本）：

模组名称说明下载地址
Fabric API大多数 Fabric Mod 的依赖模组CurseForge
CardboardBukkit 插件支持模组Cardboard 官网
iCommon APICardboard 的依赖模组Modrinth

请确保所有模组版本与你的 Minecraft 服务端版本一致。

启动后观察终端输出，当出现以下内容时：

1
Downloading io.papermc:paper-api:1.17-dev...

请耐心等待一段时间，就可以安装插件了。
插件安装

依赖下载完成后，打开 文件管理，根目录下会多出一个 plugins 文件夹，这就是存放插件的地方。

  • 将下载好的 .jar 格式插件文件上传至 plugins 文件夹
  • 重启服务器实例即可加载插件

注意事项

  1. 并非所有 Bukkit/Spigot 插件都能在 Cardboard 上完美运行，建议先在测试环境验证兼容性
  2. 部分依赖 NMS（Net Minecraft Server）的插件可能无法正常工作
  3. Cardboard 目前仍在开发中，高版本支持可能不够稳定，建议优先选择 1.17-1.20 版本进行测试
  4. 如果遇到插件加载失败，可查看 logs 文件夹中的日志文件排查问题

下载皮肤插件SkinsRestorer文档下载对应版本的插件放进plugins，然后启动就好了。
游戏内设置皮肤的方法使用命令 /skin set 皮肤名称 我的世界皮肤站点

Minecraft命令

在MCSManager终端设置你为管理员op 你的名字然后你就可以在游戏内/op 玩家名字来给予管理员作弊权限。
下面是一些有趣的命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/gamerule keepInventory true :开启死亡不掉落
/op ID ：给予玩家管理员 第一次需在后台输入
/deop ID ：卸掉玩家管理员
/list：列出在服务器上的玩家
/whitelist add ID : 添加服务器白名单。（前提你开启的白名单权限）
/whitelist list : 查看服务器白名单。
/whitelist off : 在此服务器上禁用白名单验证。
/whitelist on : 在此服务器上启用白名单验证。
/ban ID : 将玩家封禁
/ban-ip : 将IP地址封禁
/tp id :传送过去
/tp id :你自己的ip :将某人传送到你身边
/scoreboard objectives add death deathCount "死亡次数"  :显示玩家死亡次数，下面的命令和这个要一起用
/scoreboard objectives setdisplay sidebar death  :将记分对象名称为desth的记分板显示在右侧
]]> https://blog.anxw.cn/posts/12.html 2025-06-27T08:13:40.000Z 用 MCSManager 搭一个私人的 Minecraft 联机服务器，支持 Docker 或脚本一键部署，不用内网穿透也能低延迟联机。 MCSManager我的世界开服教程 2025-06-27T08:13:40.000Z 安小歪 引入阿里矢量图标库

在控制台找到对应图标的 class，然后去 Hexo 根目录查找，大部分位于：

1
C:\hexo\themes\butterfly\layout\includes

将原有引入方式：

1
'i.fas.fa-arrow-up'

修改为 SVG 图标引入方式：

1
2
svg(viewBox='0 0 1024 1024' style='width: 1em; height: 1em; margin: 0 -1px -2px 0;')
  use(xlink:href='#你的图标名称')

如果不确定具体目录，可在控制台找到 class 后，在 VSCode 中全局搜索项目，定位类似 i.fas.fa-arrow-up 的代码再进行修改。
阿里矢量图标库（iconfont）可在项目设置中开启彩色模式，采用 symbol 方式引用即可。

自定义 CSS

  1. 在博客目录创建自定义 CSS 文件：
1
hexo\themes\butterfly\source\css\anxy.css
  1. 在 hexo\themes\butterfly\_config.yml 的 inject.head 部分添加：
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/anxy.css">

配置文章链接转数字或字母

仓库：hexo-abbrlink

  1. 安装插件：
1
npm install hexo-abbrlink --save
  1. 修改站点根目录 config.yml 中的永久链接配置：
1
2
3
4
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc16   # 算法：crc16(default) 和 crc32
  rep: dec     # 进制：dec(default) 和 hex

本地搜索依赖

  1. 安装插件：
1
npm install hexo-generator-search --save
  1. 在站点根目录 config.yml 添加：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. Butterfly 主题最新版需在主题配置文件 config.yml 中找到搜索选项，改为本地搜索（主题内有详细配置说明）。

RSS 和 Sitemap 安装

  1. 安装插件：
1
2
3
4
5
6
7
8
# RSS
npm install hexo-generator-feed --save

# Sitemap
npm install hexo-generator-sitemap --save

# 百度 Sitemap
npm install hexo-generator-baidu-sitemap --save-dev
  1. 在站点根目录 config.yml 添加以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Extensions
## Plugins: http://hexo.io/plugins/

# RSS 订阅
plugins:
  - hexo-generator-feed
  - hexo-generator-baidu-sitemap
  - hexo-generator-sitemap

# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

# Baidu Sitemap
baidusitemap:
  path: baidusitemap.xml

# Sitemap
sitemap:
  path: sitemap.xml

页脚 GitHub 徽标和计时器

  1. 安装插件：
1
npm install hexo-butterfly-footer-beautify --save
  1. 在博客根目录配置文件添加：
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: true # 徽标开关
  priority: 5 # 过滤器优先权
  enable_page: all # 应用页面
  exclude: # 屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项
  runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  swiperpara: 3 # 若非 0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ # 徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo # 徽标 API
      message: 博客框架为 Hexo_v5.4.0 # 徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本 Butterfly_v3.8.2
    - link: https://www.jsdelivr.com/
      shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
      message: 本站使用 JsDelivr 为静态资源提供 CDN 加速
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用双线部署，默认线路托管于 Vercel
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
      message: 本站采用双线部署，联通线路托管于 Coding
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由 Github 托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议进行许可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

页面样式调节

通过 CSS 样式调节各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
:root {
  --trans-light: rgba(255, 255, 255, 0.88);
  --trans-dark: rgba(25, 25, 25, 0.88);
  --border-style: 1px solid rgb(169, 169, 169);
  --backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}

/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}

个人卡片背景

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 个人信息卡片背景图 */
[data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWEin.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWVGq.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}

侧边栏分类栏调整

  1. 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_categories.js 第 58 行：
1
result += `<span class="card-category-list-count">${cat.length} 篇</span>`
  1. 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_archives.js 第 92 行：
1
result += `<span class="card-archive-list-count">${item.count} 篇</span>`
  1. 添加自定义 CSS：
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item, #aside-content .card-categories ul.card-category-list > .card-category-list-item {
    width: 48%;
    margin: 3px 0;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    padding: 3px 10px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--font-color);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    -webkit-box-orient: vertical;
}

/* 侧边栏分类（标签）样式调整 */

资讯 - 文章数目（删除）

此模块与作者卡片内容重复，建议删除以保持简洁。

删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 第 7-10 行内容：

1
2
3
4
5
6
7
8
9
10
11
12
    ···

      span= _p('aside.card_webinfo.headline')
    .webinfo
-      if theme.aside.card_webinfo.post_count
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.article_name') + " :"
-          .item-count= site.posts.length
      if theme.runtimeshow.enable
        .webinfo-item

    ···

作者：亦小封
链接：https://meuicat.com/posts/73a5ae75.html
来源：爱吃肉的猫
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

渐变色版权美化（店长 + 微调）

参考：Fomalhaut

修改 post-copyright.pug

修改文件：[BlogRoot]\themes\butterfly\layout\includes\post\post-copyright.pug

直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的 front-matter 中重新定义作者、原文链接、开源许可协议等内容。

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
32
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  - let license = page.license ? page.license : theme.post_copyright.license
  - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title=license href=url_for(license_url))=license

修改 post.styl

修改文件：[BlogRoot]\themes\butterfly\source\css\_layout\post.styl

直接复制以下内容替换原文件，这个文件就是自己调节样式的。其中，184 行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节；253 行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
beautify()
  headStyle(fontsize)
    padding-left: unit(fontsize + 12, 'px')

    &:before
      margin-left: unit((-(fontsize + 6)), 'px')
      font-size: unit(fontsize, 'px')

    &:hover
      padding-left: unit(fontsize + 18, 'px')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out

    &:before
      position: absolute
      top: calc(50% - 7px)
      color: $title-prefix-icon-color
      content: $title-prefix-icon
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon

    &:hover
      &:before
        color: $light-blue

  h1
    headStyle(20)

  h2
    headStyle(18)

  h3
    headStyle(16)

  h4
    headStyle(14)

  h5
    headStyle(12)

  h6
    headStyle(12)

  ol,
  ul
    p
      margin: 0 0 8px

  li
    &::marker
      color: $light-blue
      font-weight: 600
      font-size: 1.05em

    &:hover
      &::marker
        color: var(--pseudo-hover)

  ul > li
    list-style-type: circle

#article-container
  word-wrap: break-word
  overflow-wrap: break-word

  a
    color: $theme-link-color

    &:hover
      text-decoration: underline

  img
    display: block
    margin: 0 auto 20px
    max-width: 100%
    transition: filter 375ms ease-in .2s

  p
    margin: 0 0 16px

  iframe
    margin: 0 0 20px

  if hexo-config('anchor')
    a.headerlink
      &:after
        @extend .fontawesomeIcon
        float: right
        color: var(--headline-presudo)
        content: '\f0c1'
        font-size: .95em
        opacity: 0
        transition: all .3s

      &:hover
        &:after
          color: var(--pseudo-hover)

    h1,
    h2,
    h3,
    h4,
    h5,
    h6
      &:hover
        a.headerlink
          &:after
            opacity: 1

  ol,
  ul
    ol,
    ul
      padding-left: 20px

    li
      margin: 4px 0

    p
      margin: 0 0 8px

  if hexo-config('beautify.enable')
    if hexo-config('beautify.field') == 'site'
      beautify()
    else if hexo-config('beautify.field') == 'post'
      &.post-content
        beautify()

  > :last-child
    margin-bottom: 0 !important

#post
  .tag_share
    .post-meta
      &__tag-list
        display: inline-block

      &__tags
        display: inline-block
        margin: 8px 8px 8px 0
        padding: 0 12px
        width: fit-content
        border: 1px solid $light-blue
        border-radius: 12px
        color: $light-blue
        font-size: .85em
        transition: all .2s ease-in-out

        &:hover
          background: $light-blue
          color: var(--white)

    .post_share
      display: inline-block
      float: right
      margin: 8px 0
      width: fit-content

      .social-share
        font-size: .85em

        .social-share-icon
          margin: 0 4px
          width: w = 1.85em
          height: w
          font-size: 1.2em
          line-height: w

  .post-copyright
    position: relative
    margin: 40px 0 10px
    padding: 10px 16px
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
    overflow: hidden
    border-radius: 12px!important
    background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);

    &:before
      background var(--heo-post-blockquote-bg)
      position absolute
      right -26px
      top -120px
      content '\f25e'
      font-size 200px
      font-family 'Font Awesome 5 Brands'
      opacity .2

    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold

      &-info
        padding-left: 6px

        a
          text-decoration: none
          word-break: break-word

          &:hover
            text-decoration: none

  .post-copyright-cc-info
    color: $theme-color;

  .post-outdate-notice
    position: relative
    margin: 0 0 20px
    padding: .5em 1.2em
    border-radius: 3px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

    if hexo-config('noticeOutdate.style') == 'flat'
      padding: .5em 1em .5em 2.6em
      border-left: 5px solid $noticeOutdate-border

      &:before
        @extend .fontawesomeIcon
        position: absolute
        top: 50%
        left: .9em
        color: $noticeOutdate-border
        content: '\f071'
        transform: translateY(-50%)

  .ads-wrap
    margin: 40px 0
.post-copyright-m-info
  .post-copyright-a,
  .post-copyright-c,
  .post-copyright-u
    display inline-block
    width fit-content
    padding 2px 5px
[data-theme="dark"]
  #post
    .post-copyright
      background #07080a
      text-shadow #bfbeb8 0 0 2px
      border 1px solid rgb(19 18 18 / 35%)
      box-shadow 0 0 5px var(--theme-color)
      animation flashlight 1s linear infinite alternate
  .post-copyright-info
    color #e0e0e4

#post
  .post-copyright__title
    font-size 22px
  .post-copyright__notice
    font-size 15px
  .post-copyright
    box-shadow 2px 2px 5px

默认项的配置

作者：[BlogRoot]\_config.yml 中的 author 配置项

1
2
3
4
5
6
7
8
# Site
title: Akilar の糖果屋
subtitle: Akilar.top
description:
keywords:
author: Akilar # 默认作者
language: zh-CN
timezone: ''

许可协议：[BlogRoot]\_config.butterfly.yml 中的 license 和 license_url 配置项

1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

页面覆写配置项，修改对应文章的 front-matter

1
2
3
4
5
6
7
8
9
---
title: Copyright-beautify # 文章名称
date: 2021-03-02 13:52:46 # 文章发布日期
updated: 2021-03-02 13:52:46 # 文章更新日期
copyright_author: Nesxc # 作者覆写
copyright_url: https://www.nesxc.com/post/hexocc.html # 原文链接覆写
license: # 许可协议名称覆写
license_url: # 许可协议链接覆写
---

右边按钮阅读进度（Leonus）

参考：Fomalhaut

  1. 旧版本的 butterfly 看上面链接的教程。
  2. 新版 butterfly 只需要配置主题文件就好了（大约在 464 行左右）
  3. 最新版看主题文件已有配置项支持开启
1
2
# 在返回顶部按钮中显示滚动百分比
rightside_scroll_percent: true

直达底部按钮

参考：Fomalhaut

在 [BlogRoot]\themes\butterfly\layout\includes\rightside.pug 添加以下内容：

1
2
button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
  i.fas.fa-arrow-down

博客背景切换 - 弹窗版

参考：Leonus，本人使用的是 Leonus 博主的方案，这里微修一下。
使用的是阿里云图标库，自行修改，并引入阿里云提供的链接。

修改 nav.pug

修改文件：hexo\themes\butterfly\layout\includes\header\nav.pug

添加以下内容：

1
2
3
4
div
        a.site-page.social-icon.search(href="javascript:;" onclick="toggleWinbox()" title="切换背景 - 换一种感觉。")
          svg.icon(aria-hidden="true" style="width: 21px;height: 21px;margin-bottom: -4.5px;margin-left: 10px;")
            use(xlink:href="#icon-xiangce")

这是nav.pug的全部展示：

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
nav#nav
  span#blog-info
    a.nav-site-title(href=url_for('/'))
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
      if theme.nav.display_title
        span.site-name=config.title
    if is_post()
      a.nav-page-title(href=url_for('/'))
        span.site-name=(page.title || config.title)
  #menus
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})
  #nav-right
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          svg.icon(aria-hidden="true" style="width: 1.25em;height: 1.25em;margin-bottom: -4.5px;margin-bottom: -4.5px;")
            use(xlink:href="#icon-icon-sousuo")   
            
      div
        a.site-page.social-icon.search(href="javascript:;" onclick="toggleWinbox()" title="切换背景 - 换一种感觉。")
          svg.icon(aria-hidden="true" style="width: 21px;height: 21px;margin-bottom: -4.5px;margin-left: 10px;")
            use(xlink:href="#icon-xiangce")

      #toggle-menu
        span.site-page
          svg(viewBox='0 0 1024 1024' style='width: 1em; height: 1em; margin: 0 -1px -2px 0;')
            use(xlink:href='#icon-mulu')

引入 JS

在主题配置文件里的 inject 下的 bottom 引入文件：

1
2
3
4
5
6
7
inject:
  head:

  bottom:
    # winbox
    - <script src="https://cdn.jsdelivr.net/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script> # 添加此行
    - <script src="xxx.js"></script> # 这个代表自定义 js，放在最下面

添加自定义 JS

里面的图片是 Leonus 的 cdn，请自行下载，上传到自己的图床。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
// 切换背景弹窗版
// 存数据
// name：命名 data：数据
function saveData(name, data) {
    localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data }))
}

// 取数据
// name：命名 time：过期时长，单位分钟，如传入 30,即加载数据时如果超出 30 分钟返回 0,否则返回数据
function loadData(name, time) {
    let d = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0 否则返回数据
    if (d) {
        let t = Date.now() - d.time
        if (t < (time * 60 * 1000) && t > -1) return d.data;
    }
    return 0;
}

// 上面两个函数如果你有其他需要存取数据的功能，也可以直接使用

// 读取背景
try {
    let data = loadData('blogbg', 1440)
    if (data) changeBg(data, 1)
    else localStorage.removeItem('blogbg');
} catch (error) { localStorage.removeItem('blogbg'); }

// 切换背景函数
// 此处的 flag 是为了每次读取时都重新存储一次，导致过期时间不稳定
// 如果 flag 为 0 则存储，即设置背景. 为 1 则不存储，即每次加载自动读取背景.
function changeBg(s, flag) {
    let bg = document.getElementById('web_bg')
    if (s.charAt(0) == '#') {
        bg.style.backgroundColor = s
        bg.style.backgroundImage = 'none'
    } else bg.style.backgroundImage = s
    if (!flag) { saveData('blogbg', s) }
}

// 以下为 2.0 新增内容

// 创建窗口
var winbox = ''

function createWinbox() {
    let div = document.createElement('div')
    document.body.appendChild(div)
    winbox = WinBox({
        id: 'changeBgBox',
        index: 999,
        title: "切换背景",
        x: "center",
        y: "center",
        minwidth: '300px',
        height: "60%",
        background: '#49b1f5',
        onmaximize: () => { div.innerHTML = `<style>body::-webkit-scrollbar {display: none;}div#changeBgBox {width: 100% !important;}</style>` },
        onrestore: () => { div.innerHTML = '' }
    });
    winResize();
    window.addEventListener('resize', winResize)
    // 每一类我放了一个演示，直接往下复制粘贴 a 标签就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义
    winbox.body.innerHTML = `
    <div id="article-container" style="padding:10px;">

    <div class="note info flat">
        点击对应样式即可切换背景。
    </div>

    <div class="note success flat">
        有效期为一天，到期切回默认壁纸。
    </div>

    <p><button onclick="localStorage.removeItem('blogbg');location.reload();" style="background:#5fcdff;display:block;width:100%;padding: 15px 0;border-radius:6px;color:white;"><i class="fa-solid fa-arrows-rotate"></i> 点我恢复默认背景</button></p>
    <h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a> 图片</h2>
     <details class="toggle" style="background-color:white; border: 2px solid black; border-radius: 5px;">
         <summary class="toggle-button" style="padding: 10px; cursor: pointer; font-weight: bold;">查看电脑壁纸</summary>
         <div class="toggle-content">
             <div class="bgbox">
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/dd4aee16880411ebb6edd017c2d2eca2.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/dd4aee16880411ebb6edd017c2d2eca2.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/66a0f1473a0f4ae7850ac8607774eb03.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/66a0f1473a0f4ae7850ac8607774eb03.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/058fe486bd784f28875a7a01f68d09de.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/058fe486bd784f28875a7a01f68d09de.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/c9d3deb2880411ebb6edd017c2d2eca2.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/c9d3deb2880411ebb6edd017c2d2eca2.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/0d73ff1af5c149c2af78a4c7280c9ac9.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/0d73ff1af5c149c2af78a4c7280c9ac9.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/08206a3879f9467f93eb18e279dd2642.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/08206a3879f9467f93eb18e279dd2642.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/14d9904fe2ac4961b203c3eb2f2f467f.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/14d9904fe2ac4961b203c3eb2f2f467f.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/f048e9726518419fa15dd365902500c4.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/f048e9726518419fa15dd365902500c4.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/bab9141327ca48e39abef6229b79cf9c.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/bab9141327ca48e39abef6229b79cf9c.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/a26f66658e014e06aa70e2753742bef3.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/a26f66658e014e06aa70e2753742bef3.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/35d9316f450041b89232893f083a57f1.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/35d9316f450041b89232893f083a57f1.webp)')"></a>
                 <a href="javascript:;" style="background-image:url(https://cdn.leonus.cn/other/6143778327db4d17adbb63c0f6c0a8af.webp)" class="imgbox" onclick="changeBg('url(https://cdn.leonus.cn/other/6143778327db4d17adbb63c0f6c0a8af.webp)')"></a>
             </div>
         </div>
     </details>
 </div>
 `;   
}

// 适应窗口大小
function winResize() {
    let box = document.querySelector('#changeBgBox')
    if (!box || box.classList.contains('min') || box.classList.contains('max')) return // 2023-02-10 更新
    var offsetWid = document.documentElement.clientWidth;
    if (offsetWid <= 768) {
        winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center");
    } else {
        winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center");
    }
}

// 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口
function toggleWinbox() {
    if (document.querySelector('#changeBgBox')) winbox.toggleClass('hide');
    else createWinbox();
}

添加自定义 CSS

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/* 切换弹窗版 */
/* 由于全屏会出 bug，所以直接给他隐藏 */

.winbox {
  border-radius: 12px;
  overflow: hidden;
}

.wb-full {
  display: none;
}

.wb-min {
  background-position: center;
}

[data-theme='dark'] .wb-body,
[data-theme='dark'] #changeBgBox {
  background: #333 !important;
}

.bgbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
  width: 166px;
  margin: 10px;
  background-size: cover
}

.pimgbox,
.imgbox {
  border-radius: 10px;
  overflow: hidden;
}

.pimgbox {
  height: 240px;
}

.imgbox {
  height: 95px;
}

.box {
  height: 100px;
}

@media screen and (max-width: 768px) {
  /* 背景 */
  .pimgbox,
  .imgbox,
  .box {
    height: 73px;
    width: 135px;
  }
  .pimgbox {
    height: 205px;
  }
  /* 2.0 新增内容 */    
  .wb-min {
    display: none;
  }
  #changeBgBox .wb-body::-webkit-scrollbar {
    display: none;
  }
}

首页文章推荐

参考：MeuiCat
感谢 MeuiCat 给予的帮助，由于自己的版本与博主的不同，所以会有一些奇怪的问题。以下是解决后的教程。这里可能和原作者的不太一样，针对自己的喜好，我做出了一些修改。

修改 index.pug

在 [blogRoot]/themes/butterfly/layout/includes/header/index.pug 页面最后的位置新增以下内容：

1
2
3
if is_home()
  .banner-random
    .random-list

新建 banner-random.styl

新建 [blogRoot]/themes/butterfly/source/css/_page/banner-random.styl 样式文件，并新增以下内容：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
.banner-random
    margin: 15px auto 0
    width 100%
    max-width 1170px

    +maxWidth768()
        padding-left: 10px;
        padding-right: 10px;
    
    .random-title
        display: flex
        justify-content: space-between
        align-items: center

        .title
            font-size: 1.25rem
            font-weight: 600
            margin: 0
            min-width: 80px

        .botton-box
            display: flex
            font-weight: 600

            +maxWidth768()
                width: 100%
                justify-content: space-between
                align-items: center

            .refresh
                opacity: .5
                transition: .6s

                +maxWidth768()
                    margin-left: 8px

                &:hover
                    color: var(--icat-blue)
                    opacity: 1

                i
                    margin-right: 6px

                    +maxWidth768()
                        font-size: 18px

                span
                    +maxWidth768()
                        display: none

            .slide
                display: none

                +maxWidth768()
                    display: flex

                i
                    margin-left: 4px
                    font-size: 14px
                    width: 28px
                    height: 28px
                    display: flex
                    align-items: center
                    justify-content: center

    .random-list
        margin-top: 15px
        display: flex

        +maxWidth768()
            overflow-x: scroll
            overflow-y: hidden
            scroll-behavior: smooth
        
        &::-webkit-scrollbar
            display: none

        .post_item
            width: calc(100% / 4 - 8px)
            margin-right: 15px
            border-radius: 8px
            background: var(--card-bg)
            box-shadow: var(--icat-shadow-border)
            transition: .6s
            border: var(--style-border)
            height: 110px
            animation: barrageIn .6s .4s backwards

            +maxWidth768()
                width: 240px
                min-width: 240px

            &:last-child
                margin-right: 0

            &:hover
                background: var(--icat-blue)
                box-shadow: var(--icat-shadow-blue)

                .post_box
                    .post-info
                        opacity: 0

                    .post_description
                        opacity: 1

            a:hover
                color: var(--font-color)

            .post_box
                width: 100%
                height: 100%
                display: flex
                position: relative
                align-items: center
                justify-content: center

                .post-info
                    display: flex
                    align-items: center
                    justify-content: center
                    flex-direction: column
                    padding: 0 15px
                    transition: .6s
                    opacity: 1

                    +maxWidth768()
                        padding: 0 8px

                    .post-title
                        margin: 0
                        font-size: 1rem
                        font-weight: 600
                        line-height: 1.5
                        -webkit-line-clamp: 1
                        overflow: hidden
                        -webkit-box-orient: vertical
                        display: -webkit-box

                    .info-box
                        font-size: 13px
                        color: #858585
                        display: flex

                .post_description
                    position: absolute
                    opacity: 0
                    color: white
                    transition: .6s
                    text-align: center
                    padding: 0 15px
                    line-height: 1.6
                    -webkit-line-clamp: 2
                    overflow: hidden
                    -webkit-box-orient: vertical
                    display: -webkit-box
                    margin: 0

                    +maxWidth768()
                        padding: 0 8px

创建 random-articles.js

创建 [blogRoot]/themes/butterfly/scripts/helpers/random-articles.js 文件，并新增以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
'use strict'

hexo.extend.generator.register('thePosts', function(locals) {
const jsonData = locals.posts
.filter(post => post.random !== false)
.map(post => {
const date = new Date(post.date);
const categories = post.categories.map(category => category.name);
            const formattedDate = date.toISOString().split('T')[0];
return {
title: post.title || "暂无标题",
time: formattedDate,
categories: categories[0],
description: post.description || "暂无简介",
                link: post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/')
};
});

return {
path: 'articles-random.json',
data: JSON.stringify(jsonData)
};
});

创建 anxy.js

创建 [blogRoot]/source/js/anxy.js 文件 (或写在自建的公共 js 中也可以)，并新增以下内容：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const CACHE_EXPIRATION_TIME = 12 * 60 * 60 * 1000;  // 缓存过期时间，12 小时
// 随机文章 js
const anxy = {
    getRandomElementsFromArray: function(arr, num) {
        const shuffled = arr.sort(() => 0.5 - Math.random()); // 打乱数组顺序
        return shuffled.slice(0, num); // 返回前 num 个元素
    },

    renderingPosts: function(data) {
        const randomElements = anxy.getRandomElementsFromArray(data, 4);
        const postsHtml = randomElements.map((i) => `
            <div class="post_item">
                <a class="post_box" title="${i.title}" href="${i.link}" onclick="pjax.loadUrl('${i.link}')">
                    <div class="post-info">
                        <p class="post-title">${i.title}</p>
                        <div class="info-box">
                            <span>${i.time}</span>
                            <span style="margin: 0 6px">|</span>
                            <span>${i.categories}</span>
                        </div>
                    </div>
                    <p class="post_description">${i.description}</p>
                </a>
            </div>`).join('');

        const randomList = document.querySelector(".banner-random>.random-list");
        if (randomList) {
            randomList.innerHTML = postsHtml;
        }
    },

    loadData: function() {
        fetch("/articles-random.json")
            .then(res => res.ok ? res.json() : Promise.reject('请求失败'))
            .then(data => {
                sessionStorage.setItem("postsInfo", JSON.stringify(data));
                sessionStorage.setItem("postsInfoTimestamp", Date.now());
                anxy.renderingPosts(data);
                console.log("随机文章加载成功");
            })
            .catch(err => {
                console.error("随机文章加载失败:", err);
                setTimeout(anxy.loadData, 3000);  // 错误时重试
            });
    },

    RandomPosts: function() {
        const cachedData = sessionStorage.getItem("postsInfo");
        const cachedTimestamp = sessionStorage.getItem("postsInfoTimestamp");

        if (cachedData && cachedTimestamp && (Date.now() - cachedTimestamp < CACHE_EXPIRATION_TIME)) {
            try {
                anxy.renderingPosts(JSON.parse(cachedData));
            } catch (e) {
                console.error("缓存数据解析失败:", e);
                anxy.loadData();  // 如果解析失败，重新加载数据
            }
        } else {
            anxy.loadData();  // 缓存无效或不存在时，加载新数据
        }
    }
};

// 页面加载时加载随机文章
window.addEventListener('load', function() {
    anxy.RandomPosts();  // 确保在页面完全加载后执行
});

// 初始化 pjax
const pjax = new Pjax({
    elements: 'a',
    selectors: ['#pjax-container'],
    cache: true,
    history: true,
    scrollTo: false,
    transition: 'fade',
    transitionTime: 300
});

document.addEventListener('pjax:complete', function () {
    setTimeout(() => anxy.RandomPosts(), 500);  // 等待 500ms 再渲染随机文章，确保内容渲染完毕
});

Butterfly 主题魔改 404 页面图片背景

修改 _config.yml

修改 hexo\themes\butterfly\_config.yml 第 126~139 行的内容，将 background: 后修改为图片 url。

修改 404.styl

背景颜色修改：hexo\themes\butterfly\source\css\_page\404.styl，把里面最后面的 background-color 修改为自己喜欢的颜色就好了（这里我默认白色）：

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
if hexo-config('error_404.enable')
  .type-404
    .error-content
      @extend .cardHover
      overflow: hidden
      margin: 0 20px
      height: 360px

      +maxWidth768()
        margin: 0
        height: 500px

      .error-img
        display: inline-block
        overflow: hidden
        width: 50%
        height: 100%

        +maxWidth768()
          width: 100%
          height: 45%

        img
          @extend .imgHover
          background-color: #ffffff

项目启动自定义字符画

参考：Fomalhaut

ASCII 字符画生成器参考：CSDN: 在线生成 ascii 字符画网站字符图案在线生成工具

替换主题源码：[BlogRoot]\themes\butterfly\scripts\events\welcome.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo.on('ready', () => {
  const { version } = require('../../package.json')
  hexo.log.info(`
  ======================================================================
                                                                     
██████  ██    ██ ████████ ████████ ███████ ██████  ███████ ██      ██    ██ 
██   ██ ██    ██    ██       ██    ██      ██   ██ ██      ██       ██  ██  
██████  ██    ██    ██       ██    █████   ██████  █████   ██        ████   
██   ██ ██    ██    ██       ██    ██      ██   ██ ██      ██         ██    
██████   ██████     ██       ██    ███████ ██   ██ ██      ███████    ██    

                            主题版本：${version}
  ======================================================================`)
})

控制台样式自定义（安知鱼）

参考：Fomalhaut

ASCII 字符画生成器参考：CSDN: 在线生成 ascii 字符画网站字符图案在线生成工具

新建 console.js

新建文件：[BlogRoot]\source\js\console.js

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
var now1 = new Date();

function createtime1() {
    var grt = new Date("11/28/2022 14:00:00"); // 此处修改你的建站时间或者网站上线时间
    now1.setTime(now1.getTime() + 250);
    var days = (now1 - grt) / 1000 / 60 / 60 / 24;
    var dnum = Math.floor(days);

    var ascll = [
        `欢迎来到安小歪の小家!`,
        `Future is now 🍭🍭🍭`,
        `
 █████╗ ███╗   ██╗██╗  ██╗██╗ █████╗  ██████╗ ██╗    ██╗ █████╗ ██╗
██╔══██╗████╗  ██║╚██╗██╔╝██║██╔══██╗██╔═══██╗██║    ██║██╔══██╗██║
███████║██╔██╗ ██║ ╚███╔╝ ██║███████║██║   ██║██║ █╗ ██║███████║██║
██╔══██║██║╚██╗██║ ██╔██╗ ██║██╔══██║██║   ██║██║███╗██║██╔══██║██║
██║  ██║██║ ╚████║██╔╝ ██╗██║██║  ██║╚██████╔╝╚███╔███╔╝██║  ██║██║
╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝ ╚═════╝  ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝
                                                                   
`,
        "小站已经苟活",
        dnum,
        "天啦!",
        "©2022~2026 By 安小歪",
    ];

    setTimeout(
        console.log.bind(
            console,
            `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}%c ${ascll[4]}%c ${ascll[5]}\n\n%c ${ascll[6]}\n`,
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            "color:#39c5bb",
            "",
            "color:#39c5bb",
            ""
        )
    );
}

createtime1();

function createtime2() {
    var ascll2 = [`NCC2-036`, `调用前置摄像头拍照成功，识别为「大聪明」`, `Photo captured: `, ` 🤪 `];

    setTimeout(
        console.log.bind(
            console,
            `%c ${ascll2[0]} %c ${ascll2[1]} %c \n${ascll2[2]} %c\n${ascll2[3]}`,
            "color:white; background-color:#10bcc0",
            "",
            "",
            'background:url("https://cdn.cbd.int/anzhiyu-assets@1.0.11/image/common/tinggge.gif") no-repeat;font-size:450%'
        )
    );

    setTimeout(console.log.bind(console, "%c WELCOME %c 欢迎光临，大聪明", "color:white; background-color:#23c682", ""));

    setTimeout(
        console.warn.bind(
            console,
            "%c ⚡ Powered by 安小歪 %c 你正在访问安小歪の小家",
            "color:white; background-color:#f0ad4e",
            ""
        )
    );

    setTimeout(console.log.bind(console, "%c W23-12 %c 系统监测到你已打开控制台", "color:white; background-color:#4f90d9", ""));
    setTimeout(
        console.warn.bind(console, "%c S013-782 %c 你现在正处于监控中", "color:white; background-color:#d9534f", "")
    );
}
createtime2();

// 重写 console 方法
console.log = function () { };
console.error = function () { };
console.warn = function () { };

在主题配置文件中引入该 JS 文件

修改文件：[BlogRoot]\_config.butterfly.yml

1
2
3
inject:
  bottom:
    - <script async src="/js/console.js"></script>
]]> https://blog.anxw.cn/posts/11.html 2025-03-31T08:02:24.000Z 汇总 Butterfly 主题的常用魔改片段，包含图标替换、亚克力样式、版权卡片、背景切换、随机文章及控制台字符画。 Butterfly重装日记 2025-03-31T08:02:24.000Z 安小歪

参考方案：安知鱼的即刻方案

因为静态的即刻加载太慢了，所以决定删去这一部分。

添加 CSS 变量

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/* 颜色 */
:root {
  --anzhiyu-theme-op: #4259ef23;
  --anzhiyu-gray-op: #9999992b;
  --anzhiyu-theme-top: var(--anzhiyu-theme);
  --anzhiyu-white: #fff;
  --anzhiyu-white-op: rgba(255, 255, 255, 0.2);
  --anzhiyu-black: #000;
  --anzhiyu-black-op: rgba(0, 0, 0, 0.2);
  --anzhiyu-none: rgba(0, 0, 0, 0);
  --anzhiyu-gray: #999999;
  --anzhiyu-yellow: #ffc93e;
  --anzhiyu-border-radius: 8px;
  --anzhiyu-main: var(--anzhiyu-theme);
  --anzhiyu-main-op: var(--anzhiyu-theme-op);
  --anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
  --anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
  --anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
  --anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
  --anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
  --anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
  --anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
  --anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
  --anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
  --anzhiyu-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
  --anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
  --style-border: 1px solid var(--anzhiyu-card-border);
  --anzhiyu-blue-main: #3b70fc;
  --style-border-hover: 1px solid var(--anzhiyu-main);
  --style-border-dashed: 1px dashed var(--anzhiyu-theme-op);
  --style-border-avatar: 4px solid var(--anzhiyu-background);
  --style-border-always: 1px solid var(--anzhiyu-card-border);
  --style-border-none: 1px solid transparent;
  --anzhiyu-white-acrylic1: #fefeff !important;
  --anzhiyu-white-acrylic2: #fcfdff !important;
  --anzhiyu-black-acrylic2: #08080a !important;
  --anzhiyu-black-acrylic1: #0b0b0e !important;
  --anzhiyu-main-none: #b8b8b800 !important;
}

[data-theme="light"] {
  --anzhiyu-theme: #3b70fc;
  --anzhiyu-theme-deep: #1856fb;
  --anzhiyu-theme-op: #4259ef23;
  --anzhiyu-blue: #3b70fc;
  --anzhiyu-red: #d8213c;
  --anzhiyu-pink: #ff7c7c;
  --anzhiyu-green: #57bd6a;
  --anzhiyu-fontcolor: #363636;
  --anzhiyu-background: #f7f9fe;
  --anzhiyu-reverse: #000;
  --anzhiyu-maskbg: rgba(255, 255, 255, 0.6);
  --anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);
  --anzhiyu-hovertext: var(--anzhiyu-theme);
  --anzhiyu-ahoverbg: #f7f7fa;
  --anzhiyu-lighttext: var(--anzhiyu-main);
  --anzhiyu-secondtext: rgba(60, 60, 67, 0.6);
  --anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
  --anzhiyu-card-btn-bg: #edf0f7;
  --anzhiyu-post-blockquote-bg: #fafcff;
  --anzhiyu-post-tabs-bg: #f2f5f8;
  --anzhiyu-secondbg: #f1f3f8;
  --anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --anzhiyu-card-bg: #fff;
  --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --anzhiyu-card-border: #e3e8f7;
}

[data-theme="dark"] {
  --global-bg: #191919;
  --anzhiyu-theme: #0084ff;
  --anzhiyu-theme-deep: #0076e5;
  --anzhiyu-theme-op: #0084ff23;
  --anzhiyu-blue: #0084ff;
  --anzhiyu-red: #ff3842;
  --anzhiyu-pink: #ff7c7c;
  --anzhiyu-green: #57bd6a;
  --anzhiyu-fontcolor: #f7f7fa;
  --anzhiyu-background: #18171d;
  --anzhiyu-reverse: #fff;
  --anzhiyu-maskbg: rgba(0, 0, 0, 0.6);
  --anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);
  --anzhiyu-hovertext: #0a84ff;
  --anzhiyu-ahoverbg: #fff;
  --anzhiyu-lighttext: #f2b94b;
  --anzhiyu-secondtext: #a1a2b8;
  --anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
  --anzhiyu-card-btn-bg: #30343f;
  --anzhiyu-post-blockquote-bg: #000;
  --anzhiyu-post-tabs-bg: #121212;
  --anzhiyu-secondbg: #30343f;
  --anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
  --anzhiyu-card-bg: #1d1b26;
  --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
  --anzhiyu-card-border: #42444a;
}

创建数据文件

创建 source/_data/essay.yml：

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
32
33
34
- class_name: 即刻短文
  essay_list:
    - content: 朋友圈钓鱼样式修复
      date: 2024/6/17 16:45:00
      from: 安小歪
    - content: 高考结束了，等待出分！
      date: 2024/6/9 19:45:00
      from: 安小歪
    - content: 下午就要开学了！面临高考，要加油了~
      date: 2024/2/25 10:45:00
      from: 安小歪
    - content: 15 天假期过完了，要开学了！（哭死）
      date: 2023/8/22 20:40:00
      from: 安小歪
    - content: 山东平原发生了 6.4 级地震，周围部分地区有震感，我也是半夜被震醒了，当时以为做梦火车从旁边经过捏 emmm，迷迷糊糊的我感觉到地和床晃了。希望大家都平安~
      date: 2023/8/6 02:33:59
      from: 安小歪
    - content: 用 vercel 部署了一个 uptimerobot(*^▽^*)
      date: 2023/7/15 08:00:00
      from: 安小歪
    - content: 在 SZ・Ninty 的帮助下，也是把即刻短文整好了，(｡◕◡◕｡) ﾉ
      date: 2023/7/14
      link: https://blog.sinzmise.top/
    - content: 遇见彩虹🌈吃定彩虹
      date: 2022/10/23 10:00:00
      image:
        - https://img02.anheyu.com/adminuploads/1/2022/10/23/6354ea92960ef.webp
    - content: ThreeJs API 真多丫
      date: 2022/10/19
    - content: 歌曲推荐
      date: 2022/09/25
      aplayer:
        server: tencent
        id: 001FGQba3i10mw

创建 MD 页面文件

创建 source/essay/index.md 来生成页面：

1
2
3
4
5
6
7
8
---
title: 即刻短文
date: 2020-07-22 22:06:17
comments: true
aside: false
top_img: false
type: essay
---

创建 Pug 模板文件

创建 themes/butterfly/layout/includes/page/essay.pug，页面内容，注意该页面中可能存在部分 fontawesome 图标需要自行替换：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#essay_page
  .author-content.author-content-item.essayPage.single
    .card-content
      .author-content-item-tips 即刻短文
      span.author-content-item-title 安小歪的日常生活。
      .content-bottom
        .tips 使用 即刻短文静态部署版 构建
      .banner-button-group
        a.banner-button(onclick='pjax.loadUrl("/about/")', data-pjax-state)
          i.fas.fa-circle-right(style='font-size: 1.5rem')
          span.banner-button-text 关于我
  #bber
    section.timeline.page-1
      ul#waterfall.list
        each i in site.data.essay
          each item, index in i.essay_list
            if index < 30
              li.bber-item
                .bber-content
                  p.datacont= item.content
                    if item.image
                      .bber-container-img
                        each iten, indey in item.image
                          a.bber-content-img(href=item.image[indey], target="_blank", data-fancybox="gallery", data-caption="")
                            img(src=item.image[indey])
                        .bber-content-noimg
                        .bber-content-noimg
                        .bber-content-noimg
                    if item.aplayer
                      .bber-music
                        .aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type="song"  data-order="list" data-preload="none" data-autoplay="false" data-mutex="true" data-theme='var(--anzhiyu-main)')
                hr
                .bber-bottom
                  .bber-info
                    .bber-info-time
                      - var datedata = new Date(item.date).toISOString()
                      i.far.fa-clock
                      time.datatime(datetime= item.date)= datedata
                    if item.link
                      a.bber-content-link(target="_blank", title="跳转到短文指引的链接", href=item.link, rel="external nofollow")
                        i.fas.fa-link
                        | 链接
                    if item.from
                      .bber-info-from
                        i.fas.fa-fire
                        span=item.from
                  .bber-reply(onclick="anzhiyu.commentText(" + `'${item.content}'` + ")")
                    i.fa-solid.fa-message
  #bber-tips(style='color: var(--anzhiyu-secondtext);')
    | - 只展示最近 30 条短文 -

修改 Page 文件

修改 themes/butterfly/layout/page.pug 来使页面内容匹配，在 case page.type 子项里面添加，注意缩进：

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
extends includes/layout.pug

block content
  #page
    if top_img === false
      h1.page-title= page.title

    case page.type
      when 'essay'
        include includes/page/essay.pug
      when 'tags'
        include includes/page/tags.pug
      when 'about'
        include includes/page/about.pug
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
      default
        include includes/page/default-page.pug

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

添加 CSS 样式

创建 source/css/essay_page/essay_page.css，然后在 _config.butterfly.yml 中的 inject 下的 head 引入，注意缩进：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
#page:has(#essay_page) {
  border: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
#page:has(#essay_page) .page-title {
  display: none;
}
#web_bg ~ .page:has(#essay_page) {
  background: var(--anzhiyu-background);
}
#bber .bber-container-img {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
#bber .bber-container-img .bber-content-noimg {
  width: calc(100% / 4 - 5px);
}

#bber .bber-content-img img {
  object-fit: cover;
  max-height: 100%;
  border-radius: 12px;
}

#bber .bber-content-img {
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  position: relative;
  width: calc(100% / 4 - 5px);
  margin-bottom: 10px;
}

#bber .bber-content .datacont {
  order: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--anzhiyu-fontcolor);
  width: 100%;
  line-height: 1.38;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  text-align: justify;
}
#bber p {
  margin: 0px;
}
#bber div.bber-content {
  display: flex;
  flex-flow: wrap;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}
#bber .timeline ul li.bber-item {
  position: relative;
  width: 32%;
  border: var(--style-border-always);
  border-radius: 12px;
  padding: 1rem 1rem 0.5rem;
  transition: all 0.3s ease 0s;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--anzhiyu-card-bg);
  box-shadow: var(--anzhiyu-shadow-border);
  margin-right: 2%;
}
#bber .timeline #waterfall.show {
  opacity: 1;
}
#bber .timeline #waterfall {
  opacity: 0;
  transition: all 0.3s ease 0s;
}
#bber ul.list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
#bber {
  margin-top: 1rem;
  width: 100%;
}
#bber > section > ul > li.bber-item {
  margin-bottom: 1rem;
}

#bber-tips {
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

#bber .timeline ul li.bber-item hr {
  display: flex;
  position: relative;
  margin: 8px 0px;
  border: 1px dashed var(--anzhiyu-theme-op);
  width: 100%;
}

#bber .bber-info {
  display: flex;
  align-items: center;
}

#bber > section > ul > li > div .bber-info-time,
#bber > section > ul > li > div .bber-info-from {
  color: var(--anzhiyu-fontcolor);
  font-size: 0.7rem;
  background-color: var(--anzhiyu-gray-op);
  padding: 0px 8px;
  border-radius: 20px;
  cursor: default;
  display: flex;
  align-items: center;
}

#bber .bber-info .far.fa-clock {
  margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-from span,
#bber > section > ul > li > div .bber-info-from {
  margin-left: 4px;
}

#bber .bber-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}

#bber .bber-bottom .bber-reply {
  cursor: pointer;
}

#bber .timeline ul li.bber-item:hover {
  border: var(--style-border-hover);
}

#bber .bber-content-link {
  display: flex;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  align-items: center;
  background-color: rgba(245, 108, 108, 0.13);
  color: rgb(245, 108, 108);
  padding: 0px 8px;
  border-radius: 20px;
}
#bber .bber-content-link i {
  margin-right: 3px;
}
#bber .bber-content-link:hover {
  background-color: var(--anzhiyu-main);
  color: var(--anzhiyu-white);
}
#bber .bber-music {
  width: 100%;
  height: 90px;
  margin: 0.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: var(--style-border-always);
  background: var(--anzhiyu-secondbg);
}
#bber .aplayer {
  margin: 0;
}

#bber .aplayer.aplayer-withlrc .aplayer-pic {
  height: 82px;
  width: 82px;
  margin: 4px;
  border-radius: 4px;
}
.bber-music .aplayer.aplayer-withlrc .aplayer-info {
  padding: 5px 7px 0;
}
#bber .aplayer .aplayer-info .aplayer-music {
  height: 23px;
}
#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
  color: var(--anzhiyu-fontcolor);
}

#bber .aplayer .aplayer-info .aplayer-controller {
  align-items: center;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  padding: 0;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
  position: initial;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
  background: var(--anzhiyu-gray);
  height: 8px;
  border-radius: 12px;
  transition: 0.3s;
  overflow: hidden;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
  height: 100%;
  border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
  height: 100%;
  border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
  display: none;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
  position: initial;
}

/* 顶部样式 */
.author-content.author-content-item.essayPage {
  height: 19rem;
  background: url(https://hexo.anxy.top/img/guangyu.jpg) left 28% / cover no-repeat;
  color: var(--anzhiyu-white);
  overflow: hidden;
  margin-top: 0px;
}
#page:has(#essay_page) .author-content-item .card-content .banner-button-group .banner-button:hover {
  color: var(--anzhiyu-white);
  border-radius: 20px !important;
}

/* 响应式 */
@media screen and (max-width: 1300px) {
  #bber .timeline ul li.bber-item {
    width: 49%;
    margin-right: 1%;
  }
}
@media screen and (max-width: 768px) {
  #bber .timeline ul li.bber-item {
    width: 100%;
    margin-right: 0px;
  }
}
[data-theme="dark"] #bber .bber-music .aplayer,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-fontcolor);
}
#bber .aplayer .aplayer-lrc p {
  color: var(--anzhiyu-fontcolor);
}

在 _config.butterfly.yml 中引入：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/essay_page/essay_page.css">

JS 处理

新建一个 js 文件用来处理即刻短文的逻辑，或者写在公共 js 中也可以。博主写在公共 js 中，即 custom.js，该 js 在 _config.butterfly.yml 中的 inject 使用如下方式引入，加入了 data-pjax，并且开启了站点的 pjax，然后再引入 waterfall.js 用于处理瀑布流。

1
2
3
4
5
inject:
  bottom:
    - <script async data-pjax src="/js/custom.js"></script>
    # 即刻依赖 waterfall
    - <script async data-pjax src="/js/waterfall/waterfall.js"></script>
1
2
3
4
5
6
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
  enable: true
  exclude:

新建 source/js/waterfall/waterfall.js 内容如下：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
function waterfall(a) {
  function b(a, b) {
    var c = window.getComputedStyle(b);
    return parseFloat(c["margin" + a]) || 0;
  }
  function c(a) {
    return a + "px";
  }
  function d(a) {
    return parseFloat(a.style.top);
  }
  function e(a) {
    return parseFloat(a.style.left);
  }
  function f(a) {
    return a.clientWidth;
  }
  function g(a) {
    return a.clientHeight;
  }
  function h(a) {
    return d(a) + g(a) + b("Bottom", a);
  }
  function i(a) {
    return e(a) + f(a) + b("Right", a);
  }
  function j(a) {
    a = a.sort(function (a, b) {
      return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
    });
  }
  function k(b) {
    f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
  }
  "string" == typeof a && (a = document.querySelector(a));
  var l = [].map.call(a.children, function (a) {
    return (a.style.position = "absolute"), a;
  });
  a.style.position = "relative";
  var m = [];
  l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
  for (var n = 1; n < l.length; n++) {
    var o = l[n - 1],
      p = l[n],
      q = i(o) + f(p) <= f(a);
    if (!q) break;
    (p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
  }
  for (; n < l.length; n++) {
    j(m);
    var p = l[n],
      r = m.pop();
    (p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
  }
  j(m);
  var s = m[0];
  a.style.height = c(h(s) + b("Bottom", s));
  var t = f(a);
  window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
}

custom.js 内容如下：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
var percentFlag = false; // 节流阀
function essayScroll() {
  let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
  const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
  result <= 99 || (result = 99);

  if (
    !percentFlag &&
    waterfallResult + 100 >= document.documentElement.clientHeight &&
    document.querySelector("#waterfall")
  ) {
    // console.info(waterfallResult, document.documentElement.clientHeight);
    setTimeout(() => {
      waterfall("#waterfall");
    }, 500);
  } else {
    setTimeout(() => {
      document.querySelector("#waterfall") && waterfall("#waterfall");
    }, 500);
  }

  const r = window.scrollY + document.documentElement.clientHeight;

  let p = document.getElementById("post-comment") || document.getElementById("footer");

  (p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
  return e.split(n).join(t);
}
var anzhiyu = {
  diffDate: function (d, more = false) {
    const dateNow = new Date();
    const datePost = new Date(d);
    const dateDiff = dateNow.getTime() - datePost.getTime();
    const minute = 1000 * 60;
    const hour = minute * 60;
    const day = hour * 24;
    const month = day * 30;

    let result;
    if (more) {
      const monthCount = dateDiff / month;
      const dayCount = dateDiff / day;
      const hourCount = dateDiff / hour;
      const minuteCount = dateDiff / minute;

      if (monthCount >= 1) {
        result = datePost.toLocaleDateString().replace(/\//g, "-");
      } else if (dayCount >= 1) {
        result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
      } else if (hourCount >= 1) {
        result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
      } else if (minuteCount >= 1) {
        result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
      } else {
        result = GLOBAL_CONFIG.date_suffix.just;
      }
    } else {
      result = parseInt(dateDiff / day);
    }
    return result;
  },
  changeTimeInEssay: function () {
    document.querySelector("#bber") &&
      document.querySelectorAll("#bber time").forEach(function (e) {
        var t = e,
          datetime = t.getAttribute("datetime");
        (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline");
      });
  },
  reflashEssayWaterFall: function () {
    document.querySelector("#waterfall") &&
      setTimeout(function () {
        waterfall("#waterfall");
        document.getElementById("waterfall").classList.add("show");
      }, 500);
  },
  commentText: function (e) {
    if (e == "undefined" || e == "null") e = "好棒！";
    var n = document.getElementsByClassName("el-textarea__inner")[0],
      t = document.createEvent("HTMLEvents");
    if (!n) return;
    t.initEvent("input", !0, !0);
    var o = replaceAll(e, "\n", "\n> ");
    (n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
    var i = document.querySelector("#post-comment").offsetTop;
    window.scrollTo(0, i - 80),
      n.focus(),
      n.setSelectionRange(-1, -1),
      document.getElementById("comment-tips") && document.getElementById("comment-tips").classList.add("show");
  },
};

anzhiyu.changeTimeInEssay();
anzhiyu.reflashEssayWaterFall();

其中 anzhiyu 变量中存储的四个方法：

  • diffDate 为处理时间的方法，其实 btf 中也有，只是不太喜欢那个的显示方式，就改成现在这个了。
  • changeTimeInEssay 初始化即刻时间
  • reflashEssayWaterFall 处理瀑布流显示
  • commentText 处理点击跳转评论并添加评论

方法 essayScroll 为检查滚动条卷去一个视口高度的 100 范围内执行一次，滑动到底部或评论区取消监听执行。此处博主未做 else 处理取消监听，如果有写 percent 函数监听滑动可以一起写在同一个方法里面。（博主就是写在同一个方法里面），如果即刻文章很少的话其实是可以不监听滑动的，即只显示近 30 条，因为进入页面后会执行一次瀑布流，页面不会乱，但是如果您把 essay.pug 中 17 行左右修改后可以达到无限的效果就会出现 dom 结构还没渲染瀑布流就已经执行完了的情况就需要监听滚动来再次执行瀑布流以完成布局。

首页滚动显示即刻（可选）

创建 themes/butterfly/layout/includes/bbTimeList.pug，部分 fontawesome 图标可能需要您自行修改：

1
2
3
4
5
6
7
8
9
10
11
#bbTimeList.bbTimeList.container
    i.anzhiyufont.anzhiyu-icon-jike.bber-logo.fontbold(onclick=`pjax.loadUrl("/essay/")`,title="即刻短文", aria-hidden="true")
    #bbtalk.swiper-container.swiper-no-swiping.essay_bar_swiper_container(tabindex="-1")
      #bber-talk.swiper-wrapper(onclick=`pjax.loadUrl("/essay/")`)
        each i in site.data.essay
          each item, index in i.essay_list
            if index < 10
              - var contentText = item.image ? item.content + ' [图片]' : item.content
              .li-style.swiper-slide= contentText

    i.bber-gotobb.fas.fa-arrow-circle-right(onclick=`pjax.loadUrl("/essay/")`,title="查看全文")

引入到主页

修改 themes/butterfly/layout/index.pug，注意缩进：

1
2
3
4
5
6
7
8
extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    include includes/categoryBar.pug
    +postUI
    include includes/pagination.pug

如果需要像本站一样在整个顶部引入的话可以参考下面的代码，修改 themes/butterfly/layout/includes/layout.pug：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
- var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
- page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
- var pageType = is_post() ? 'post' : 'page'

doctype html
html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
  head
    include ./head.pug
  body
    if theme.preloader.enable
      !=partial('includes/loading/index', {}, {cache: true})

    if theme.background
      #web_bg
      
    !=partial('includes/sidebar', {}, {cache: true})
    
    if theme.background
      #svg_bg
      
    !=partial('includes/sidebar', {}, {cache: true})

    if page.type !== '404'
      #body-wrap(class=pageType)
        include ./header/index.pug
        if (is_home())
          include ./bbTimeList.pug
        

        main#content-inner.layout(class=hideAside)
          if body
            div!= body
          else
            block content
            if theme.aside.enable && page.aside !== false
              include widget/index.pug

        - var footerBg = theme.footer_bg
        if (footerBg)
          if (footerBg === true)
            - var footer_bg = bg_img
          else
            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
        else
          - var footer_bg = ''

        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})

    else
      include ./404.pug

    include ./rightside.pug
    include ./additional-js.pug
    !=partial('includes/third-party/search/index', {}, {cache: true})

引入 Swiper 依赖

在 _config.butterfly.yml 引入依赖，如果有使用轮播图插件的话此处无需引入：

1
2
3
4
5
inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css">
  bottom:
    - <script data-pjax src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script>

添加自定义 CSS

创建 source/css/essay_page/home_essay_bar.css，然后在 _config.butterfly.yml 中的 inject 下的 head 引入，注意缩进：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/essay_page/home_essay_bar.css">
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
#bbTimeList {
  background: var(--anzhiyu-white);
  color: var(--anzhiyu-fontcolor);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  box-shadow: var(--anzhiyu-shadow-lightblack);
  display: flex;
  transition: all 0.3s ease 0s;
  margin: 1rem auto 0;
  border: 3px solid #19a5c1;
  align-items: center;
  width: 75%;
  padding: 8px 10px;
  max-width: 1170px;
  width: 97%;
}
[data-theme="dark"] #bbTimeList,[data-theme="dark"] #category-bar {
  background: #000 !important;
}
#bbtalk {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bber-talk {
  width: 100%;
  height: 25px;
  line-height: 25px;
  display: flex;
  flex-direction: column;
}
.bber-logo {
  font-size: 2rem;
  line-height: 22px;
  margin-right: 1rem;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  font-weight: 500;
}

.bber-gotobb {
  line-height: 25px;
  margin-left: 1rem;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

#bber-talk .li-style {
  width: 100%;
  max-width: 100%;
  height: 25px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
  font-weight: 700;
  margin: auto;
  cursor: pointer;
  white-space: nowrap;
}

#bbTimeList:hover {
  border: var(--style-border-hover);
  box-shadow: var(--anzhiyu-shadow-main);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}

修改自定义 JS

修改 custom.js：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
var percentFlag = false; // 节流阀
function essayScroll() {
  let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
  const waterfallResult = a % document.documentElement.clientHeight; // 卷去一个视口
  result <= 99 || (result = 99);

  if (
    !percentFlag &&
    waterfallResult + 100 >= document.documentElement.clientHeight &&
    document.querySelector("#waterfall")
  ) {
    // console.info(waterfallResult, document.documentElement.clientHeight);
    setTimeout(() => {
      waterfall("#waterfall");
    }, 500);
  } else {
    setTimeout(() => {
      document.querySelector("#waterfall") && waterfall("#waterfall");
    }, 500);
  }

  const r = window.scrollY + document.documentElement.clientHeight;

  let p = document.getElementById("post-comment") || document.getElementById("footer");

  (p.offsetTop + p.offsetHeight / 2 < r || 90 < result) && (percentFlag = true);
}
function replaceAll(e, n, t) {
  return e.split(n).join(t);
}
var anzhiyu = {
  diffDate: function (d, more = false) {
    const dateNow = new Date();
    const datePost = new Date(d);
    const dateDiff = dateNow.getTime() - datePost.getTime();
    const minute = 1000 * 60;
    const hour = minute * 60;
    const day = hour * 24;
    const month = day * 30;

    let result;
    if (more) {
      const monthCount = dateDiff / month;
      const dayCount = dateDiff / day;
      const hourCount = dateDiff / hour;
      const minuteCount = dateDiff / minute;

      if (monthCount >= 1) {
        result = datePost.toLocaleDateString().replace(/\//g, "-");
      } else if (dayCount >= 1) {
        result = parseInt(dayCount) + " " + GLOBAL_CONFIG.date_suffix.day;
      } else if (hourCount >= 1) {
        result = parseInt(hourCount) + " " + GLOBAL_CONFIG.date_suffix.hour;
      } else if (minuteCount >= 1) {
        result = parseInt(minuteCount) + " " + GLOBAL_CONFIG.date_suffix.min;
      } else {
        result = GLOBAL_CONFIG.date_suffix.just;
      }
    } else {
      result = parseInt(dateDiff / day);
    }
    return result;
  },
  changeTimeInEssay: function () {
    document.querySelector("#bber") &&
      document.querySelectorAll("#bber time").forEach(function (e) {
        var t = e,
          datetime = t.getAttribute("datetime");
        (t.innerText = anzhiyu.diffDate(datetime, true)), (t.style.display = "inline");
      });
  },
  reflashEssayWaterFall: function () {
    document.querySelector("#waterfall") &&
      setTimeout(function () {
        waterfall("#waterfall");
        document.getElementById("waterfall").classList.add("show");
      }, 500);
  },
  commentText: function (txt) {
    const postCommentDom = document.querySelector("#post-comment");
    var domTop = postCommentDom.offsetTop;
    window.scrollTo(0, domTop - 80);
    if (txt == "undefined" || txt == "null") txt = "好棒！";
    function setText() {
      setTimeout(() => {
        var input = document.getElementsByClassName("el-textarea__inner")[0];
        if (!input) setText();
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("input", true, true);
        let inputValue = replaceAll(txt, "\n", "\n> ");
        input.value = "> " + inputValue + "\n\n";
        input.dispatchEvent(evt);
        input.focus();
        input.setSelectionRange(-1, -1);
        if (document.getElementById("comment-tips")) {
          document.getElementById("comment-tips").classList.add("show");
        }
      }, 100);
    }
    setText();
  },
  initIndexEssay: function () {
    setTimeout(() => {
      let essay_bar_swiper = new Swiper(".essay_bar_swiper_container", {
        passiveListeners: true,
        direction: "vertical",
        loop: true,
        autoplay: {
          disableOnInteraction: true,
          delay: 3000,
        },
        mousewheel: true,
      });

      let essay_bar_comtainer = document.getElementById("bbtalk");
      if (essay_bar_comtainer !== null) {
        essay_bar_comtainer.onmouseenter = function () {
          essay_bar_swiper.autoplay.stop();
        };
        essay_bar_comtainer.onmouseleave = function () {
          essay_bar_swiper.autoplay.start();
        };
      }
    }, 100);
  },
};

anzhiyu.initIndexEssay();
anzhiyu.changeTimeInEssay();
anzhiyu.reflashEssayWaterFall();

主要是新增了在 anzhiyu 变量中的 initIndexEssay 方法，该方法用于初始化 swiper 轮播。

]]> https://blog.anxw.cn/posts/10.html 2024-06-29T07:28:59.000Z 此文章作为备份，收录常用配置、代码片段与零散笔记，方便随时查阅，不保证排版与持续更新。 静态即刻备份 2024-06-29T07:28:59.000Z 安小歪 Butterfly 友链自动检查工具（GitHub Action + Vercel 部署）

参考方案：Heo 方案地址

方案介绍

通过发送 HEAD 请求来检查友链链接是否可访问，使用 GitHub Action + Vercel 自动运行并生成检查结果页面。

其他方案遇到的问题

Python 方案

Heo 哥的方案是使用 Python 脚本运行的，奈何我的老 Windows 7 安装 Python 总是那么困难。

  • Python 3.4 版本完美安装了 pyyaml，结果运行时告诉我 Python 版本太低无法解析某些字符。
  • 升级到 Python 3.8.6（Windows 7 的极限），但不自带 pip（明明说好的 Python 3.4 以上版本自带 pip）。

Python 方案就此结束了——这些问题实在是让我一辈子都没遇到过。

PowerShell 方案

换了一种方案，使用 Windows 7 自带的 PowerShell，结果版本太低不行。

  • 升级 PowerShell 到 5.1 后可以了，但安装 pyyaml 失败了，网络错误，代理也走了（没道理）。

PowerShell 方案也就结束了。

GitHub Action 方案

难道就这样结束了吗？突然想到了 GitHub Action，直接开始搞，结果成功运行并生成了无法访问的 .txt 文件（产物）。

但必须下载并解压才能查看——这实在是太麻烦了。

然后灵光一闪，决定将输出结果改为 HTML 格式，这样就可以以网页形式展示了。后期就可以通过 Cloudflare、GitHub Pages 或 Vercel 来部署了。

运行效果

至于轻笑大佬的链接为何出现在这里，是因为 GitHub Action 本来就是国外的服务，轻笑大佬的域名屏蔽了国外服务，所以就出现了无法访问的结果。后续仍然需要手动去检查。

项目地址

项目仓库

使用方法

Fork 项目

首先 fork 该项目并创建一个不过期的 Token。

Token 必须包含 repo 的所有选项，并且具备以下权限：

  • workflow
  • write:packages
  • delete:packages
  • project

保存 Token 后，回到仓库的 Settings 中的 Secrets and variables，添加变量 PAT_TOKEN 并填写 Token。

设置 GitHub Actions

打开仓库的 Settings -> Actions 页面，勾选：

  • Allow all actions and reusable workflows
  • Read and write permissions
  • Allow GitHub Actions to create and approve pull requests

然后保存。

修改配置文件

在 fork 后的项目中，可以删除 index.html（后期会自动生成）。

修改 link.yml 文件，将其中的内容替换为你的博客友链 YAML 配置即可。

运行 GitHub Actions

打开 Action，运行工程流文件即可。如果出现问题，可以回到仓库的任何一个文件夹，随便修改一个文本文件，保存后重新运行。

部署到 Vercel

  1. 登录 Vercel 官网
  2. 点击 New Project，导入你 fork 的仓库
  3. 保持默认配置，点击 Deploy 即可
  4. 部署完成后，即可通过 Vercel 分配的域名访问检查结果页面
]]> https://blog.anxw.cn/posts/9.html 2024-06-17T05:47:59.000Z 友链失效手动排查太麻烦。基于 GitHub Action 定期自动检测链接状态，生成 HTML 结果页，支持部署到 Vercel。只需替换 link.yml 即可运行，免配本地环境，省时省心。 Butterfly主题友情链接可用性检测 2024-06-17T05:47:59.000Z 安小歪 Butterfly 主题友链页轮播头像功能教程

原作者站点：shineyu 的博客（已失效）
参考文章：原教程链接

经过不懈努力终于找到了这篇文章，然后就开始抄了，但是抄完发现有一个函数没有效果。于是给大佬发了一下反馈，然后想起来王九弦 SZ·Ninty 用的也是 anzhiyu 主题，应该有这个 js。但是我面临开学，九弦不在家所有我暂时弄不了，最后帮我找到了类似的 js。最后我还是没有时间搞，所以开学了。

效果预览

回家以后发现 shineyu 给我回复了，好好好。这下又省事了~

作者回复

抄完以后发现有一个跳转函数：shine.scrollTo("#post-comment"); 还是没有效果。简单改一下就可以食用了（仅可跳转 twikoo 评论，并且请关闭评论懒加载）。

修改友链页代码

找到友链页面的代码文件 themes\butterfly\layout\includes\page\flink.pug，然后找到对应位置添加如下代码：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
#article-container
  .flink
+    if site.data.link
+      .flink-card
+        .flink-card-title
+          .flink-card-title-small 友情链接
+          .flink-card-title-big 与各类技术博主共同进步
+        .flink-card-container
+          .flink-card-wrapper
+            if site.data.link
+              - let linkList = []
+              - site.data.link.map(function (list) { if (list.class_name != "友链认领检查") list.link_list.map(function (item) { linkList.push(item) }) })
+              - if (linkList.length % 2 !== 0) linkList.shift()
+              - let evenList = linkList.filter((x, index) => index % 2 === 0)
+              - let oddList = linkList.filter((x, index) => index % 2 === 1)
+              each item, index in evenList
+                .flink-icon-pair
+                  .flink-icon 
+                    a(href=url_for(evenList[index].link) target='_blank' title=evenList[index].name)
+                      img.no-lightbox(src=url_for(evenList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+                  .flink-icon 
+                    a(href=url_for(oddList[index].link) target='_blank' title=oddList[index].name)
+                      img.no-lightbox(src=url_for(oddList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+              each item, index in evenList
+                .flink-icon-pair
+                  .flink-icon 
+                    a(href=url_for(evenList[index].link) target='_blank' title=evenList[index].name)
+                      img.no-lightbox(src=url_for(evenList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+                  .flink-icon 
+                    a(href=url_for(oddList[index].link) target='_blank' title=oddList[index].name)
+                      img.no-lightbox(src=url_for(oddList[index].avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
+        .flink-card-btn-group
+          .flink-card-btn.secondary
+            a(href="javascript:toRandomFlink();" title='随机访问')
+              i.fas.fa-random
+              span= _p('随机访问')
+          .flink-card-btn
+            a(href="javascript:shangskr.applyFlink();" title='申请友链')
+              i.fas.fa-plus-circle
+              span= _p('申请友链')

    - let pageContent = page.content
      if site.data.link
      each i in site.data.link

上述代码只要删掉 + 加号，就是正常的缩进格式了。

添加随机访问功能

在上述的 themes\butterfly\layout\includes\page\flink.pug 友链页代码文件末尾添加如下代码，即可实现随机访问：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//- 省略上面所有代码...
//- 在末尾添加如下代码
script.
  var flinks = [
    "https://www.qcqx.cn/",
    "https://blog.sinzmise.top/",
    "https://blog.opeach.cn/",
    "https://hexo.dreamerhe.online/",
    "https://ffbf.top/",
    "https://www.anxkj.top/",
    "https://www.crowhsu.top"
  ];
  function toRandomFlink() {
      window.open(flinks[Math.floor(Math.random() * flinks.length)])
  }

需要自行修改 flinks 数组中的 url，随机访问就是从该数组中随机获取一个元素进行跳转访问。

添加申请友链功能

新建 source\js\shangskr.js 文件，在文件中添加如下功能函数，即可实现申请友链的功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var shangskr = {
    applyFlink: function() {
        var input = document.getElementsByClassName('el-textarea__inner')[0];
        let evt = document.createEvent('HTMLEvents');
        evt.initEvent('input', true, true);
        input.value = '昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片 url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n';
        input.dispatchEvent(evt);
        var targetElement = document.getElementById("post-comment");
        if (targetElement) {
            targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
        }
        input.focus();
        input.setSelectionRange(-1, -1);
    },
};

添加 CSS 样式

自行创建 css 文件或者引入已有的 css 文件：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
@keyframes rowup {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.flink-card {
  position: relative;
  margin-bottom: 20px;
  border-radius: 12px;
  border: var(--style-border);
  /* background-image: url(/img/flink_page.webp); */
  background-color: var(--heo-card-bg);;
  background-size: cover;
  -webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  box-shadow: 0 8px 16px -4px #2c2d300c;
}

.flink-card-title {
  margin-top: 2rem;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
}

.flink-card-title .flink-card-title-small {
  font-size: 12px;
  line-height: 1;
  color: var(--heo-secondtext);
  margin-top: 8px;
  margin-bottom: 0.5rem;
}

.flink-card-title .flink-card-title-big {
  font-size: 36px;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 8px;
}

.flink-card-btn-group a:hover {
  text-decoration: unset !important;
}

.flink-card-desc {
  font-size: 80%;
  opacity: .8
}

.flink-card-btn-group {
  position: absolute;
  top: 2.5rem;
  right: 2rem;
  display: flex
}

.flink-card-btn {
  height: 3em;
  padding: .5em .8em;
  margin-left: 1.5rem;
  border-radius: 12px;
  background: var(--font-color);
  /* background: rgba(125,125,125,.2); */
  backdrop-filter: var(--backdrop-filter);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.flink-card-btn * {
  color: #F2F6FC;
  margin: .2em
}

.flink-card-btn:hover {
  background: #425AEF;
  -webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05)
}

.flink-card-btn:hover * {
  color: #fff
}

.flink-card-container {
  overflow: hidden;
  display: flex;
  padding-bottom: 2rem;
}

.flink-card-wrapper {
  display: flex;
  margin-top: 1.5rem;
  flex-wrap: nowrap;
  animation: rowup 120s linear infinite;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.flink-icon-pair {
  margin-left: 1rem
}

.flink-icon-pair .flink-icon:nth-child(even) {
  -webkit-transform: translate(-60px);
  -moz-transform: translate(-60px);
  -ms-transform: translate(-60px);
  -o-transform: translate(-60px);
  transform: translate(-60px);
  margin-top: 1rem;
}

.flink-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: .5rem 0;
  -webkit-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -moz-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -ms-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  -o-box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05);
  box-shadow: 0 8px 12px -3px rgba(45, 45, 45, .05)
}

.flink-icon img {
  width: 120px;
  height: 120px;
  border-radius: 50%!important;
  margin: auto!important
}

#article-container .flink-list .flink-item-circle {
  color: #57bd6a;
  opacity: .8;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  z-index: 1;
  cursor: url(https://npm.elemecdn.com/eurkon-cdn/hexo/images/user/pointer.cur),pointer!important;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}

#article-container .flink-list .flink-item-circle:hover {
  color: #397d45;
}

@media screen and (max-width: 768px) {
  #article-container > div.flink > div.flink-card > div.flink-card-btn-group {
    margin-top: 20px;
    right: 2rem;
    top: unset !important;
    bottom: 20px;
  }

  .flink-card {
    padding: 0px 0px 80px 0px;
  }
}

animation: rowup 120s linear infinite; 属性可以调整头像轮播的速度，只需要将 120s 调成自己想要的速度即可，时间越小越快。

引入 CSS 样式和 JS 脚本

css 自行引入，在主题配置文件 _config.butterfly.yml 中添加：

1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义 css
+    - <link rel="stylesheet" href="/css/css 文件名称">  #添加的自定义 css 文件
  bottom:
    # 自定义 js
+    - <script async data-pjax src="/js/shangskr.js"></script>  #添加的自定义 js 文件

生成预览

1
hexo clean && hexo g && hexo s
]]> https://blog.anxw.cn/posts/8.html 2024-04-21T11:31:06.000Z 给 Butterfly 主题友链页加头像轮播效果，支持随机访问和一键申请友链。修改 flink.pug 模板 + 添加 JS 函数 + CSS 滚动动画，配置简单，让友链展示更灵动有趣。 友链头像轮播图教程 2024-04-21T11:31:06.000Z 安小歪 Butterfly 主题添加最新文章/最近更新标签

原作者：轻笑

实现步骤

修改 post-ui.pug

修改 themes\butterfly\layout\includes\mixins\post-ui.pug，添加 + 后面的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
mixin postUI(posts)
+  - let newTitle= newPost()
+  - let updateTitle= updatePost()
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
+      if newTitle == title
+        span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新文章
+      if updateTitle == title
+        span(class=`updatePost-${leftOrRight=='left'?'right':'left'}`) 最近更新

添加 helpers 函数

添加内容到 themes\butterfly\scripts\helpers\page.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 最新文章
hexo.extend.helper.register('newPost', function() {
  let name, time;
  hexo.locals.get('posts').map((item, index) => {
      if (index == 0) name = item.title, time = item.date
      else if (item.date > time) { name = item.title, time = item.date }
  });
  return name
})
hexo.extend.helper.register('updatePost', function() {
  let name, time=0;
  hexo.locals.get('posts').map((item, index) => {
      if (item.updated > time && item.updated > item.date) { name = item.title, time = item.updated}
  });
  return name
})

添加 CSS 样式

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
#recent-posts>.recent-post-item {
    position: relative;
}

/* 最新文章图标 */
.newPost-left, .newPost-right {
    z-index: 1;
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, .92);
    padding: 0 15px;
    background-color: #49b0f5b9;
    border-radius: 0 0 10px 10px;
}

.newPost-left {
    left: 15px;
}

.newPost-right {
    right: 15px;
}
/* 最近更新图标 */
.updatePost-left, .updatePost-right {
    z-index: 1;
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, .92);
    padding: 0 15px;
    background-color: #25d8b1b9;
    border-radius: 0 0 10px 10px;
}

.updatePost-left {
    left: 15px;
}

.updatePost-right {
    right: 15px;
}

@media screen and(max-width: 600px) {
    #nav {
        padding: 0 15px 0 11px;
    }

    #nav #blog_name {
        margin-left: -6.5px !important;
    }

    .newPost-left, .newPost-right {
        padding: 0 12px;
    }

    .newPost-left {
        left: 0;
        border-radius: 10px 0 10px 0;
    }

    .newPost-right {
        right: 0;
        border-radius: 0 10px 0 10px;
    }

    .recent-post-item .recent-post-content .recent-post-info .recent-post-meta {
        padding: 0 5px 0 5px;
        margin-top: -7px;
    }

    .updatePost-left, .updatePost-right {
        padding: 0 12px;
    }

    .updatePost-left {
        left: 0;
        border-radius: 10px 0 10px 0;
    }

    .updatePost-right {
        right: 0;
        border-radius: 0 10px 0 10px;
    }
}

注意事项

  • 修改完成后请执行 hexo clean && hexo g -d 重新生成并部署
  • 如果标签位置显示异常，请检查主题配置中的 cover.position 设置
  • 移动端样式已适配，可根据实际需求调整间距和圆角

Butterfly 主题添加文章标签

原作者：byer’s Blog

实现步骤

修改 post-ui.pug

找到 themes\butterfly\layout\includes\mixins\post-ui.pug 文件，在文件的约 21 行的位置添加如下内容：

1
2
3
if article.cardtag
  .card-tag= article.cardtag  
if post_cover && theme.cover.index_enable

在文章 Front Matter 中添加 tag

打开你的文章，添加 cardtag 字段：

1
2
3
4
5
---
title: 你的文章标题
date: 2024-01-01
cardtag: 魔改
---

添加 CSS 样式

创建一个 css 文件，或者写入你自己的 css 中：

1
2
3
4
5
6
7
8
9
10
11
12
/* 文章标签*/
#recent-posts .recent-post-item .card-tag {
  left: 0;
  border-bottom-right-radius: 12px;
  position: absolute;
  top: 0;
  padding: 3px 8px;
  background: linear-gradient(90deg,#e5b085,#d48f16);
  color: #fff;
  font-size: .85em;
  z-index: 1;
}

注意事项

  • 修改完成后请执行 hexo clean && hexo g -d 重新生成并部署
  • cardtag 的内容可以自定义，支持任意文本
  • 如需修改标签样式，可调整 CSS 中的 background 渐变颜色或 padding 间距
]]> https://blog.anxw.cn/posts/7.html 2024-02-09T02:12:27.000Z 给 Butterfly 主题加"最新文章"、"最近更新"角标，支持自定义文章标签。修改 pug 模板 + 添加 helper 函数 + CSS 样式即可，移动端已适配，配置简单，让文章列表更直观好看。 文章卡片标签美化 2026-04-09T09:12:27.000Z 安小歪

原作者链接 Saika’s Blog

serv00 是一个提供免费的 Virtual Host 的平台，其托管平台使用的是 FreeBSD 系统，并不是 Linux。每个账号有效期 10 年，超过三个月不登入 Panel 以及 SSH 则会被删除账号。

名称Serv00 免费提供
存储空间3 GB
每月流量unlimited
网站数量100
MySQL10
MySQL3
MongoDB3
GIT/SVN/HG 仓库3
TCP/UDP 端口3
PHP 解释器3
系统进程15
RAM512MB
备份7 天
服务器放置欧盟
免费子域名login.serv00.net
技术支持只有论坛
SLA不支持
现代技术支持
SSH 访问支持
SSH 隧道不支持
远程数据库访问不支持
固态硬盘支持
没有广告支持
价格免费
Alist详细部署记录

注册账号

首先去 serv00 的官网注册一个账号：注册页面

最好不要使用国内邮箱，注册信息请尽可能真实填写。(What is the cost of hosting on serv00.com? 这一项填 0/free)

接着你可以在邮箱里收到你的注册信息的邮件；邮件最末有 Panel 的入口地址和文档链接（官方文档）以及论坛链接（官方论坛），接下来登入 Panel 进行操作：

  1. 首先去左侧的 Additional Service 选项卡中，找到 Run your own applications 选项，将其设置为允许
  2. 接着去 Port reservation 选项卡，使用 Add port 功能，随机添加一个 TCP 端口

接着使用 SSH 登入到你的账户，我使用的 SSH 客户端是 Termius

部署 Alist

Alist 的官方仓库并没有提供 FreeBSD 版本的可执行文件构筑，Alist 构筑 FreeBSD 版本的仓库

Serv00 本身提供的网站托管在 ~/domains 路径下，所以我建议把 Alist 也部署到这个路径下的子目录：

1
mkdir -p ~/domains/alist && cd ~/domains/alist

接着下载目前 shangskr/alist-freebsd 提供的最新版的 Alist 的可执行二进制文件构筑：

1
wget https://github.com/shangskr/alist-freebsd/releases/download/v3.30.0/alist && chmod +x alist

然后需要先启动一次 Alist 以生成配置文件，此次启动一定会失败，请不用在意：

1
./alist server

接着回到 Panel 中，找到 MySQL 选项卡，使用 Add database 功能新建一个数据库：

密码要求含有大写字母、小写字母和数字三种字符，且长度必须超过 6 个字符。

接下来进入 File manager 选项卡，进入 ~/domains/alist/data 路径，可以看到一个名为 config.json 的文件，右键点击，选择 View/Edit > Source Editor，进行编辑：

配置示例

修改 CDN、database、scheme 三个部分：

  • CDN: https://jsd.onmicrosoft.cn/npm/alist-web@$version/dist/

    版本号的话自己指定，不指定有可能加载不出来页面

  • database 部分：

    • type 需要改成 mysql
    • host 填写你在注册邮件中看到的 mysql 的地址
    • port 是默认的 3306
    • 用户名、密码、数据库名则按照你创建的情况进行填写

  • scheme 部分：

    • 修改 address 为 127.0.0.1 本地回环，是为了避免被他人使用 http://ip:port 的方式进行访问。至于自己怎么访问，本文后面的部分会进行介绍。
    • http_port 要改成自己前面放行的端口。

改完之后，点击 save 保存，接着回到 SSH 窗口中进行操作。

先启动一次，查看运行是否正常：

1
./alist server

运行正常，记得把管理员用户的密码记住。接着使用 Ctrl+c 停止运行。

绑定域名

此时还没有访问 Alist 的方法，因为监听的地址是本地回环，所以需要将其反向代理出来。我选择使用 Cloudflare 提供的 Argo 通道，顺带给 Alist 绑定自己的域名。

Cloudflared 官方仓库没有提供 FreeBSD 平台的客户端，但是和 Alist 一样的，我找到了 Unofficial 的 FreeBSD 版本的构筑：cloudflared-freebsd，接下来使用它打隧道：

新建并进入 Cloudflared 的工作目录：

1
mkdir -p ~/domains/cloudflared && cd ~/domains/cloudflared

下载 Cloudflared：

1
wget https://cloudflared.bowring.uk/binaries/cloudflared-freebsd-2023.10.0.7z && 7z x cloudflared-freebsd-2023.10.0.7z && rm cloudflared-freebsd-2023.10.0.7z && mv -f ./temp/cloudflared-freebsd-2023.10.0 ./cloudflared && rm -rf temp

然后在 Cloudflare 的面板（Cloudflare Dash）中，找到 Networks 分类下的 Tunnels 功能，点击 Create a tunnel，选择 Cloudflared，Next，随便取个名字，Next，往下翻，可以看到 Run the following command，然后给了一串命令，将其复制出来，大概是这样的：

1
cloudflared.exe service install eyJhIjoiNzh...............V5TWpBeSJ9

前面的不需要管，只需要保留最后 ey 开头的那串很长的 TOKEN，去 SSH 中测试运行 Cloudflared：

1
./cloudflared tunnel --edge-ip-version auto --protocol http2 --heartbeat-interval 10s run --token eyJhIjoiNzh...............V5TWpBeSJ9

记得把最后的那一串替换成你的 TOKEN。

接着回到 Cloudflare 的面板，继续点击 Next，然后添加一个自己的域名，Service 中，Type 选择 HTTP，URL 填写 localhost:PORT，其中 PORT 为你的 Alist 对应的端口。点击 Save Tunnel 后，可以看到自己新建的 Tunnel 上线。

接着使用 Ctrl+c 停止运行。然后安装进程管理工具 pm2：

1
bash <(curl -s https://raw.githubusercontent.com/shangskr/alist_repl/main/serv00/install-pm2.sh)

然后使用 pm2 启动 Cloudflared：

1
~/.npm-global/bin/pm2 start ./cloudflared -- tunnel --edge-ip-version auto --protocol http2 --heartbeat-interval 10s run --token eyJhIjoiNzh...............V5TWpBeSJ9

记得把最后的那一串替换成你的 TOKEN。

再启动 Alist：

1
cd ~/domains/alist && ~/.npm-global/bin/pm2 start ./alist -- server

到这里，就可以直接通过你的域名访问刚刚部署的 Alist 了。

收尾工作

听说 Serv00 会不定时重启机器，所以我们把 pm2 添加开机自启，可以保证每次重启都能由 pm2 调动 Alist 和 Cloudflared。而且 Serv00 每三个月内必须要有一次登录面板或者 SSH 连接，不然会删号，也可以通过一个脚本解决问题，接下来我会详细说明。

自动定时 SSH

在 Panel 中找到 File manager 选项卡，进入 alist 所在的路径，然后找到上方 Send 按钮左边的 +，选择 New empty file，文件名命名为 auto-renew.sh，右键点击 auto-renew.sh，选择 View/Edit > Source Editor，进行编辑，把下面的代码块的内容都复制进去：

1
2
3
4
5
6
#!/bin/bash

while true; do
  sshpass -p '密码' ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -tt 用户名@地址 "exit" &
  sleep 2592000  #30 天为 2592000 秒
done

记得把其中的密码、用户名、ssh 的地址修改为你自己的。

保存后回到 SSH 中，进入 auto-renew.sh 所在的路径，并使用 pm2 管理运行它：

1
cd  ~/domains/alist && chmod +x auto-renew.sh && ~/.npm-global/bin/pm2 start ./auto-renew.sh

这样就会每隔一个月自动执行一次 SSH 连接，自己 SSH 自己进行续期。

添加开机自启

在 Panel 中找到 Cron jobs 选项卡，使用 Add cron job 功能添加任务：

Cron 任务配置

  • Specify time 选择 After reboot，即为重启后运行。
  • Form type 选择 Advanced，Command 写：
1
/home/你的用户名/.npm-global/bin/pm2 resurrect

记得把你的用户名改为你的用户名

添加完之后，在 SSH 窗口保存 pm2 的当前任务列表快照：

1
~/.npm-global/bin/pm2 save

这样每次 serv00 不定时重启任务时，都能自动调用 pm2 读取保存的任务列表快照，恢复任务列表。

更多玩法

参考来源：Saika’s Blog

serv00 官方文档 中有搭建网站的示例，示例就有 WordPress。文档中还详细介绍了以下服务的搭建方法：

  • Redis
  • Memcached
  • Imapsync
  • WP-CLI
  • Tomcat

你可以根据自己的需求，参考官方文档部署更多服务。

KodBox

KodBox

虽然 Serv00 能够部署 KodBox，但是实在是不太好用。最直观的感受就是卡，因为 KodBox 运行期间需要调用多个 PHP 组件，而 Serv00 限制同时处理三个 PHP 进程，所以显得特别慢。其次，Serv00 没有 Root 权限，部分 PHP 插件没有安装，也无法安装，导致有一些 KodBox 的插件无法正常运行。

安装步骤

进入 PHP 网站路径：

1
cd ~/domains/用户名.serv00.net/public_html/

安装 KodBox：

1
bash <(curl -s https://pan.rappit.site/d/shell/kodbox1.49/serv00-kodbox-install.sh)

然后去 Panel 中的 MySQL 选项卡，新建数据库和用户，用以接入 KodBox。再去 WWW Websites 选项卡中找到 用户名.serv00.net，点击右侧的 Manage > Details 进入设置，把以下三个功能打开：

  • GZIP compression
  • Allow PHP eval() function
  • Allow PHP exec() function

再打开 https://用户名.serv00.net/ 进行 KodBox 的安装，数据库填写你刚刚新建的数据库即可。初次启动需要较长的时间，请耐心等待。

如果你看明白了面板的功能，也可以使用自己的域名或者子域部署 KodBox，这里仅用 https://用户名.serv00.net/ 举例。

注意：

  • 上面的应用（KodBox）不需要占用端口
  • 下面的应用每一个都需要占用端口
Vless

VLESS

创建并进入 vless 工作路径，并克隆源仓库：

1
cd ~/domains && git clone https://github.com/qwer-search/serv00-vless && mv -f serv00-vless vless && cd vless && rm -f README.md

在 Panel 中 Port Reservation 选项卡中放行一个 TCP 端口，随机即可，记住端口号。

使用 vim 编辑或者直接去 Panel 中的 File Manager 选项卡在线编辑 app.js 文件，修改端口为刚刚放行的端口。

安装依赖：

1
npm install

安装完毕后，使用 pm2 启动并守护 vless 进程：

1
~/.npm-global/bin/pm2 start app.js --name vless

接着去你的代理客户端软件中手动添加 vless 配置即可：（下表没有给出的可以不填。）

KeyValue
地址Panel 中 WWW Websites 选项卡里的你的 Domain name
端口你放行的端口
用户 id37a0bd7c-8b9f-4693-8916-bd1e2da0a817
传输协议ws
伪装域名同地址
ws path/
Alist

Alist（FreeBSD 版本）

Alist 官方仓库没有构筑 FreeBSD 系统下能够运行的 Alist 可执行文件，但是我在 Github 上发现了一个使用 Github Workflow 自动构筑 FreeBSD 适用的 Alist 的仓库：shangskr/alist-freebsd，使用这个仓库就可以很便利的在 Serv00 上部署 Alist。

部署步骤

新建并进入 Alist 的工作目录：

1
mkdir -p ~/domains/alist && cd ~/domains/alist

接着下载目前 shangskr/alist-freebsd 提供的最新版的 Alist 的可执行二进制文件构筑：

1
wget https://github.com/shangskr/alist-freebsd/releases/download/v3.30.0/alist && chmod +x alist

然后需要先启动一次 Alist 以生成配置文件，此次启动一定会失败，请不用在意：

1
./alist server

接着回到 Panel 中，找到 MySQL 选项卡，使用 Add database 功能新建一个数据库：

密码要求含有大写字母、小写字母和数字三种字符，且长度必须超过 6 个字符。

接下来进入 File manager 选项卡，进入 ~/domains/alist/data 路径，可以看到一个名为 config.json 的文件，右键点击，选择 View/Edit > Source Editor，进行编辑：

配置示例

修改 CDN、database、scheme 三个部分：

  • CDN: https://jsd.onmicrosoft.cn/npm/alist-web@$version/dist/

    版本号的话自己指定，不指定有可能加载不出来页面

  • database 部分：

    • type 需要改成 mysql
    • host 填写你在注册邮件中看到的 mysql 的地址
    • port 是默认的 3306
    • 用户名、密码、数据库名则按照你创建的情况进行填写

  • scheme 部分：

    • 修改 address 为 127.0.0.1 本地回环，是为了避免被他人使用 http://ip:port 的方式进行访问。至于自己怎么访问，本文后面的部分会进行介绍。
    • http_port 要改成自己前面放行的端口。

改完之后，点击 save 保存，接着回到 SSH 窗口中进行操作。

先启动一次，查看运行是否正常：

1
./alist server

运行正常，记得把管理员用户的密码记住。接着使用 Ctrl+c 停止运行。

你可以选择使用面板中的 Proxy 功能添加域名，或者 Cloudflared 隧道添加域名。

Synctv

SyncTV

因为用 koyeb 部署这个项目把我 Koyeb 账号封了所以没办法玩了，我想到了 serv00 于是通过仿照 alist-freebsd 的仓库的 workflow 进行构筑的。

部署步骤

首先放行一个端口，然后创建并进入 synctv 的工作目录：

1
mkdir -p ~/domains/synctv && cd ~/domains/synctv

下载可执行文件：

1
2
3
release_info=$(curl -s https://api.github.com/repos/shangskr/synctv-freebsd/releases/latest)
asset_url=$(echo "$release_info" | jq -r '.assets[] | select(.name != "source code") | .browser_download_url')
curl -L -o synctv "$asset_url" && chmod +x synctv

新建启动脚本：

1
touch start.sh && chmod +x start.sh

接着在 Panel 中进入 File manager 选项卡，进入 synctv 的工作目录，找到 start.sh 文件，右键选择 View/Edit > Choose other > Source Editor 进行编辑，填入以下内容：

1
2
3
4
5
6
7
#!/bin/sh

# 如果不希望被使用 http://ip:port 的方式访问，取消注释下一行
# export SYNCTV_SERVER_LISTEN=127.0.0.1
# 把下一行的最末的 PORT 改成自己放行的端口
export SYNCTV_SERVER_PORT=PORT
./synctv server --data-dir ./

保存后回到 terminal 中，给予权限：

1
chmod +x synctv

测试运行：

1
./start.sh

确定运行没有问题后，按 Ctrl+c 即可停止运行。

使用 pm2 启动并管理：

1
~/.npm-global/bin/pm2 start ./start.sh --name synctv
One-api

One-API

源仓库没有提供 freebsd 平台的二进制文件，需要自己构建，但是很简单。先在面板中放行一个端口。

部署步骤

新建并进入 one-api 的工作目录：

1
mkdir -p ~/domains/one-api && cd ~/domains/one-api

进行构建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 下载源代码
git clone https://github.com/songquanpeng/one-api
# 构建前端
cd one-api/web/default
npm install
npm run build
# 构建后端
cd ../..
go mod download
go build -ldflags "-s -w" -o one-api
chmod u+x one-api
# 清理文件
cd .. && mv -f one-api/one-api ./temp
rm -rf one-api
mv -f temp one-api

新建启动脚本：

1
touch start.sh && chmod +x start.sh

接着在 Panel 中进入 File manager 选项卡，进入 one-api 的工作目录，找到 start.sh 文件，右键选择 View/Edit > Choose other > Source Editor 进行编辑，填入以下内容：

1
2
3
4
5
#!/bin/sh

export TIKTOKEN_CACHE_DIR="$PWD"
# 把下一行的 PORT 改为自己放行的端口
./one-api --port PORT --log-dir ./logs

保存后回到 terminal 中，测试运行：

1
./start.sh

确定运行没有问题后，按 Ctrl+c 即可停止运行。

使用 pm2 启动并管理：

1
~/.npm-global/bin/pm2 start ./start.sh --name one-api
Uptime-Kuma

Uptime Kuma

受限于 FreeBSD 的平台限制，1.23 版本内置了 PlayWright，无法运行，所以只能安装 1.22 版本。切记先去 Panel 中放行 TCP 端口。

部署步骤

下载 1.22.1 版本源代码并进入工作路径：

1
cd ~/domains && wget https://github.com/louislam/uptime-kuma/archive/refs/tags/1.22.1.zip && unzip 1.22.1.zip && mv -f uptime-kuma-1.22.1 kuma && rm -f 1.22.1.zip && cd kuma

设置生产模式：

1
npm ci --production

下载 dist 文件：

1
wget https://github.com/louislam/uptime-kuma/releases/download/1.22.1/dist.tar.gz && tar -xzvf dist.tar.gz && rm dist.tar.gz

安装补充依赖：

1
npm install

安装过程中多少会有报错，无视就好，实际上最后可以正常运行。内置的 Cloudflared 反向代理在 FreeBSD 平台上无法使用，但是可以使用上述的外置的 Cloudflared 进行反代，使用自己的域名。

测试运行：

1
node server/server.js --port=PORT

记得把 PORT 替换成你放行的端口。确定运行没有问题后，按 Ctrl+c 即可停止运行。

使用 pm2 管理后台运行：

1
~/.npm-global/bin/pm2 start server/server.js --name uptime-kuma -- --port=PORT

记得把 PORT 替换成你放行的端口。

如果你不希望自己的 Uptime-Kuma 被人使用 http://IP:PORT 的方式访问，你可以在最后的执行命令添加 –host=127.0.0.1 的尾缀，这样就只能通过反向代理的域名进行访问了：

1
~/.npm-global/bin/pm2 start server/server.js --name uptime-kuma -- --port=PORT --host=127.0.0.1
Bingo

Bingo

先放行一个端口。在 Panel 中进入 File manager 选项卡，点击左侧的 My Files 进入你的用户根目录，找到 .bashrc 文件，右键选择 View/Edit > Choose other > Source Editor 进行编辑，在最末加上以下两行并保存：

1
2
alias node='node20'
alias npm='npm20'

应用更改：

1
source ~/.bashrc

先新建一个目录用于存放 halo 的相关文件，进入目录后执行下述操作。

下载源码：

1
git clone https://github.com/weaigc/bingo

进入源码所在目录：

1
cd bingo

安装依赖：

1
npm20 install

下载 build 好的 .next 资源：

1
wget -O next.tar.gz https://pan.saika.free.hr/d/local/next.tar.gz && tar -xzvf next.tar.gz && rm next.tar.gz

添加环境变量文件：

1
cp .env.example .env

接着在 Panel 中进入 File manager 选项卡，进入 Bingo 源码所在的目录，找到 server.js 文件，右键选择 View/Edit > Choose other > Source Editor 进行编辑，修改第 7 行中的端口为你放行的端口。再编辑 .env 文件，添加你的 BING_HEADER。

测试启动：

1
npm20 run start

确定运行没有问题后，按 Ctrl+c 即可停止运行。

使用 pm2 启动并管理：

1
~/.npm-global/bin/pm2 start npm --name bingo -- run start
Refresh-gpt-chat

refresh-gpt-chat

创建并进入 refresh-gpt-chat 的工作目录：

1
mkdir -p ~/domains/refresh-gpt-chat && cd ~/domains/refresh-gpt-chat

下载 refresh-gpt-chat：

1
2
# 本文成文时，refresh-gpt-chat 的最新版本为 0.0.3
wget -O refresh-gpt-chat.jar https://github.com/Yanyutin753/refresh-gpt-chat/releases/download/v0.0.3/refresh-gpt-chat-0.0.3-SNAPSHOT.jar

使用 pm2 启动：

1
~/.npm-global/bin/pm2 start java19 --name refresh-gpt-chat -- -jar refresh-gpt-chat.jar --server.port=端口 --server.servlet.context-path=/ --getAccessTokenUrl=https://你的 ninja 地址/auth/refresh_token --chatUrl=https://你的 ninja 地址/v1/chat/completions

再套域名，接下来就可以直接使用 https://你套的域名/v1/chat/completions/ 当作 API 端点，使用 refresh_token 做 API_Keys，使用 ChatGPT 了。

然后在 one-api 中添加自定义渠道，Base URL 填写你 https://你套的域名，模型填入你的 refresh_token 对应的账号所支持的模型，如果和我一样手持大把 3.5 的账号想用来做 API 用，可以选择全部 GPT3.5 的相关模型，然后在模型重定向中填入以下内容：

1
2
3
4
5
6
7
8
{
  "gpt-3.5-turbo-0301": "gpt-3.5-turbo",
  "gpt-3.5-turbo-0613": "gpt-3.5-turbo",
  "gpt-3.5-turbo-16k": "gpt-3.5-turbo",
  "gpt-3.5-turbo-16k-0613": "gpt-3.5-turbo",
  "gpt-3.5-turbo-1106": "gpt-3.5-turbo",
  "gpt-3.5-turbo-instruct": "gpt-3.5-turbo"
}

密钥填写你的 refresh_token 即可，如果你有多个账号，可以将批量勾选上，然后一行写一个 refresh_token。

gpt4-copilot-java

gpt4-copilot-java

支持 cocopilot 的 ccu 和 copilot 的 ghu 调用 copilot 转 GPT-4 的接口转换工具。Java 写的，可以在 Serv00 运行。依旧是在 Panel 中先开放端口。

部署步骤

新建并进入 gpt4-copilot-java 的工作目录：

1
mkdir -p ~/domains/gpt4-copilot-java && cd ~/domains/gpt4-copilot-java

下载 fat jar 包：

1
2
3
RELEASE_INFO=$(curl -s "https://api.github.com/repos/Yanyutin753/gpt4-copilot-java-sh/releases/latest")
JAR_DOWNLOAD_URL=$(echo "$RELEASE_INFO" | jq -r '.assets[] | select(.name|test(".jar$")) | .browser_download_url')
curl -L -o gpt4-copilot-java.jar "$JAR_DOWNLOAD_URL"

测试运行：

1
2
# 把 PORT 改为自己放行的端口，最后的 server.servlet.context-path 参数可以改成自己喜欢的尾缀
java19 -jar gpt4-copilot-java.jar --server.port=PORT --server.servlet.context-path=/

测试没有问题之后，按 Ctrl+c 即可停止运行。

使用 pm2 启动并管理：

1
~/.npm-global/bin/pm2 start java19 --name gpt4-copilot-java -- -jar gpt4-copilot-java.jar --server.port=PORT --server.servlet.context-path=/

使用示例

始皇的公车：ghu_ThisIsARealFreeCopilotKeyByCoCopilot

免费公车白嫖请求示例：

1
2
3
4
5
6
7
curl --location 'http(s)://ip:port_or_URL/cocopilot/v1/chat/completions' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer ghu_ThisIsARealFreeCopilotKeyByCoCopilot' \
--data '{
"model": "gpt-4",
"messages": [{"role": "user", "content": "鲁迅打周树人"}]
}'
Zfile

ZFile

同理，先放行端口。然后新建并进入 zfile 的工作路径：

1
mkdir -p ~/domains/zfile && cd ~/domains/zfile

下载 fat jar 包：

1
wget --no-check-certificate -O zfile.jar https://c.jun6.net/ZFILE/zfile-release.jar

测试运行：

1
java19 -jar -Duser.timezone=Asia/Shanghai zfile.jar --zfile.log.path=$PWD/logs --zfile.db.path=$PWD/zfile --server.port=PORT

记得把端口改成自己的。测试没有问题之后，按 Ctrl+c 即可停止运行。

使用 pm2 启动并管理：

1
~/.npm-global/bin/pm2 start java19 --name zfile -- -jar -Duser.timezone=Asia/Shanghai zfile.jar --zfile.log.path=$PWD/logs --zfile.db.path=$PWD/zfile --server.port=PORT
Halo

Halo

慎重部署，内存会超 100%，不知道会不会封号

Halo 自从升级 2.0 版本开始，很长时间内都没有提供构筑好的 jar 包，甚至于在 GitHub 上都出现了第三方的，使用 GitHub workflow 自动化构筑 jar 包的仓库：Jar4Halo。但是，自从 2.12.0-alpha.1 版本开始，Halo 的官方仓库又开始提供构筑好的 jar 包了。

部署步骤

先放行一个端口，并新建一个目录用于存放 halo 的相关文件，进入目录后执行下述操作。

下载 jar 包：

1
wget -O halo.jar https://github.com/halo-dev/halo/releases/download/v2.12.0/halo-2.12.0.jar

在面板中新建 MySQL 数据库，用于填入 application.yaml，application.yaml 的全部内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server:
  port: 你在面板中放行的端口
  # Response data gzip.
  compression:
    enabled: false
spring:
  #sql:
  #  init.platform: mysql
  r2dbc:
    url: r2dbc:pool:mysql://数据库地址:3306/数据库名
    username: 数据库用户名
    password: 数据库密码
halo:
  # Your admin client path is https://your-domain/{admin-path}
  admin-path: admin
  # memory or level
  cache: level

在 halo.jar 所在路径下新建 .halo2 文件夹，进入其中，新建文件 application.yaml 然后把上述内容填入其中。

在 halo.jar 所在路径下新建 run.sh 运行脚本，其全部内容为：

1
2
3
4
#!/bin/bash
export HALO_WORK_DIR="$PWD/.halo2"
export HALO_EXTERNAL_URL="https://你的域名"
java17 -server -Xms128m -Xmx256m -jar -Duser.timezone=Asia/Shanghai $PWD/halo.jar --spring.config.additional-location=$PWD/.halo2/application.yaml

测试运行：

1
chmod +x run.sh && ./run.sh

确定运行没有问题后，按 Ctrl+c 即可停止运行。

使用 pm2 管理运行：

1
chmod +x run.sh && ~/.npm-global/bin/pm2 start ./run.sh --name halo
自动续期

自动续期方法

方法一：使用青龙面板

可以用青龙面板的自动任务定期登录 SSH 解决。在青龙面板中添加 Linux 依赖 sshpass，然后添加定时任务：

  • 名称：随意
  • 命令/脚本：
1
sshpass -p '密码' ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -tt 用户名@地址 "exit"
  • 定时规则：1 1 1 * *

这样就会每个月自动 ssh 连接一次，实现续期。

方法二：自身 SSH 自身自动续期

你还可以使用自身 SSH 自身的方式进行自动续期，操作如下：

在 Panel 中找到 File manager 选项卡，进入一个自己喜欢的路径，然后找到上方 Send 按钮左边的 +，选择 New empty file，文件名命名为 auto-renew.sh，右键点击 auto-renew.sh，选择 View/Edit > Source Editor，进行编辑，把下面的代码块的内容都复制进去：

1
2
3
4
5
6
#!/bin/bash

while true; do
  sshpass -p '密码' ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -tt 用户名@地址 "exit" &
  sleep 259200  #30 天为 259200 秒
done

记得把其中的密码、用户名、ssh 的地址修改为你自己的。

保存后回到 SSH 中，进入 auto-renew.sh 所在的路径：

1
cd xxx    #其中 xxx 为你的 auto-renew.sh 文件的存放路径

给 auto-renew.sh 添加可执行权限：

1
chmod +x auto-renew.sh

使用 pm2 启动：

1
~/.npm-global/bin/pm2 start ./auto-renew.sh

这样就会每隔一个月自动执行一次 SSH 连接，自己 SSH 自己进行续期。

自动启动

添加开机自启

在 Panel 中找到 Cron jobs 选项卡，使用 Add cron job 功能添加任务：

Cron 任务配置

  • Specify time 选择 After reboot，即为重启后运行。
  • Form type 选择 Advanced，Command 写：
1
/home/你的用户名/.npm-global/bin/pm2 resurrect

记得把你的用户名改为你的用户名。

添加完之后，在 SSH 窗口保存 pm2 的当前任务列表快照：

1
~/.npm-global/bin/pm2 save

这样每次 serv00 不定时重启任务时，都能自动调用 pm2 读取保存的任务列表快照，恢复任务列表。

]]> https://blog.anxw.cn/posts/6.html 2024-02-08T02:54:00.000Z 3GB 空间 + 不限流量 + 10 年有效期，部署 Alist / VLESS / One-API 等应用，配隧道反代 + PM2 守护 + 自动续期。 用serv00部署Alist以及其它项目 2025-07-16T02:58:26.000Z 安小歪 美化后的效果：

美化效果1

美化效果2

接下来就开始美化吧！

首先你要进入 alist 后台中的设置然后是全局，你会看到自定义头部和自定义内容

我们的自定义头部用来加载一些 css 后期可以自行添加~

ALIST_V3 样式参考 liushen

新版本的 alist 结构发生了变化，不再使用 alist_v2 的样式，请使用 alist_v3 样式

ALIST_V3 自定义头部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 字体引入 -->
<link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />
<link rel="stylesheet"
    href="https://fontsapi.zeoseven.com/7/main/result.css"
    onerror="this.href='https://fontsapi-storage.zeoseven.com/7/main/result.css'" />

<!-- 图标库 Font6 Pro -->
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css">
<link rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css">

<!-- 不蒜子计数器 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!-- 一言 API -->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

ALIST_V3 自定义内容代码

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<div id="customize" style="display: none;">
    <!-- 底部信息栏 -->
    <footer class="copyright" style="margin-top: 3rem; padding: 1rem 0; text-align: center;">
      <!-- 一言 -->
      <p id="hitokoto">你现在的气质里，藏着你走过的路，读过的书和爱过的人。</p>
  
      <!-- 友链 -->
      <div style="margin-bottom: 0rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;">
        <a href="https://xxxx.top/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-home" style="margin-right: 0.4rem;"></i>主页
        </a>
        <a href="https://xxxx.top/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-edit" style="margin-right: 0.4rem;"></i>博客
        </a>
        <a href="https://github.com/shangskr" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fab fa-github" style="margin-right: 0.4rem;"></i>GitHub
        </a>
        <a href="https://xxxx.com/" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fas fa-comment-lines" style="margin-right: 0.4rem;"></i>留言
        </a>
        <a href="/@manage" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: #409EFF;">
          <i class="fa-solid fa-folder-gear" style="margin-right: 0.4rem;"></i>管理
        </a>
      </div>

  
      <!-- 访问统计 -->
      <div style="margin-bottom: 0rem;">
        本<span style="color: #0d6efd;"><a href="#" style="color: #0d6efd; text-decoration: none;">目录</a></span>访问量：
        <span id="busuanzi_value_page_pv" style="color: #0d6efd;"></span> 次，
        总访问量：
        <span id="busuanzi_value_site_pv" style="color: #0d6efd;"></span> 次，
        总访客数：
        <span id="busuanzi_value_site_uv" style="color: #0d6efd;"></span> 人
      </div>

      <!-- 版权信息 -->
      <div style="margin-bottom: 0rem;">
        <i class="fa-solid fa-copyright"></i>
        2021 -
        <script>document.write((new Date()).getFullYear());</script>
        Powered by <a href="https://xxxx.top/" target="_blank" style="text-decoration: none; color: inherit;">安小歪</a>
      </div>

  
      <!-- 运行时间 -->
      <div class="runtime">
        <i class="fa fa-alarm-clock" style="color:#409EFF;"></i>
        <span id="runtime_span"></span>
      </div>
    </footer>
  </div>
  
  <!-- 样式优化 -->
  <style>
  .hope-ui-light {
      --my-color: rgba(255,255,255,0.4);
      --color-main-custom: #ffffff9e;
  }
  .hope-ui-dark {
      --my-color: rgba(0,0,0,0.4);
      --color-main-custom: #2e2e2e70;
  }
  
  * {
      font-family: "Zhuque Fangsong (technical preview)";
      letter-spacing: 2px;
  }
  
  /* 背景里面的 url 可以替换为自己的图片 url 地址 */
  body {
      background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url("https://www.loliapi.com/acg") !important; 
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-attachment: fixed !important;
      background-position-x: center !important;
  }

  /*目录模糊背景*/
  .hope-breadcrumb__list.hope-c-cPYwgm.hope-c-PJLV.hope-c-PJLV-iehpHsP-css {
    background-color: var(--color-main-custom) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* 兼容 Safari */
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
}
  
  /* 列表、Readme 区域透明度 */
  .hope-c-PJLV-igScBhH-css,
  .hope-c-PJLV-ikSuVsl-css,
  .hope-c-PJLV-ieGWMbI-css {
      background-color: #ffffff9e !important;
      backdrop-filter: blur(10px);
  }
  
  .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
      background-color: var(--hope-colors-neutral3) !important;
  }
  
  /* 隐藏顶部 header 和底部 footer 背景 */
  .hope-c-PJLV-idaeksS-css,
  .hope-c-PJLV-ikaMhsQ-css {
      background: none !important;
  }
  
  .footer.hope-stack {
      display: none !important;
  }
  
  ::selection {
      background: #fbc2eb;
      color: #fff;
  }
  
  .copyright a,
  .copyright .by {
      text-decoration: none;
  }
  
  .copyright .by {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
  }
  
  .copyright a:hover {
      color: pink;
  }
  
  .copyright .run_item {
      display: flex;
      align-items: center;
      margin: 10px;
  }
  
  .copyright .link {
      padding: 4px;
      background: #479fff96;
      backdrop-filter: blur(10px);
      border-radius: 0 8px 8px 0;
  }
  
  .copyright .name {
      padding: 4px;
      backdrop-filter: blur(10px);
      background: var(--color-main-custom);
      border-radius: 8px 0 0 8px;
  }
  
  .copyright {
      padding: 50px;
  }
  
  .runtime {
      width: 100%;
      padding: 0px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  </style>
  
  <!-- 脚本逻辑 -->
  <script>
      // 站点运行时间
      function show_runtime() {
          window.setTimeout("show_runtime()", 1000);
          const X = new Date("11/28/2022 14:00:00");  //这里填写你的建站时间
          const Y = new Date();
          let T = (Y.getTime() - X.getTime());
          const M = 24 * 60 * 60 * 1000;
          let a = T / M;
          let A = Math.floor(a);
          let b = (a - A) * 24;
          let B = Math.floor(b);
          let c = (b - B) * 60;
          let C = Math.floor(c);
          let D = Math.floor((c - C) * 60);
          document.getElementById('runtime_span').innerHTML = "本站已运行 " + A + "天" + B + "小时" + C + "分" + D + "秒";
      }
      show_runtime();
  
      // 延迟加载逻辑
      let interval = setInterval(() => {
          const bodyContainer = document.querySelector(".body.hope-stack");
          if (bodyContainer) {
              bodyContainer.appendChild(document.getElementById("customize"));
              document.getElementById("customize").style.display = "block";
              clearInterval(interval);
          }
      }, 200);
  
      // 鼠标点击爱心特效
      !function (e, t, a) {
          function r() {
              for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
              requestAnimationFrame(r)
          }
  
          function n() {
              var t = "function" == typeof e.onclick && e.onclick;
              e.onclick = function (e) {
                  t && t(), o(e)
              }
          }
  
          function o(e) {
              var a = t.createElement("div");
              a.className = "heart", s.push({
                  el: a,
                  x: e.clientX - 5,
                  y: e.clientY - 5,
                  scale: 1,
                  alpha: 1,
                  color: c()
              }), t.body.appendChild(a)
          }
  
          function i(e) {
              var a = t.createElement("style");
              a.type = "text/css";
              try {
                  a.appendChild(t.createTextNode(e))
              } catch (t) {
                  a.styleSheet.cssText = e
              }
              document.head.appendChild(a)
          }
  
          function c() {
              return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
          }
  
          var s = [];
          e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
              setTimeout(e, 1e3 / 60)
          };
  
          i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
      }(window, document);
  </script>

替换自定义头部中的所有内容

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!-- Alist V3 建议添加的，已经默认添加了，如果你的没有建议加上 -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script＞

<!-- 引入字体，全局字体使用 -->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

<!--不蒜子计数器-->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script＞

<!-- 评论系统使用的 js -->
<link rel="stylesheet" href="https://npm.onmicrosoft.cn/@waline/client/dist/waline.css" />
<script src="https://npm.onmicrosoft.cn/@waline/client/dist/waline.js"></script＞

<!-- Font6，自定义底部使用和看板娘使用的图标和字体文件-->
<link type='text/css' rel="stylesheet" href="https://npm.elemecdn.com/font6pro@6.0.1/css/fontawesome.min.css"
    media='all'>
<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">

<!-- 音乐播放器所用的文件 -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script＞
<!-- require MetingJS -->
<script src="https://npm.elemecdn.com/meting@2.0.1/dist/Meting.min.js"></script＞

<!-- 站点运行时间 -->
<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("11/28/2022 14:00:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "本站已运行 " + A +  "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script＞

<style>
    /* 去除通知栏 右上角 X */
    .notify-render .hope-close-button {
        display: none;
    }

    /* 白天背景图 */
    .hope-ui-light {
        background-image: url(https://xxxx.png) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /* 夜间背景图 */
    .hope-ui-dark {
        background-image: url(https://xxxx.png) !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position-x: center;
    }

    /* 主列表夜间模式透明，50% 这数值是控制透明度大小的 */
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /* readme 夜间模式透明，50% 这数值是控制透明度大小的 */
    .hope-c-PJLV.hope-c-PJLV-iiuDLME-css {
        background-color: rgb(0 0 0 / 50%) !important;
    }

    /* 主列表透明 */
    .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* readme 透明 */
    .hope-c-PJLV.hope-c-PJLV-ikSuVsl-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* 顶部右上角切换按钮透明 */
    .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* 右下角侧边栏按钮透明 */
    .hope-c-PJLV-ijgzmFG-css {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    /* 白天模式代码块透明 */
    .hope-ui-light pre {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* 夜间模式代码块透明 */
    .hope-ui-dark pre {
        background-color: rgba(255, 255, 255, 0) !important;
    }

    /* 底部 CSS，.App .table 这三个一起的 */
    dibu {
        border-top: 0px;
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .App {
        min-height: 85vh;
    }

    .table {
        margin: auto;
    }

    /* 去掉底部 */
    .footer {
        display: none !important;
    }

    /* 全局字体 */
    * {
        font-family: LXGW WenKai
    }

    * {
        font-weight: bold
    }

    body {
        font-family: LXGW WenKai;
    }
/*以下为 waline 评论系统专用*/
/*适配大小契合度*/
.comments {
    width: min(96%, 940px);
    flex-direction: column;
    row-gap: var(--hope-space-2);
    border-radius: var(--hope-radii-xl);
    padding: var(--hope-space-2);
    box-shadow: var(--hope-shadows-lg);
}
/*评论区 - 白天模式透明度*/
.hope-ui-light .comments {
    background-color: rgba(255, 255, 255, 0.8)!important;
}
/*评论区 - 夜间模式透明度*/
.hope-ui-dark .comments {
    background-color:rgb(0 0 0 / 80%)!important;
}
/* waline 评论系统右侧的 gif */
.wl-editor, .wl-input {
    background-size: contain!important;
}
#wl-edit {
    background: url(https://hexo.anxy.top/img/waline-bg.gif) 100% 100% no-repeat;
}

/*Waline 表情自适应*/
.wl-emoji-popup{
    width: 100%;
}
 
/*渐变背景 CSS*/
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
 
.hope-c-PJLV-iiHckfM-css{
    min-height: 20vh!important;
}

/*音乐播放器进一步进行隐藏*/
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0!important;
}
</style>

<!-- 看板娘 -自定义大小，隐藏对话框和对话框高度 -->
<style type="text/css">
    #waifu #live2d {
        height: 350px !important;
        width: 350px !important;
    }

    #waifu-tips {
        top: -60px;
        /*display:none !important;隐藏对话框*/
    }
</style>

<!-- 看板娘加载指定模型 -->
<script＞
    localStorage.setItem('modelId', '7');
    localStorage.setItem('modelTexturesId', '3');
</script＞

<!-- 看板娘 -->
<script src="https://xxxxxx.js"></script＞

waline 的表情适配 css 是由SZ・Ninty提供的，从前我以为这是个 bug

替换自定义内容中的所有内容

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
    <div>
        <!--音乐播放器-->
        <meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="QQ 音乐或者网易云的链接"></meting-js>
 
        <!--评论模块还有下面的 script 也是-->
        <center>
            <div class="comments" id="waline"></div>
        </center>
        <script＞
            Waline.init({
                el: '#waline',
                serverURL: '',
                search: false,
                meta: ["nick", "mail", "link"],
                requiredMeta: ["nick", "mail"],
                locale:{
                    placeholder: ''
                },
                emoji: []
            });
        </script＞
 
        <br />
        <center class="dibu">
            <div style=" line-height: 30px;font-size: 13pt;font-weight: bold;">
                <span style="color: rgb(255, 255, 255); font-weight: bold;" id="hitokoto">
                    <a href="#" id="hitokoto_text">
                        "一言 API 没有请求到啦~~"
                    </a>
                </span>
                <p style="margin-left: 10rem;font-size: 8pt;">
                </p>
            </div>

            <div style="font-size: 16px; font-weight: bold;">
                <!-- 友链信息 -->
                <span class="nav-item">
                    <a class="nav-link" href="https://hexo.anxy.top/about/" target="_blank">
                        <i class="fas fa-home" style="color:#409EFF" aria-hidden="true">
                        </i>
                        主页 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://hexo.anxy.top/" target="_blank">
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
                        </i>
                        博客 |
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://github.com/shangskr" target="_blank">
                        <i class="fab fa-github" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        GitHub 
                    </a>
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://xxxx.com/" target="_blank">
                        <i class="fas fa-comment-lines" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        留言 |
                    </a>
                </span>
                <!--后台入口-->
                <span class="nav-item">
                    <a class="nav-link" href="/@manage" target="_blank">
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        管理
                    </a>
                </span>
                <br />
                <!-- 版权信息 -->
                <span class="nav-item">
                    <i class="fa-solid fa-copyright" style="color:#409EFF;" aria-hidden="true">
                    </i>
                    2021-<script type="text/javascript">document.write((new Date()).getFullYear());</script＞ Powered by
                    <a class="nav-link" href="https://hexo.anxy.top/" target="_blank">
                        <i style="color:#409EFF;" aria-hidden="true">
                            安小歪
                        </i>
                    </a>
                </span>
                <br />
                <!--添加一个访问量-->
                <span>
                本"
                    <span style="color: rgb(13, 109, 252); font-weight: bold;"><a href="#">目录</a>
                    </span>
                "访问量 
                    <span id="busuanzi_value_page_pv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 次 
                本站总访问量 
                    <span id="busuanzi_value_site_pv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 次 
                本站总访客数 
                    <span id="busuanzi_value_site_uv" style="color: rgb(13, 109, 252); font-weight: bold;">
                    </span> 人
                <br />
                <!-- 站点运行时间 -->
                <i class="fa fa-alarm-clock" style="color:#409EFF" aria-hidden="true">
                </i>
                <span class="nav-item" id="runtime_span" style="color: rgb(255, 255, 255); font-weight: bold;">
                </span>
            </div>

        </center>
        <br />
        <br />
    </div>

    <!--一言 API-->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script＞
    <!-- 延迟加载配套使用 JS -->
<script＞
    let interval = setInterval(() => {
        if (document.querySelector(".footer")) {
            document.querySelector("#customize").style.display = "";
            clearInterval(interval);
        }
    }, 200);
</script＞

<!-- 网页鼠标点击特效 - 爱心 -->
<script type="text/javascript">
    ! function (e, t, a) {
        function r() {
            for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }
        function n() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function (e) {
                t && t(), o(e)
            }
        }

        function o(e) {
            var a = t.createElement("div");
            a.className = "heart", s.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }), t.body.appendChild(a)
        }

        function i(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch (t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                .random()) + ")"
        }
        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
            .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                setTimeout(e, 1e3 / 60)
            }, i(
                ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
            ), n(), r()
    }(window, document);
</script＞

里面的评论系统自行配置

评论的修改折叠栏的效果

SZ・Ninty帮我提供了直接引入首页底部的效果，因为我引入的是 waline 评论系统感觉引入以后有点大 emmm
上面自定义内容中的评论系统就是直接引入的，如果喜欢可以用这个
下面是我心心念念的折叠栏效果（用.toggle-comments 类定义了一个按钮样式，#comment-section 定义了评论区域的样式，将其初始状态设置为 display: none; 以隐藏评论内容。）

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<style>
  .toggle-comments {
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #comment-section {
    display: none;
    margin-top: 10px;
  }
</style>

<div id="comments">
  <button class="toggle-comments" onclick="toggleComments()">显示评论</button>
  <div id="comment-section">
    <!--评论模块还有下面的 script 也是-->
        <center>
            <div class="comments" id="waline"></div>
        </center>
        <script＞
            Waline.init({
                el: '#waline',
                serverURL: '',
                search: false,
                meta: ["nick", "mail", "link"],
                requiredMeta: ["nick", "mail"],
                locale:{
                    placeholder: ''
                },
                emoji: []
            });
        </script＞ -->
  </div>
</div>

<script＞
  function toggleComments() {
    var commentSection = document.getElementById("comment-section");
    var toggleButton = document.querySelector(".toggle-comments");
    
    if (commentSection.style.display === "none") {
      commentSection.style.display = "block";
      toggleButton.innerHTML = "隐藏评论";
    } else {
      commentSection.style.display = "none";
      toggleButton.innerHTML = "显示评论";
    }
  }
</script＞

折叠栏的这个评论你还需要添加 css 如下：

这个是评论按钮透明效果

1
2
3
4
/* 评论按钮透明 */
   .toggle-comments {
       background-color: rgba(255, 255, 255, 0.5) !important;
   }

还需要添加以下两个 css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 评论折叠居中 css -->
<style>
  .toggle-comments {
    color: #24292e;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }

  #comment-section {
    display: none;
    margin-top: 10px;
  }
</style>

<!-- 评论按钮线条消失术 -->
<style>
   button:focus {
    outline: none !important;
}
</style>

搜索栏美化代码

带毛玻璃效果

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
32
33
34
35
36
37
38
39
<style>
/*白天模式 搜索主体 + 毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索栏输入框 + 毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索按钮 + 毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
   padding: var(--hope-space-1)!important;
}

/*夜间模式搜索主体 + 毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式搜索栏 + 毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式 搜索按钮 + 毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
    padding: var(--hope-space-1)!important;
}
</style>

不带毛玻璃效果

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
32
33
<style>
/*白天模式 搜索主体*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
}

/*白天模式 搜索栏输入框*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background-color: rgba(255,255,255,0.2)!important;
}

/*白天模式 搜索按钮*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.2)!important;
   padding: var(--hope-space-1)!important;
}

/*夜间模式搜索主体*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
}

/*夜间模式搜索栏*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background-color: rgb(0 0 0 / 10%)!important;
}

/*夜间模式 搜索按钮*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    padding: var(--hope-space-1)!important;
}
</style>

网页点击鼠标特效（两个）

核心价值观关键字

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
32
33
34
35
36
37
38
39
40
41
42
43
<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script＞
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
                "❤敬业❤", "❤诚信❤", "❤友善❤");
            var heart = document.createElement("b"); //创建 b 元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将 b 元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给 p 元素设置样式

            var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script＞

冒爱心

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!-- 网页鼠标点击特效 - 爱心 -->
<script type="text/javascript">
         ! function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                        e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                    "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(), o(e)
                }
            }
 
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart", s.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: c()
                }), t.body.appendChild(a)
            }
 
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
 
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                    .random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
                .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                    setTimeout(e, 1e3 / 60)
                }, i(
                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
                ), n(), r()
        }(window, document);
    
</script＞

樱花效果

添加在自定义内容中

1
2
3
4
<!-- PC 端下樱花效果 -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.pjax/2.0.1/jquery.pjax.min.js"></script＞
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/nprogress/0.2.0/nprogress.min.js"></script＞
<script src="https://cdn.qqsuu.cn/api/js/hua.js"></script＞

美化方案参考：Alist V3 从入门到跑路

]]> https://blog.anxw.cn/posts/5.html 2023-08-14T12:52:05.000Z 自定义字体、毛玻璃背景、鼠标特效、看板娘、评论集成，代码开箱即用，让 AList 界面更清爽好看。 Alist美化教程 2025-05-06T02:58:26.000Z 安小歪 后端部署概览

后端部署目前提供 GitHub、Server、Docker 三种方式，数据库可以选择 LeanCloud、MySQL、SQLite、MongoDB。

自 5.x 版本以后，LeanCloud 不再作为默认存储，改为更简单易用的 SQLite 作为默认。(这里数据库不建议用 SQLite)

LeanCloud 存储MySQL 存储SQLite 存储MongoDB 存储
GitHub 部署github+leancloudgithub+mysqlgithub+sqlite(默认选项)github+mongodb
Server 部署server+leancloudserver+mysqlserver+sqliteserver+mongodb
Docker 部署docker+leanclouddocker+mysqldocker+sqlitedocker+mongodb

部署方法：GitHub + Vercel + MongoDB

Fork 项目仓库

Fork 友链朋友圈的项目仓库，地址：友链朋友圈项目仓库

注意：如果前端部署采用 带管理面板的前端方案，则 Fork 时不要修改仓库名称，否则会导致管理面板部分功能不可用。

编辑配置文件

编辑 /hexo_circle_of_friends/fc_settings.yaml 文件，需要修改的配置如下：

1
2
LINK:
    - {link: "https://www.yyyzyyyz.cn/link/", theme: "butterfly"}  # link改为你的友链页地址，theme选择你的博客主题

添加 GitHub Secrets

点击仓库的 Settings → Secrets → New repository secret

添加 2 个环境变量 Secret：

变量名值说明
MONGODB_URIMongoDB 提供的数据库链接（以 mongodb+srv 开头或 mongodb 开头）
STORAGE_TYPE存储方式，填写 mongodb

配置完成后，应该如下图所示：

配置示例

开启 GitHub Actions 权限

点击仓库的 Settings → Actions → General → 勾选 Read and write permissions → Save

部署到 Vercel

  1. 前往 Vercel 官网，直接用 GitHub 创建账号并用手机号绑定
  2. 点击 New Project 新建项目
  3. 找到 Import Git Repository，选择你刚刚 Fork 的仓库，点击 Import

添加 Vercel 环境变量

添加以下环境变量：

变量名说明
GH_NAME你的 GitHub 用户名
GH_EMAIL你的 GitHub 邮箱
GH_TOKENGitHub Token，获取方法见 这里的 README.md
MONGODB_URIMongoDB 数据库链接
VERCEL_ACCESS_TOKENVercel Token，获取方法见下方

VERCEL_ACCESS_TOKEN 获取方法：

  1. 点击 Vercel 页面右上角的 Settings → Tokens → Create
  2. 随便输入一个名称后，点击 CREATE TOKEN
  3. 复制生成的 token，添加到 Vercel 环境变量中即可

添加完成后，应该如下图所示：

环境变量配置

重要提示：2022-8-27，*.vercel.app 在中国大陆遭遇污染导致无法访问，友链朋友圈的 Vercel 部署也会受到影响，可以通过解析到自定义域名来解决，或者切换部署方式。

配置友链列表（可选）

回到 GitHub，打开刚才 Fork 的项目，编辑 hexo_circle_of_friends/fc_settings.yaml这里我们需要手动添加SETTINGS_FRIENDS_LINKS因为我们的hexo友链魔改过了所以不会自动爬取

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
32
33
34
35
36
37
# 配置项友链
# enable：# 是否启用配置项友链 true/false（针对还未适配主题或者有定制需求的用户）
# json_api：通过json格式配置友链，详见：https://fcircle-doc.yyyzyyyz.cn/#/developmentdoc?id=配置项json友链
# list字段填写格式：["name", "link", "avatar","suffix"]，其中：
#       name：必填，友链的名字
#       link：必填，友链主页地址
#       avatar：必填，头像地址
#       suffix：选填，自定义订阅后缀，主要针对不规范的网站订阅后缀，见示例2
SETTINGS_FRIENDS_LINKS: {
    enable: true,
    json_api: "",
    list: [
        # 示例1：
        # ["贰猹の小窝", "https://noionion.top/", "https://pub-noionion.oss-cn-hangzhou.aliyuncs.com/head.jpg"],
        # ["Akilarの糖果屋", "https://akilar.top/", "https://akilar.top/images/headimage.png"],
        # 示例2：使用suffix的配置如下
        # 程序目前自动获取 "atom.xml", "feed/atom", "rss.xml", "rss2.xml", "feed", "index.xml" 这些后缀
        # 如果目标地址的后缀不在其中，就可以在这里添加
        # 比如 https://elizen.me/hello.xml ，填写：
        # ["elizen", "https://elizen.me/", "https://akilar.top/images/headimage.png", "hello.xml"]
        ["九弦之屋", "https://blog.sinzmise.top/", "https://sinzmiseblog.netlify.app/img/avatar.png"],
        ["千寻", "https://blog.qianxun7747.eu.org/", "https://cdn.staticaly.com/gh/qianxun7747/picx-images-hosting@master/xxx/tx.63ep7yknivg0.jpg"],
        ["福福不服", "https://ffbf.top/", "https://ffbf.top/upload/logo3.jpeg"],
        ["轻笑Chuckle", "https://www.qcqx.cn/", "https://www.qcqx.cn/img/head.webp"]
    ]
}

# get links from gitee
# 从gitee issue中获取友链
GITEE_FRIENDS_LINKS: {
    enable: false, # true 开启gitee issue兼容
    type: "normal",  # volantis/stellar用户请在这里填写volantis
    owner:  "ccknbc",  # 填写你的gitee用户名
    repo:  "blogroll",  # 填写你的gitee仓库名
    state:  "open",  # 填写抓取的issue状态(open/closed)
}

启用 GitHub Actions

  1. 回到 GitHub，启用 Fork 后仓库的 GitHub Action：Actions → I understand my workflows, go ahead and enable them
  2. 点击 update-friends-posts 并启用 workflow
  3. 点击 Run workflow → Run workflow 进行第一次运行
  4. 等待运行完毕后，仓库应该会上传 data.db，并且 Vercel 也会同步更新

前端部署概览

前端采用 安知鱼方案

安装插件

在博客根目录 [Blogroot] 下打开终端，运行以下指令：（与旧版前端方案不兼容，如有安装旧版请先卸载,这里我只运行了第一个插件，请自行选择）

1
2
3
npm uninstall hexo-butterfly-fcircle --save
npm uninstall hexo-filter-fcircle --save
npm install hexo-filter-fcircle-anzhiyu --save

添加配置信息

在站点配置文件 _config.yml 或者主题配置文件（如 _config.butterfly.yml）中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# fcircle
# see https://anheyu.com/posts/3753.html
fcircle:
  enable: true #控制开关
  apiurl: https://friends.anxy.top/ #api地址
  initnumber: 30 #【可选】页面初始化展示文章数量
  stepnumber: 30 #【可选】每次加载增加的篇数
  css: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/css/default.css #【可选】开发者接口，自定义css链接
  js: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/fcircle.js #【可选】开发者接口，自定义js链接
  fetchJs: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/fetch.js
  randomFriendsPostJS: https://npm.elemecdn.com/hexo-filter-fcircle-anzhiyu@1.1.2/assets/js/random-friends-post.js
  topIcon: fas fa-arrow-right
  topLink: /about/
  top_background: https://hexo.anxy.top/img/guangyu.jpg
  path: /fcircle #【可选】fcircle的路径名称。默认为 fcircle，生成的页面为 fcircle/index.html
  front_matter: #【可选】fcircle页面的 front_matter 配置
    title: 朋友圈
    comments: false
    aside: false
    top_img: false

插件参数释义

参数备选值/类型释义
enabletrue/false控制开关
apiurlURLapi 链接，配置教程参看 后端部署文档
initnumbernumber页面展示文章数量，默认 20
stepnumbernumber每次加载增加的篇数，默认 10
error_imgURL头像图片加载失败时的默认头像
cssURL自定义 css 链接
jsURL自定义 js 链接
fetchJsURL自定义 fetchJs 链接
randomFriendsPostJSURL自定义 randomFriendsPostJS 链接
pathstringfcircle 的路径名称，默认为 fcircle
topIconstring顶部按钮的图标类名
topLinkURL顶部按钮点击跳转的链接（仅支持 pjax 跳转）
front_matterobjectfcircle 页面的 front_matter 配置
top_backgroundURL页面顶部模块背景图

顶部图片样式修改

可以通过配置项 top_background 修改背景图。

添加到导航菜单

最后添加到主题文件的 _config.yml 中的 menu:

1
朋友圈: /fcircle/ || fas fa-users
]]> https://blog.anxw.cn/posts/4.html 2023-08-06T02:58:26.000Z 自动聚合好友博客最新文章，后端 GitHub+Vercel+MongoDB，前端 Hexo 插件集成，配置简单，支持手动/自动同步。 为hexo加一个朋友圈 2023-08-06T02:58:26.000Z 安小歪 首先准备一个域名，一个邮箱。

Backblaze 的服务器在国外，所以打开会慢 emmmm，那么就科学上网（当然不科学上网也可以打开的，那你就看运气吧！）

前期准备

  1. 在 Cloudflare 注册并将你的域名加入。（如果不会的话可以看看我以前的文章有说明哦~）
  2. 在 Backblaze 注册一个账号，并新建一个 bucket，记得 Files in Bucket are: 这里选 public 就好，就是公开桶。（不然别人无法看到你的图片）

避坑： Backblaze 都是公开的所以大部分不要填写自己的真实信息！！！其实也没什么。

打开 Backblaze 开始配置

配置 Cloudflare 与 Backblaze

获取友好链接

这里我用 Cloudflare 演示，首先随便上传一个照片，注意要用到下图的这个友好链接的哦~

友好链接位置

添加 DNS 记录

打开 Cloudflare 控制页面，找到 DNS 记录，设置如下图填写添加一个记录：

DNS 记录设置

这一步好了以后基本可以用了。

现在将 Backblaze 链接里面的域名：

  • https://f004.backblazeb2.com/file/tuchuang123/B2%2BCF/03.webp

改为：

  • https://b2.anxy.top/file/tuchuang123/B2%2BCF/03.webp

（这样，就可以通过 Cloudflare 来访问了）

注意： 图床链接最好用 Backblaze 提供的友好链接，然后需要手动换成自己设置的链接，这样就可以了。（如果还是用原来的，岂不是什么也没做）

利用 Cloudflare 缓存突破访问限制

这样基本完成，但是 Backblaze 每天有一定的访问次数限制，这样的话我们利用 Cloudflare 的超强缓存就可以做到无限回流了（无限白嫖哦~亲测有效）。

打开 Cloudflare 缓存时间设置。这里可以在 Cloudflare 设置也可以在 Backblaze 设置，当然我都设置了的：

缓存设置

接下来在 Cloudflare 设置一个转换规则（因为图床的链接还是不够简化，用这个转换规则就可以使它更简洁了呢），如图：

转换规则 1

转换规则 2

转换规则表达式：concat(“/file/tuchuang123”,http.request.uri.path)

这里的 /file/ 后面改成你自己的桶名

这样子原链接：

  • https://f004.backblazeb2.com/file/tuchuang123/B2%2BCF/03.webp

就可以通过：

  • https://b2.anxy.top/B2%2BCF/03.webp

来访问了。

在 Backblaze 中设置缓存周期

缓存周期设置 1

缓存周期设置 2

配置上传工具

用网页上传也不是个办法啊，那么就用这个：

创建 App Key

点击 App keys，添加一个新的 key，bucket 就选你刚创建的那个，记录下你的密钥，之后要在 ShareX 中用！！！

App Key 设置

配置 ShareX

大概就这样了，配置 ShareX，配置好就好了：

ShareX 配置

扩展工具

（来自 CSDN）

假如你是用的 Typecho，还可以使用上传插件实现自动上传，无需登录 Backblaze：

另： Backblaze 支持 S3，所以你用 PicGo 等软件上传的话，只需要添加个 S3 插件就可以了。

]]> https://blog.anxw.cn/posts/3.html 2023-05-21T13:23:01.000Z Backblaze 存储 + Cloudflare 加速 + 自定义域名，搭建免费不限流量图床，支持 ShareX / PicGo 一键上传。 用backblaze+cloudflare搭建免费图床 2023-05-21T13:23:01.000Z 安小歪 RDPWrap 是什么

GitHub 上面介绍很详细，地址：

所有使用的工具下载地址

注： 如果打不开，请把链接中的 lanzouf 中的 f 更改为 x 或者 i 等等就可以打开了

安装 RDPWrap-v1.6.2

解压安装包后以管理员身份运行 install.bat（用来安装配置）

安装步骤1

启动以后等待出来红色方框里面的内容按任意键退出

安装步骤2

启动 RDPConf.exe（此文件用来检测上一步是否安装成功）

启动检测

打开以后方框内的红色文字一致就说明安装完成（下面勾选的要和图片一致）

检测成功

当微软更新补丁以后，都需要检测一下是否破解有效。如果解锁无效，需要以管理员身份运行下图的 update 程序，然后再检测是否有效

更新程序

下图的 uninstall 命令是用来解除 Windows 多开功能，恢复原始状态（需要以管理员身份运行）

卸载程序

当满足下图方框内的文字时就说明破解成功了，就可以多开 Windows 连接了

破解成功

启动 RDPConf.exe 后可能会遇到 “not supported”

这是配置的问题，需要解决。

not supported 错误

运行安装 install.bat 会在 C:\Program Files\RDP Wrapper 下面生成 2 个文件：rdpwrap.dll，rdpwrap.ini（配置文件）

生成的文件

10.0.17763.1 是系统版本，是需要编写成系统匹配的版本时，这个配置文件才会加载系统 termsrv.dll

查看系统版本号

Windows+R 输入 winver，如果系统版本在配置文件中没有就需要手动编写或直接在 GitHub 上复制其他人的系统配置文件

查看版本

rdpwrap.ini 配置文件写入生成

手动配置

在 GitHub issues 上面查找到与自己系统匹配的版本，复制配置文件脚本到自己的 rdpwrap.ini 文件中

地址：https://github.com/stascorp/rdpwrap/issues

找到支持的就可以

GitHub Issues

注意： rdpwrap.ini 配置文件修改后需要重新启动服务才能生效

  • 停止服务：net stop termservice
  • 启动服务：net start termservice

Windows+R 输入 cmd，打开以后重新启动服务：如图

重启服务

然后 “not supported” 的问题就解决了

使用 rdpwup 自动生成

启动 rdpwup.exe，等待工具自动扫描，然后点击 update，会自动在 C:\Program Files\RDP Wrapper\rdpwrap.ini 文件中自动生成配置信息

rdpwup 工具

自动生成配置信息

自动生成配置

重启服务，启动 RDPConf.exe

重启后检测

以上两种方法用来解决 “not supported”

当运行 RDPConf.exe 看到的是 “fully supported”，就破解成功了。可以实现多用户登入一台电脑。

提示： 多用户登入一台电脑，如果需要限制硬盘（文件）的使用权限请另外对用户进行设置！

]]> https://blog.anxw.cn/posts/2.html 2023-01-07T04:58:39.000Z 解锁 Windows 远程桌面多用户同时登录，家庭版/专业版都能用。含安装步骤、配置检测，以及 "not supported" 报错的两种修复方法。 RDPWrap破解Windows多用户远程桌面 2023-01-07T04:58:39.000Z 安小歪 Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

]]> https://blog.anxw.cn/posts/1.html 2022-11-28T05:47:59.000Z Hexo 博客四条命令上手：新建文章、启动预览、生成静态、一键部署，附官方文档链接。 Hello World 2022-11-28T05:47:59.000Z