Hexo Theme Fluid

基于大语言模型的 Hexo 博客自动化翻译方案

2026-01-05T10:47:13.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：Tokisaki Galaxy
原文地址：https://tokisaki.top/blog/hexo-translate-llm/

该项目已在 GitHub 开源。您可以访问 Tokisaki-Galaxy/hexo-translate-llm 获取更多信息。

跨语言的信息传播在数字化时代愈发重要。手动翻译文章不仅耗时，也难以保证更新频率。HexoLLM Translate插件为此提供了自动化解决方案。它利用大语言模型（LLM）实现博客内容的高质量翻译。

核心特性

智能双语切换提升了读者的阅读体验。插件会识别浏览器的语言偏好。读者无需手动点击即可阅读对应版本。

缓存机制保障了翻译效率。插件通过内容哈希识别变更。只有在正文或标题变动时才会触发接口调用。这有效降低了API 的使用成本。

多端同步支持远程数据库。通过 NeonPostgreSQL，不同设备间的构建缓存可以实时共享。（可选）

稳定性是插件设计的核心。内置限流器防止并发过高导致接口熔断。自动重试机制能有效应对网络波动。

SEO 优化确保了搜索权重的留存。翻译后的内容直接注入 HTML结构。搜索引擎可以完整抓取双语信息。Hexo特有的标签也得到了妥善保护，避免了页面结构的破坏。

对于不想被翻译的文章，可以通过 Front-matter 设置no_translate: true 来排除在外。

快速上手

安装插件

在 Hexo 根目录下执行安装指令：

1	`npm install hexo-translate-llm`

配置参数

在 _config.yml中加入以下配置。建议选用性价比更高的模型：

llm_translation:
  enable: true
  model: deepseek-ai/DeepSeek-V3.2
  endpoint: https://api.siliconflow.cn/v1/chat/completions
  max_concurrency: 4
  single_timeout: 120

如果不想使用远程数据库，可以跳过 Neon PostgreSQL 的配置步骤。插件会自动使用本地缓存。

安全设置

本项目通过环境变量管理敏感信息。

Vercel 部署

在 Vercel 仪表盘的项目设置中，添加 LLM_API_KEY环境变量。
设置 Storage 连接，连接到 Neon PostgreSQL 数据库。Vercel 会自动注入DATABASE_URL 环境变量。

本地构建

在根目录创建 .env 文件：

1 2	`LLM_API_KEY=您的密钥 DATABASE_URL=数据库连接地址`

使用技巧

特定文章可以排除在翻译范围之外。只需在 Front-matter 中设置no_translate: true。插件会自动同步页面的 title标签，确保浏览器标签页的语言一致性。

仿 TrymenT 游戏风格的时钟组件

2025-03-10T14:24:58.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：Tokisaki_Galaxy
原文地址：https://tokisaki.top/background-tryment-clock

该项目特别针对Hexo-Fluid主题进行了优化，其他主题可能需要手动修改主题代码以获得最佳体验。
Hexo-Theme-Fluid项目地址：https://github.com/fluid-dev/hexo-theme-fluid

效果预览

Github上的项目
在Hexo的在线预览

时钟效果展现了游戏中那种略带神秘感的界面设计，转动的双环加上特殊符号标记，营造出一种独特的视觉体验。无论是作为博客装饰还是个人页面点缀，都能增添不少科幻氛围。

介绍

一个仿 TrymenT ―今を変えたいと願うあなたへ―游戏中时钟界面设计的 Web 时钟实现。提供了一个特殊视觉风格的数字时钟。很喜欢这个游戏，RASK公司什么时候出OmegaA啊？说好分割商法，也别烂尾啊！以最左边的指针为指示，指针不动，取而代之的是内外盘不停地动。内盘代表小时，外盘代表分钟。

特性

独特的双环时钟设计
特殊的字体和符号标记
自定义日期显示格式
响应式设计，自适应不同屏幕尺寸
半透明背景图片效果

使用方法

需要的文件

TrymenT-ClocK.min.css
TrymenT-ClocK.min.js
TrymenT-ClocK-PNG

在Hexo中使用

（推荐！）Hexo注入

Hexo注入器是一项Hexo5之后提出的功能.
编写注入代码，需要在博客的根目录下创建 scripts文件夹，然后在里面任意命名创建一个 js 文件即可。

例如创建一个 /blog/scripts/Tryment-Clock.js，内容为

1	`hexo.extend.injector.register('body_begin', '', 'default');`

（比较麻烦）修改主题代码

把下面的代码放到主题的 layout/layout.ejs文件中，然后把相应的文件复制到css，js，img文件夹里面。

<% if (theme.background_trymentclock.enable) { %>
  
  <%- css_ex(theme.static_prefix.internal_css, 'TrymenT-ClocK.min.css') %>
  <%- js_ex(theme.static_prefix.internal_js, 'TrymenT-ClocK.min.js') %>
  <% } %>

# 背景的TrymenT时钟特效，如果需要切换背景图片请在主题目录下替换 /source/img/img.png
# See: https://github.com/Tokisaki-Galaxy/TrymenT-ClocK
background_trymentclock:
  enable: false

作为独立页面使用

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrymenT ClocKtitle>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/TrymenT-ClocK/TrymenT-ClocK.min.js">script>
head>
html>

注意事项

时钟效果可能会占用一定的系统资源，在低配置设备上可能会有轻微卡顿
背景图片默认为半透明效果，可能会与某些深色主题产生冲突
在移动设备上浏览时，时钟会自动调整大小以适应屏幕
如需更换背景图片，图片尺寸建议保持在1920×1080以上
不建议在页面中添加多个时钟实例，可能会导致性能问题

Fluid VSCode Extension 插件

2024-07-30T06:00:57.000Z

本文由 Fluid 用户授權轉載，版權歸原作者所有。

本文作者：Simon Lai
原文地址：https://f88083.github.io/2024/07/30/Fluid-VSCode-Extension-%E4%B8%80%E6%AC%BE%E7%82%BAHexo%E6%A1%86%E6%9E%B6Fluid%E4%B8%BB%E9%A1%8C%E6%89%93%E9%80%A0%E7%9A%84%E6%93%B4%E5%B1%95/

介紹

這個擴展是為使用 Fluid 主題的 Hexo用戶量身定製的，提供自動語句片段貼上功能。

功能

透過輸入和選擇命令來貼上語句。

使用方法

從market安裝，或是vscode裡面直接搜尋Hexo Snippet Paste Tool for Fluid安裝
F1打開命令面板
輸入Fluid Paste Tool，基本上不需要全部輸入就會顯示這個擴展的命令，輸入幾個字符後應該會看到如下所示的命令列表
所有可用命令如下所列（大多數片段可以在 Fluid 文檔中找到），詳細命令資訊可以在我的筆記中找到
- Paste Youtube Embed Code
- Paste Fold Block
- Paste Note
- Paste Label
- Paste CheckBox
- Paste Button
- Paste GroupImages
- Paste Mermaid
選擇其中之一自動貼到編輯器（某些命令可能需要輸入標題或類型等來自定義片段），下圖為執行了Paste Note的畫面
按 Enter 鍵貼上note

已知問題

其實也不知道這個算不算問題，不過沒有那麼直覺就是了，所以放在這邊。

某些語句例如button可以輸入文字，而button命令會用空格來區分url,text,以及title。這時如果輸入的文字是一句話，其中有空格，擴展就會把文字當作是title。同樣的情況也適用於其他用空格區分的命令

Fluid 摄影大赛#1

2024-02-05T09:30:00.000Z

比赛介绍

为了满足 Fluid 社群成员的精神需求，促进群友之间的感情，首届 Fluid摄影大赛正式开启作品征集。

本届比赛不设任何主题，题材除人像、写真、航拍、打鸟、动物特写以外其他均可。

获奖作品

相机组金奖

相机组银奖

相机组铜奖

手机组金奖

（轮空）

手机组银奖

（轮空）

手机组铜奖

（并列获奖）

奖项

相机组：评选出 3 幅作品，奖金依次为 1000 元、600 元、400 元
手机组：评选出 3 幅作品，奖金依次为 500 元、300 元、200 元

参赛作品

相机组作品集

手机组作品集

鸣谢

本比赛所有奖金由 @啥事都想试试·团子特别赞助！

Vercel 部署高级用法教程

2022-10-10T10:55:57.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：夜法之书
原文地址：https://blog.17lai.site/posts/e922fac8/

Vercel使用有不少需要仔细配置的地方，可惜的是，自定义Vercel缓存时间，Vercel重定向等使用方法略复杂，不是开箱即用，有一定使用门槛，故这里单独列一篇文章详细说明Vercel的一些高级使用方法！

为什么使用 vercel

国内 Github Pages 速度较慢。
vercel 速度快且能够自定义域名，能实现和Github Pages 一样的效果

vercel 官方地址：vercel.com/

开始使用

首先注册一个账号 https://vercel.com/
注册成功后进入页面，点击 News Project

然后通过绑定的 github 或者 gitlab导入需要部署的项目

如果导入的项目是打包好的静态页，FRAMEWORK PRESET 选择Other 。

点击 deployed进行部署，如果部署失败可以查看报错信息是不是上一步的某些选项没有覆盖。部署成功后会进入如图所示的界面

如何自定义域名

腾讯云域名地址：console.cloud.tencent.com/domain
vercel 静态页挂载地址：
进入到 setting 中可对项目进行一些设置，如项目名称

下面演示如何自定义域名，默认情况下部署成功后 vercel会给你生成一个默认的域名，如果想要修改成自己的域名可将域名名称修改成自己的。
当选择修改成自己的域名名称后，vercel 会检查域名指向的DNS 对不对，如果不对的话会提示你域名的 DNS应该如何配置，按照 vercel 提示的 DNS 信息

在自己的域名的 DNS 配置中进行配置，如图

配置多个域名

对其他新增的域名选择重定向到自己的主域名即可

自定义Vercel服务器位置

Vercel线路已经很快了，但是可以通过选择Vercel部署服务器位置，更进一步加快中国大陆，亚洲区域的访问速度！

香港服务器虽然没有严格测试，但是中国大陆速度应该是最快的！

vercel.com/docs
使用Vercel必备配置，本地缓存加速访问！

vercel.json

{
  "headers": [
    {
      "source": "/sw.js",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, s-maxage=86400, max-age=86400"
        }
      ]
    }
  ]
}

Vercel自定义404

learn how tocustomize the 404 page.

Vercel流量超标怎么办？

最近查看了一下Vercel流量使用情况，发现RSS订阅流量太大了，占了30GB流量！
免费Vercel账户每月只有100G免费流量，怎么办？

有两种解决方法：

使用 DNS 多线路分流，例如DNSPOD多线路负载均衡
使用 Vercel 提供的 redirects或者 rewrites功能，把rss访问重定向到其它部署方式，例如Cloudflare

查看方法：dashboard ->usage

由于个人blog也部署到Cloudflare上面了，https://cfblog.17lai.site，Cloudflare的流量目前看着没限制，如是，可以使用如下重定向方法

"redirects": [
{ "source": "/atom.xml", "destination": "https://cfblog.17lai.site/atom.xml" },
{ "source": "/rss.xml", "destination": "https://cfblog.17lai.site/rss.xml" }
  ]

详细 Cloudflare 部署方法，戳 cloudflarePages 部署

乒乓部署

也可以叫旋转门部署。
解决调试博客插件，修改半成品文章时部署到云端会影响正在查阅博客的用户的问题！
使用Docker版本本地预览是很不错，但是 jsdelivr 版本发布需要在 Github生成新 release 这时本地就不行了。乒乓部署可以解决这个问题！

具体方法就是同时部署到两个地方A和B，博客域名在两个服务器之间切换。这里以Vercel 为例

准备工作：

创建2个Github仓库，对应服务器A和B的部署
建立两个服务器A和B，分别关联两个 Github 仓库
把调试完毕的代码上传到两个仓库
这时通过服务器A和B都是可以正常浏览的

要调试的时候：

发布到A之前，把博客域名转移到服务器B
在服务A做一些调试，在线 debug 工作
特别是在线 pageseed测试调优，这种事必备方法。简单不需要新的 jsdelivr 版本调试本地 docker-hexo调试即可！

调试完毕后：

把域名切换到服务器A
同时部署到服务器B，服务器B同步A的部署内容，以便下次备用

总结就是服务器A现行，服务器B做后备，调试发布使用A，调试A的时候B就顶上前台！
这样，调试和正常部署网络服务两不误。是不是感觉自己是个大聪明！

参考&致谢

https://vercel.com/docs/project-configuration#project-configuration/redirects

系列教程

HexoDocker环境与Hexo基础配置篇
hexo博客自定义修改篇
hexo博客网络优化篇
hexo博客增强部署篇
hexo博客个性定制篇
hexo博客常见问题篇
hexo博客博文撰写篇之完美笔记大攻略终极完全版
HexoMarkdown以及各种插件功能测试

markdown 各种其它语法插件，latex公式支持，mermaid图表，plantuml图表，URL卡片，bilibili卡片，github卡片，豆瓣卡片，插入音乐和视频，插入脑图，插入PDF，嵌入iframe

在 Hexo 博客中插入ECharts 动态图表
使用nodeppt给hexo博客嵌入PPT演示
Vercel部署高级用法教程

Hexo 使用 Docker 来写文章和调试博客

2022-10-10T10:04:57.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：夜法之书
原文地址：https://blog.17lai.site/posts/40300608/

Hexo Docker环境使用篇

Docker 简介：

Docker是一种轻量级的虚拟机环境，可以隔离主机的运行环境，内核公用主机的，运行库和环境是Docker 私有的。运行 Docker程序只比主机直接运行程序性能损失微乎其微。使用 Docker你可以同时运行各种各样运行库环境而不用担心搞乱你的主机运行库环境！
Docker 运行负载远小于 Vmware 这类虚拟机， Vmware需要模拟对应的CPU指令，再虚机运行一个虚拟机自己的内核，再这个虚拟机内核之上，再运行虚拟机的运行库和程序。比Docker 多了一个内核模拟和运行，Cpu 和内存开销大增！

Docker 版 hexo 环境一键部署

博主开源定制，推荐使用！省去您大量环境配置时间。
使用 Hexo Docker 之前需要 Docker 环境，请参阅后文 Docker 安装方法
docker-hub
Github-hexo

Docker一键安装

docker create --name=hexo \
-e HEXO_SERVER_PORT=4000 \
-e GIT_USER="17lai" \
-e GIT_EMAIL="17lai@domain.tld" \
-v /mnt/blog.17lai.site:/app \
-p 4000:4000 \
bloodstar/hexo

Docker镜像直接提供最新版本node，hexo

hexo web 后台写作

基于 hexo-admin实现，具体配置实现方法见后文。
最终效果如下图所示。blog.17lai.fun访问blog，添加后缀 admin 访问hexo 后台。
使用前面提到的 hexo docker ，启动运行 hexo docker 后，非自动安装hexo-admin 以及常用插件，你也可以自定义安装你虚幻的插件，vi /app/useRun.sh。

配置 hexo-admin 根目录下_config.yml:

admin:
  username: myfavoritename #用户名
  password_hash: be121740bf988b2225a313fa1f107ca1 #密码
  secret: a secret something # secret is used to make the cookies secure
  deployCommand: '/app/tools/cide.sh'  # 自定义的部署脚本，在 hexo admin 的 deploy 标签页 deploy 按钮点击调用

配置 post metadata 根目录下_config.yml:

# add and edit your own post metadata with the admin interface
metadata:
  author_id: defaultAuthorId
  language:

hexon

Github: hexon
另一个hexo web 编辑界面，界面比hexo-admin更现代化。安装配置方法见Github

hexo-editor

hexo-editor
又一个hexo web 编辑器

支持手机

ssh key 部署

Docker会自动随机生成ssh key 在 /app/.ssh目录下面。自动部署请把ssh key添加到github 等平台。

Github详细教程

将SSH 公钥复制到剪贴板。 ...
在任何页面的右上角，单击您的个人资料照片，然后单击Settings（设置）。
在用户设置侧边栏中，单击SSH and GPGkeys（SSH 和GPG 密钥）。
单击New SSH key（新SSH 密钥）或AddSSH key（添加SSH 密钥）。

SSH 进入docker

1	`docker exec -it hexo /bin/bash`

然后就可以正常运行hexo的各种命令了，是不是非常简单？快来试试吧。

远程 SSH 访问Docker

推荐使用SecurtCRT来远程访问你的Docker。

自定义用户自动运行脚本

用户可以在这里添加自动配置，自动安装插件，等各种启动docker运行的命令。
它将在Docker启动完成后自动调用运行！

1	`vi /app/useRun.sh`

反向代理 Hexo Docker

Nginx (engine x)是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。
一些测试可能需要ssl支持，那么用nginx来反向代理一下，就可以在本地愉快的测试ssl加密功能了。
访问docker，需要192.168.0.100:4000这样数字ip + 端口号的方式不觉得很丑陋，而且需要开大量的端口，使用nginx反向代理，可以直接使用域名访问。
如果你想使用blog.17lai.fun这样的域名访问你的 docker里面运行的博客，请参考下文。

Nginx也使用docker来运行，blog.17lai.fun为本地域名，修改本地hostsdns信息来访问。

docker compose 配置

nginxweb:
  image: bloodstar/nginx-purge
  container_name: "nginxweb"
  hostname: nginxweb
  ports:
    - "80:80"
    - "443:443"
  restart: always
  volumes:
    # ${USERDIR}为你docker运行目录
    - ${USERDIR}/nginx/conf.d:/etc/nginx/conf.d:ro
    - ${USERDIR}/nginxproxy/certs:/etc/nginx/certs:ro
    - ${USERDIR}/nginx/nginx.conf:/etc/nginx/nginx.conf:ro

bloodstar/nginx-purge

nginx配置

文件 blog.conf，配置文件放到${USERDIR}/nginx/conf.d目录中

upstream blog {
    server hexo:4000;
}

server {
    listen 80;
    listen 443 ssl http2;
    server_name  blog.17lai.fun;

    ssl_certificate /etc/nginx/certs/17lai.pem;
    ssl_certificate_key /etc/nginx/certs/17lai.key;

    ssl_session_cache shared:aria2SSL:10m;
    ssl_session_timeout  30m;
    #ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    
    access_log /var/log/nginx/blog.17lai.fun_access.log combined;
    error_log  /var/log/nginx/blog.17lai.fun_error.log;
    
    keepalive_requests 10000;
    
    location / {
        #proxy_redirect off;
        proxy_pass http://blog;

        proxy_buffering off;
        
        add_header X-Cache-Status $upstream_cache_status;
        proxy_set_header Host $http_host;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Ssl     on;
        proxy_set_header  X-Forwarded-For     $proxy_add_x_forwarded_for;      
        proxy_set_header  X-Frame-Options     SAMEORIGIN;
        
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    } 
}

Windows DNS修改

windows hosts文件路径为：C:\Windows\System32\drivers\etc\HOSTS

管理员权限用文本编辑器打开这个文件并添加192.168.0.100 blog.17lai.fun，然后，你就可以在本地浏览器中使用域名访问你的blog了！

Linux DNS 修改

Linux hosts 文件路径为： /etc/hosts

用文本编辑器或者命令行工具vim打开这个文件并添加192.168.0.100 blog.17lai.fun，然后，你就可以在本地浏览器中使用域名访问你的blog了！

# root用户一条指令搞定
echo "192.168.0.100 blog.17lai.fun" >> /etc/hosts

#或者使用 vi 或者 vim
vi /etc/hosts

获取 SSL 证书

如果你购买了域名，可以在域名服务商获得免费的ssl证书。
自己生成私有证书，使用时需要给本地计算机，浏览器添加==你自己的根证书==，才能使你的ssl证书在==你自己的浏览器==中生效。

使用Hexo Docker之前需要Docker 环境，下面是Docker 环境安装方法。

Centos 安装Docker

X86（一键安装脚本）：

1	`curl -sSL https://get.docker.com/ \| sh`

Arm：

步骤1

1	`sudo yum install -y yum-utils device-mapper-persistent-data lvm2`

步骤2

添加仓库

1	`sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo`

步骤3

安装Docker

1	`sudo yum install docker-ce docker-ce-cli containerd.io`

完成安装

步骤4

启动Docker

1	`sudo systemctl start docker`

QNAP 安装Docker

在系统应用的AppCenter中找到 ContainerStation，可以直接点击安装即可。

群晖安装 Docker

首先要说的是，x86 平台的群晖才能用的上 Docker套件，因此，ARM 架构平台的群晖只能说非常遗憾了。
　　打开套件中心，在 “所有套件” 中找到 Docker 并安装：

系列教程

本文是系列教程基于Hexo的matery主题搭建博客并深度优化完全一站式教程第一篇的Docker部分

HexoDocker环境与Hexo基础配置篇
hexo博客自定义修改篇
hexo博客网络优化篇
hexo博客增强部署篇
hexo博客个性定制篇
hexo博客常见问题篇
hexo博客博文撰写篇之完美笔记大攻略终极完全版
HexoMarkdown以及各种插件功能测试

Coding 免费图床方案

2022-03-11T15:47:47.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：千泷
原文地址：https://www.myql.xyz/post/92e90c46/

现在绝大多数自建博客用的图床方案都是 GitHub + jsDelivr +PicGo，包括作者的站点也是一样，优点在于零成本，简单的搭建方式以及不错的访问速度，但随着jsDelivr 备案被取消，国内访问不再稳定，我开始考虑更好的代替品。

之前其实也试过 Coding 或 Gitee作为自建图床，但是体验都不是特别完美，Coding图床支持的软件太少了，不管是管理还是上传都并不是很方便，而 Gitee图床超过 1M 就必须登录才能查看，之前试过使用类似于 SyncRepo to Coding 将同步到 Coding，但是效果不太理想。

🤔 思路

通过 Coding 持续集成自动将 GitHub 仓库实时同步到 Coding仓库，并且替换 PicGo 中自定义网址。

相同方法适用于 Gitee，不过更建议使用 Coding。

🧐 优势

Coding 每月 1000 分钟，单任务 30分钟，并且不限次数，仅用来同步完全够用，并且构建速度极快，每次构建 7~8秒左右，通过 PicGo上传图片后几乎感觉不到太大的延迟就可以显示出图片。

相比于直接使用 Coding 或 Gitee 当图床的优势在于：

支持的软件和项目变多
可以通过 vscode 等一键替换已有链接，达成无感迁移
不改变原有基于 GitHub + jsDelivr + PicGo 方案的使用方式
可以搭配类似于 Imgbot或 action-tinify完成图片的自动压缩优化
管理方面可以使用 picx 或boomb类似的项目进行在线管理

🪛 需要的准备

GitHub 账号
Coding 账号
VScode / Typora
PicGo / vs-picgo/ MarkdownImage

🛠️ 部署

打开 Coding后创建一个项目。

选择按需选择，勾选代码托管和构建流水线&自动化测试完成创建。

进入项目后先创建项目令牌，记录下用户名和密码备用。

接下来导入 GitHub 中你选择当图床的仓库。

完成后点击持续集成选择构建计划划到最下方选择自定义构建过程，代码仓库选择GitHub选择你刚刚导入的仓库。

点击确定后会自动跳转到配置流程，点击文本编辑器输入以下代码，记得替换成自己的 Coding 仓库 Url：

pipeline {
  agent any
  stages {
    stage("检出") {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: GIT_REPO_URL,
            credentialsId: CREDENTIALS_ID
        ]]])
      }
    }
    stage('拉取到Coding') {
      steps {
        echo "正在拉取"
        sh 'git push -f https://$CODING_NAME:$CODING_TOKEN@e.coding.net/你的团队名/项目名称/代码仓库名称.git HEAD:main'
        echo "拉取完成"
      }
    }
  }
}

在环境变量里输入CODING_NAME和CODING_TOKEN值就是刚刚申请的项目令牌的用户名和密码，完成后记得保存。

在触发规则里修改触发方式为推送到main分支时触发，并且将手动触发改为main（可根据自己实际需求选择）。

完成后点击立即构建, 从现在起，你在 GitHub上的仓库会自动同步到 Coding 仓库上，到此部署结束。

🚀 实际使用

开打 PicGo / vs-picgo/ MarkdownImage 中的任意一个，配置GitHub图床，将自定义网址替换为：
https://你的团队名.coding.net/p/你的项目名称/d/你的代码仓库名称/git/raw/main。

以 vs-picgo为例：

现在直接使用快捷键上传图像，图片会自动将 GitHub 的链接替换为 Coding的链接，请开始愉快的写作吧！

在 Fluid 主题中加入谷歌广告

2022-02-20T12:22:02.000Z

诚如大家所见，本主题的官网（当前这个站和文档站）都挂上了谷歌广告。

当然这不是开发组穷疯了，毕竟这种广告 CPM 计费每千人也就 1美元左右，就算把历史的访问量全折算掉也就几百块钱。

主要是因为 Fluid维护了这么长时间都是靠爱发电，域名和服务器都是自费，不得不加入一些商业行为才能从长计议。

同时我们正在寻找商业赞助商，如果贵司想在 Fluid 项目的 README展示广告位（每月 6K+ Views定向流量曝光）），或者有其他赞助形式，可将联系方式发送邮件至zkqiang#126.com (#替换为@)。

回到主题，大家写博客都想给自己提供一些回报，挂 CRM广告是最方便的方式之一，而谷歌广告在所有 CRM计费广告中是单价比较高的，不过就是提现比较麻烦，所以用之前最好先了解下，另外建议大家在博客有固定的流量后再加入广告，不然广告都是给自己看，可能会被谷歌判断刷量（谷歌对广告的规范很严格，放置过多的广告或者有诱导点击行为都是违规的）。

本文提供的方式需要 Fluid v1.9.0 以上版本。

然后在博客根目录下找到 scripts文件夹（不存在就创建一个），进入后任意创建一个 js 文件，比如inject.js，复制以下内容：

hexo.extend.filter.register('theme_inject', function(injects) {
injects.bodyEnd.raw('adsense', '');
injects.head.raw('adsense', '');
injects.postLeft.raw('adsense', '
');
injects.postCopyright.raw('adsense', '
');
});

以上代码的意思请参考 Fluid注入功能，插入的广告位置和本页是一样的，分别是文章页的左侧和文末位置。

复制之后，把其中 ca-pub-xxxxxx 和data-ad-slot="yyyyyy" 按谷歌广告里提供的编号替换即可。

保存后就不需要其他额外的配置了，如果谷歌广告的配置没有问题的话，部署之后应该就能看到广告展示出来。

Hexo Netlify CMS 在线编辑博客

2021-04-20T14:41:54.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：千泷
原文地址：https://www.myql.xyz/post/e00ab0f6/

✨前言

我们都知道，Hexo是一个静态部署博客的框架，优点在于速度快，成本低（无需服务器），缺点在于繁琐，你每次更新文章都需要去改代码，再部署推送，修改配置也是如此，你不能像WordPress 一样直接在后台修改配置并使它生效。

不过有很多教程可以让你无需繁琐的部署，只管推送代码，通过GitHub Actions，travis-ci，vercel，Netlify等都可以便捷的进行博客的部署，只管写代码然后推送就好，类似的教程有非常多，在此就不再重复介绍。那么，我们是否可以在此基础上，更加便捷的进行静态博客的写作和管理？答案是可以的。

我们可以通过将博客部署到 Netlify，并使用 Netlify CMS 来做到这一点。

首先，我们来了解一下配置完之后可以做到哪些事情？

在线新建，编辑，预览，删除博客文章
支持文章草稿，工作流
支持对博客图片的管理
支持在线修改博客配置，例如对首页顶部图的修改，友链的修改

🎈图片预览

配置完的界面

在线对文章进行编辑，修改

工作流

对媒体资源的管理

对其他页面的修改

在线修改博客首页、文章页、归档页等页面的顶部图

在线添加、编辑友链页面

🔗在线演示

为了更加直观，做了一个已经配置完毕的博客，你可以在线体验上述功能 👉点我查看

📃简单说明

下面我将会以 Hexo +做演示，并配置 Fluid主题的友链功能，达到在线编辑预览友链的目的，但此方法不仅仅只适用于Fluid主题的友链功能，其他各类主题也可以通过此方法达到在线修改配置的目的，只要你配置完成，几乎可以修改所有配置项。包括但不限于以下类型的文件yml、yaml、toml、json、md、markdown、html具体请查看👉Netlify CMS 文档。

🔧具体配置

Netlify CMS使用的前提条件是你必须将博客部署到 Netlify上。因为网上有很多部署教程，这里不再重复。

具体可以查看：

博客通过Netlify 实现持续集成
将Hexo 静态博客部署到 Netlify

👟准备工作

在部署完成后，你需要开启 Identity

进入设置中

将 Registration preferences 修改为Invite only 此项为是否开启注册，默认是开启注册。修改为Invite only后表示仅受邀请的用户可以注册，当然此项你可以在自己注册完毕之后再行修改。

下滑找到 Git Gateway 并开启。

至此准备工作完成

🎨修改博客配置

在博客根目录中找到_config.yml并修改，这一步是跳过文件夹渲染，不然后面会出错
1
skip_render: admin/*

在博客source文件夹中，创建admin文件夹，并新建两个文件index.html和config.yml

在 index.html 中添加以下内容

html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="x-UA-Compatible" content="IE=Edge">
        <meta name="apple-mobile-web-app-status-bar-style" content="white" />
        <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js">script>
        <title>魔王の领地title>
    head>
    
    <body>
        <script defer="true" src="https://cdn.jsdelivr.net/npm/netlify-cms@2/dist/netlify-cms.js">script>
    body>

html>

在 config.yml 中添加如下折叠内容

点击展开配置内容

通过 Hexo 5 注入器为主题添加新功能

2020-10-17T12:00:00.000Z

Hexo 注入器

Hexo 注入器是Hexo 5 版本自身加入的一项新功能，所以在所有 Hexo主题都是支持这个功能的。

该注入器可以将 HTML 片段注入生成页面的和节点中。

编写注入代码，需要在博客的根目录下创建 scripts文件夹，然后在里面任意命名创建一个 js 文件即可。

例如创建一个 /blog/scripts/example.js，内容为：

1	`hexo.extend.injector.register('body_end', '', 'default');`

上述代码会在生成的页面注入加载jquery.js 的代码。

register函数可接受三个参数，第一个参数是代码片段注入的位置，接受以下值：
- head_begin: 注入在之后（默认）
- head_end: 注入在之前
- body_begin: 注入在之后
- body_end: 注入在之前

第二个参数是注入的片段，可以是字符串，也可以是一个返回值为字符串的函数。

第三个参数是注入的页面类型，接受以下值：
- default: 注入到每个页面（默认值）
- home: 只注入到主页（is_home() 为true 的页面）
- post: 只注入到文章页面（is_post() 为true 的页面）
- page: 只注入到独立页面（is_page() 为true 的页面）
- archive: 只注入到归档页面（is_archive() 为true 的页面）
- category: 只注入到分类页面（is_category() 为true 的页面）
- tag: 只注入到标签页面（is_tag() 为true 的页面）
- 或是其他自定义 layout 名称，例如在Fluid 主题中 about对应关于页、links 对应友联页

实际案例

在实际使用中，建议将 js 代码独立成为 js 文件，存放在博客的source 目录下，然后在 scripts 里通过一个包含injector 的 js 文件统一引入。

例如创建一个/source/js/custom.js，里面包含初始化的代码，然后在/scripts/injector.js 里写入：

1
2
3

hexo.extend.injector.register('body_end', `
  
`)

以下案例都采用类似的形式，不再赘述。

APlayer 音乐播放器

hexo.extend.injector.register('body_end', `
  
  
  
  
`);

!(function() {
  var oldLoadAp = window.onload;
  window.onload = function () {
    oldLoadAp && oldLoadAp();

    new APlayer({
      container: document.getElementById('aplayer'),
      fixed: true,
      autoplay: false,
      loop: 'all',
      order: 'random',
      theme: '#b7daff',
      preload: 'none',
      audio: [
        {
          name: 'song1',
          artist: 'artist1',
          url: '/songs/song1.mp3',
          cover: '/img/cover.jpg'
        }
      ]
    });
  }
})();

更多参数详见 Aplayer文档。

DaoVoice 聊天插件

先在 https://daovoice.io 注册一个账号，按其中的引导获得appId，然后添加如下代码：

1
2
3

hexo.extend.injector.register('body_end', `
  <script defer src="/js/daovoice.js">script>
`);

!(function() {
  var appId = '这里填上注册后账号的 appId';

  (function (i, s, o, g, r, a, m) {  
    i['DaoVoiceObject'] = r;
    i[r] = i[r] ||
      function () {
        (i[r].q = i[r].q || []).push(arguments);
      };
    i[r].l = 1 * new Date();
    a = s.createElement(o);
    m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    a.charset = 'utf-8';
    m.parentNode.insertBefore(a, m);
  })(window, document, 'script', ('https:' === document.location.protocol ? 'https:' : 'http:') + '//widget.daovoice.io/widget/' + appId + '.js', 'daovoice');
  daovoice('init', {
    app_id: appId,
  });
  daovoice('update');
})();

文章时效性提示

技术性文章往往存在时效性的问题，比如某些文章会介绍一些临时解决方案，但随着时间推移可能已经失效了。我们可以通过判断发布时间（即文章设置的date）与当前时间的间隔，来为文章开头插入一条提示。

代码效果如下所示：

文章时效性提示

这是一篇发布于 263 天前的文章，部分信息可能已发生改变，请注意甄别。

(function() {
  var times = document.getElementsByTagName('time');
  if (times.length === 0) { return; }
  var posts = document.getElementsByClassName('post-content');
  if (posts.length === 0) { return; }

  var pubTime = new Date(times[0].dateTime);  /* 文章发布时间戳 */
  var now = Date.now()  /* 当前时间戳 */
  var interval = parseInt(now - pubTime)
  /* 发布时间超过指定时间（毫秒） */
  if (interval > 3600*24*30*1000){
    var days = parseInt(interval / 86400000)
    posts[0].innerHTML = '' +
      '
文章时效性提示
这是一篇发布于 ' + days + ' 天前的文章，部分信息可能已发生改变，请注意甄别。' +
      '
' + posts[0].innerHTML;
  }
})();

Fluid 页脚增加网站运行时长

2020-10-17T11:00:00.000Z

Fluid 1.8.4版本支持自定义页脚内容了，群友常改的网站运行时长，这次无需再修改源代码。

只需要在主题配置中的 footer: content 添加：

footer:
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexospan>a>
    <i class="iconfont icon-love">i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluidspan>a>
    <div style="font-size: 0.85rem">
      <span id="timeDate">载入天数...span>
      <span id="times">载入时分秒...span>
      <script src="/js/duration.js">script>
    div>
  '

content 前三行是 Fluid原有的页脚内容，建议不要删除，可稍作修改，保留 Fluid的超链接，用于向更多人推广主题。

duration.js 包含的才是功能代码，我们在博客目录下创建source/js/duration.js，内容如下：

!(function() {
  /** 计时起始时间，自行修改 **/
  var start = new Date("2020/01/01 00:00:00");

  function update() {
    var now = new Date();
    now.setTime(now.getTime()+250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length === 1 ){
      hnum = "0" + hnum;
    }
    minutes = (now - start) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length === 1 ){
      mnum = "0" + mnum;
    }
    seconds = (now - start) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length === 1 ){
      snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = "本站安全运行 "+dnum+" 天";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
  }

  update();
  setInterval(update, 1000);
})();

不要忘记把上面注释的时间改为自己的时间，至此这项功能就引入到

使用 ECharts 插件绘制炫酷图表

2020-06-20T15:00:00.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：pxxyyz

原文地址：https://pxxyyz.com/posts/15698/

ECharts使用

安装hexo-tag-echarts插件

1	`$ npm install hexo-tag-echarts --save`

注意：ECharts官网教程-5分钟上手ECharts里的npm install echarts --save并不适合hexo博客，这种安装方式无效，请安装hexo-tag-echarts插件。
添加如下js文件

// 通过jsDelivr的CDN引入echarts
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js">script>
// 使用GL里的各种组件时需要添加，否则可不需要
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.1/dist/echarts-gl.min.js">script>

在markdown文件下添加echarts，格式如下

<script>
...
script>

{% echarts 400 '85%' %}
...
{% endecharts %}

{% echarts 400 '85%' %}和{% endecharts %}之间添加echarts的option。
- 参数400指定图表展示的高度为400px，85%则指定图表展示的宽度为85%，如不写明这两项参数则默认值为高度400px，宽度81%。
- title：标题组件，包含主标题和副标题。
- legend：图例组件。
- tooltip：提示框组件。
- toolbox：工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
- xAxis、yAxis：直角坐标系 grid 中的 x 轴、y轴。
- series：系列列表。每个系列通过type决定自己的图表类型。
  - series-line：折线/面积图
  - series-bar：柱状/条形图
  - series-pie：饼图
  - series-scatter：散点图
  - series-radar：雷达图
  - series-tree：树图
  - series-boxplot：箱形图
  - series-candlestick：K线图
  - series-heatmap：热力图
  - series-graph：关系图
多个图表的数据和函数可能会冲突，请注意！
直接在html中直接绘制，然后用展示效果更佳。关于hexo的html文件渲染问题，可以参考Fluid+自定义html，主要是去掉head部分的说明。
在html绘图ECharts的格式如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js">script>

<div id="main" style="width: 600px;height:400px;">div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    ...
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 刷新调整
  window.onresize = function () {
    myChart.resize();
  }
script>

部分echart需要引入其他js，如bmap、jquery等，请自行添加。
使用百度地图的api需要申请密钥(ak)，使用格式如下，注意替换FAKE_AK。

1 2	`<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FAKE_AK">script> <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=FAKE_AK">script>`

实例

下面给出一些echarts官方实例，大多数都可以交互。

折线图Line

Stackedarea chart

AreaPieces

Rainfall

LineEasing Visualizing

柱状图Bar

柱状图动画延迟

柱状图框选

极坐标系下的堆叠柱状图

饼图Pie

Textureon Pie Chart

地理坐标/地图GEO/Map

AirQuality - Baidu Map

可进入页面查看

K 线图Candlestick

CandlestickBrush

可进入页面查看

雷达图Radar

Proportionof Browsers

关系图Graph

GraphWebkit Dep

可进入页面查看

树图Tree

MultipleTrees

日历坐标系Calendar

CalendarHeatmap Horizontal

3D

Bar3D- Simplex Noise

可进入页面查看

SurfaceWave

pyecharts

\[\text{py} + \text{echarts} = \text{pyecharts}\]

是什么

Echarts是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而Python是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts诞生了^[2]。

怎么用--py或jupyter

pip 安装

1	`$ pip install pyecharts -U`

生成 HTML

from pyecharts.charts import Bar
from pyecharts import options as opts

# V1 版本开始支持链式调用
bar = (
    Bar()
    .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
    .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
    .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
    .set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
)
bar.render()

# 不习惯链式调用的开发者依旧可以单独调用方法
bar = Bar()
bar.add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105])
bar.add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49])
bar.set_global_opts(title_opts=opts.TitleOpts(title="某商场销售情况"))
bar.render()

Demo：pyecharts画廊^[3]

参考

给博客文章嵌入 PPT 演示

2020-06-09T04:30:00.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：pxxyyz

原文地址：https://pxxyyz.com/posts/44941/

效果

可以通过鼠标和键盘控制

页面: ↑/↓/←/→ Space Home End（空格,home键,end键）
全屏: F
Overview: -/+
演讲者笔记: N
网格背景: Enter

nodeppt

首先可以看看官网给的demo，非常的炫酷。

安装nodeppt

1	`$ npm install -g nodeppt`

使用nodeppt

# new：使用线上模板创建一个新的 md 文件
# create a new slide with an official template
$ nodeppt new slide.md
# 使用模板
$ nodeppt new username/repo xxx.md

# create a new slide straight from a github template
$ nodeppt new slide.md -t username/repo

# serve：启动一个 md 文件的 webpack dev server
# start local sever show slide
$ nodeppt serve slide.md
# start local sever show slide with port
$ nodeppt serve slide.md -p port

# build：编译产出一个 md 文件
# to build a slide
$ nodeppt build slide.md

生成的网页可以使用键盘操作(类似PPT操作)
- Page: ↑/↓/←/→ Space Home End
- Fullscreen: F
- Overview: -/+
- Speaker Note: N
- Grid Background: Enter
- nodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker既可以打开演讲者模式，双屏同步
端口port的好处是可以照着官网的demo文件学习和修改，保证多个slide.md在浏览器查看时不会冲突，默认的链接是http://192.168.0.105:8080/。
官网的demo文件在Github其中的index.md。
产生pdf：直接在浏览器上command+P/ctrl+P
产生html：
- 之前版本通过nodeppt generate ./ppts/demo.md -a，见GithubnodePPT v1.2.0
- 当前版本产生html利用built指令，例如nodeppt build slide.md，产生的html在默认文件夹dist中，包含CSS、IMG、JS三个文件夹和demo.html。
- 在nodeppt仓库的Issue^[1]上找到一个小哥做的爬虫程序，亲测有效。会生成一个html文件，虽然文件会大一点。不过用index.md文件实验，发现(某些)图片响应时间过长导致失败，不过自己写的markdown基本无压力转html，给小哥点大大的赞👍而且小哥表示：
  之前试过直接用build，效果没问题，但build出来会有几个文件，如果通过手机或email分享出去直接播放的话稍显麻烦。

nodeppt入门

配置与hexo的post文件头一样，用 yaml 语法设定基本配置

title: nodeppt markdown 演示
speaker: 三水清
url: https://github.com/ksky521/nodeppt
js:
    - https://www.echartsjs.com/asset/theme/shine.js
prismTheme: solarizedlight
plugins:
    - echarts
    - mermaid
    - katex

正文使用对整个 markdown文件进行拆分，拆成单页的幻灯片内容。
图片、样式、布局、icon、动画等设置可以看看仓库的文档和demo文件学习。
演讲者模式的批注通过来:::语法添加，然后再页面的链接添加?mode=speaker，按N开启演讲中模式。

1
2
3

:::note
## Note here
:::

踩坑

CSS样式导入失败

生成的html数学公式的格式全部错误，即使在nodeppt的配置部分引入katex的JS和CSS，导出的文档仍然会出错。

通过nodeppt build的html页面

打开生成的html文件可以看到^[2]

<link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//cdn.staticfile.org/prism/1.15.0/themes/prism.min.css" />
<link rel="stylesheet" href="//cdn.staticfile.org/KaTeX/0.10.0-rc.1/katex.min.css" />
<link rel="stylesheet" href="//cdn.staticfile.org/KaTeX/0.5.1/katex.min.css" />

只要把文件中所有//开头的都替换成https://，如

<link rel=stylesheet href=https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css>
<link rel=stylesheet href=https://cdn.staticfile.org/prism/1.15.0/themes/prism.min.css>
<link rel=stylesheet href=https://cdn.staticfile.org/KaTeX/0.10.0-rc.1/katex.min.css>
<link rel=stylesheet href=https://cdn.staticfile.org/KaTeX/0.5.1/katex.min.css>

这样控制台就不会报错了，数学公式和fa-icon能正常显示了。

通过py程序爬的html页面

配合KaTeX官网的使用文档，在生成的html文件引用katex的JS和CSS。

html>

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

    
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous">script>

    
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
        onload="renderMathInElement(document.body);">script>
  head>
  ...
html>

添加后公式都能正确显示了。

在博客添加nodeppt

通过py程序爬的html页面

在Hexo博客里想调用或者链接nodeppt生成的html，需要hexo设置skip_render,指定不进行渲染的文件或文件夹，例如在source目录下新建nodeppt来存放nodeppt生成的html，则需要在根目录下的_config.yml文件添加

1 2	`skip_render: - nodeppt/*.html`

通过nodeppt build的html页面

1 2	`skip_render: - nodeppt/**`

文件匹配是基于正则匹配的，如果需要忽略全部文件(/*)、指定类型type文件(/*.type)、全部文件以及子目录(/**)以及多个文件需要用(- file/**)。

对应的文件访问格式是../../nodeppt/file.html或../../nodeppt/file/demo.html，本页演示的加载是通过iframe实现的。

1	`<iframe src="../../nodeppt/file.html" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame">iframe>`

注意：如果这一步不执行的话，debug会发现nodeppt生成的html会被hexo处理，产生错误

1 2	`FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html Nunjucks Error: [Line 9418, Column 3465] expected variable end`

至于使用cdn来使用html似乎不行，出来的是html的源码，而不是网页。如果使用cdn的方式能成功就不用这么麻烦的skip_render。

有一种简单的方法就是用github或者coding等部署nodeppt的html，再iframe的src填对应的网址。如果hexo的skip_render设置正确，也可通过网址主页下的nodeppt下找到。

https://pxxyyz.com/nodeppt/%E5%A4%9A%E5%A4%8D%E5%8F%98%E8%BF%91%E6%9C%9F%E8%BF%9B%E5%B1%95/demo.html
http://uwrfy5.coding-pages.com/

参考

分享个脚本，导出单个离线HTML文件，不是用build#289
↩︎
当在浏览器里直接打开index.html时，打开速度会非常慢#286
↩︎

在 Fluid 主题首页上加入一言

2020-06-03T15:30:00.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：pxxyyz

原文地址：https://pxxyyz.com/posts/30454/

群里有个小哥想在首页 Slogan 上显示一言，在 GitHub 上搜了搜，还真有Fluid 主题的改造，我按照思路写下改造的步骤。

修改代码

typed.ejs

修改layout\_partial\plugins目录下的typed.ejs

<% if(theme.fun_features.typing.enable && page.subtitle !== false){ %>
  <%- js_ex(theme.static_prefix.typed, "/typed.min.js") %>
  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + " ",
            ],
            cursorChar: "<%- theme.fun_features.typing.cursorChar %>",
            typeSpeed: <%- theme.fun_features.typing.typeSpeed %>,
            loop: <%- theme.fun_features.typing.loop %>,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }
    <% if(is_post()) { %>
        typing("subtitle", "<%- data.subtitle %>")
    <% } else if(theme.index.hitokoto.enable){ %>
        fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
           typing("hitokoto", data.hitokoto)
        })
        .catch(console.error)
    <% } else { %>
        typing("subtitle", "<%- data.subtitle %>")
    <% } %>
  script>
<% } %>

将原来的功能放在typing函数里面，再判断打字机显示subtitle还是hitokoto
- 所有的post都显示subtitle，即markdown的title，page的title是网站的标题
- 除了post以外，判断theme.index.hitokoto.enable
  - 设置显示一言，则通过fetch调用hitokoto的API，这个部分官方说明^[1]和DIY教程^[2]都说的很详细了
  - 如果设置不显示一言，则显示subtitle
- hitokoto比subtitle优先级高，这会导致归档、分类、标签等页面的打字机显示hitokoto
- 如果只需要在首页显示hitokoto，但在非post的页面显示原subtitle，这需要判断页面的属性，据我观察，所有的非post的页面布局(layout)都会设置page.layout=”XXX“，但是index和page没有设置，因此，可以通过!page.layout判断来判断是否为首页，当然，post页面设定显示subtitle，就不在考虑范围内，这样只需将上面的else if条件修改如下

1	`<% } else if(theme.index.hitokoto.enable && !page.layout) { %>`

layout.ejs

修改layout目录下的layout.ejs，在和<% if(is_post()) { %>之间插入如下代码

<span class="h2" id="subtitle">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- subtitle %>
    <% } %>
span>

<% if(!is_post()) { %>
<br>
<span class="h2" id="hitokoto">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- hitokoto %>
    <% } %>
span>
<% } %>

<% if(is_post()) { %>
<%- partial('_partial/post-meta') %>
<% } %>
div>

这个部分设置显示hitokoto的样式和位置，不设置这个会报关于typing("hitokoto", data.hitokoto)的错误

1	`TypeError: Cannot read property 'tagName' of null`

修改配置

在source\_data目录下修改主题配置文件fluid_config.yml，在index下设置hitokoto的开关

#---------------------------
# 首页
# Index Page
#---------------------------
index:
# 添加hitokoto
  slogan:  # 首页副标题的独立设置
    enable: true  # 为 false 则不显示任何内容
    text: 'More haste, less speed.'  # 为空则按 hexo config.subtitle 显示
  hitokoto:  # 非post页面显示一言
    enable: true  # slogan 和 hitokoto 不能同时启用，优先显示hitokoto

当theme.index.hitokoto.enable == true时，slogan里的text不在显示，因此只有关闭hitokoto才能在首页显示slogan的text或页面的subtitle

加入出处

如果想加入出处，可在打印data.hitokoto后加入data.from，以及相应的格式

1	`typing("hitokoto", '『' + data.hitokoto + '』' + '<br /> <h5>'+ '——' + '「' + data.from + '」' + 'h5>')`

另一种显示出处的方法是另起一行打印data.from，

fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
    typing("hitokoto", data.hitokoto)
    typing("hitofrom ", data.from)
})
.catch(console.error)

并在layout.ejs添加<%- hitofrom %>

<% if(!is_post()) { %>
<br>
<span class="h2" id="hitokoto">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- hitokoto %>
    <% } %>
span>
<br>
<span class="h2" id="hitofrom">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- hitofrom %>
    <% } %>
span>
<% } %>

第一种是打印一段话，从头到尾只有一个cursorChar，但样式不太好改
第二种是打印两段话，会出现视觉混乱(个人觉得)，样式方便调整

总结

当然这个还可以继续改下去，例如添加出处(hitofrom)、设置循环(loop)、修改样式等。

最后也是最重要的，感谢tanxinzheng^[3](虽然不认识，但是新知识get！😁)。

参考

一言开发者中心 ↩︎
为您的Hexo博客添加Hitokoto一言功能↩︎
CodeWorld ↩︎

Hexo 云服务备份与使用 Jupyter

2020-05-28T06:30:00.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：pxxyyz

原文地址：https://pxxyyz.com/posts/32990/、https://pxxyyz.com/posts/60533/

前言

记录hexo博客遇到的问题：

免密git
自动备份
云服务器开启Jupyter Notebook
在博客的菜单访问Jupyter（使用Nginx重定向实现url访问端口）
公式渲染引擎

云服务器备份

参考「Hexo博客部署到腾讯云服务器」^[1]后遇到了两个问题：

每次在本地部署博客时都要重复输入密码

deploy:
    type: git
    repo: root@***(服务器ip,内网外网都行):/home/git/blog.git    #仓库地址
    branch: master    #分支

备份时hexo自带的backup无效

backup:
    type: git
    repo: root@***(服务器ip,内网外网都行):/home/git/backup.git    #仓库地址
    branch: master    #分支

免密git

在这一部分参照了「使用Git+Hooks实现Hexo站点自动部署到CentOS服务器上」^[2]的配置SSH免密登陆步骤。

1 2	`$ ssh-copy-id -i ~/.ssh/id_rsa.pub your_user_name@HostIP //添加公钥 $ ssh your_user_name@HostIP //验证是否添加成功`

因为部署时用的root上传，因此这里的your_user_name设置git和root两个。添加成功后ssh -v git@HostIP和ssh -v root@HostIP显示Welcome to XXX !

自动备份

这里我按照「deploy的流程在服务器设置了自动化备份」^[1]，主要思路是在服务器设置一个独立的文件夹backup，再用类似deploy的钩子blog.git，构造一个备份的钩子deploy.git将博客的备份文件上传。

获取root权限
1
$ su root

建立git仓库

1 2	`$ cd /home/backup $ git init --bare backup.git`

修改backup.git权限
1
$ chown git:git -R backup.git
在 /home/hexo/backup.git 下，有一个自动生成的hooks 文件夹，我们创建一个新的 git 钩子post-receive，用于自动部署。
1
$ vim backup.git/hooks/post-receive

按 i键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定Git 的工作树（源代码）和 Git 目录

#!/bin/bash 
git --work-tree=/home/backup --git-dir=/home/git/backup.git remote add origin
git --work-tree=/home/backup --git-dir=/home/git/backup.git checkout -f
# git --work-tree=/home/backup --git-dir=/home/git/backup.git checkout -b master # 创建切换分支
git --work-tree=/home/backup --git-dir=/home/git/backup.git push origin master # 提交代码至分支

按 Esc 键退出编辑模式，输入:wq保存退出。（先输入：，然后输入wq回车）

修改文件权限，使得其可执行。

1	`$ chmod +x /home/git/backup.git/hooks/post-receive`

博客根目录_config下增加(因为服务器没有分支，默认是master，使用backup钩子)

deploy:
    type: git
    repo: root@***(服务器ip,内网外网都行):/home/git/backup.git    #仓库地址
    branch: master    #分支

备份hexo backup(使用 Hexo-Git-Backup插件)
1
2
3
$ hexo clean $ hexo g $ hexo b

这个地方走了不少弯路，因为backup阶段每次都提示错误：

1 2	`fatal: 'xxx' does not appear to be a git repository fatal: Could not read from remote repository.`

我通过搜索fatal-does-not-appear-to-be-a-git-repository找到解决思路，用Git命令自动备份。详细参见「HEXO博客实现自动备份」^[3]。

安装 shelljs 模块
1
$ npm install --save shelljs
编写自动备份脚本：主题目录下scripts文件夹下新建一个js文件，文件名随意取，例如update.js。

require('shelljs/global');
try {
    // hexo.on('deployAfter', function() {         //当deploy完成后执行备份
    hexo.on('backupAfter', function() {            //当backup完成后执行备份
        run();
    });
} catch (e) {
    console.log("产生了一个错误<(￣3￣)> !，错误详情为：" + e.toString());
}
function run() {
    if (!which('git')) {
        echo('Sorry, this script requires git');
        exit(1);
    } else {
        echo("======================Auto Backup Begin===========================");
        cd('XXXXXXX');    //此处修改为Hexo根目录路径
        if (exec('git add .').code !== 0) {
            echo('Error: Git add failed');
            exit(1);
        }
        if (exec('git commit -m "Form auto backup script\'s commit"').code !== 0) {
            if (exec('git remote add origin your_user_name@HostIP:/home/git/backup.git').code !== 0){       //修改访问服务器方式
                if (exec('git push origin master').code !== 0) {
                    echo('Error: Git push failed');
                    exit(1);
                }
            } else {
                echo('Error: Git commit failed');
                exit(1);
            }
        }
        if (exec('git push origin master').code !== 0) {
            echo('Error: Git push failed');
            exit(1);
        }
        echo("==================Auto Backup Complete============================")
    }
}

注意：

在Hexo根目录或在主题目录下的scripts文件夹js在启动时就会自动载入，因此建议放在主题目录下，避免不必要的问题，例如Blog/themes/fluid/scripts/update.js。
此backup.js是在hexo backup运行后backupAfter自动触发的，因此可以在其他仓库备份(如github和coding)后实现服务器的自动备份。
git远程仓库在服务器，所以push在服务器端的home/git/backup.git里post-receive钩子中。
由于设定了git免密设置，因此使用backup.git操作不需要重复的输入密码。

在_config.yml下设置备份配置。注意：backup下不要有服务器的repo，因为在scripts下backup.js已实现git push。

backup:
    type: git
    message: 'backup updata: {{now("YYYY-MM-DD HH/mm/ss")}}'
    ## theme: fluid #主题
    repo: #XXX为用户地址或IP地址
        github: git@github.com:XXX.github.io.git,backup
        coding: git@e.coding.net:XXX.git,backup
        ## hexo: root@XXX:/home/git/backup.git,master

再来一波四连😄

$ hexo clean 
$ hexo g 
$ hexo d 
$ hexo b

得到

$ hexo b
INFO  Start backup: git
The file will have its original line endings in your working directory
[master 79b18cc] backup updata: XXXX
 2 files changed, 143 insertions(+), 4 deletions(-)
Branch 'master' set up to track remote branch 'backup' from 'github'.
To github.com:XXXXXX
   89e022d..79b18cc  master -> backup
Branch 'master' set up to track remote branch 'backup' from 'coding'.
To e.coding.net:XXXXXX
   89e022d..79b18cc  master -> backup
INFO  Backup done: git
======================Auto Backup Begin===========================
On branch master
Your branch is up to date with 'coding/backup'.

nothing to commit, working tree clean
fatal: remote origin already exists.
remote: usage: git remote add []  
remote:
remote:     -f, --fetch           fetch the remote branches
remote:     --tags                import all tags and associated objects when fetching
remote:                           or do not fetch any tag at all (--no-tags)    
remote:     -t, --track   branch(es) to track
remote:     -m, --master 
remote:                           master branch
remote:     --mirror[=(push|fetch)]
remote:                           set up remote as a mirror to push to or fetch from
remote:
remote: fatal: 'origin' does not appear to be a git repository
remote: fatal: Could not read from remote repository.
remote:
remote: Please make sure you have the correct access rights
remote: and the repository exists.
remote: fatal: not a git repository (or any of the parent directories): .git    
To XXXXXX:/home/git/backup.git
   89e022d..79b18cc  master -> master
Everything up-to-date
==================Auto Backup Complete============================

服务器的文件夹/home/backup下可看到Hexo backup的备份文件，服务器端备份的文件与github或coding备份文件一致。同时，文件夹/home/hexo是hexo deploy的部署文件，通过Nginx提供Web 服务。这就实现了服务器部署和备份的自动化操作。

Tips:如果遇到程序没有报错但文件夹上传失败时，可以手动删除Hexo根目录下的.deploy_git 文件夹，再重新部署和备份。

访问Jupyter

下面以域名pxxyyz.com为例，首先需要在服务器开启Jupyter^[4]

安装Jupyter

安装Anaconda

$ mkdir anaconda //创建目录
$ cd anaconda    //进入目录
// 在镜像站找到安装包并下载
$ wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2020.02-Linux-x86_64.sh
$ bash Anaconda3-2020.02-Linux-x86_64.sh  //安装anaconda3

生成Jupyter Notebook配置文件

1	`$ jupyter notebook --generate-config`

打开ipython并设置登入密码

ipython 
In [1]: from IPython.lib import passwd
In [2]: passwd()                         #设置Jupyter Notebook密码
Enter password: 
Verify password: 
Out[2]: ''                               #生成的密钥在配置文件有用

修改服务器配置文件

1	`$ vim ~/.jupyter/jupyter_notebook_config.py`

按 i 键进入文件的编辑模式，在该文件中添加代码，按Esc 键退出编辑模式，输入:wq保存退出。（先输入:，然后输入wq回车）

# 设置所有ip地址皆可访问
c.NotebookApp.ip='*' 
# 输入密码的哈希值，见Out[2]
c.NotebookApp.password = u'sha1:XXX'
# 禁止自动打开浏览器
c.NotebookApp.open_browser = False  
# 指定端口，需要在服务器安全组开发该端口
c.NotebookApp.port =8888 
# 远程访问
c.NotebookApp.allow_remote_access = True 
# 使用mathjax，可输入公式
c.NotebookApp.enable_mathjax = True

启动Jupyter

1 2	`$ nohup jupyter notebook --allow-root & # nohup避免关闭终端则终止了Jupyter 程序的运行，--allow-root允许root权限，& 将程序放入后台运行`

打开端口步骤：本实例安全组->配置规则->入方向->手动添加

授权策略	优先级	协议类型	端口范围	授权对象
允许	100	自定义 TCP	目的:8888/8888	源:0.0.0.0/0

浏览器访问Jupyter notebook(移动端或桌面端)，并输入刚才配置的密码即可使用

1 2	`http://HostIP:8888 http://域名:8888`

注意：

第二种方式需要域名解析到服务器公网IP，域名等价于公网IP
https://HostIP:8888访问出错，https://域名:8888同理

anaconda换源，分别测试一下下载速度和稳定性，自行选择最优的

# 添加清华源
$ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/
$ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/
$ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/conda-forge 
$ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/
$ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/msys2/

# 添加上交源
$ conda config --add channels https://mirrors.sjtug.sjtu.edu.cn/anaconda/pkgs/main/ 
$ conda config --add channels https://mirrors.sjtug.sjtu.edu.cn/anaconda/pkgs/free/
$ conda config --add channels https://mirrors.sjtug.sjtu.edu.cn/anaconda/cloud/conda-forge/ 

# 添加中科大源
$ conda config --add channels https://mirrors.ustc.edu.cn/anaconda/pkgs/main/
$ conda config --add channels https://mirrors.ustc.edu.cn/anaconda/pkgs/free/
$ conda config --add channels https://mirrors.ustc.edu.cn/anaconda/cloud/conda-forge/
$ conda config --add channels https://mirrors.ustc.edu.cn/anaconda/cloud/msys2/
$ conda config --add channels https://mirrors.ustc.edu.cn/anaconda/cloud/bioconda/
$ conda config --add channels https://mirrors.ustc.edu.cn/anaconda/cloud/menpo/

# 设置搜索时显示通道地址 有资源显示源地址
$ conda config --set show_channel_urls yes

# 换回默认源(重置用)
$ conda config --remove-key channels

可以在Jupyter notebook的工作目录中上传或下载.ipynb文件，当然别的文件也可以。

Nginx 重定向

希望在我的博客中添加一个菜单按钮直接访问我的Jupyter notebook。然而菜单链接是通过url_for自动生成的，如添加link: ':8888'，生成的是pxxyyz.com/:8888/，而不是pxxyyz.com:8888。当然，可以设置链接为link: 'pxxyyz.com:8888'，直接且简单，但这不能学到一些有趣的东西！

下面通过特点子页面来访问域名的指定端口，即通过pxxyyz.com/jupyter访问pxxyyz.com:8888

在此之前上传了SSL证书并配置HTTPS^[5]
修改服务器配置文件

1	`$ vim /etc/nginx/nginx.conf`

按 i键进入文件的编辑模式，在该文件找到server，修改代码，按Esc 键退出编辑模式，输入:wq保存退出。（先输入:，然后输入wq回车）

  server {
      listen       443 ssl;# 80 default_server;
      # listen       [::]:80 default_server;
      server_name  pxxyyz.com;
      root         /home/hexo;
      # ssl on; # 老版本指令
      ssl_certificate /etc/nginx/conf/XXXXbundle.crt;
      ssl_certificate_key /etc/nginx/conf/XXXX.key;
      ssl_session_timeout 5m;
      ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4!DHE;
      ssl_prefer_server_ciphers on;

      # Load configuration files for the default server block.
      include /etc/nginx/default.d/*.conf;

      location / {
      }

# http://pxxyyz.com/jupyter/ to http://pxxyyz.com:8888
      location ~ /jupyter/?$ {
        return 302 http://pxxyyz.com:8888;
      }
      
      error_page 404 /404.html;
          location = /40x.html {
      }

      error_page 500 502 503 504 /50x.html;
          location = /50x.html {
      }
  }
  server { #把http的域名请求转成https
      listen 80;
      server_name pxxyyz.com;
      return 301 https://$host$request_uri;
  }

重启nginx 并检查配置

$ service nginx restart
# systemctl restart nginx.service
$ nginx -t

# 得到结果是
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

当然，一开始不是这么做的，错误的方法也贴出来，避免入坑

server {
    listen 80;
    server_name pxxyyz.com;
    location /jupyter {
          proxy_pass http://pxxyyz.com:8888/tree?
     }
  }

分析
- 用proxy_pass得到的重定向是https://pxxyyz.com/jupyter
- 对应的服务器访问的是https://HostIP:8888
- 正确的Jupyter notebook访问地址却是http://HostIP:8888
- 因此问题出在http的域名强制转成https
- 解决方法：遇到指定链接用return 302返回http从而得到正确的结果^[6]
- 结果：
  - https://pxxyyz.com/jupyter、http://pxxyyz.com/jupyter、http://pxxyyz.com:8888和http://HostIP:8888均能打开Jupyter notebook
  - 但IP的SSL证书不免费！https+port的组合访问会出错。

补充

数学公式

在此补充一下之前公式不显示的问题。虽然Fluid主题支持LaTeX数学公式，但是需要手动操作，而且我按照教程开启本功能mathjax没有成功，即公式在网页里并没有被渲染和转换。通过网上查找，发现解决这类问题的思路主要是换渲染引擎^[7]，例如pandoc、mathjax、katex。我目前使用mathjax，操作如下：

卸载默认引擎，并安装这个新的渲染引擎

1 2	`$ npm uninstall hexo-renderer-marked --save $ npm install hexo-renderer-kramed --save`

修改/node_modules/hexo-renderer-kramed/lib/renderer.js

// Change inline math rule
function formatText(text) {
// Fit kramed's rule: $$ + \1 + $$
// 直接返回text
// return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
return text;
}

修改hexo的渲染源码/node_modules/kramed/lib/rules/inline.js

// 去掉`\\`的额外转义，第11行，将其修改为
// escape: /^\\([\\`*{}\[\]()# +\-.!_>])/, 
escape: /^\\([`*{}\[\]()# +\-.!_>])/,
// 将em标签对应的符号中，去掉`_`，第20行，将其修改为
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,    
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

停止使用 hexo-math，安装hexo-renderer-mathjax

1
2
3

$ npm uninstall hexo-math --save
// 不知道是不是必要的
$ npm install hexo-renderer-mathjax --save

更新 Mathjax 的 CDN链接，打开/node_modules/hexo-renderer-mathjax/mathjax.html，把script更改为：

1
2
3

// <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">script> 
// 网上推荐的上面这个，但我使用失败了，推荐下面这个，亲测可行
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">script>

按照Fluid的快速开始，需要修改主题配置，打开/source/_data/fluid_config.yml文件

post:
  math:  
    enable: true  
    specific: false   
    engine: mathjax

在根目录下修改_config.yml，添加
1
mathjax: true
在Front-matter中打开MathJax
1
2
3
--- mathjax: true ---

显示数学公式

1
2

# 不空行会出bug
$$\Sigma({n} ; {p})=\left\{\left(\zeta_{1}, \ldots, \zeta_{r}\right) \in \mathbb{C}^{n_{1}} \times \cdots \times \mathbb{C}^{n_{r}}: \sum_{k=1}^{r}\left\|{\zeta}_{k}\right\|^{2 p_{k}} < 1\right\}$$

\[\Sigma({n} ;{p})=\left\{\left(\zeta_{1}, \ldots, \zeta_{r}\right) \in\mathbb{C}^{n_{1}} \times \cdots \times \mathbb{C}^{n_{r}}:\sum_{k=1}^{r}\left\|{\zeta}_{k}\right\|^{2 p_{k}} <1\right\}\]

因为hexo-renderer-kramed 和hexo-renderer-marked均不支持emoji 功能，使用:smile: :blush: :smiley: :smirk:在Typora可以正常显示表情，在网页上显示的是:smile: :blush: :smiley: :smirk:，因此，可以直接复制emoji表情😄😊😃😏。

经过强哥提醒，需要额外使用插件hexo-filter-github-emojis来支持hexo的 emoji 。

1	`$ npm install hexo-filter-github-emojis --save`

在根目录下_config.yml添加配置

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

正文markdown用如下格式使用 emoji

1 2	`# 不空行会出bug {% raw %}{% github_emoji emoji %}{% endraw %}`

正如上面所说，Hexo 默认情况下 :emoji:不能正确显示表情，如:tada:，而该插件通过{%github_emoji tada%}(github_emoji tada) 即可显示这个 emoji，其他调用格式可以看 hexo-filter-github-emojis 的官方文档。

一键三连

前面提到的在根目录下使用Git Bash Here输入下面指令有些繁琐。

1	`$ hexo clean && hexo g && hexo d && hexo b`

现在用.bat文件简化，可以分别保存。其中第四行的地址为根目录。

:: 一键预览
@echo on
D:
cd D:\github\Hexo-Blog
hexo clean && hexo g && hexo s

:: 一键部署
@echo on
D:
cd D:\github\Hexo-Blog
hexo clean && hexo g && hexo d

:: 一键部署+备份
@echo on
D:
cd D:\github\Hexo-Blog
hexo clean && hexo g && hexo d && hexo b

一键预览的窗口支持实时修改实时显示，即文档修改保存后，刷新可得修改后的预览页面。如果做到ssh免密登入，部署与备份也能一键完成。

免密会带来安全隐患，部署和备份文件最好设置为

私密

参考

Hexo博客部署到腾讯云服务器↩︎
使用Git+Hooks实现Hexo站点自动部署到CentOS服务器上↩︎
HEXO博客实现自动备份↩︎
搭建ipython/jupyter notebook 服务器
↩︎
hexo部署服务器之配置HTTPS↩︎
NGINXrewrite location to another port
↩︎
如何在hexo 中支持 Mathjax？
↩︎

常见静态网站托管平台使用及多节点部署方案

2020-05-27T07:00:00.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：Vince
原文地址：https://i.vince.pub/p/hexo-static/

前言

对于 Hexo来说，我们使用它来部署博客是因为无后端运维和高速渲染页面等优点。选择一个合适的托管平台对于博客来说十分重要，可以免费使用且稳定高速的平台是不存在的，我们总是需要做出妥协。我使用了Github Pages、Coding Pages、Gitee Pages、Netlify 和 Vercel来部署博客，以下为我的使用报告。

常见托管平台

Github Pages

免费扩展性强无限制性

使用体验：可以与仓库无缝对接，高效部署，但是没用设置国内节点，在国内访问速度较慢，作为一个海外节点还是非常不错的。相对而言，使用jsdelivr 来加速网站相关文件可以满足基本使用。查看 Github Status，Pages服务会出现偶尔挂掉的情况，但多数仓库文档、演示等都选择了 Github Pages服务。

使用及扩展：提供二级域名，支持域名绑定及免费 SSL证书。网站内容与仓库保存一致，自动推送。通过使用 Github Actions具有较强扩展性。

Netlify

免费扩展性强无限制性

使用体验：Netlify 的节点设置在海外，但 Netlify的服务速度尚可，国内部分地区可以到达高速服务。在使用 CDN的情况下，把网站部署在 Netlify 是可以比较好的选择。Vuejs 和 Hexo的官网都部署在 Netlify 上，其稳定性可想而知。Netlify虽然拥有付费功能，但是基本上我们需要使用到的服务都免费。

使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。Netlify 支持Github 或者 Gitlab 等账号登录，如果仓库已经是静态网站文件，每次 Push到仓库 Netlify 都会自动部署。支持 BuildCommand，源文件也可以通过提供的环境自动编译或渲染，类似于一款 CI，与Github Pages 功能相近。

Vercel

免费扩展性强无限制性

使用体验：Vercel 的体验情况总体和 Netlify相近，节点设置在海外，访问速度尚可。前身是now.sh，作为一个高质量的静态托管平台，Vercel的使用体验非常好，是一个可选的优秀平台。

使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。支持 Github或者 Gitlab 等账号登录，如果仓库已经是静态网站文件，每次 Push到仓库都会自动部署。Vercel 打出了 free forever的口号，也就是说在非商用的情况下，个人可以永久免费使用。支持设置环境并执行相关命令，自动部署不在话下。

Coding

免费一般扩展性限制性

使用体验：Coding是腾讯系的一个国内托管平台，对于人数较少的团体实行免费制度。服务器节点部署在国内，在国内使用访问速度较快。也是国内开放程度比较高的一个代码托管平台了，静态网站功能Coding 最近改版了一下，相对于之前来说更稳定了一些。

使用及扩展：提供二级域名，支持域名绑定及免费 SSL 证书。基于Kubernetes 的持续部署，可以人我们体验到与 DevOps体系紧密结合的持续部署能力。持续中提供静态网站托管，但是静态网站托管需要实名和绑定手机号。

Gitee

免费（国内限制）扩展性较低限制性强

使用体验：Gitee 是一个国内托管平台，对比 coding来说较为封闭。静态托管功能上拥有较大限制，且无法自动部署，功能残缺。

使用及扩展：提供二级域名，非付费版不支持自动部署、域名绑定及免费 SSL证书。如果强制使用 https，可能会造成样式文件失效等问题。

TCB

付费扩展性高一般限制性

使用体验：TCB(Tencent CloudBase）采用 serverless架构，提供静态托管服务。我的主站就是使用TCB，相对而言因为付费了，所以效果较好，在全国各地有 CDN节点，目前使用是因为腾讯的赞助计划，如果赞助计划失效了，价格过高可能会考虑切换平台。空间较大，流量较多，已经充当CDN 使用了。

使用及扩展：提供二级域名，支持自动部署及免费SSL 证书，但是 SSL证书申请可能需要备案。扩展性较强，可以使用 CLI 工具或者 TencentCloudBase Github Action 来部署。

多节点部署方案

几个仓库

Hexo 源码仓库

从图中可以看到使用了 Blog-Source 这个仓库为 Hexo源码仓库，这个仓库有一个使用了两个 GithubActions，一个用来渲染博客文件并推送到 TCB静态托管平台，一个用来渲染博客文件推送到各个 Git 仓库，理论上一个 Action也可以完成这些任务，但是便于管理我选择了两个 Action。

推送至各个 Git 仓库

name: Deploy to Repo(Github, Coding, Gitee)
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    env: 
      hTZ: Asia/Shanghai
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: master
    - name: Update Submodule
      run: |
        git submodule init
        git submodule update --remote
    - name: Setup Node
      uses: actions/setup-node@v1
      with:
        node-version: "10.x"
    - name: Hexo Generate
      run: |
        rm -f .yarnclean
        yarn --frozen-lockfile --ignore-engines --ignore-optional --non-interactive --silent --ignore-scripts --production=false
        rm -rf ./public
        yarn run hexo clean
        yarn run hexo generate
    - name: Hexo Deploy
      env:
        SSH_PRIVATE: ${{ secrets.SSH_PRIVATE }}
        GIT_NAME: vinceying
        GIT_EMAIL: admin@vicne.pub
      run: |
        mkdir -p ~/.ssh/
        echo "$SSH_PRIVATE" | tr -d '\r' > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan e.coding.net >> ~/.ssh/known_hosts
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        ssh-keyscan gitee.com >> ~/.ssh/known_hosts
        git config --global user.name "$GIT_NAME"
        git config --global user.email "$GIT_EMAIL"
        yarn run hexo deploy

推送至 TCB

name: Deploy to Tencent CloudBase
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai
    name: Deploy Hexo Souce Repo to Tencent CloudBase
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      # NPM 环境及 Hexo 部署
      - name: NPM
        run: npm install
      - name: Clean
        run: ./node_modules/.bin/hexo clean
      - name: Generate
        run: ./node_modules/.bin/hexo generate
      # Deploy static to Tencent CloudBase
      - name: Deploy static to Tencent CloudBase
        id: deployStatic
        uses: TencentCloudBase/cloudbase-action@v1.1.1
        with:
          secretId: ${{ secrets.SECRET_ID }}
          secretKey: ${{ secrets.SECRET_KEY }}
          envId: ${{ secrets.ENV_ID }}
          staticSrcPath: public

Github 博客页面仓库

这个作为使用 Github Pages 服务的仓库，同时在 Netlify 和 Vercel的选择为源仓库，在每次推送至本仓库时，Netlify 和 Vercel都会自动部署新文件。

CDN 文件仓库

这个仓库作为管理和存放一些需要推送到 CDN 的文件，比如 css文件、图片和视频等，首先是为了便于管理及通过 Github Actions推送到TCB，其次是为了使用 Jsdelivr CDN 服务作为备用 CDN。

方案优点

高效自动化，利用 Github Actions,每次只要 Push 到Blog-Souce和Blog-file仓库就可以全仓库和全节点同步。
便于管理文件，当主 CDN 失效后，直接替换 CDN 地址链接即可完成启用备用CDN，且备份了文件。
多设备管理，当切换设备后，直接在不安装环境的情况下直接 Clone即可管理博客，但调试方面还是需要安装环境。特别是在 Github 的云端IDE-Codespace 正式发布后，可以完全通过仓库管理博客。

利用 GitHub Actions 自动部署 Hexo 博客

2020-05-23T11:00:00.000Z

前言

本文主要讲如何将 GitHub Actions 应用于 Hexo 部署中，如果还不太熟悉GitHub Actions 可以看这篇文章，简单地说 Actions就是在设定的时机触发创建一个虚拟云环境，然后执行一连串动作，从而实现自动部署的功能。

创建工作流

首先要保证你的 Hexo 博客项目是全部提交到 GitHub仓库中，然后在博客目录下创建 .github/workflows/xxx.yml文件，文件名任意。

文件内容如下，根据自己的需求增删 step：

name: Deploy                      # Actions 显示的名字，随意设置

on: [push]                        # 监听到 push 事件后触发

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: Checkout              # 拉取当前执行 Actions 仓库的指定分支
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Update Submodule      # 如果仓库有 submodule，在这里更新，没有则删掉此步骤
      run: |
        git submodule init
        git submodule update --remote

    - name: Setup Node            # 安装 Node 环境
      uses: actions/setup-node@v1
      with:
        node-version: "10.x"

    - name: Hexo Generate         # 安装 Hexo 依赖并且生成静态文件
      run: |
        rm -f .yarnclean
        yarn --frozen-lockfile --ignore-engines --ignore-optional --non-interactive --silent --ignore-scripts --production=false
        rm -rf ./public
        yarn run hexo clean
        yarn run hexo generate

    - name: Hexo Deploy           # 部署步骤，这里以 hexo deploy 为例
      env:
        SSH_PRIVATE: ${{ secrets.SSH_PRIVATE }}
        GIT_NAME: yourname
        GIT_EMAIL: your@email.com
      run: |
        mkdir -p ~/.ssh/
        echo "$SSH_PRIVATE" | tr -d '\r' > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.name "$GIT_NAME"
        git config --global user.email "$GIT_EMAIL"
        yarn run hexo deploy

只要配置了 hexo deploy 的都可以通过上面这种方式部署，注意如果是在其他Pages 部署（比如Coding Pages 或者码云 Pages），ssh-keyscan需要进行增改：

# github、gitee 和 coding 三种 Pages 的示例，根据需求替换上例中语句，需要注意的是 coding 是使用二级域名。
ssh-keyscan github.com >> ~/.ssh/known_hosts
ssh-keyscan gitee.com >> ~/.ssh/known_hosts
ssh-keyscan e.coding.net >> ~/.ssh/known_hosts

然后 ${{ secrets.SSH_PRIVATE }}这种调用方式，需要提前在下图中设置常量：

这样做可以避免敏感数据放在 yml文件中被泄漏，即使你是私有仓库也建议这样做，因为设置的常量是无法被二次查看的，就算你账号被盗也不用担心。

常用步骤配置

以上是以部署 hexo deploy为例，下面再提供几种其他常见的部署配置，注意修改你自己的变量参数。

阿里云 OSS

- name: Deploy to OSS
  env:
    OSS_AccessKeyID: ${{ secrets.ACCESS_KEY_ID }}
    OSS_AccessKeySecret: ${{ secrets.ACCESS_KEY_SECRET }}
    OSS_EndPoint: oss-ap-southeast-1.aliyuncs.com
    OSS_Bucket: fluid-dev
  run: |
    wget -q http://gosspublic.alicdn.com/ossutil/1.6.10/ossutil64
    chmod +x ./ossutil64
    ./ossutil64 config -e $OSS_EndPoint -i $OSS_AccessKeyID -k $OSS_AccessKeySecret -L CH
    ./ossutil64 rm -r -f oss://$OSS_Bucket/
    ./ossutil64 cp -r -f ./public oss://$OSS_Bucket/

腾讯云 COS

- name: Deploy to COS
  uses: zkqiang/tencent-cos-action@v0.1.0
  with:
    args: delete -r -f / && upload -r ./public/ /
    secret_id: ${{ secrets.SECRET_ID }}
    secret_key: ${{ secrets.SECRET_KEY }}
    bucket: ${{ secrets.BUCKET }}
    region: ap-shanghai

腾讯云开发

- name: Deploy to Tencent CloudBase
  uses: TencentCloudBase/cloudbase-action@v1.1.1
  with:
    secretId: ${{ secrets.SECRET_ID }}
    secretKey: ${{ secrets.SECRET_KEY }}
    envId: ${{ secrets.ENV_ID }}
    staticSrcPath: ./public

服务器

如果是直接部署在服务器上，需要通过 FTP/SFTP协议来完成上传操作，因此确保你的服务器开启了 FTP 服务。如果使用FTP-Deploy-Action 的话，需要注意的是因为 ./public是在流程中生成的文件，需要添加 .git-ftp-include文件后方可推送，具体请查看相关 README中的相关内容。

- name: Deploy to Server
  uses: SamKirkland/FTP-Deploy-Action@3.1.1
  with:
    ftp-server: ${{ secrets.FTP_SERVER }}      # eg: ftp://ftp.xxx.com:22/mypath
    ftp-username: ${{ secrets.FTP_USERNAME }}
    ftp-password: ${{ secrets.FTP_PASSWORD }}
    local-dir: ./public

搭配 Fluid 如何优雅的写一篇文章

2020-05-13T09:39:30.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：Vince
原文地址：https://i.vince.pub/p/fluid-write/

前言

Fluid是一款很十分优雅的主题，那么写一篇优雅的文章搭配它呢？以下会从几个方面来简述，主要还是做几个推荐。

文章内容

熟悉 Markdown 语法

对于使用 Hexo 的大多数人来说，相信对 Markdown的语法不会陌生。熟练掌握 Markdown语法对我们的写作拥有极大的帮助，这里用少用的表格和脚注来举个例子。至于为什么有些公式、流程图无法渲染，是因为Markdown 追求简洁式写作，默认渲染器不支持复杂渲染。

表格

https://github.com/fluid-dev/hexo-theme-fluid

站点	地址	介绍
Fluid Docs	https://hexo.fluid-dev.com/docs/	Fluid 官方文档
Hexo-theme-fluid	Fluid Github Repo
Fluid Blog	https://hexo.fluid-dev.com/	Fluid 官方博客

站点|地址|介绍
--|:--:|--:
Fluid Docs|https://hexo.fluid-dev.com/docs/|Fluid 官方文档
Hexo-theme-fluid|https://github.com/fluid-dev/hexo-theme-fluid|Fluid Github Repo
Fluid Blog|https://hexo.fluid-dev.com/|Fluid 官方博客

脚注

默认渲染器下正常显示，不同渲染器显示效果不同，写法如下：

1 2	`脚注演示[^1] [^1]: 脚注内容演示`

善用 HTML

我们可以在 Markdown 中插入一些简单的 HTML 代码或 CSS片段来获得更多扩展，使得文章内容更具有多样性。以下演示几个简单功能。

跳转位置演示（跳转位置设置点）

文字颜色

#519D9E颜色演示

1	`<span style="color: #519D9E; ">#519D9E颜色演示span>`

文字大小

0.7em 文字大小演示

1	`<span style="font-size:0.7em;">0.7em 文字大小演示span>`

文字位置

内容居中演示

1	`<p style="text-align:center">内容居中演示p> # 可以修改 text-align 参数来设置文字位置。`

页内跳转

点击到达跳转位置演示

1 2	`<a href="#demo">点击到达跳转位置演示a> # 在需要跳转的地方添加此代码。 <a id="demo">跳转位置演示（跳转位置设置点）a> # 在跳转位置添加次代码。`

综合演示

综合演示

优雅使用 Fluid 写文章

<p style="text-align:center;color:#8EC0E4;font-size:1.5em;font-weight: bold;">
综合演示
<br>
优雅使用 Fluid 写文章
p>

iframe 页面镶套

iframe 页面镶套可以帮助我们更好的展示一个页面。比如以下演示页面。

1	`src="https://hexo.fluid-dev.com/" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame">`

一些参数说明，width="100%"为宽度自适应，高度请根据实际需求跳转，注意移动端页面是否匹配。scrolling 为滚动条参数。frameborder为边框参数。noresize 属性规定用户无法调整框架的大小。

details 标签

用于展示代码较多需要折叠或折叠相关内容，以下为演示，summary填写显示名称。

Demo

使用 Rainbow 展示随机的英语句子

2020-05-08T09:12:56.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：吃白饭
原文地址：https://eatrice.top/post/Rainbow/

访问 Rainbow 吧！

介绍

Rainbow - 一朵彩虹是EatRiceTeam建立的一个旨在收集优美英语句子的一套网站。演示网站地址为：https://rainbow.eatrice.top/

我们希望能够与大家分享我们在日常的学习生活中遇到的优美的英语句子，希望它能像彩虹一样，美丽天空，温暖人心。

其由C#开发，基于ASP.NET Core 2.2框架。包括Web API提供导出JSON的数据接口，和基于MVC的动态展示网站。

关于Rainbow

Rainbow 收集的英语句子的要求为：

读起来感觉很优美的文章句子段落或诗歌节选；
含义特别丰富且引人深思的鸡汤或哲学句子；
句子奇怪，但意义完整且显得很有个性的电影台词；
你特别喜欢，且引起你感情上共鸣的英语歌词。

Rainbow 创建的初衷是替代我们的个人网站目前正在使用的一言，我们希望自己能够自己定义一句话的意思和表现形式。目前句子库不是特别丰富，收集的资源有限，所以欢迎大家投稿，并发表自己的看法。

给Rainbow投稿

我们希望找到小伙伴们和我们一起充实我们的句子库，希望大家能够将自己珍藏的句子分享给我们：

投稿要求：

提供完整的句子
提供句子的作者
提供句子的来源，如书名、文章名、电影名、歌曲名等。

投稿方式：

EatRice的邮箱：qiqi@eatrice.top
Courir的邮箱：dipper.ruru@gmail.com
在本页下方留言
好友QQ或微信直接发送

使用方法

数据接口

目前语句库饱含了三种类型的语句：reading、movies、songs

需要从语句库中随机获得语句的Json格式的接口：https://api.eatrice.top/

需要按照三个单独分类请求语句的接口：
https://api.eatrice.top/reading/
https://api.eatrice.top/movies/
https://api.eatrice.top/songs/

获取所有的句子接口：https://api.eatrice.top/GetAll/

需要根据语句ID请求语句的接口：https://api.eatrice.top/?ID=10001
ID编号从10001开始增加，若该ID不存在则随机返回语句，同https://api.eatrice.top/

返回的数据格式如下：

{
    "Content": "Because I am your mom,It counts the most because I know you the most.",
    "Author": "Stephen Chbosky",
    "Source": "Wonder",
    "ID": "10009"
}

其中，Content为句子内容
Author为句子作者
Source为句子来源
ID为句子ID

展示网站

展示网站为 Rainbow 提供展示界面。和说明文档。

Rainbow的展示网站为：https://rainbow.eatrice.top/
欢迎大家访问和提供意见😊😊😊。

安装

在需要添加 rainbow 的地方添加一个占位符:

1	`<p><a id="rainbow" href=''>🌈 获取中...a>p>`

在申明div之后，搭配数据请求脚本

<script>
fetch('https://api.eatrice.top')
  .then(response => response.json())
  .then(data => {
    var rainbow = document.getElementById('rainbow');
    rainbow.innerHTML = data.Content;
    rainbow.href = "https://rainbow.eatrice.top/?ID=" + data.ID;
  })
  .catch(console.error)
script>

就能在网站上看到你的 rainbow 啦！

开源

项目已在github上开源

项目地址：https://github.com/QiQiWan/rainbow/
项目仓库：git@github.com:QiQiWan/rainbow.git

贡献者

EatRice-https://eatrice.top
上屋顶看北斗七星-https://ruru.eatrice.top

Hexo 暗黑模式

2020-04-23T10:04:57.000Z

本文由 Fluid 用户授权转载，版权归原作者所有。

本文作者：Royce
原文地址：https://royce2003.top/posts/41212.html

Fluid 开发组注：主题最新版本已支持暗色模式，本文仅用于学习交流。

大概花了一个晚上搞暗黑模式，之后陆续优化了下
目前博客已经基本上适配完成了
目前是三种方案（优先级递减）
1. 媒体查询
2. 定时开启
3. localStorage/sessionStorage 查询

媒体查询，判断系统是否处于暗黑模式，支持大部分系统
Win10 需要浏览器开启软件深色模式
Android同理，需要浏览器支持手机开启夜间模式的时候将自身切换到神色模式，目前Chrome 支持，Edge 不支持，其他没测
iOS、MacOS 上的 Safari 也支持

定时开启，在规定时间自动开启，如果在该时间段内取消了暗黑模式，能一直保持

localStorage/sessionStorage 查询，能一直保持某一个模式的依赖

HTML

在 \themes\fluid\layout\layout.ejs 中找到，在其之后加入如下代码

<div id="dark" onclick="switchDarkMode()">div>
<script>
  var isNight = new Date().getHours() >= 22 || new Date().getHours() < 7; // 指定时间
  // 依次判断 系统暗黑模式 指定时间 缓存 dark
  if( matchMedia('(prefers-color-scheme: dark)').matches || isNight || localStorage.getItem('dark') === '1') {
    if(!(isNight&&localStorage.getItem('noDark') === '1')) {
      document.body.classList.add('dark');
    }
  }
  document.getElementById('dark').innerHTML = document.querySelector("body").classList.contains("dark")?"🌙":"🌞";
script>

注意！一定紧跟在 body 标签之后，否则会出现闪烁

JS

在自定义 JS 中把下面代码加进去，直接加到之前也行

//点击事件
function switchDarkMode() {
if ($('body').hasClass('dark')) {
$("#dark").html("🌞");
document.body.classList.remove('dark');
localStorage.setItem('noDark', '1');
localStorage.setItem('dark', '0');
} else {
$("#dark").html("🌙"); 
document.body.classList.add('dark');
localStorage.setItem('dark', '1');
localStorage.setItem('noDark', '0');
}
}

CSS

在自定义 CSS 中加入代码

可以用 stylus，能少些写
但是引入时记得后缀还是 .css 不要变

下面是我的样式代码，基本覆盖所有内容
有配上些注释，根据自身情况修改，注意缩进

/* 切换按钮 */
#dark
  cursor pointer
  position fixed
  right 40px
  bottom 98px
  width 16px
  height 14px
  z-index 100
  font-size 20px

/*暗黑模式*/
.dark
  background-color #282c34

  /* 背景遮罩 */
  .mask
    background-color rgba(0,0,0,.7) !important

  /* 主体 */
  #board 
    background-color #282c34
    color #a09c9c
  
  img  
    filter brightness(50%) // 图片亮度

  p
  .index-info a  
    color #a09c9c !important

  .markdown-body
    h1,h2,h3,h4,h5,h6,s,li  
      color:#a09c9c !important
    

  /* 顶栏 */
  .navbar-col-show
  .top-nav-collapse  
    background-color #282c34
    
  .navbar a  
    color #a09c9c !important
    
  .animated-icon span   /* 手机端 */
    background-color #a09c9c


  /* page-number */
  .pagination a:hover
  .pagination .current  
    background-color #6b6b6b73;


  /* 打字机 */
  #subtitle
  .dark.typed-cursor--blink
  .scroll-down-arrow
    color #dfdfdf


  /* back to top */
  #scroll-top-button
    background-color #282c34

    i
      color #a09c9c
    

  /* Toc */
  .tocbot-list a
    color #a09c9c

  .tocbot-active-link
  footer a:hover
    color #1abc9c !important


  /* footer */
  footer
  footer a
    color #a09c9c
    

  /* 归档页 */
  .list-group-item
    color #a09c9c
    background-color #282c34
    
  .list-group-item:hover
  .tagcloud a:hover
    background-color #46484d


  /* 友链页 */
  .links
    .card  
      background-color #282c34
        
    .card-body:hover  
      background-color #46484d
        
    .link-title
    .link-intro  
      color #a09c9c
    

  /* note标签 配色有点丑 */
  .note-info
    background-color #3b5359
    border-color #006d80

  .note-danger
    background-color #783f42
    border-color #670009

  .note-success
    background-color #2a3e2e
    border-color #005915

  .note-warning
    background-color #5b543e
    border-color #846500

  .note-primary
    background-color #455a6f
    border-color #004188

localStorage

仔细观察刚刚的 js 代码，在其中用到了 localStorage
相当于一个标记，除非被手动清除，否则将会永久保存。

下面是支持该特性的最低版本

可以在浏览器控制台中查看他们的值

参考 https://crosschannel.cc/daily/hexo添加暗色模式.html

Hexo Theme Fluid

基于大语言模型的 Hexo 博客自动化翻译方案

核心特性

快速上手

安装插件

配置参数

安全设置

Vercel 部署

本地构建

使用技巧

仿 TrymenT 游戏风格的时钟组件

效果预览

介绍

特性

使用方法

需要的文件

在Hexo中使用

（推荐！）Hexo注入

（比较麻烦）修改主题代码

作为独立页面使用

注意事项

Fluid VSCode Extension 插件

介紹

功能

使用方法

已知問題

相關連結

Fluid 摄影大赛#1

比赛介绍

获奖作品

相机组金奖

相机组银奖

相机组铜奖

手机组金奖

手机组银奖

手机组铜奖

奖项

参赛作品

鸣谢

Vercel 部署高级用法教程

为什么使用 vercel

开始使用

如何自定义域名

配置多个域名

自定义Vercel服务器位置

自定义Header缓存时间

Vercel自定义404

Vercel流量超标怎么办？

乒乓部署

准备工作：

要调试的时候：

调试完毕后：

参考&致谢

系列教程

Hexo 使用 Docker 来写文章和调试博客

Hexo Docker环境使用篇

Docker 简介：

Docker 版 hexo 环境一键部署

hexo web 后台写作

hexon

hexo-editor

ssh key 部署

SSH 进入docker

远程 SSH 访问Docker

自定义用户自动运行脚本

反向代理 Hexo Docker

docker compose 配置

nginx配置

Windows DNS修改

Linux DNS 修改

获取 SSL 证书

Centos 安装Docker

QNAP 安装Docker

群晖 安装 Docker

系列教程

Coding 免费图床方案

🤔 思路

🧐 优势

🪛 需要的准备

🛠️ 部署

群晖安装 Docker