厌倦了大型图像编辑软件对电脑性能的压榨？担心在线工具泄露敏感设计？让你的树莓派不在吃灰！只需一台树莓派，你就能拥有完全私有的、功能媲美 Photoshop 的在线编辑利器——Photopea！通过部署Docker项目 photopea，我们将把强大的图像处理能力装进小小的树莓派里。

为什么选择树莓派 + 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 (或导出其他格式) 保存到本地设备的习惯。
• 首次加载： 镜像较大，首次拉取和启动可能需要几分钟，请耐心等待。

想必大家都经历过学校/公司要求在网上答题的情况，为了更方面的搜索答案，于是这个脚本就出现了。

安装说明

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

2. 安装此脚本

   • Github
   • GreasyFork

必读说明

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

使用说明

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

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

3. 按要求选择模式

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

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

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

微信版本 <= 8.0.18

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的第四步进行操作

一款基于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 给忘了，有问题请及时反馈！

前言

之前搞网页 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/

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一下，不然不会生效

为了避免每次找模块时都要百度，这里记一下我比较常用的模块及其简单的使用。

cheerio

cheerio是 jquery 核心功能的一个快速灵活而又简洁的实现，主要是为了用在服务器端需要对 DOM 进行操作的地方。

安装

npm install cheerio

使用

const cheerio = require('cheerio'),$ = cheerio.load('<html><body>Hello, <b>world</b>!</body></html>');

axios-https-proxy-fix

axios-https-proxy-fix是修复axios代理 https 失败的分支版本。

安装

npm install axios-https-proxy-fix

使用

中文文档

moment

moment 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期。

安装

npm install moment

使用

const moment  = require('moment '),moment().format('YYYY-MM-DD HH:mm:ss');

Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

安装

npm install lodash

使用

中文文档

ali-oss

ali-oss 是使用 NodeJs 操作阿里云 OSS 官方模块。

安装

npm install ali-oss

使用

中文文档

Puppeteer

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。

安装

npm i puppeteer

使用

中文文档

nrm

nrm(npm registry manager )是 npm 的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。

安装

npm install -g nrm

使用

查看可选的源

> nrm ls* npm -------- https://registry.npmjs.org/  yarn ------- https://registry.yarnpkg.com/  cnpm ------- http://r.cnpmjs.org/  taobao ----- https://registry.npm.taobao.org/  nj --------- https://registry.nodejitsu.com/  npmMirror -- https://skimdb.npmjs.com/registry/  edunpm ----- http://registry.enpmjs.org/

切换到 taobao 源

> nrm use taobao  Registry has been set to: https://registry.npm.taobao.org/