路由器管理后台，未必只能是单调的灰白界面。

luci-theme-cyberpunk 是一款为 OpenWrt LuCI 打造的深色主题。它以赛博朋克 HUD 为设计语言，将电青、玫红和状态绿融入导航、表单、表格、弹窗与系统状态，让每天都要打开的管理界面拥有更鲜明的个性，同时保留 LuCI 熟悉的操作方式。

如果你正在搭建一台OpenWrt软路由、家庭网关或旁路由，希望它不仅稳定实用，也能在视觉上更符合自己的桌面风格，那么这个主题值得一试。

第一眼：进入赛博空间

主题登录页采用深色 HUD 背景与专属 Cyberpunk 标识。高对比度的电青线条和玫红点缀带来明确的视觉焦点，又没有让装饰元素盖过登录操作本身。

进入 LuCI 后，主题会将同一套视觉语言延伸至状态总览、顶部导航、侧边菜单、信息卡片和数据表格。熟悉的功能仍在原来的位置，但整个控制台获得了更完整、更统一的深色观感。

不只是“换个背景”

luci-theme-cyberpunk 并非简单叠加一张壁纸，而是一套独立的 LuCI 主题包。当前版本已经覆盖：

• LuCI 导航与菜单；
• 表单、按钮和输入控件；
• 状态卡片与数据表格；
• 弹窗及提示元素；
• 登录页面；
• 不同状态的颜色反馈。

整体采用深色优先配色。电青用于主要交互与结构强调，玫红负责视觉点缀，绿色用于状态提示。三种颜色共同构成赛博朋克氛围，同时让不同类型的信息更容易区分。

桌面与移动端，都保持同一种风格

路由器后台并不只会在电脑上打开。临时查看设备状态、调整无线设置或者重启服务时，手机往往更加方便。

luci-theme-cyberpunk 针对响应式界面进行了适配。在较窄的屏幕上，登录区域、导航和内容布局会随可用空间调整，尽量保持信息清晰与操作顺手。

移动端登录页	移动端状态页

无论是在桌面浏览器中管理整套网络，还是用手机快速检查状态，都可以获得一致的视觉体验。

独立架构，便于安装与维护

对于开发者和喜欢折腾 OpenWrt 的用户，这个主题也保持了清晰的项目结构：

• 独立软件包：luci-theme-cyberpunk；
• 独立 ucode 模板目录：themes/cyberpunk；
• 独立静态资源目录：/luci-static/cyberpunk；
• 独立菜单模块：menu-cyberpunk；
• 独立 UCI 配置命名空间：cyberpunk；
• 壁纸 RPC helper：luci.cyberpunk_wallpaper。

主题资源与配置均使用独立命名空间，便于在 OpenWrt buildroot 中作为普通 LuCI 软件包构建和维护。

安装主题

前往 GitHub Releases 下载与你的 OpenWrt 版本匹配的软件包，然后将文件上传到设备并通过终端安装。

OpenWrt 24.10 及以前版本

opkg install luci-theme-cyberpunk-*.apk

OpenWrt 24.10 之后的版本

由于签名密钥问题，需要允许安装未受信任的本地 APK 软件包：

apk add --allow-untrusted luci-theme-cyberpunk-*.apk

安装完成后，进入 LuCI 的主题设置页面，选择 Cyberpunk 并保存即可。

安装前请确认软件包与设备架构和系统版本匹配。建议保留一个可用的 SSH 会话，以便在界面配置异常时进行检查或恢复。

从源码构建

如果你维护自己的 OpenWrt 固件，可以将 luci-theme-cyberpunk 放入 OpenWrt buildroot 的 package feed，并按普通 LuCI 软件包进行编译：

make package/luci-theme-cyberpunk/compile V=s

给熟悉的 LuCI，换一种表达方式

一款好的主题不应改变工具的核心用途，而应让信息更清楚、操作更愉快，也让设备真正带有使用者自己的风格。

luci-theme-cyberpunk 保留了 LuCI 的功能与操作逻辑，并用克制的 HUD 设计重新组织视觉体验。从登录路由器的第一屏，到每天查看的系统状态，它都在提醒你：网络基础设施也可以拥有属于自己的美学。

现在，让你的 OpenWrt 控制台进入赛博空间。

Artitalk v3 的数据存储、账号登录和内容操作都依赖 LeanCloud。但 LeanCloud 即将停止服务，这意味着仍在使用 Artitalk v3 的站点将无法继续正常读取和写入数据。

与此同时，原项目 ArtitalkJS/Artitalk 已经不再更新，无法等待上游提供新的后端方案。

因此，我在原项目的基础上继续维护 Artitalk，并完成了这次 v4 更新。

Artitalk 仍然是那个可以嵌入博客的轻量级“说说”组件。发布动态、Markdown/HTML 渲染、图片和视频内容、评论、登录与删除等主要功能都得到了保留。不过，从 v4 开始，Artitalk 不再需要 LeanCloud 的 appId 和 appKey，而是通过一个由用户自行部署的 Vercel 服务端运行。

v4 的新架构

Artitalk v4 采用以下结构：

博客页面中的 Artitalk        ↓Vercel Serverless API        ↓Neon Postgres

前端不再直接操作数据库，而是将登录、查询、发布、编辑、删除和评论请求发送到 Vercel 服务端。服务端负责访问 Neon Postgres，并将结果转换成前端能够识别的数据格式。

这套方案有几个直接的变化：

• Vercel 负责运行 Artitalk 的服务端 API；
• Neon Postgres 负责保存说说、评论和管理员数据；
• 管理员用户名、密码和数据库连接信息通过 Vercel 环境变量配置；
• 可以使用 ALLOW_ORIGIN 限制允许访问接口的博客域名；
• 前端只需要配置公开的 serverURL。

新的前端配置如下：

<script src="https://unpkg.com/@hclonely/artitalk"></script><div id="artitalk_main"></div><script>new Artitalk({  backend: 'vercel',  serverURL: 'https://your-vercel-app.vercel.app'})</script>

其中，serverURL 是部署后的 Vercel 项目地址，不是 Neon 数据库连接字符串。

历史数据可以继续保留

架构迁移最重要的问题不是部署新服务，而是如何带走旧数据。

Artitalk v4 提供了专门的 LeanCloud 数据迁移入口。用户可以从 LeanCloud 控制台导出旧应用数据，然后上传以下两个文件：

• shuoshuo.0.jsonl：已经发布的说说；
• atComment.0.jsonl：说说下的评论。

迁移程序会将数据写入 Neon，并尽量保留原有的 objectId、createdAt、updatedAt 和其他业务字段。这样不仅可以保留历史发布时间，也可以继续维持评论与说说之间的关联。

LeanCloud _User 中的账号和密码不会迁移。v4 会根据 Vercel 环境变量重新创建管理员账户，这样可以避免继续依赖旧平台的用户系统。

升级需要做什么

从 v3 升级到 v4，主要需要完成以下步骤：

1. 从 LeanCloud 导出 shuoshuo 和 atComment 数据；
2. 将 Artitalk 服务端部署到 Vercel；
3. 为 Vercel 项目连接 Neon Postgres；
4. 配置管理员账号、数据库和允许访问的站点域名；
5. 在服务端初始化页面导入 LeanCloud JSONL 文件；
6. 初始化新的管理员账户；
7. 将博客中的旧版 appId、appKey 配置替换为 serverURL；
8. 核对说说数量、评论数量、发布时间和登录发布功能。

迁移完成并验证无误前，请不要删除 LeanCloud 应用，也不要删除原始导出文件。保留旧环境可以在新服务出现配置问题时快速回滚。

不变的使用体验，更可控的后端

Artitalk v4 尽量保持了原有组件的使用体验，但其运行基础已经发生变化。

以前，Artitalk 是一个直接依赖 LeanCloud 的前端组件；现在，它由前端组件、Vercel 服务端和 Neon 数据库共同组成。用户需要多完成一次部署，却也因此获得了更清晰的配置边界和更独立的数据存储方案。

这次迁移首先解决的是 LeanCloud 即将停止服务带来的生存问题，也让这个已经停止更新的项目能够继续使用和维护。未来即使需要更换数据库或部署平台，前端也不必再次跟随底层服务进行大规模重写。

如果你仍在使用 Artitalk v3，建议先备份 LeanCloud 数据，再按照迁移文档完成升级：

• 项目仓库：https://github.com/HCLonely/Artitalk
• 使用文档：https://artitalk-docs.hclonely.com/

本文记录一次对 hexo-bilibili-bangumi 追番页面分页渲染的优化：把原本一次性同步完成的模板渲染，改成在浏览器空闲帧中分批执行，从而降低单帧压力，让页面先保持可交互。

背景

追番页面会先渲染每个分类前 10 条数据，剩余数据通过 bangumis.json 异步加载。旧实现大致是这样的：

const html = {  wantWatch: data.wantWatch.slice(10).map((item) => renderItem(item)).join('\n'),  watching: data.watching.slice(10).map((item) => renderItem(item)).join('\n'),  watched: data.watched.slice(10).map((item) => renderItem(item)).join('\n')};document.querySelectorAll('#bangumi-item1>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.wantWatch);document.querySelectorAll('#bangumi-item2>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.watching);document.querySelectorAll('#bangumi-item3>.bangumi-pagination')[0].insertAdjacentHTML('beforeBegin', html.watched);

这段代码的问题不在于写法复杂，而在于它把三类数据的模板渲染集中在一个任务里完成。浏览器主线程在执行这段 JavaScript 时，不能同时处理用户输入、样式计算、布局和绘制。如果数据量增加，单次任务耗时变长，就会出现掉帧和交互延迟。

对于博客页面来说，用户最直接的感受不是“渲染总耗时是多少”，而是“页面是不是能立刻响应”。因此优化目标不是把所有 HTML 更快地一次性生成出来，而是把大任务拆小，让浏览器有机会在任务之间处理渲染和输入。

原理

浏览器页面的 JavaScript、样式计算、布局、绘制和用户输入处理大多运行在主线程上。如果一个 JavaScript 任务长时间不结束，浏览器就没有机会进入下一帧，也就无法及时响应滚动、点击和视觉更新。

分时函数的核心思想是：

1. 把一个大任务拆成多个小任务。
2. 每次只执行一部分工作。
3. 当前帧还有空闲时间时多做一点，没有空闲时间时让出主线程。
4. 下一次空闲时继续处理剩余任务。

浏览器提供了 requestIdleCallback，它会在主线程空闲时执行回调。回调参数里的 deadline.timeRemaining() 可以告诉我们当前空闲周期大概还剩多少时间。利用这个信息，可以把长列表渲染拆成多批。

不过 requestIdleCallback 并不是所有环境都支持，因此实现时还需要准备一个降级方案：如果浏览器不支持，就使用 setTimeout 延后执行。这样虽然不能精确感知空闲时间，但仍然可以避免在一个同步任务中渲染全部内容。

方法实现

这次优化拆成三步。

1. 封装空闲调度函数

先封装一个 runWhenIdle，优先使用 requestIdleCallback，否则退化到 setTimeout：

function runWhenIdle(callback) {  if (typeof requestIdleCallback === 'function') {    requestIdleCallback(callback);    return;  }  setTimeout(() => {    callback({      timeRemaining: () => 0    });  }, 16);}

这里的降级实现给了一个 timeRemaining() 为 0 的 deadline。后面的批处理逻辑会保证即使没有剩余时间，每一轮也至少处理一条数据，避免任务永远无法推进。

2. 复用编译后的模板函数

原来每条数据都直接调用 pug.render。如果运行时支持 pug.compile，可以先把模板编译成渲染函数，然后每条数据复用这个函数：

function createBangumiPageRenderer() {  if (hexoBilibiliBangumiOptions.pug && typeof hexoBilibiliBangumiOptions.pug.compile === 'function') {    const render = hexoBilibiliBangumiOptions.pug.compile(hexoBilibiliBangumiOptions.pugTemplate);    return function hexoBilibiliBangumiRenderPage(item) {      return render({        item,        ...hexoBilibiliBangumiOptions.pugOptions      });    };  }  return function hexoBilibiliBangumiRenderPage(item) {    return hexoBilibiliBangumiOptions.pug.render(hexoBilibiliBangumiOptions.pugTemplate, {      item,      ...hexoBilibiliBangumiOptions.pugOptions    });  };}

这一步不是分时渲染的必要条件，但它能减少每条数据的重复开销。长列表优化通常要同时关注两个方向：减少总计算量，以及避免单次计算阻塞太久。

3. 在空闲帧中分批渲染

核心批处理逻辑如下：

function renderItemsInIdle(items, renderPage, onComplete) {  const html = [];  let index = 0;  function renderBatch(deadline) {    let renderedInFrame = false;    while (index < items.length && (!renderedInFrame || deadline.timeRemaining() > 0)) {      html.push(renderPage(items[index]));      index++;      renderedInFrame = true;    }    if (index < items.length) {      runWhenIdle(renderBatch);      return;    }    onComplete(html.join('\n'));  }  runWhenIdle(renderBatch);}

这里有一个细节：循环条件不是简单的 deadline.timeRemaining() > 0，而是：

!renderedInFrame || deadline.timeRemaining() > 0

这样可以保证每个空闲回调至少渲染一条数据。否则在降级方案里 timeRemaining() 一直是 0，任务就会被不断重新调度，却不会真正处理任何条目。

最后，把三个分类组织成任务队列，按顺序分批渲染并插入到对应分页按钮之前：

function renderTasksInIdle(tasks) {  const renderPage = createBangumiPageRenderer();  let taskIndex = 0;  function runNextTask() {    if (taskIndex >= tasks.length) return;    const task = tasks[taskIndex];    taskIndex++;    renderItemsInIdle(task.items, renderPage, (html) => {      document.querySelectorAll(task.selector)[0].insertAdjacentHTML('beforeBegin', html);      runNextTask();    });  }  runNextTask();}

调用时只需要传入数据和目标选择器：

renderTasksInIdle([  {    items: data.wantWatch.slice(10),    selector: '#bangumi-item1>.bangumi-pagination'  },  {    items: data.watching.slice(10),    selector: '#bangumi-item2>.bangumi-pagination'  },  {    items: data.watched.slice(10),    selector: '#bangumi-item3>.bangumi-pagination'  }]);

效果

优化前，bangumis.json 加载完成后，页面会立刻同步执行三类列表的模板渲染。数据越多，单次任务越长，用户越容易感受到卡顿。

优化后，渲染被拆分到多个空闲帧中执行：

• 首屏内容和标签切换逻辑不需要等待全部剩余数据渲染完成。
• 浏览器可以在批次之间处理绘制和输入事件。
• 单帧 JavaScript 执行时间降低，滚动和点击更不容易被长任务阻塞。
• 支持 requestIdleCallback 的浏览器可以根据真实空闲时间动态多渲染几条；不支持时也能通过 setTimeout 分批推进。
• Pug 模板优先编译后复用，减少重复解析模板的成本。

这种优化不会让所有内容“瞬间完成”，但会改善用户感知性能。对用户来说，页面能先响应、逐步补齐内容，通常比等待一个长任务全部执行完更自然。

适用场景

分时渲染适合以下情况：

• 列表数据较多，但不要求所有内容立即同步展示。
• 每条数据的渲染逻辑较重，例如模板渲染、格式化、复杂 DOM 字符串拼接。
• 页面初始交互比完整内容一次性出现更重要。
• 不方便引入虚拟列表，但希望降低长任务阻塞。

如果是后台管理系统里的超大表格，虚拟列表可能是更彻底的方案；如果是博客、文章页、追番页这类静态内容为主的场景，分时渲染的改动更小，收益也比较直接。

注意事项

分时渲染不是银弹，实现时需要注意几个边界：

1. 每个批次至少处理一项，避免低空闲时间或降级方案下任务无法推进。
2. 插入 DOM 的时机要稳定。本文的实现是在某个分类全部渲染完成后再插入，避免一个分类的内容被频繁分段插入造成布局抖动。
3. 如果用户可能在渲染未完成时切换页面或销毁容器，需要增加取消机制或容器存在性判断。
4. 如果列表极长，单纯把 HTML 存在数组中最后一次性插入仍可能占用较多内存，可以进一步改成每 N 条插入一次。
5. requestIdleCallback 适合低优先级任务，不适合用户点击后必须立即完成的关键反馈。

总结

这次优化的关键不是换一个更复杂的框架，而是把“同步做完所有事”的思路改成“浏览器空闲时分批做”。对长列表、模板渲染和博客插件这类场景来说，分时函数是一个成本低、侵入小、效果明确的优化手段。

最终实现保留了原有数据结构和 DOM 插入位置，只替换了渲染调度方式：数据仍然来自 bangumis.json，模板仍然使用 Pug，展示结果保持一致，但渲染过程对主线程更友好。

一个简单的服务，可以生成包含 IP 地址、地理位置、天气、系统信息等数据的签名图片。

功能特点

• 获取访问者的 IP 地址和地理位置信息
• 显示当前天气状况
• 显示访问者的操作系统和浏览器信息
• 显示一言语句
• 支持图片缓存
• 支持跨域访问

示例

使用方法

基本用法

直接访问签名图片：

https://你的域名/signature

自定义尺寸

支持通过查询参数自定义图片尺寸：

https://你的域名/signature?width=1000        # 指定宽度，高度会按比例缩放https://你的域名/signature?height=600        # 指定高度，宽度会按比例缩放

默认尺寸为 752x423 像素。建议只指定宽度或高度其中之一，另一个尺寸会自动按原始比例计算，如果同时指定宽度和高度，则根据高度计算。

在网页中使用

<!-- 默认尺寸 --><img src="https://你的域名/signature" alt="IP签名档" /><!-- 自定义尺寸 --><img src="https://你的域名/signature?width=1000" alt="IP签名档" />

缓存说明

• IP 地理位置数据：长期缓存
• 天气数据：缓存 30 分钟
• 一言数据：缓存 5 分钟
• 生成的图片：客户端缓存 10 分钟

部署方法

本地部署

1. 克隆仓库：

   git clone https://github.com/HCLonely/ipSignature.gitcd ipSignature

2. 安装依赖：

   npm install

3. 配置环境变量：

   # 复制环境变量示例文件cp .env.example .env.production# 然后编辑 .env.production 文件，修改相关配置# 至少需要配置以下变量之一：# - IPINFO_TOKEN（ipinfo.io的API令牌）# - NSMAO_TOKEN（nsmao的API令牌）## 以及：# - OPENWEATHER_API_KEY（OpenWeatherMap的API密钥）

4. 编译代码：

   npm run build

5. 启动服务：

   npm start

Vercel 部署

一键部署

手动部署步骤

1. Fork 本仓库到你的 GitHub 账号

2. 在 Vercel 中导入项目：

   • 访问 Vercel
   • 点击 “Import Project”
   • 选择你 fork 的仓库
   • 点击 “Import”

3. 配置环境变量：

   • 在项目设置中找到 “Environment Variables”

   • 添加以下环境变量：

     # IP地理位置服务令牌 (至少需要配置其中一个)IPINFO_TOKEN=your_ipinfo_token_hereNSMAO_TOKEN=your_nsmao_token_here# OpenWeatherMap API密钥OPENWEATHER_API_KEY=your_openweather_api_key_here# 背景图片URL (可选，仅支持 jpg, jpeg, png, gif 格式)BACKGROUND_IMAGE_URL=https://example.com/background.jpg# 生产环境标识NODE_ENV=production

4. 部署：

   • Vercel 会自动部署你的服务
   • 部署完成后，你会得到一个 .vercel.app 域名
   • 也可以绑定自己的自定义域名

环境变量说明

创建 .env 文件并配置以下环境变量：

IPINFO_TOKEN 和 NSMAO_TOKEN 至少需要配置其中一个

API 服务说明

本项目使用了以下第三方 API 服务：

IP 地理位置服务

• ipinfo.io

  • 提供精确的 IP 地理位置信息
  • 免费套餐每月可查询 50,000 次
  • 注册获取 API 令牌

• nsmao.com

  • 备选的 IP 地理位置服务
  • 获取 API 令牌

天气服务

• OpenWeatherMap
  • 提供全球天气数据
  • 免费套餐支持每分钟 60 次调用
  • 注册获取 API 密钥

一言服务

• Hitokoto
  • 提供一句话服务
  • 免费使用，无需注册
  • API 说明文档

命令行参数

为什么选择树莓派 + Photopea？

• 隐私至上： 所有图片处理都在你的本地网络或树莓派上进行，敏感设计稿绝不外流。
• 离线可用： 无需连接官方服务器，断网也能畅快编辑。
• 轻量低耗： 树莓派功耗极低，7x24 小时运行也毫无压力，静音环保。
• 成本低廉： 利用闲置树莓派，无需额外投入高性能电脑或订阅费用。
• 跨平台访问： 家里任何设备（电脑、平板、手机）的浏览器都能随时使用。
• 开源自由： 基于开源项目部署，掌控自己的工具。

所需设备：

1. 树莓派： 推荐树莓派 4B (2GB/4GB/8GB 内存均可) 或树莓派 5，性能更佳。树莓派 3B+ 也可尝试（性能稍弱）。
2. 操作系统： ubuntu 22.04 (理论上能运行Docker的系统均可)。
3. 网络： 树莓派接入你的家庭/办公室局域网。
4. 存储： 一张容量足够的 microSD 卡 (建议 16GB 或以上)。
5. 电源： 合适的电源适配器。

手把手搭建指南 (基于 Docker)

Docker 让部署变得异常简单。如果你的树莓派还没安装 Docker，请先安装：https://docs.docker.com/engine/install/

核心步骤：一键部署 Photopea

# 运行 Photopea 容器 (将内部 8887 端口映射到树莓派的 8080 端口)sudo docker run -d --name ps-online --restart always -p 8080:8887 ramuses/photopea:latest

访问你的私有 Photopea

1. 本地测试： 在树莓派本身的浏览器中访问：http://localhost:8080
2. 局域网访问： 在同一局域网内的其他设备浏览器中，输入你的树莓派 IP 地址 + :8080，例如：http://192.168.1.100:8080

重要提示

• 性能考虑： Photopea 在浏览器中运行，主要依赖访问设备的 CPU/内存。树莓派本身主要负责提供服务。树莓派 4/5 能流畅服务多个客户端。复杂操作（如超大图、大量滤镜）在客户端设备上可能变慢。
• 数据存储： 默认部署下，用户上传或处理的图片仅保存在浏览器缓存中。关闭浏览器标签页或清理缓存可能导致未保存的更改丢失！务必养成使用 File > Save As PSD (或导出其他格式) 保存到本地设备的习惯。
• 首次加载： 镜像较大，首次拉取和启动可能需要几分钟，请耐心等待。

Node.js 从v18.16.0,v19.7.0版本开始原生支持了打包为可执行文件(Single executable applications), 常用的打包工具pkg也因此不在更新，下面介绍一下我在使用 NodeJs Single executable applications功能时的一些经验和问题。

使用

创建并打包你的项目文件

因为目前该功能只能将单个 js 文件封装为可执行文件，所以我们要借助打包工具（如 webpack, rollup 等）将 js 项目大包围一个 js 文件。由于 wenpack 的配置过于繁杂，这里介绍使用 rollup 工具进行打包。

1. 安装 rollup: npm install --global rollup;

2. 在项目根目录新建rollup.config.js文件，内容如下（根据项目内容进行调整）：

   const commonjs  = require('@rollup/plugin-commonjs'); // commonjs支持，使用es模块可不使用此插件，安装：npm install @rollup/plugin-commonjs -Dconst { nodeResolve } = require('@rollup/plugin-node-resolve');const json = require('@rollup/plugin-json'); // 将静态json文件作为模块导入，按需安装，安装：npm install @rollup/plugin-json -Dconst { string } = require('rollup-plugin-string'); // 将静态文件文本作为模块导入，按需安装，安装：npm install @rollup/plugin-json -Dconst terser = require('@rollup/plugin-terser');// 压缩打包后的文件大小，按需安装，安装：npm install @rollup/plugin-json -Dmodule.exports = {  input: 'dist/main.js', // 项目入口文件  output: {    dir: 'output', // 输出文件目录    format: 'cjs' // 输出文件格式  },  plugins: [terser({    format: {      comments: false    }  }), nodeResolve({    preferBuiltins: true,    exportConditions: ['node']  }),  commonjs(),  json(),  string({    include: ['**/*.html', '**/*.yml']  })]};

3. 打包项目：rollup -c。

封装为可执行文件

1. 在项目根目录新建your-project-config.json文件，内容如下（根据项目需求进行调整，官方说明）：

   {  "main": "output/main.js", // 打包后的项目入口文件  "output": "your-project.blob",  "disableExperimentalSEAWarning": true,  "useCodeCache": true,  "disableExperimentalSEAWarning": true, // 禁用Nodejs的试验性更能警告  "useSnapshot": false,  // 使用快照  "useCodeCache": true // 使用代码缓存}

2. 封装文件：

   • Windows:

   node --experimental-sea-config your-project-config.jsonnode -e "require('fs').copyFileSync(process.execPath, 'your-project.exe')"npx postject your-project.exe NODE_SEA_BLOB your-project.blob --sentinel-fuse NODE_SEA_FUSE_fce680ab2cc467b6e072b8b5df1996b2

   • Linux:

   node --experimental-sea-config your-project-config.jsoncp $(command -v node) your-projectnpx postject your-project.exe NODE_SEA_BLOB your-project.blob --sentinel-fuse NODE_SEA_FUSE_fce680ab2cc467b6e072b8b5df1996b2

3. 等待封装完成。

一个用于哔哩哔哩硬核会员搜题的 Tampermonkey 脚本。

安装

1. 安装Tampermonkey(建议)或其他脚本管理器；
2. 点此安装搜题脚本。

使用

1. 手机哔哩哔哩客户端进入答题；
2. 浏览器登录哔哩哔哩(已登录可跳过此步骤)；；
3. 浏览器打开调试工具(F12), 将浏览器切换为移动设备(Ctrl+Shift+M)；
4. 在地址栏输入https://www.bilibili.com/h5/senior-newbie/qa并回车，等待网页加载完成；
5. 启动脚本(Alt+N)；
   • 加载题库(需要题目完全匹配)：可从本地加载题库(支持txt,doc,docx,xls,xlsx格式)，题库中搜索不到则使用搜索引擎搜索
   • 直接运行：使用搜索引擎搜索(支持百度，搜狗，必应，谷歌)
6. 点击题目即可进行搜索。

注意事项

1. 使用此脚本时建议关闭其他插件/脚本，避免冲突；
2. 建议选择文史，知识，音乐等答案比较好搜索判断的类型。

在静态网站上实现浏览记录功能，浏览记录保存在用户本地。

安装

1. 下载visit-history.min.js文件；

2. 在你的网页中插入

   <script src="path/to/visit-history.min.js"></script>

或直接使用CND

<script src="https://cdn.jsdelivr.net/gh/HCLonely/visit-history@1visit-history.min.js"></script>

使用

保存浏览记录

const { visitHistory } = require('visit-history');visitHistory.set({  data: { }, // [必需]保存的数据  identifier: () => window.location.pathname, // [可选]网页的位移标识符, 默认为 () => window.location.pathname  limit: 20 // [可选]最大保存的浏览历史数量，默认为 20});

Example:

const { visitHistory } = require('visit-history');visitHistory.set({  data: {    title: document.querySelector('title').innerText.trim(),    link: window.location.href  },  identifier: () => window.location.href,  limit: 30});

读取浏览记录

const { visitHistory } = require('visit-history');visitHistory.get({  htmlTemplate: '', // [可选]Html模板, 使用'{{key}}'替换data中的变量. 留空则返回保存的data数据, 默认为空  limit: 10 // [可选]读取的浏览记录数量, 留空则返回所有数据, 默认为空});

Example:

const { visitHistory } = require('visit-history');const history = visitHistory.get({  htmlTemplate: '<div class="title><a href="{{link}}">{{title}}</a></div>',  limit: 10});document.querySelector('.history').innerHTML = history.join('');

鸣谢

• store.js

介绍

统一化推送服务Nodejs API. 已支持钉钉, Discord, 邮件, 飞书, PushDeer, PushPlus, QQ, QQ 频道机器人, Server 酱, Showdoc Push, Telegram Bot, 企业微信群机器人, 息知, WxPusher, NowPush, iGot, Chanify, Bark, Push, Slack, Pushback, Zulip, RocketChat, Gitter等平台.

已支持平台

• QQ(go-cqhttp) – GoCqhttp
• QQ(Qmsg) – Qmsg
• QQ 频道机器人 – QqChannel
• 钉钉群机器人 – DingTalk
• Discord – Discord
• 邮件 – Mail
• 飞书群机器人 – FeiShu
• 企业微信 – WorkWeixin
• 企业微信群机器人 – WorkWeixinBot
• Telegram Bot – TelegramBot
• PushDeer – PushDeer
• PushPlus – PushPlus
• Server 酱 – ServerChanTurbo
• Showdoc Push – Showdoc
• 息知 – Xizhi
• WxPusher – WxPusher
• NowPush – NowPush
• iGot – IGot
• Chanify – Chanify
• Bark – Bark
• GoogleChat – GoogleChat
• Push – Push
• Slack – Slack
• Pushback – Pushback
• Zulip – Zulip
• RocketChat – RocketChat
• Gitter – Gitter
• Pushover – Pushover

安装

npm install all-pusher-api -S

使用

详细说明请查看说明文档。

Example

多平台推送

const { PushApi } = require('all-pusher-api'); // 多平台同时推送(async () => {  console.log((await new PushApi([    {      name: 'ServerChanTurbo',      config: {        key: {          token: '******'        }      }    },    {      name: 'PushDeer',      config: {        key: {          token: '******'        }      }    },    {      name: 'WxPusher',      config: {        key: {          token: '******',          uids: ['******']        }      }    }  ])    .send({ message: '测试文本' })).map((e) => (e.result.status >= 200 && e.result.status < 300) ? `${e.name} 测试成功` : e));})();

单平台推送

(async () => {  // Example 1  const { PushApi } = require('all-pusher-api'); // 多平台同时推送  const result = await new PushApi([    {      name: 'ServerChanTurbo',      config: {        key: {          token: '******'        }      }    }  ])    .send({ message: '测试文本' });  console.log(result.map((e) => (e.result.status >= 200 && e.result.status < 300) ? `${e.name} 测试成功` : e));  // Example 2  const { WxPusher } = require('all-pusher-api/dist/WxPusher'); // 单平台推送可选  const wxPusherResult = await new WxPusher({    token: '******',    uids: ['******']  })    .send({ message: '测试文本' });  console.log(wxPusherResult);})();

extraOptions

(async () => {  const { DingTalk } = require('all-pusher-api/dist/DingTalk');  const result = await new DingTalk({    key: {      token: '******',      secret: '******'    }  })    .send({      message: '这条消息@了所有人',      extraOptions: {        isAtAll: true      }    });  console.log(result);})();

customOptions

这里以钉钉为例

(async () => {  const { DingTalk } = require('all-pusher-api/dist/DingTalk');  const result = await new DingTalk({    key: {      token: '******',      secret: '******'    }  })    .send({      customOptions: {        "msgtype": "actionCard",        "actionCard": {          "title": "我 20 年前想打造一间苹果咖啡厅, 而它正是 Apple Store 的前身",          "text": "![screenshot](https://img.alicdn.com/tfs/TB1NwmBEL9TBuNjy1zbXXXpepXa-2400-1218.png) \n\n #### 乔布斯 20 年前想打造的苹果咖啡厅 \n\n Apple Store 的设计正从原来满满的科技感走向生活化, 而其生活化的走向其实可以追溯到 20 年前苹果一个建立咖啡馆的计划",          "btnOrientation": "0",          "btns": [            {                "title": "内容不错",                "actionURL": "https://www.dingtalk.com/"            },            {                "title": "不感兴趣",                "actionURL": "https://www.dingtalk.com/"            }          ]        }      }    });  console.log(result);})();

自定义接口

(async () => {  const { Custom } = require('all-pusher-api/dist/Custom'); // 自定义接口只能通过此方法引入  const { createHmac } = require('crypto'); const sign = () => {    const timestamp = new Date().getTime();    const secret = '******';    const stringToSign = `${timestamp}\n${secret}`;    const hash = createHmac('sha256', secret)      .update(stringToSign, 'utf8')      .digest();    return `timestamp=${timestamp}&sign=${encodeURIComponent(hash.toString('base64'))}`;  };  console.log(await new Custom({    url: `https://oapi.dingtalk.com/robot/send?access_token=******&${sign()}`,    success: {      key: 'responseData.errcode',      value: 0    }  }).send({    msgtype: 'text',    text: {      content: '测试文本'    }  }));  /* 返回值  {    status: 200,    statusText: 'Success',    extraMessage: <AxiosResponse>  }  */});

参数

pusherConfig

const pusher = new WxPusher(pusherConfig);

CustomConfig

自定义接口

const customPusher = new Custom(CustomConfig);

pushersConfig

const pushers = new PushApi(pushersConfig);

const pushersConfig: Array<{  name: string,  config: pusherConfig}>

sendOptions

const result = await pusher.send(sendOptions);

customSendOptions

const result = await customPusher.send(customSendOptions);

customSendOptions会直接作为请求体发送, 具体请查看示例.

pushersSendConfig

const results = await pushers.send(pushersSendConfig);

const pushersSendConfig: Array<{  name: string  config: pushersSendConfig}>

返回值

result

const result = await pusher.send(sendOptions);

results

const results = await pushers.send(pushersSendConfig);

const results: Array<{  name: string  result: result}>

支持的消息类型

所有平台支持均纯文本(text)格式消息, 大部分支持markdown格式消息, 部分支持html格式消息

markdown*为支持html格式不支持markdown格式消息时自动将markdown转换为html格式

other为部分平台支持特殊格式的消息, 可通过customOptions传入参数, 具体参数请查看相应平台的文档

• Showdoc: text
• Pushover: text
• QQ(go-cqhttp): text, other
• Qmsg: text, other
• Discord: text, other
• 飞书: text, other
• NowPush: text, other
• Chanify: text, other
• Bark: text, other
• Server酱Turbo: text, markdown
• 息知: text, markdown
• PushDeer: text, markdown, other
• QQ频道: text, markdown, other
• 企业微信: text, markdown, other
• 企业微信群机器人: text, markdown, other
• 钉钉: text, markdown, other
• TelegramBot: text, markdown, html
• 邮件: text, markdown*, html
• PushPlus: text, markdown*, html
• WxPusher: text, markdown*, html

状态码

• 0-Missing Parameter: ***: 缺少必要参数
• 10-Missing Options: 缺少发送消息配置
• 11-Unknown Error: 未知错误
• 200-Success: 推送成功
• 201-Waiting: 待审核
• 100-Error: 请求发送成功, 服务器返回错误信息
• 101-No Response Data: 请求发送成功, 但没有接收到服务器返回的数据
• 102-Request Error: 请求发送失败, 一般是网络问题
• 103-Options Format Error: 参数格式错误
• 104-Get "***" Failed: 获取参数失败
• 140-Check Sign Failed: 签名校检失败

安装说明

1. 安装Tampermonkey或类似浏览器扩展(脚本基于此扩展使用)

2. 安装此脚本

   • Github
   • GreasyFork

必读说明

• 不用时请关闭此脚本！
• 启用此脚本后刷新网页才会生效！
• 使用无题库模式时不要将弹出的窗口最大化
• 支持txt, html, word, excel格式的题库，其他格式自行转换成支持的格式
• 选择/复制受限时可配合网页限制解除(改)脚本使用

使用说明

1. 使用前先在Tampermonkey中启用此脚本；

2. 点击浏览器的Tampermonkey扩展图标，找到此脚本下面的启动启动选项并点击；

3. 按要求选择模式

   • 题库模式[建议]: 如果你已经有该题目相关题库了就选这个，题库文件支持txt, html, word, excel格式，其他格式的题库请自行转换成支持的格式；
   • 无题库模式: 搜索时会弹出使用百度/搜狗/必应/谷歌的搜索结果，弹出的窗口不要全屏显示；
   • 直接运行: 之前使用题库模式导入过题库，并且题库不需要更新，避免重复导入题库操作；

4. 选择题目后会弹出搜按钮，点击此按钮即可搜索；

5. 用完记得关闭此脚本，否则可能会造成访问其他网页出现BUG；

1. 开启 X5 内核: debugmm.qq.com/?forcex5=true 复制这个在微信团队后点开或用微信扫描二维码
   
   出现下图说明开启成功
   

2. 安装 X5 内核(以下线上与本地内核二选一)

   • 安装线上内核：http://debugtbs.qq.com 复制这个在微信发送出去后打开下载线上内核，重启即可；
   • 安装本地内核：点此下载 本地内核(不要直接打开)，下载完把文件复制到 /sdcard/Android/data/com.tencent.mm/files/tbs 目录(没有这个目录的话新建一个)，然后回到 http://debugtbs.qq.com 点击安装本地内核，安装完成后重启微信；

3. 打开vConsole调试功能：http://debugx5.qq.com 复制这个在微信发送出去后打开，选择顶部信息，下面勾选打开vConsole调试功能
   

4. 在大学习界面点击右下角的绿色按钮，在弹出的控制台输入下面的代码(最好等视频加载完开始播放后在执行，太快了可能没反应，没反应的话再输一遍就好了)

   var videoEle = document.getElementsByTagName('video')[0]; // 获取播放器元素videoEle.controls = true; // 显示进度条videoEle.currentTime = videoEle.duration; // 时间拉到最后videoEle.ended = true; // 视频播放结束score = 100; // 成绩__vconsole.style.display = 'none'; // 隐藏右下角绿色按钮

全微信版本（需电脑）

1. 启用Inspector调试功能：

   • 如果使用 x5 内核，按上述步骤走到第三步，勾选打开TBS内核Inspector调试功能;
   • 如果不使用 x5 内核，debugmm.qq.com/?forcex5=false 复制这个在微信团队后点开或用微信扫描二维码
     
     出现下图说明开启成功
     
     然后复制这个在微信发送出去后打开http://debugxweb.qq.com/?inspector=true，等加载完关闭就行

2. 手机通过数据线连接电脑并启用 USB 调试功能（如何打开?）

3. 下载 Chrome 或 Edge 浏览器，安装ADB扩展，网址打不开可以使用离线安装

4. 点击ADB扩展图标，点击View Inspaction Targets(如果手机上弹出是否允许调试，点击允许)
   

5. 在弹出的页面上勾选Discover USB devices和Discover network targets

6. 打开大学习页面，等待加载设备，出现如下图所示
   

7. 手机上开始播放视频，电脑上点击inspect，在弹出的窗口右侧一栏点击控制台或Console
   

8. 在控制台输入以下代码：

   var videoEle = document.getElementsByTagName('video')[0]; // 获取播放器元素videoEle.controls = true; // 显示进度条

9. 手机上拖动进度条跳过

部分微信版本（需root）

1. 安装Enable WebView Debugging [启用 WebView 调试]模块，可在 XPosed 和 LSPosed 官方仓库找到
2. 启用此模块，LSPosed 需要勾选微信作用域并重启微信
3. 按照微信版本<=8.0.18的第四步进行操作

特色

• 支持多种输入法：
  • 搜狗拼音 txt
  • QQ 拼音
  • QQ 五笔
  • 百度拼音
  • 小小输入法
  • 谷歌拼音
  • Gboard
  • 拼音加加
  • Win10 微软拼音（自定义短语）
  • Win10 微软五笔（自定义短语）
  • Win10 微软拼音（自学习词库）
  • 微软拼音
  • 必应输入法
  • FIT 输入法
  • Mac 简体拼音
  • Rime 中州韵
  • 华宇紫光拼音
  • libpinyin
  • Chinese-pyim
  • 手心输入法
  • 新浪拼音
  • 极点五笔
  • 极点郑码
  • 小鸭五笔
  • 雅虎奇摩
  • 五笔 86 版
  • 五笔 98 版
  • 仓颉平台
  • 百度手机或 Mac 版百度拼音
  • QQ 手机
  • 讯飞输入法
• 全面吃鱼更新的词汇：
  • 包括角色名，别名，公会名，声优名，装备名，专武名，技能名称等等
  • 每周更新一次

使用

• 到github releases页面下载pcr-dict.zip文件，解压后导入即可。
• 蓝奏云下载 密码:h1wg

数据来源

• 角色&别名&公会&声优: HoshinoBot
• 装备&专武&技能: 公主连结 WIKI

词库转换工具

• imewlconverter

LICENSE

MIT LICENSE

使用方法

1. 安装NodeJs,Git
2. 克隆本项目git clone https://github.com/HCLonely/live2dNodeApi.git
3. 定位到项目目录cd live2dNodeApi
4. 安装依赖npm i -S或cnpm i -S
5. 启动服务器npm start

命令

配置

修改config.json文件进行配置：

{  "port": 2333, // 监听端口，默认2333  "ssl":{    "enable":false, // 是否启用ssl    "privateCrt":"", // ssl证书文件路径    "privateKey":"" // ssl私钥文件路径  }}

模型目录结构

models├─模型文件夹 # 同一角色不同皮肤，不同皮肤共用一个index.json文件│  ├─index.json # 必须，或model.json│  └─...├─模型文件夹 # 同一角色不同皮肤，每个皮肤都有各自的index.json文件│  ├─模型文件夹 # 单个模型│  │  ├─index.json # 必须，或model.json│  │  └─...│  └─模型文件夹 # 单个模型│      ├─index.json # 必须，或model.json│      └─...└─模型文件夹 # 单个模型    ├─index.json # 必须，或model.json    └─...

详情请参考models目录

常见问题

依赖安装慢

npm 安装慢

下载 Chromium 慢

更新模型后顺序乱了

请重命名模型文件夹进行排序，参考models目录。

百度分析

在pjax:complete添加以下回调：

if(typeof _hmt !== "undefined" && typeof _hmt.push === "function") _hmt.push(['_trackPageview',window.location.pathname]);

谷歌分析

谷歌分析似乎有两种，请根据你引用的 js 库修改：

• ga: 使用https://www.google-analytics.com/analytics.js
• gtag: 使用https://www.googletagmanager.com/gtag/js?id=UA-*******

ga

在pjax:complete添加以下回调：

if(typeof ga === "function") ga('send', 'pageview', window.location.href);

gtag

在pjax:complete添加以下回调(感谢@FGHRSH)：

if(typeof gtag === "function") gtag('event', 'pageview', {page_location: window.location.href});

前提条件

1. Node.js >= 12.0
2. 使用Git对博客**源码（不是使用 git 部署）**进行管理；
3. 在博客根目录使用git log -1 --date=iso --pretty=format:"%ad"命令能够输出一个日期；
4. 如何确定第一项是否符合：
   1. 博客根目录含有.git文件夹，这是一个隐藏文件夹；
   2. 符合上面的第三项。

安装

npm i hexo-calendar -S

or

cnpm i hexo-calendar -S

使用

作为辅助函数在主题模板中使用

<%- calendar({monthLang: 'cn', dayLang: 'cn', title: '活动日历'}) %>

作为标签在 md 文件中使用

{% calendar %}{"monthLang": "cn", "dayLang": "cn", "title": "活动日历"}{% endcalendar %}

如果你使用了自动部署

如果你使用了Travis CI, Github Action之类的自动部署，那么你需要在推送源码之前使用hexo gc -w=40命令生成一个calendar.json文件。-w=40代表显示 40 周之前至今的活动记录。

选项

示例

Github

1. 登录 Github, 点击右上角的头像->Settings

2. 点击Developer settings

3. 点击Personal access tokens

4. 点击Generate new token创建一个token

5. Note随便填就行，Select scopes勾选repo给与 repo 操作权限，然后拉到最下面点击Generate token即可

6. 记住这个 token(我这里加密了，实际上是一串字母数字)

7. 以https://github.com/user/repo.git仓库为例，只需要在仓库前面添加x-access-token:**************@即可，************替换成上一步的 token

   https://x-access-token:**************@github.com/user/repo.git

Coding

1. 登录 Coding, 点击右上角的头像->个人设置

2. 点击访问令牌

3. 点击新建令牌创建一个令牌

4. 令牌描述随便填就行，选择权限勾选project:depot给与仓库操作权限，然后拉到最下面点击创建令牌即可

6. 记住这个用户名和令牌(我这里加密了，实际上是一串字母数字)

7. 以https://e.coding.net/user/project/repo.git仓库为例，只需要在仓库前面添加用户名:令牌@即可,用户名和令牌替换成上一步的用户名和令牌

   https://*****:***********@e.coding.net/user/project/repo.git

码云

1. 登录码云, 点击右上角的头像->设置

2. 点击私人令牌

3. 点击生成新令牌创建一个令牌

4. 私人令牌描述随便填就行，请选择将要生成的私人令牌所拥有的权限勾选projects给与仓库操作权限，如果弄需要Pull Requests那就把下面的pull_requests也勾选上，然后拉到最下面点击提交即可

6. 记住这个令牌(我这里加密了，实际上是一串字母数字)

7. 以https://gitee.com/user/repo.git仓库为例，只需要在仓库前面添加oauth2:**********即可,**********替换成上一步的令牌

   https://oauth2:**********@gitee.com/user/repo.git

一款基于WebStackPage的 Hexo 主题。Demo

安装

git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack

配置

favicon

网站图标

示例：

favicon: /favicon.ico

banner

[可选]分享网站到 twitter 和 facebook 时的图片。

示例：

banner: /images/webstack_banner_cn.png

logo

网站 logo

• expanded: 侧边栏展开时左上角的 logo
  
• collapsed: 侧边栏收起时左上角的 logo
  
• dark: 顶栏为暗色时左上角的 logo, 仅 about 页面生效
  

示例：

logo:  expanded: /images/logo@2x.png  collapsed: /images/logo-collapsed@2x.png  dark: /images/logo_dark@2x.png

flag

语言标识，多语言请配合子页面使用

• icon: 语言图标，默认仅有flag-cn和flag-us, 其他图标自行寻找存放于主题目录/source/images/flags/
• name: 语言名称
• default: 该语言是否为默认语言
• index: 页面链接

示例：

flag:  - name: Chinese    default: true    icon: flag-cn    index: /index.html

search

是否显示搜索框

示例：

search: true

userDefinedSearchData

自定义搜索引擎

• custom: 是否启用自定义配置
• thisSearch: 当前搜索引擎的搜索链接
• thisSearchIcon: 当前搜索引擎的图标链接，格式为url(图片链接)
• hotStatus: 是否启用搜热词功能
• data: 多搜索引擎配置
  • name: 搜索引擎名字
    img: 搜索引擎的搜索链接
    url: 搜索引擎的图标链接，格式为url(图片链接)

示例：

userDefinedSearchData:  custom: true  thisSearch: https://www.baidu.com/s?wd=  thisSearchIcon: url(https://www.baidu.com/favicon.ico)  hotStatus: true  data:    - name: 百度      img: url(https://www.baidu.com/favicon.ico)      url: https://www.baidu.com/s?wd=    - name: 谷歌      img: url(https://www.google.com/favicon.ico)      url: https://www.google.com/search?q=

githubCorner

右上角的 github corner

示例：

githubCorner: '<a href="https://github.com/HCLonely/hexo-theme-webstack" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>'

since

建站年份，显示在页面底部

示例：

since: 2020

menu

[主要]侧边栏菜单设置

• name: 分组名
• icon: 分组图标
• config: [主要]分组内容(详细设置查看Config)，如果有二级菜单则不需要此项！
• submenu: 二级菜单，如果有二级菜单则不需要config, 此选项内容包含name, icon, config选项

示例：

menu:  - name: 常用工具    icon: far fa-star    config: hotTools  - name: 其他工具    icon: fas fa-tools    submenu:      - name: 开发工具        icon: fas fa-tools        config: devTools      - name: 我的博客        icon: fas fa-blog        config: myBlog

expandAll

是否将侧边栏全部展开

示例：

expandAll: true

about

侧边栏的关于本站

• url: 关于页面链接
• name: 在侧边栏显示的文字
• icon: 图标

示例：

about:  url: /about/  icon: far fa-heart  name: 关于本站

aboutPage

关于页面设置

1. 生成关于页面

hexo new page about

2. 编辑source/about/index.md, 添加type: 'about'

---title: aboutdate: 2020-06-04 18:11:54type: 'about'---

3. 编辑主题配置文件的aboutPage

• website: 关于本站内容
  • head: 标题
  • html: 内容，支持html语法
• webmaster: 关于站长内容
  • head: 标题
  • name: 站长名字
  • url: 链接
  • img: 头像
  • description: 描述
  • html: 其他内容，支持html语法

示例：

aboutPage:  website:    head: 关于本站    html: '<blockquote><p>本站是hexo主题<a href="https://github.com/HCLonely/hexo-theme-webstack">hexo-theme-webstack</a>的demo站。</p></blockquote>'  webmaster:    head: 关于站长    name: HCLonely    url: https://blog.hclonely.com/    img: /images/logos/myblog.png    description: 懒人一个    html: '<br /><blockquote><p>本站是<a href="https://github.com/HCLonely">HCLonely</a>基于<a href="https://github.com/WebStackPage/WebStackPage.github.io">WebStackPage</a>项目做的一款<a href="https://hexo.io/">Hexo</a>主题。</p></blockquote>'

busuanzi

不蒜子统计

• enable: 是否启用不蒜子统计
• position: 访问量显示位置, footer显示在页脚, sidebar显示在侧边栏
• pv: 访问量显示的内容, $pv会被替换为访问量
• uv: 访客数显示的内容, $uv会被替换为访客数

示例：

busuanzi:  enable: true  position: sidebar  pv: 本站总访问量$pv  uv: 本站总访客数$uv

custom

自定义html内容

• head: 插入到<head></head>标签内的内容
• body: 插入到</body>标签之前的内容

示例：

custom:  head: |- # 以下内容插入到<head></head>标签内，可设置多行，注意每行开头至少四个空格    <link rel="stylesheet" type="text/css" href="custom.css">    <script src="custom.js"></script>  body: |- # 以下内容插入到</body>标签之前，可设置多行，注意每行开头至少四个空格    <div>custom text</div>    <script src="custom.js"></script>

config

[主要]网站内容设置

参数

• name: 网站名称
• url: 网站链接
• img: 网站图标
• description: 网站描述

示例：

- name: HCLonely Blog  url: https://blog.hclonely.com/  img: /images/logos/myBlog.png  description: 一个懒人的博客。

关联设置名称并添加网站

在menu和submenu中设置的config的内容为此选项的名称。

例menu：

menu:  - name: 常用工具    icon: far fa-star    config: hotTools

则常用工具分组里的网站有以下两种添加方式：

• 在主题的_config.yml里添加：

hotTools:  - name: HCLonely Blog    url: https://blog.hclonely.com/    img: /images/logos/myBlog.png    description: 一个懒人的博客。  - name: Github    url: https://github.com/    img: /images/logos/github.png    description: 面向开源及私有软件项目的托管平台。

• 在站点根目录/source/_data/(没有自行创建)内新建hotTools.yml文件，文件内容如下：

- name: HCLonely Blog  url: https://blog.hclonely.com/  img: /images/logos/myBlog.png  description: 一个懒人的博客。- name: Github  url: https://github.com/  img: /images/logos/github.png  description: 面向开源及私有软件项目的托管平台。

以上两种方式任选一种即可，建议使用第二种。

子页面配置

创建子页面

使用hexo new page xxx创建子页面，这里包括下面的说明都以hexo new page child为例。

修改子页面配置文件

使用上面的命令生成子页面后，打开根目录/source/child/index.md文件（子页面配置文件），在两个---之间添加一行type: 'child'使此配置文件生效，子页面默认使用主页的配置，子页面优先使用子页面配置文件两个---之间的配置，各配置项和主页的配置功能相同。

示例请看https://github.com/HCLonely/hexo-theme-webstack/tree/gh-pages/source/child/index.md

由于子页面在很久之前就基本做完了，后来比较忙就鸽了，可能有些配置或 bug 给忘了，有问题请及时反馈！

所以这里介绍一个使用第三方计划任务网站进行定时唤醒 Valine-admin 的方法。

注册cron-job帐号

注册地址：https://cron-job.org/en/signup/

添加一个计划任务

1. 登陆之后依次点击Members,cronjobs,Create cronjob

   

2. Title, Address

   • Title可以随便填一个
   • Address填写你的云引擎环境变量的ADMIN_URL，也就是 Leancloud 的Web 主机域名。如果你用的我Valine 添加博主标签及评论微信、QQ 通知文章里的最新版的仓库，还需要在后面加上/start，当然也可以不加，加上会有唤醒日志。

3. Schedule

   • 选择User-defined进行自定义设置
   • Days of month: 全选
   • Days of week: 全选
   • Months: 全选
   • Hours: 你需要在哪个时间段唤醒就选择什么
   • Minutes: 选择0,20,40
   • 按住Ctrl可多选

4. Notifications

   • 可以不用修改，也可以根据自己的需要修改

5. Common

   • 勾选Save responses, 保存唤醒日志

6. 点击Create cronjob

本教程介绍了如何给 Valine 评论系统添加博主、小伙伴、 访客标签，添加浏览器及操作系统图标，以及评论微信及QQ通知。

添加标签及图标

链接

https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

与原版相比

• 添加博主，小伙伴，访客标签
• 添加浏览器和操作系统图标，需fontawesomeV5支持
• 邮箱检测更严格
• meta placeholder可自定义

使用方法

本版比原版多了以下参数：

示例

评论微信通知及 QQ 通知

仓库地址

https://github.com/HCLonely/Valine-Admin.git

与原版相比

• 添加微信提醒功能
• 添加 QQ 提醒功能
• 添加禁止邮件提醒功能

使用方法

本版比原版多了以下参数：

邮件通知模板(模板变量与原版不同)

邮件通知模板在云引擎环境变量中设定，可自定义通知邮件标题及内容模板。

邮件通知包含两种，分别是被@通知和博主通知，这两种模板都可以完全自定义。默认使用经典的蓝色风格模板（样式来源未知）。

默认被@通知邮件内容模板如下：

<html> <head></head> <body> <table style="width: 99.8%;height:99.8% "> <tbody> <tr> <td> <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"> <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"> <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="<%=siteUrl%>"> <%=siteName%> </a>上的留言有新回复啦！ </p> </div> <div style="margin:40px auto;width:90%"> <p><%=pname%> 同学，您曾在文章上发表评论：</p> <div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;"><%-ptext%></div> <p><%=name%> 给您的回复如下：</p> <div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;"><%-text%></div> <p>您可以点击 <a style="text-decoration:none; color:#12addb" href="<%=url%>">查看回复的完整內容 </a>，欢迎再次光临 <a style="text-decoration:none; color:#12addb" href="<%=siteUrl%>"> <%=siteName%> </a>。</p> <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style> </div> </div> </td> </tr> </tbody> </table> </body> </html>

@通知模板中的可用变量如下（注，这是邮件模板变量，请勿与云引擎环境变量混淆）：

默认博主通知邮件内容模板如下：

<html> <head> <style> .wrap span { display: inline-block; } .w260{ width: 260px;} .w20{ width: 20px;} .wauto{ width: auto;} </style> </head> <body> <table style="width: 99.8%;height:99.8% "> <tbody> <tr> <td> <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"> <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"> <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="<%=siteUrl%>"> <%=siteName%> </a>上有新的评论啦！ </p> </div> <div style="margin:40px auto;width:90%"> <p><%=name%> 发表评论：</p> <div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;"><%-text%></div> <p><a style="text-decoration:none; color:#12addb" href="<%=url%>" target="_blank">[查看评论]</a></p> <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style> </div> </div> </td> </tr> </tbody> </table> </body> </html>

博主通知邮件模板中的可用变量与@通知中的基本一致，<%=pname%>和 <%-ptext%>变量不再可用。

示例

1. 前往Coding注册一个帐号

2. 登录后点击右上角的Cloud Studio

   

3. 点击设置，将 ssh 公钥添加到Coding或Github或者其他的 Git 仓库的个人公钥列表

   

4. 点击工作空间，新建工作空间

   

从零开始搭建 Hexo

1. 工作空间名称能自己看懂就行，运行环境选择预置环境、Node.js，代码来源选空，然后创建

   

2. 点击刚刚创建的工作空间

3. 按下键盘Ctrl+~打开终端

4. 按照官方教程依次输入以下命令就可以了

   npm install hexo-cli -ghexo init blogcd blognpm install

5. 到这里一个博客就基本搭建完成了，其他的去看Hexo 官方文档就可以了

已经搭建好了 Hexo

1. 工作空间名称能自己看懂就行，运行环境选择预置环境、Node.js，代码来源选仓库，并在下面输入你源码仓库的SSH地址，然后创建

   

2. 点击刚刚创建的工作空间，它会自动克隆你的源码，你只需要运行npm install命令安装所需依赖就可以了

预览

我们在本地只需运行hexo server就可以在http://localhost:4000预览了，不过用Cloud Studio的话运行hexo server命令后，需要Ctrl+Shift+P打开命令面板，输入preview,选择Preview: Open Preview Tab输入端口号（默认 4000）回车就可以了

插件（可选）

如果你用过 Vscode, 下面可以不用看了，安装你喜欢的插件就可以了

点击左边的Extensions可以安装扩展，这里推荐几个适用于编辑 Hexo 的插件

JavaScript 支持

在欢迎使用页面点击安装对JavaScript的支持，右下角会有弹窗，确定即可

Markdown Preview Enhanced

Markdown 预览插件