为什么选择树莓派 + 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 预览插件

之前搞网页 Live2d 模型的时候在网上找了很多文章，但大部分都只支持moc格式的模型，不支持moc3格式的模型。

如果你的模型是moc格式，请参考给网页添加一个 Live2D 看板娘（前端）

最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了 JS 库。

使用方法

1. 在<body>标签内添加如下内容：

   <!-- 用于存放Live2d的元素，可自定义 --><div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>

2. 在</body>之前添加以下内容：

   <!------ 位置可自定义 ------><div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div><!------ 依赖 JS ------><!---- 可选 ----><!-- 兼容低版本浏览器 --><script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> </script><!-- 音频播放兼容 --><script src="https://cdn.jsdelivr.net/npm/howler@2.1.3/dist/howler.min.js"></script><!---- 必需 ----><script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pixi.js@4.6.1/dist/pixi.min.js"></script><!-- live2dv3.js --><script src="https://cdn.jsdelivr.net/npm/live2dv3@1.2.2/live2dv3.min.js"></script><!------ 加载Live2d模型 ------><script>window.onload = () => {    new l2dViewer({        el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器        basePath: 'https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3/assets', // 模型根目录        modelName: 'biaoqiang_3', // 模型名称        sounds: [ // 触摸播放声音            'sounds/demo.mp3', // 相对路径是相对于模型文件夹            'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址        ]    })}</script>

参数

方法

loadModel(modelName?)

重新加载/更换模型

Demo

https://live2dv3demo.hclonely.com/

用于在 Hexo 博客中嵌入 steam 游戏。

安装

npm install hexo-tag-steamgame --save

使用方法

• 嵌入单个游戏

{% steamgame appid description %}```* 批量嵌入游戏```Nunjucks{% steamgames %}appidappidappidappidappidappid{% endsteamgames %}

参数

appid: Steam 游戏 id.description(可选): 用于替换默认游戏简介。

Demo

{% steamgame 1057090 %}```{% steamgame 1057090 %}```Nunjucks{% steamgame 1057090 "I like it." %}```{% steamgame 1057090 "I like it." %}```Nunjucks{% steamgames %}2615701057090{% endsteamgames %}

License

MIT

本项目不再维护，在线编辑建议使用code-server!

本插件已实现以下功能:

• 在线新建，编辑，删除 post 和 page(默认路径)
• hexo clean,hexo server,hexo deploy
• 源码同步

需求

• Node.js >= 10.0
• Hexo 4.X(只测试了 4.X)
• Git
• mac 系统close server功能无法使用(我没有 mac 设备，无法测试)

准备工作

• 将源码托管到 Git 仓库(建议使用私人仓库, 只在本地使用可无视)
• 配置好 git, 确认可以使用以下默认命令进行同步:
  • git pull
  • git add --all .
  • git commit -m "..."
  • git push

使用

安装

npm install hexo-online-server

配置

1. 新建config.json文件, 内容如下(注释删掉):

   {    "indexPath":"/",// 自定义主页路径, 以"/"结尾    "port": 4001,// http监听端口    "wsPort": 4002,//websocke监听端口    "secret":"",//用来签名session ID cookie,https://www.npmjs.com/package/express-session#secret    "user":"",//登录用户名    "passwordHash": "",//密码加密后的字符串    "autoSave": 300000,//编辑文章时自动保存时间, 单位:ms, 0为不自动保存    "noticeUrl":"",//当有用户登录时向`此链接+message`发送get请求，留空则不通知    "pull":["git pull"],//从git同步命令    "push":["git add --all .","git commit -m 'Update at {time}'","git push"],//同步到git命令    "ssl":false,//是否启用SSL    "private":{//启用ssl需配置此项        "key":"",//SSL证书key路径        "crt":""//SSL证书路径    }}

   注意把后面的注释删掉！

2. 把config.json文件保存到你的博客目录以外的地方, 在_config.yml中添加:

   onlineConfigPath: '../config.json' #`config.json`文件路径

3. 使用以下命令获取加密密码, 将得到的passwordHash添加到config.json文件:

   > hexo bcrypt 你的密码

4. 运行hexo online, 浏览器打开http://localhost:4001/

常见问题

源码同步

• 如果你只在本地或只在服务器使用，可以选择不进行同步，
• 如果你本地和服务器都使用，每次编辑前请从git同步，编辑完成后同步到git

部署

如果你使用的自动部署，直接将源码同步到 git 仓库即可，不用hexo deploy

LICENSE

MIT

注意，本文方法主要用于 Butterfly 主题，其他主题需要有一定的前端知识 ！！！
DIY 前请先备份！！！

Pixiv 日榜

Butterfly 主题

1. 在themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug文件，文件内容如下：

   .card-widget.card-pixiv  .card-content    .item-headline      i.fa.fa-image(aria-hidden="true")      span= _p('aside.card_pixiv')    iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;")

   https://cloud.mokeyjay.com/pixiv使用的是超能小紫提供的服务，也可以自行搭建，搭建方式请看这里

2. 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_pixiv  include ./card_pixiv.pug

3. 编辑butterfly.yml文件，在card_webinfo下面添加一行card_pixiv: true

4. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义)

5. 如果不想显示，直接把butterfly.yml文件的card_pixiv: true改为card_pixiv: false即可

其他主题

将以下内容插入到需要显示的地方：

<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:100%;height:380px;margin:0;"></iframe>

访客地图

Butterfly 主题

1. 前往clustrmaps网站注册一个帐号

2. 找到Free Tools下面的Website Widget, 点击Get Map Widget

3. 输入你的博客网址，点击Next

4. 根据你自己的喜好选择样式Map widget或Globe Widget

5. 找到如下代码，记住 src(******的部分):

   <script type="text/javascript" id="clstr_globe" src="**********************">

6. 在themes\Butterfly\layout\includes\widget文件夹新建card_map.pug文件，文件内容如下：

   .card-widget.card-map  .card-content    .item-headline      i.fas.fa-globe-asia(aria-hidden="true")      span= _p('aside.card_map')    //- 下面这行适用于3D地图(Globe Widget)    script#clstr_globe(type="text/javascript" defer="defer" src="******************")    //- 下面这行适用于平面地图(Map Widget)    script#clustrmaps(type="text/javascript" defer="defer" src="******************")

   ******部分填写上面的 src, 3D 地图和平面地图任选一个，不用的把代码删掉

7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_map  include ./card_map.pug

8. 编辑butterfly.yml文件，在card_webinfo下面添加一行card_map: true

9. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_map: 访客地图(后面的文本可自定义)

10. 如果不想显示，直接把butterfly.yml文件的card_map: true改为card_map: false即可

其他主题

将上面第 5 步中的代码插入到需要显示的地方。

文章日历

1. 安装hexo-generator-calendar插件

   npm install --save git://github.com/howiefh/hexo-generator-calendar.git

2. 下载calendar.js和languages.js文件，保存到themes\Butterfly\source\js目录

   • calendar.js
   • languages.js

3. 编辑calendar.js文件，在文件最后}(jQuery));之前添加:

   $(document).ready(function () {    $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择});

4. 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！

   • 在CDN_USE->js下面添加如下内容：

   - /js/calendar.js- /js/languages.js

   • 在inject->bottom下面添加如下内容：

   - <script src="/js/calendar.js"></script>- <script src="/js/languages.js"></script>

5. 下载calendar.styl文件，保存到themes\Butterfly\source\css\_layout目录

6. 在themes\Butterfly\layout\includes\widget文件夹新建card_calendar.pug文件，文件内容如下：

   .card-widget.card-calendar  .card-content    .item-headline      i.far.fa-calendar-alt(aria-hidden="true")      span= _p('aside.card_calendar')    div.widget-wrap    div#calendar.widget

7. 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码：

   if theme.aside.card_calendar  include ./card_calendar.pug

8. 编辑butterfly.yml文件，在card_webinfo下面添加一行card_calendar: true

9. 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_calendar: 文章日历(后面的文本可自定义)

10. 如果不想显示，直接把butterfly.yml文件的card_calendar: true改为card_calendar: false即可

投票系统

Butterfly 主题

1. 前往widgetpack注册账号

2. 登陆后在点击左侧侧边栏Rating->Install, 你会看到如下代码，记住id:

   <div id="wpac-rating"></div><script type="text/javascript">wpac_init = window.wpac_init || [];wpac_init.push({widget: 'Rating', id: *****});(function() {    if ('WIDGETPACK_LOADED' in window) return;    WIDGETPACK_LOADED = true;    var mc = document.createElement('script');    mc.type = 'text/javascript';    mc.async = true;    mc.src = 'https://embed.widgetpack.com/widget.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);})();</script><a href="https://widgetpack.com" class="wpac-cr">Star Rating WIDGET PACK</a>

3. 在博客根目录/themes/Butterfly/layout/includes/post/目录内新建文件rate.pug, 内容如下：

   #wpac-ratingscript.  wpac_init = window.wpac_init || [];  wpac_init.push({widget: 'Rating', id: #{theme.rate.id}});  (function() {    if ('WIDGETPACK_LOADED' in window) return;    WIDGETPACK_LOADED = true;    var mc = document.createElement('script');    mc.type = 'text/javascript';    mc.async = true;    mc.src = '//embed.widgetpack.com/widget.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);  })();style.  #wpac-rating {    margin-top: 20px;    text-align: center;  }

4. 编辑博客根目录/themes/Butterfly/layout/post.pug文件，在!=partial('includes/post/reward', {}, {cache:theme.fragment_cache})下方添加：

   if theme.rate.enable  include includes/post/rate.pug

   注意缩进if与上面的if对齐

5. 在Butterfly.yml文件内添加：

   rate:  enable: true  id: #上面记住的id

其他主题

将第 2 步生成的代码插入到需要显示的位置。

加载中动画

Butterfly 主题

更新到最新版即可。

其他主题

1. 将以下内容添加到<head></head>标签内：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/loading.min.css">

2. 将以下内容添加到<body>标签后面：

   <div id="loading-box">  <div class="loading-left-bg"></div>  <div class="loading-right-bg"></div>  <div class="spinner-box">    <div class="configure-border-1">      <div class="configure-core"></div>    </div>    <div class="configure-border-2">      <div class="configure-core"></div>    </div>    <div class="loading-word">加载中...</div>  </div></div>

3. 将以下内容添加到</body>标签前面：

   <script>  var endLoading = function () {    document.body.style.overflow = 'auto';    document.getElementById('loading-box').classList.add("loaded");  }  window.addEventListener('load',endLoading);</script>

页脚跳动的♥

Butterfly 主题

1. 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，将©${theme.since} - ${nowYear} By ${config.author}改为&copy;${theme.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}, 将©${nowYear} By ${config.author}改为&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}

2. 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！

   • 在CDN_USE->css下面添加如下内容：

   - https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css

   • 在inject->head下面添加如下内容：

   - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

其他主题

1. 将<i id="heartbeat" class="fa fas fa-heartbeat"></i>添加到需要显示的位置

2. 将以下内容添加到<head></head>标签内：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

页脚显示网站运行时间

Butterfly 主题

• 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，在最后span=theme.ICP.text下一行添加以下内容：

  #running-time    script.      setInterval(()=>{let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);

其他主题

• 将以下内容添加到需要显示的位置

<div id="running-time"></div><script>setInterval(()=>{let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);</script>

双评论系统

这里以同时使用Valine和Gitalk, 默认使用Valine为例。
请确认Valine和Gitalk已开启并正确配置。

1. 修改themes/Butterfly/layout/includes/comments/index.pug文件，将所有的else if改为if, 并在span= ' ' + _p('comment')下面添加：

   a#switch-comment(href="javascript:void(0);" title="切换为Gitalk" target="_self")  i.fa.fas.fa-toggle-off(aria-hidden="true")

   

2. 隐藏一个评论，保留一个默认评论

   • 隐藏valine: 修改themes/Butterfly/layout/includes/comments/valine.pug文件，在#vcomment.vcomment后面添加(style=‘display:none;’)
   • 隐藏gitalk: 修改themes/Butterfly/layout/includes/comments/gitalk.pug文件，在#gitalk-container后面添加(style=‘display:none;’)
   • 隐藏其他评论系统方法与上面类似

3. 在themes/Butterfly/source/js/third-party/目录新建switch_comments.js文件，内容如下：

   $('#switch-comment').click(function () {  switchComment()  return false})function switchComment () {  const title = $('#switch-comment').attr('title') === '切换为Gitalk' ? '切换为Valine' : '切换为Gitalk'  const i = $('#switch-comment>i')  if ($('#gitalk-container').css('display') === 'none') {    $('#vcomment').slideUp('normal', () => {      $('#gitalk-container').slideDown('normal', () => {        $('#switch-comment').attr('title', title)        i.hasClass('fa-toggle-off') ? i.removeClass('fa-toggle-off').addClass('fa-toggle-on') : i.removeClass('fa-toggle-on').addClass('fa-toggle-off')      })    })  } else {    $('#gitalk-container').slideUp('normal', () => {      $('#vcomment').slideDown('normal', () => {        $('#switch-comment').attr('title', title)        i.hasClass('fa-toggle-off') ? i.removeClass('fa-toggle-off').addClass('fa-toggle-on') : i.removeClass('fa-toggle-on').addClass('fa-toggle-off')      })    })  }}

4. 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！

   • 在CDN_USE->js下面添加如下内容：

   - /js/third-party/switch_comments.js

   • 在inject->bottom下面添加如下内容：

   - <script src="/js/third-party/switch_comments.js"></script>

随机文章跳转

• 在博客根目录/scripts(没有请自行创建)下新建random.js文件，内容如下：

  hexo.extend.generator.register('random', function (locals) {  const config = hexo.config.random || {}  const posts = []  for (const post of locals.posts.data) {    if (post.random !== false) posts.push(post.path)  }  return {    path: config.path || 'random/index.html',    data: `<html><head><script>var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")</script></head></html>`  }})

  打开/random/就会随机跳转一篇文章

• 可选配置

  • 可以在_config.yml添加以下配置：

    random:  path: # 随机链接路径，默认"random/index.html"

  • 如果不想随机跳转到某篇文章，只需在这篇文章Front-matter添加random: false

文章统计图表

安装

npm install hexo-charts -S

使用

文章发布统计图

<div id="posts-chart"></div>

标签统计图

<!-- "data-length"为显示标签个数(从多到少)，默认为10 --><div id="tags-chart" data-length="10"></div>

文章分类统计图

<div id="categories-chart"></div>

示例

Butterfly 主题将图表添加到归档、分类、标签页面

将文章发布统计图添加到归档页面

在主题目录/Butterfly/layout/archive.pug文件的#archive下面添加一行#posts-chart, 新添加的比上一行多缩进两个空格。

block content  include ./includes/mixins/article-sort.pug  #archive    #posts-chart

将标签统计图和分类统计图分别添加到标签和分类页面

• 编辑主题目录/Butterfly/layout/page.pug文件，在.tag-cloud下面添加一行#tags-chart，在.category-content下面添加一行#categories-chart，新添加的比上一行多缩进两个空格。

block content  if page.type === 'tags'    .tag-cloud      #tags-chart

  else if page.type === 'categories'    .category-content      #categories-chart

文章二维码(仅 Butterfly 主题)

1. 安装hexo-helper-qrcode插件:

npm install hexo-helper-qrcode -S

2. 编辑主题目录/Butterfly/layout/includes/header/post-info.pug, 在文件最后添加以下内容：

      span.post-qrcode        span.post-meta__separator |        i.fa.fa-qrcode.post-meta__icon.fa-fw(aria-hidden="true")        a(href="javasvript:;" onmouseover='document.getElementById("post-qrcode").style.display="block"' onmouseout='document.getElementById("post-qrcode").style.display="none"')='二维码'        div#post-qrcode.post-qrcode-img          img#post-img(src=qrcode(page.permalink))

valine 评论添加博主等标签(仅 Butterfly 主题)

1. 下载valine.pug文件，替换themes/Butterfly/layout/includes/comments/valine.pug

2. 编辑butterfly.yml文件，找到valine配置，添加以下配置项:

  master: # md5加密后的博主邮箱    - f8c7c3961aea2c203160e90cd3b3a26a  friends: # md5加密后的小伙伴邮箱    - 5c2105bbfe6rfc02a6f6ae26dad3819c    - a0adabb31677df92a2405fb18a02ee4d  metaPlaceholder: # 输入框的背景文字    nick: 昵称/QQ号(必填)    mail: 邮箱(必填)    link: 网址(https://)  tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客'  verify: false # 评论时是否需要验证，需jQuery支持

3. 编辑butterfly.yml文件，将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

4. 改完之后hexo clean一下，不然不会生效

1. 编辑butterfly.yml文件，找到valine配置，在option下添加以下配置项(注意缩进！):

  option:    master: # md5加密后的博主邮箱      - f8c7c3961aea2c203160e90cd3b3a26a    friends: # md5加密后的小伙伴邮箱      - 5c2105bbfe6rfc02a6f6ae26dad3819c      - a0adabb31677df92a2405fb18a02ee4d    metaPlaceholder: # 输入框的背景文字      nick: 昵称/QQ号(必填)      mail: 邮箱(必填)      link: 网址(https://)    tagMeta:  # 标签要显示的文字,请注意顺序！      - 博主      - 小伙伴      - 访客

2. 编辑butterfly.yml文件，将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

3. 改完之后hexo clean一下，不然不会生效