夜法之书 • Posts by &#34;hexo&#34; category

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

在宝塔VPS上面采用docker部署waline全流程图解教程

2023-02-20T14:18:01.000Z

本文介绍了在宝塔系统上基于 MySQL，采用 Docker部署 Waline 的方法，并提供 Github 社交登陆，渐变彩色邮件通知模板！

准备工作

注册一个邮箱，并开启SMTP 。waline 邮件通知需要用到

你得有一个vps 。目前个人能找到的最便宜的 VPS 服务商: racknerd VPS

安装配置好宝塔。宝塔安装与配置简明教程

创建waline 数据库

以 mysql 数据库为例

MySQL 数据库初始化

https://waline.js.org/guide/database.html#mysql

https://github.com/walinejs/waline/blob/main/assets/waline.sql

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
SET NAMES utf8mb4;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;


# Dump of table wl_Comment
# ------------------------------------------------------------

CREATE TABLE `wl_Comment` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `comment` text,
  `insertedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `ip` varchar(100) DEFAULT '',
  `link` varchar(255) DEFAULT NULL,
  `mail` varchar(255) DEFAULT NULL,
  `nick` varchar(255) DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  `rid` int(11) DEFAULT NULL,
  `sticky` boolean DEFAULT NULL,
  `status` varchar(50) NOT NULL DEFAULT '',
  `like` int(11) DEFAULT NULL,
  `ua` text,
  `url` varchar(255) DEFAULT NULL,
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;



# Dump of table wl_Counter
# ------------------------------------------------------------

CREATE TABLE `wl_Counter` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `time` int(11) DEFAULT NULL,
  `reaction0` int(11) DEFAULT NULL,
  `reaction1` int(11) DEFAULT NULL,
  `reaction2` int(11) DEFAULT NULL,
  `reaction3` int(11) DEFAULT NULL,
  `reaction4` int(11) DEFAULT NULL,
  `reaction5` int(11) DEFAULT NULL,
  `reaction6` int(11) DEFAULT NULL,
  `reaction7` int(11) DEFAULT NULL,
  `reaction8` int(11) DEFAULT NULL,
  `url` varchar(255) NOT NULL DEFAULT '',
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;



# Dump of table wl_Users
# ------------------------------------------------------------

CREATE TABLE `wl_Users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `display_name` varchar(255) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  `password` varchar(255) NOT NULL DEFAULT '',
  `type` varchar(50) NOT NULL DEFAULT '',
  `label` varchar(255) DEFAULT NULL,
  `url` varchar(255) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `github` varchar(255) DEFAULT NULL,
  `twitter` varchar(255) DEFAULT NULL,
  `facebook` varchar(255) DEFAULT NULL,
  `google` varchar(255) DEFAULT NULL,
  `weibo` varchar(255) DEFAULT NULL,
  `qq` varchar(255) DEFAULT NULL,
  `2fa` varchar(32) DEFAULT NULL,
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;




/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

docker 安装 waline

`vps.yml` 文件

# docker compose文件 

version: "3"
services:
  waline:
    container_name: waline
    image: lizheming/waline:latest
    hostname: waline
    restart: always
    volumes:
      - /www/docker/waline/data:/app/data
    network_mode: host
    env_file:
      - .env # 由于单引号和双引号过多，邮件通知模板只能放在这里面
    environment:
      TZ: 'Asia/Shanghai'
      
      MYSQL_DB: 'waline'
      MYSQL_USER: 'waline'
      MYSQL_PASSWORD: '[随机密码]' # 前面创建数据库时生成的随机密码
      
      SITE_NAME: '夜法之书'
      SITE_URL: 'https://blog.17lai.site'
      SECURE_DOMAINS: 'blog.17lai.site,blog.17lai.fun'
      AUTHOR_EMAIL: 'xxx@gmail.com'
      
      # 电报通知
      TG_BOT_TOKEN: 'xxxxx'
      TG_CHAT_ID: 'xxxxx'
      
      # 邮件通知
      SMTP_SERVICE: '126'
      SMTP_HOST: 'smtp.126.com'
      SMTP_PORT: '465'
      SMTP_USER: 'xxxxx@126.com'
      SMTP_PASS: 'xxxxx'
      SENDER_NAME: '夜法之书'
      SENDER_EMAIL: 'xxxxx@126.com'	# 注意这里需要和 SMTP_USER 一致
      
      AKISMET_KEY: xxxxx	# 反垃圾邮件
      
      LEVELS: '0,10,20,50,100,200'
      DISABLE_REGION: 'true'
      
      # google RECAPTCHA
      RECAPTCHA_V3_KEY: xxxx
      RECAPTCHA_V3_SECRET: xxxx
      
      # github 社交登录
      GITHUB_ID: xxxx
      GITHUB_SECRET: xxxx

注意这里的端口地址，并使用host模式，以方便连接主机的 MySQL 数据库

`.env`文件

MAIL_SUBJECT='{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复'
MAIL_TEMPLATE='<div style="border-radius: 10px 10px 10px 10px;font-size:14px;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="{{site.url}}" target="_blank">{{site.name}}</a>上的留言有新回复啦！</p></div><div style="margin:40px auto;width:90%"><p>Hi, {{parent.nick}}，您曾在文章上发表评论：</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;">{{self.comment | safe}}</div><p><strong>{{self.nick}}</strong> 给您的回复如下：</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;">{{self.comment | safe}}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。<hr /><p style="font-size:12px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。</p></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>'
MAIL_SUBJECT_ADMIN='{{site.name | safe}} 上有新评论了'
MAIL_TEMPLATE_ADMIN='<div style="border-radius: 10px 10px 10px 10px;font-size:14px;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="{{site.url}}"target="_blank">{{site.name}}</a>上的留言有新评论啦！</p></div><div style="margin:40px auto;width:90%"><p>{{self.nick}}回复说：</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;">{{self.comment | safe}}</div><p>您可以点击<a style="text-decoration:none; color:#12addb"href="{{site.postUrl}}"target="_blank">查看回复的完整內容</a>。<hr/></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>'

由于单引号和双引号过多，邮件通知模板只能放在env文件里面

这个邮件通知模板效果如下

安装waline

docker-compose -p "container" -f ./vps.yml up -d --build

域名配置

域名设置

设置反向代理

宝塔设置反向代理方法如下

DNS 配置

这里以DNSPod 为例

直接使用ip就是如下示例

如果使用vercel ，那么域名配置方法如下

cname-china.vercel-dns.com

添加 GitHub 社交登录

开启 GitHub 账号登录功能需要配置 GitHub OAuth 密钥。点击 Register a new OAuth application 进入 GitHub OAuth 应用申请页面。

配置注意事项如下:

Application name: 应用名称，会在用户授权时显示，推荐使用博客名称。
Homepage URL: 应用主页地址，会在用户授权时显示，推荐使用博客地址。
Appcation description: 应用描述，会在用户授权时显示，非必填项。
Authorization callback URL: 应用的回调地址，登录时需要使用。填入 <serverURL>/oauth/github 其中 <serverURL> 是你的 Waline 服务端地址。

填写完成后点击 Register application 即可成功创建。页面中会显示 Client ID。点击 Client secrets 栏右边的 Generate a new client secret 按钮则可以获取到该应用的 Client secrets。

显示在 GitHub的 Settings -> Developer settings -> OAuth Apps -> 又见苍岚

使用以上信息配置环境变量，重新部署。

环境变量名称	备注
`GITHUB_ID`	对应 GitHub OAuth App 中的 Client ID
`GITHUB_SECRET`	对应 GitHub OAuth App 中的 Client secrets

之后即可使用 GitHub 登录

添加邮件通知

上文中已经在 docker compose 文件中添加了邮件通知功能，下面介绍另一个邮件通知模板

紫罗兰永恒花园信笺模板

这个模板测试还存在一些bug， css 需要一些调整

.env

MAIL_SUBJECT='{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复'
MAIL_TEMPLATE='<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:20px 0px 20px;margin:0px;background-color:#d6d6d6;width:100%;"><style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style><div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:"Century Gothic","Trebuchet MS","Hiragino Sans GB",微软雅黑,"Microsoft Yahei",Tahoma,Helvetica,Arial,"SimSun",sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;"><img class="beforeimg" style="margin-top: -30px;margin-bottom: -120px;width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none"><div style="width:100%;background:#f8d1ce;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;"><p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;">您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}">『{{site.name | safe}}』</a>上的留言有新回复啦！</p></div><div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none"><div style="margin:40px auto;width:90%;"><p>Hi，{{parent.nick}}，您曾在文章上发表评论：</p><div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{parent.comment | safe}}</div><p><strong>{{self.nick}}</strong> 给您的回复如下：</p><div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div><p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{site.postUrl}}" target="_blank"> 查看回复的完整內容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="{{site.url}}" target="_blank"> {{site.name}} </a>。<hr /><p style="font-size:14px;color:#b7adad;text-align:center">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />https://example.com</p></p><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none"><p class="bottomhr" style="font-size:12px;text-align:center;color:#999">自动书记人偶竭诚为您服务！</p></div></div><img class="afterimg" style="width:530px;height:317px;margin-top: -155px;z-index:100;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"></div></div>'
MAIL_SUBJECT_ADMIN='{{site.name | safe}} 上有新评论了'
MAIL_TEMPLATE_ADMIN='<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:20px 0px 20px;margin:0px;background-color:#d6d6d6;width:100%;"><style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style><div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:"Century Gothic","Trebuchet MS","Hiragino Sans GB",微软雅黑,"Microsoft Yahei",Tahoma,Helvetica,Arial,"SimSun",sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;"><img class="beforeimg" style="margin-top: -30px;margin-bottom: -120px;width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png"><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none"><div style="width:100%;background:#f8d1ce;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;"><p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;">您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p></div><div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none"><div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong> 回复说：</p><div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div><p style="text-align:center;">您可以点击<a style="text-decoration:none;color:#cf5c83" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none"><p class="bottomhr" style="font-size:12px;text-align:center;color:#999">自动书记人偶竭诚为您服务！</p></div></div><img class="afterimg" style="width:530px;height:317px;margin-top: -155px;z-index:100;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png"></div></div>'

如果采用vercel部署，修改部署repo 的～/index.js 文件

const Application = require('@waline/vercel');
module.exports = Application({
  async postSave(comment) {
  mailSubjectAdmin: '{{site.name | safe}} 上有新评论了',
  mailTemplateAdmin: `<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:20px 0px 20px;margin:0px;background-color:#d6d6d6;width:100%;">
	<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
	<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
	<img class="beforeimg" style="margin-top: -30px;margin-bottom: -120px;width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
	<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none">
		<div style="width:100%;background:#f8d1ce;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;">
		您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p>
		</div>
		<div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none">
			<div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong> 回复说：</p>
			<div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
			<p style="text-align:center;">您可以点击<a style="text-decoration:none;color:#cf5c83" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p>
			<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
			<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">自动书记人偶竭诚为您服务！</p>
			</div>
		</div>
		<img class="afterimg" style="width:530px;height:317px;margin-top: -155px;z-index:100;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
		</div>
</div>`,
  mailSubject: '{{parent.nick}}，您在『{{site.name}}』上发表的评论收到了来自 {{self.nick}} 的回复',
  mailTemplate: `<div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg2.png);padding:20px 0px 20px;margin:0px;background-color:#d6d6d6;width:100%;">
	<style type="text/css">@media screen and (max-width:600px){.afterimg,.beforeimg{display:none!important}}</style>
	<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;">
	<img class="beforeimg" style="margin-top: -30px;margin-bottom: -120px;width:530px;height:317px;z-index:-100;pointer-events:none" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
	<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width:100%;overflow:hidden;pointer-events:none">
		<div style="width:100%;background:#f8d1ce;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;">
		<p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;">
		您在<a style="text-decoration:none;color: #9d2850;" href="{{site.url}}">『{{site.name | safe}}』</a>上的留言有新回复啦！</p>
		</div>
		<div class="formmain" style="background:#fff;width:96%;max-width:800px;margin:auto auto;border-radius:5px;border: 1px solid #564f4f59;overflow:hidden;pointer-events:none">
			<div style="margin:40px auto;width:90%;"><p>Hi，{{parent.nick}}，您曾在文章上发表评论：</p>
			<div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{parent.comment | safe}}</div>
			<p><strong>{{self.nick}}</strong> 给您的回复如下：</p>
			<div style="background: #eee;margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment | safe}}</div>
			<p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{site.postUrl}}" target="_blank"> 查看回复的完整內容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="{{site.url}}" target="_blank"> {{site.name}} </a>。<hr />
			<p style="font-size:14px;color:#b7adad;text-align:center">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />https://example.com</p>
			</p>
			<img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
			<p class="bottomhr" style="font-size:12px;text-align:center;color:#999">自动书记人偶竭诚为您服务！</p>
			</div>
		</div>
		<img class="afterimg" style="width:530px;height:317px;margin-top: -155px;z-index:100;"src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
		</div>
</div>`
  },
});

注意事项

默认创建好waline 后，尽快创建第一个登录用户！默认第一个登录用户为管理员，默认地址为 [域名]/ui，例如本文中就是 waline.17lai.site/ui
waline 自带数据导入导出，目前测试导入同一份数据2次，会使同一份数据在数据库中出现两次！

Cloudflare 设置

使用了 Cloudflare 时需要注意的配置事项！

如果使用了 CF 的服务，不配置这里，waline 就获取不到正确的地理位置，但 CF 还支持下面功能，官方文档

设置方法

参考&致谢

雷打真孝子，财发狠心，麻绳专挑细处断，恶运专找苦命人！

——俗语赏析

系列教程

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

Docker系列

Docker 分类 RSS 订阅

笔记系列

Gitbook使用系列

Gitbook分类RSS订阅

Gitlab 使用系列

Gitlab RSS 分类订阅

Vercel部署高级用法教程

2022-09-04T03:33:11.000Z

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 to customize 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 部署方法，戳 cloudflare Pages 部署

个人使用最终版本如下，各位使用修改对应部分即可。文件路径 [hexo]/source/vercel.json

{
  "headers": [
    {
      "source": "/medias/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/medias_webp/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.woff2",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" },
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    },
    {
      "source": "/(.*)\\.mjs",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.js",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.css",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.webp",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=31536000, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.json",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=7776000, max-age=7776000" }
      ]
    },
    {
      "source": "/sw.js",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }
      ]
    },
    {
      "source": "/(.*)\\.html",
      "headers": [
        { "key": "Cache-Control", "value": "public, s-maxage=1800, max-age=1800" }
      ]
    }
  ],

  "regions": ["hkg1"]
}

Vercel 账号被禁怎么办？

Your Personal Account was automatically blocked because its usage exceeds the fair use policy

最近某个 vercel app 流量超标了！程序可能被攻击了，或者程序存在某个bug。发现的时候，账号已经被禁用了。

等了一个月后，账号没有自动解禁！

怎么解封了？在这里 https://vercel.com/help#issues 点击【Create a case】，然后邮件联系解封！邮件回复说：

accounts will not auto-unblock after they’ve been blocked for exceeded limits. I can do that manually, but I must first be sure that the underlying issue has been resolved.

技术支持要求解决掉超出限制的原因，然后再回复邮件！应该就可以解禁了。

删除了被攻击或者出bug的 vercel app 之后再次回复邮件，得到回复：

After review, I have unblocked your account. Please note that this is a one-time consideration, and future usage overages may require purchasing a Pro team subscription to unblock your account.

账号终于解禁了，但是再次超出限制就得交钱解禁？ 20$每月的价格太高了！

乒乓部署

也可以叫旋转门部署。

解决调试博客插件，修改半成品文章时部署到云端会影响正在查阅博客的用户的问题！

使用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就顶上前台！

这样，调试和正常部署网络服务两不误。是不是感觉自己是个大聪明！

参考&致谢

系列教程

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

笔记系列

https://www.geogebra.org/

Gitbook使用系列

Gitbook分类RSS订阅

Gitlab 使用系列

Gitlab RSS 分类订阅

hexo博客博文撰写篇之完美笔记大攻略终极完全版

2022-08-17T03:01:03.000Z

hexo博客文章卷写技巧，包括MarkDown，hexo技巧，html插入，美化方法，写作方法，写作工具，知识储备方法，AI助手，开发工具，等一系列全介绍！终极攻略篇。

当然，这些写作技巧也可以用在hexo , hugo, next.js， wordpress上面，或者还是其它类型博客。

在任何类型的写作上面，这些都是用得着的写作技巧！

使用草稿

新建文章

一般我们都会使用 hexo new <title> 来建立文章，这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是我们熟悉的 Hexo 流程。

这种建立文章方式的缺点是：若我们同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到我们尚未完成的文章。

新建草稿

hexo new draft <title>

Hexo 另外提供 draft 机制，它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署到 GitHub。

hexo S --draft

虽然 hexo generate 不会编译 source/_drafts 目录下的文章，但 Hexo 的 Hexo server 另外提供 --draft 参数，这让我们只要搭配 hexo-browsersync plugins，就可以达到一边编辑 markdown 文章，一边使用浏览器预览的目的。

将草稿发布为正式文章

hexo P <filename>

其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。

之后的 hexo generate 与 hexo deploy 的用法就完全一样了。

若日后想将正式文章转为为草稿，只需手动将文章从 source/_posts 目录移动到 source/_drafts 目录即可。

新建普通页面

这种形式类似是“关于”，“了解我们”之类的文章。

hexo new page c

创建一个标题为c的page

和前两种不同，这个命令会在source文件夹内创建出c文件夹，与_posts，_drafts并列。文件夹里面有一个index.md文件。

注意：刷新页面后，c并没有出现在页面中，而是需要访问http://localhost:4000/c/才可以看到。

hexo命令速记

# 开启服务
hexo server

# 新建文章
hexo new a

# 新建草稿
hexo new draft b

# 发布草稿成为文章
hexo publish b

# 普通页面
hexo new page c

# 清空缓存
hexo clean
# 生成静态文章
hexo generate 或者是 hexo g
# 部署文章
hexo deploy 或者是 hexo d

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数	描述	默认值
`layout`	布局	`config.default_layout`
`title`	标题	文章的文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章网址
`excerpt`	Page excerpt in plain text. Use this plugin to format the text
`disableNunjucks`	Disable rendering of Nunjucks tag `{{ }}`/`{% %}` and tag plugins when enabled
`lang`	Set the language to override auto-detection	Inherited from `_config.yml`

布局

The default layout is post, in accordance to the value of default_layout setting in _config.yml. When the layout is disabled (layout: false) in an article, it will not be processed with a theme. However, it will still be rendered by any available renderer: if an article is written in Markdown and a Markdown renderer (like the default hexo-renderer-marked) is installed, it will be rendered to HTML.

Tag plugins are always processed regardless of layout, unless disabled by the disableNunjucks setting or renderer.

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

warn 分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

categories:
  - Diary
  - Life

会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

JSON Front-matter

除了 YAML 外，你也可以使用 JSON 来编写 Front-matter，只要将 --- 代换成 ;;; 即可。

"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

主题Front-matter

不同主题还有自己定义的Front-matter，以提供不同的特殊功能

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	`Markdown` 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 `_config.yml` 中的 `author`	文章作者
img	`featureImages` 中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: `http://xxx.com/xxx.jpg`
top	`true`	推荐文章（文章是否置顶），如果 `top` 值为 `true`，则会作为首页推荐文章
hide	`false`	隐藏文章，如果`hide`值为`true`，则文章不会在首页显示
cover	`false`	`v1.0.2`版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	`v1.0.2`版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 `password` 的值，该值必须是用 `SHA256` 加密后的密码，防止被他人识破。前提是在主题的 `config.yml` 中激活了 `verifyPassword` 选项
toc	`true`	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 `config.yml` 中激活了 `toc` 选项
mathjax	`false`	是否开启数学公式支持，本文章是否开启 `mathjax`，且需要在主题的 `_config.yml` 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO 时需要
reprintPolicy	cc_by	文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图各有特色。

date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。

如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。

您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

使用模板

hexo new使用的模板，最好自己定制修改

下面是博主使用的

scaffolds/post.md

---
layout: post
title: {{ title }}
date: {{ date }}
author: 夜法之书
categories: [web]	# 文章分类 建议只写一个
tags: # 文章标签 文章卡片显示用
    - EncryptedTag
    - web
    - http
keywords: web, http	# seo标签
summary: 简介，这里修改
img: /medias_webp/cover/write.webp
top: false      # 首页推荐文件
hide: false
cover: false    # 首页轮播
coverImg: /medias_webp/cover/write.webp
toc: true       # 是否开启目录
tochide: false   # 默认是否隐藏目录
mathjax: false
mermaid: false
echarts: false
comment: waline
# password: false 	# SHA256 string  matery主题自带加密
reprintPolicy: cc_by_nc_sa
# password: ""    # hexo-blog-encrypt 插件需要的
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

> 简介
> 

<!-- more -->
图片

正文

参考

hexo内置标签

所有hexo主题都支持的标签

quote

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

没有提供参数，则只输出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

引用 Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

@DevDocstwitter.com/devdocs/status/356095192085962752

引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

Seth GodinWelcome to Island Marketing

代码块

在文章中插入代码。

markdown支持行内代码和区块代码

`行代码`

```
代码块
```

别名： code

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

Specify additional options in option:value format, e.g. line_number:false first_line:5.

Extra Options	Description	Default
`line_number`	Show line number	`true`
`line_threshold`	Only show line numbers as long as the numbers of lines of the code block exceed such threshold.	`0`
`highlight`	Enable code highlighting	`true`
`first_line`	Specify the first line number	`1`
`mark`	Line highlight specific line(s), each value separated by a comma. Specify number range using a dash Example: `mark:1,4-7,10` will mark line 1, 4 to 7 and 10.
`wrap`	Wrap the code block in ``	`true`

样例

普通的代码块

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

alert('Hello World!');

指定语言

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

[rectangle setX: 10 y: 10 width: 20 height: 20];

附加说明

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

Array.map
array.map(callback[, thisArg])

附加说明和网址

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}

_.compactUnderscore.js
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

样例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

Pull Quote

在文章中插入 Pull quote。

{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle。

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist。

{% gist gist_id [filename] %}

iframe

在文章中插入 iframe。

{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

Link

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

{% link text url [external] [title] %}

Youtube

在文章中插入 Youtube 视频。

{% youtube video_id [type] [cookie] %}

Examples

视频

{% youtube lJIrF4YjHfQ %}

播放列表

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

隐私模式

禁止 YouTube cookie

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

Vimeo

在文章中插入 Vimeo 视频。

{% vimeo video_id %}

Raw

如果您想在文章中插入 Swig 标签，可以尝试使用 Raw 标签，以免发生解析异常。

{% raw %}
content
{% endraw %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}

在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。

例如，在文章中使用 {% post_link how-to-bake-a-cake %} 时，只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake，都没有影响。

默认链接文字是文章的标题，你也可以自定义要显示的文本。

默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项，禁止对特殊字符进行转义。

链接使用文章的标题

{% post_link hexo-3-8-released %}

链接使用自定义文字

{% post_link hexo-3-8-released '通往文章的链接' %}

对标题的特殊字符进行转义

{% post_link hexo-4-released 'How to use <b> tag in title' %}

禁止对标题的特殊字符进行转义

{% post_link hexo-4-released '<b>bold</b> custom title' false %}

引用资源

引用文章的资源。

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

_config.ymlpost_asset_folder: true

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 ![](example.jpg) ，它将不会出现在首页上。（但是它会在文章中按你期待的方式工作）

正确的引用图片方式是使用下列的标签插件而不是 markdown ：

{% asset_img example.jpg This is an example image %}

通过这种方式，图片将会同时出现在文章和主页以及归档页中。

Embedding an image using markdown

hexo-renderer-marked 3.1.0 introduced a new option that allows you to embed an image in markdown without using asset_img tag plugin.

To enable:

_config.ymlpost_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, ![](image.jpg) will be rendered as <img src="/2020/01/02/foo/image.jpg">.

Embed image

hexo-renderer-marked 3.1.0+ can (optionally) resolves the post’s path of an image automatically, refer to this section on how to enable it.

“foo.jpg” is located at http://example.com/2020/01/02/hello/foo.jpg.

Default (no option)

{% asset_img foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg">

Custom class

{% asset_img post-image foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" class="post-image">

Display size

{% asset_img foo.jpg 500 400 %}
<img src="/2020/01/02/hello/foo.jpg" width="500" height="400">

Title & Alt

{% asset_img logo.svg "lorem ipsum'dolor'" %}
<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor">

文章摘要和截断

在文章中使用 ，那么  之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。

例如：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

首页中将只会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

正文中则会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

注意，摘要可能会被 Front Matter 中的 excerpt 覆盖。

引用数据

有时您可能需要在主题中使用某些资料，而这些资料并不在文章内，并且是需要重复使用的，那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

举例来说，在 source/_data 文件夹中新建 menu.yml 文件：

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料：

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

Markdown写作

下文着重介绍了MarkDown语法

Joplin 插件以及其Markdown语法。All in One!

Joplin 实用插件介绍，以及Markdown语法说明。All in One! 强烈推荐，绝对是替代各种商业等笔记工具的第一选择。

中文技术文档的写作规范

直接访问中文技术文档的写作规范

hexo插件强化写作

下文介绍了一些Markdown语法，和一些常用的有用的Hexo插件

Hexo Markdown以及各种插件功能测试

hexo matery hexo博客的一些功能测试，新插件的靶场。数学公式，Mermaid,plantuml图表绘制，音乐视频插入，bilibilid、豆瓣卡片等等。

主题插件

很多主题内置很多tag语法，可以大大美化最终呈现效果

使用`fontawesome`图标

醒目度提升一大个等级！

更多图标，这里查找 fontawesome

支持Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件.
一键部署只需一条指令即可部署到Github Pages, 或其他网站
丰富的插件
Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript.

- <i class="fas fa-pencil-alt"></i> 支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件. </i>
- <i class="fas fa-cloud-upload-alt"></i> 一键部署
<i>只需一条指令即可部署到Github Pages, 或其他网站</i>
- <i class="fas fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript. </i>

`<i class="fab fa-github"></i>`
`<i class="fab fa-github fa-lg"></i>`
`<i class="fab fa-github fa-2x"></i>`

使用颜文字

颜文字算是中文圈特有的文化符号了 (｡◕‿◕｡)ﾉ♥

击掌/打招呼 ╭(●｀∀´●)╯╰(●’◡’●)╮ (●’◡’●)ﾉ ヾ(*´▽‘*)ﾉ

手拉手 ╭(′▽`)╭(′▽`)╯

好困呀（揉眼睛 ( ‘-ωก̀ )

已阅留爪  (ฅ´ω`ฅ)

勾手指可萌啦 ( ｡ớ ₃ờ)ھ

开心  ♪（＾∀＾●）ﾉｼ （●´∀｀）♪

爱你么么哒 ( ˘ ³˘)♥ ( ˘ ³˘) •́ε•̀)ฅ (๑•́ ₃•̀๑٥) (๑ºั ³ ˘๑)♥ (๑ơ ₃ ơ)ﻌﻌﻌ♥ (ㆀ˘･з･˘)

ε٩(๑> ₃ <)۶з

爱心眼 ( •́ .̫ •̀ ) (´・ω・`) (●′ω`●) (´,,•ω•,,‘) (´；ω；‘) (´・н・‘) (›´ω`‹ ) (๑•ั็ω•็ั๑)( ˘•ω•˘ ) (●´ϖ`●) ( •̀∀•́ )

疑问  ◔ ‸◔？ （⊙.⊙）

逃跑 ε=ε=ε=ε=ε=ε=┌(;￣◇￣)┘

撒花 ｡:.ﾟヽ(｡◕‿◕｡)ﾉﾟ.:｡+ﾟ

瞥眼  (¬､¬) (￢_￢)

盯  ≖‿≖✧  o‿≖✧ (๑•̀ㅂ•́)و✧

中老年人/脸红系列  ( ˙灬˙ ) (´•灬•‘) ε٩ (๑> 灬 <)۶з ( ˘•灬•˘ )(´-灬-‘) (๑´灬`๑) ٩(๑`灬´๑)۶ (•̅灬•̅ ) (๑ơ 灬 ơ) (ง •̀灬•́)ง

加油！ (ง •̀_•́)ง (*•̀ㅂ•́)و

无奈  ╮(๑•́ ₃•̀๑)╭

猫爪 ฅ’ω’ฅ ฅ(๑˙o˙๑)ฅ ٩(๛˘³˘)۶♥ ฅ(๑*д*๑)ฅ ฅ(๑˙o˙๑)ฅ ʕ•̀ω•́ʔ✧ (๑•̀ㅁ•́ฅ)ฅʕ•̫͡•ʔฅ ʕ•͡-•ʔ

伸懒腰  ٩(๑´0`๑)۶

害羞  （//▽//）

委屈 (,,•́ . •̀,,) (๑•́ ₃•̀๑) (๑•́ ₃ •̀),,Ծ‸Ծ,,

着急/救命系列   ﾍ(;´Д｀ﾍ) (/ﾟДﾟ)/ (*゜ロ゜)ノ Σ( ￣д￣；) ！！！ Σ(っ °Д °;)っ ( •̀д•́) Σ( ° △ °|||)︴ =´Å‘=

各种哭法 π__π  T.T  ε(┬┬＿┬┬)3  ╥﹏╥  ┬＿┬  (╥╯^╰╥)

冒汗皱眉系列 (;¬_¬) ( ´◔ ‸◔`) (눈_눈) ( ∙̆ .̯ ∙̆ ) (;￢д￢) (“▔□▔)

呆子  (•ิ_•ิ)

认真脸  (..•˘_˘•..)

喂喂 ((٩(//̀Д/́/)۶))

盖被子  (:3[▓▓] (:3[▓▓▓▓▓▓▓▓▓] (¦3[▓▓]

爬地 _(:з」∠)_  _(:qゝ∠)_  _(・ω・｣ ∠)_

嘿嘿嘿  ๑乛◡乛๑ (●´∀｀●)

闭眼满足  (｡￫‿￩｡) （๑￫‿ฺ￩๑）（=ˇωˇ=）（⺻▽⺻ ）<(￣︶￣)>(•‾̑⌣‾̑•)✧˖° (๑˘ ˘๑)  ♥(｡￫v￩｡)♥

哇呀 >ㅂ<  (๑>m<๑)  o(>ω<)o  ≥▽≤

噜啦啦   (づ￣ 3￣)づ ( ˙ε ˙ ) 乛 з乛 (￣ε￣) (｡◕ฺˇε ˇ◕ฺ｡）(๑¯ิε ¯ิ๑) ( ´´ิ∀´ )

流口水  ԅ(¯﹃¯ԅ) （¯﹃¯）

好呲  (๑´ڡ`๑) (๑＞ڡ＜)☆

生气  (｀д′) (￣^￣) 哼！ <(｀^′)>

瞪眼  ٩͡[๏̯͡๏]

掀桌系列

无表情掀桌 ( ╯-_-)╯┴—┴ (ノ—_—)ノ~┴————┴ （╯－＿－）╯╧╧ （ノ*-_-*)ノ┴—┴ 

娇蛮掀桌 (/= _ =)/~┴┴

无语掀 （╯#-_-)╯╧═╧ ( ╯#-_-)╯┴—┴

大力掀 (╯#-_-)╯~~~~~~~~~~~~~~~~~╧═╧ 

抓狂掀桌 (╯￣Д￣)╯╘═╛ (ノ=Д=)ノ┻━┻ （╯#-皿-)╯~~╧═╧ (╯’ – ‘)╯︵ ┻━┻

再他妈的掀一次 (╯°Д°)╯︵ ┻━┻ (｀□′)╯┴┴ ┴—┴ ╰(｀□′╰)

泪奔掀桌 ((ノ*T_T*)ノ┴—┴ (┙>∧<)┙へ┻┻

摆好 （\#-_-)\┯━┯ 桌放好 ┬─┬ ノ( ‘ – ‘ノ) 摆好摆好

其它 ╭(￣▽￣)╯╧═╧ 单手掀 ╧═╧(-_-)╧═╧ 桌子飞人

卖萌

(•‾̑⌣‾̑•)✧˖°(๑¯ิε ¯ิ๑) (๑•́ ₃ •̀๑) ( ∙̆ .̯ ∙̆ ) (๑˘ ˘๑) (●′ω`●) ︶ε╰✿ ✿◡‿◡ (●･̆⍛･̆●)

♫ ♫♬♪♫ ヾ(。◕ฺ∀◕ฺ)ノ♫♬ 。ﾟ+.ﾟヽ(●´ω｀●)ﾉ。 （●´3｀）~♪

（●>∀<●）ィェ━ィ★彡 ♥♥(o￫ܫ￩o)♫ (〃＾∇＾)ぇ∧∧∧っ

*゜✲ฺ(✿◕ฺ ∀◕ฺ)ฺノ†゜* （●´д｀）.。o

ヽ(.◕ฺˇд ˇ◕ฺ;)ﾉ

((٩(//̀Д/́/)۶)) (´；ω；`) ( `)3′)  v(ﾟｰﾟ) =≡Σ((( つ•̀ω•́)つ

(；′⌒`) ╰(*´︶`*)╯ ( ´´ิ∀´ิ` ) (´∩｀。) ( ื▿ ื) (｡ŏ_ŏ) ( •ิ _ •ิ ) ヽ(*΄◞ิ౪◟ิ‵ *)ﾉ ( ˘ ³˘)

(๑>m<๑) (; ´_ゝ`) (*ˉ﹃ˉ) (◍’౪`◍)ﾉﾞ (｡◝‿◜｡) (ಠ .̫.̫ ಠ) (´◞⊖◟`) (。≖ˇェˇ≖｡) ℰ⋆‿⋆ℰ

(ಠ .̫.̫ ಠ) p(´⌒｀｡q) ┗(´D`* (´D`*(´D`*)┛ <(▰˘◡˘▰)> (・ω< )★ (*ﾟｪﾟ*) ✧ (≖ ‿ ≖)✧

(◕ܫ◕) (｀◕‸◕´+) (▼ _ ▼) ( ◉ืൠ◉ื) ㄟ(◑‿◐ )ㄏ (●’◡’●)ﾉ♥ (｡◕ˇ∀ˇ◕） ~Ⴚ(●ტ●)Ⴢ~

⊙.⊙ ( ◔ ڼ ◔ ) ( ´◔ ‸◔`) (☍﹏⁰) (♥◠‿◠)ﾉ ✪ω✪ ʅ(‾◡◝)ʃ (๑°3°๑) ლ(╹◡╹ლ )

இwஇ (๑꒪◞౪◟꒪๑) (๑◕ܫ￩๑)b (*☉౪⊙*)　ヾ(o゜_,゜o)ノ ლↀѡↀლ (｡▰´◞◟｀▰｡)

( ͡° ͜ʖ ͡°) 　( ͡° ͜ʖ ͡°)✧ (*゜ロ゜)ノ 　 ( ´･∀･｀) °(°ˊДˋ°) ° (つ﹏⊂) –\(˙<>˙)/-

心情好 萌 满足

ლ(´ڡ`ლ) (*≧m≦*) (*･ω･) ヾ(｡･ω･｡) (=ﾟωﾟ)ﾉ (○’ω’○) (´・ω・`) (。-`ω´-) (。⌒∇⌒)。(ﾉ≧∀≦)ﾉ

(￣ω￣;) (◡‿◡✿) (◕‿◕✿) ♪(^∇^*) o(^▽^)o (●´▽｀●) (=￣ω￣=) o(*￣▽￣*)ブ (￣ε￣*) ( o｀ω′)

o((>ω< ))o o(〃’▽’〃)o (＠゜▽゜) (*＾-゜)v ＼( ^▽^ )／ (｡・`ω´･) o(*////▽////*)q (・ω< )★

(*〞艸〝) (◍’౪`◍)ﾉﾞ(●’◡’●)ﾉ♥ヾ(o゜_,゜o)ノ (๑＞ڡ＜)☆ (・∀・(・∀・(・∀・*) ლ(･ิω･ิლ) (๑°3°๑)

(˘❥˘) ︶ε╰✿ ƪ(•̃͡ε•̃͡)∫ʃ (*^︹^*)♡ ヽ(ｏﾟ∀ﾟｏ)ﾉ •́ε•̀~ ˇ▽ˇ （´◔౪◔）٩(๛ ˘ ³˘)۶ (๑•́ ₃ •̀๑) (*¯︶¯*) (●′ω`●)

(U◕‿‿◕U）（*/ω＼*）(´இωஇ｀)゜(´∀｀)♡ (ღ˘⌣˘ღ) ヽ(○´∀`)ﾉ♪ (*´∀`*) (⁎⚈᷀᷁ᴗ⚈᷀᷁⁎) ( ´･◡･` )

心情不好

(→_←) (︶︹︺) （ﾉ´д｀）(･_-｡ ) ˋ(′～‵”)ˊ(　TロT)σ ( T﹏T ) (; ´_ゝ`) (,,Ծ‸Ծ,,) (ಥ_ಥ) ( ꈨຶ ˙̫̮ ꈨຶ )

(;´༎ຶД༎ຶ`) (⌇ຶД⌇ຶ) (＞人＜) (°̥̥̥̥̥̥̥̥-°̥̥̥̥̥̥̥̥ ) థ౪థ இдஇ p(´⌒｀｡q) ( ´•︵•` ) º·(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚ (´-ι_-｀) (┳◇┳) ( >﹏<。)～ ( ̤இॕ⌓இॕ ̤) °(ಗдಗ。)° (´இ皿இ｀)゜(´；ω；｀) ｡：ﾟ(｡ﾉω＼｡)ﾟ･｡(;*△*;) ( ཀ͝ ∧ ཀ͝ )

呆呆的 无奈和汗颜

〜(￣△￣〜) (〜￣△￣)〜 (*｡_｡) (；￣Д￣）(´Д｀) (*￣m￣) （￣～￣;） (￣ェ￣;) (￣◇￣;)

┐(─__─)┌ (*´Д`) （＝＿＝）(￣ー￣*||| (-_-メ) (￣ ‘i ￣;) (￣ε(#￣) ( ¯▽¯；) (*ﾟｪﾟ*) (。≖ˇェˇ≖｡)

(◒｡◒) ( ᖛ ̫ ᖛ )ʃ) ヽ(´o｀；（；￣ェ￣）( ´Д`)y━･~~

搞怪颜文字

ヘ(￣ω￣ヘ) ♪(┌・。・)┌ (－ｏ⌒) ☆～（ゝ。∂）╮(╯▽╰)╭ (￣︶￣)ψ (ˉ﹃ˉ) ೭(˵¯̴͒ꇴ¯̴͒˵)౨

_(:з」∠)_ ( ◉ืൠ◉ื) 罒ω罒 (☝ ՞ਊ ՞)☝⃔⌄ ⃔ ─=≡Σ((( つ•̀ω•́)つ ٩꒰⍢ ꒱۶⁼³₌₃ Σ(￣。￣ﾉ)ﾉ ฅ(*ơ ₃ơ)ฅ”

(｢･ω･)｢ (。･o･｡)ﾉ ~ (o´〰`o) ( • ̀ω ⁃᷄)✧ (ФwФ) ( ื▿ ื) ◐/v/◐ （ゝω・）(੭ु ‾̑ω‾̑)੭ु⁾⁾

(ू ͒•‧̫•ू⑅ ͒) ᕦ(ò_óˇ)ᕤ ( ͡° ͜ʖ ͡°)

斜眼 鄙视状

(ਛ_≻ਛ) ( ﹁ ﹁ ) (¬д¬。) ( ¬､¬) (;¬_¬) (；¬д¬) (′д｀σ)σ .╮(﹀_﹀”)╭

认真的样子

(`･ω･´)ゞ(๑•̀.̫•́๑) (̿▀̿̿Ĺ̯̿̿▀̿ ̿)̄ ( ‾ʖ̫‾) ( •̀ .̫ •́ )✧ (๑•̀_•́๑) (ง •̀_•́)ง (｀◕‸◕´+) ( ∙̆ .̯ ∙̆ ) (•ิ_•ิ)

惊恐 担心

(,,#ﾟДﾟ) (」゜ロ゜)」 (;° ロ°) ヽ（゜ロ゜；）ノ (￣口￣)!! ┌(。Д。)┐(⊙ˍ⊙) Σ( ° △ °|||)︴

（⊙＿⊙；）… (っ °Д °;)っ щ(゜ロ゜щ)

不满 傲娇状

(￣^￣) o(´^｀)o （￣へ￣）φ(￣ー￣ ) ╮(～▽～)╭ b(￣▽￣)d （￣ c￣）y▂ξ (ˉ▽￣～)

o(一︿一+)o ε＝（＞ε＜）ˋ﹏ˊﾉ(≖ A ≖))ﾉ =3=3=3 (‵▽′)/

气愤

（╬￣皿￣） ヽ(ｏ`皿′ｏ)ﾉ ヽ(≧Д≦)ノ （＞д＜） （;≧皿≦） ヽ(#`Д´)ﾉ [○･｀Д´･○] ヽ( ｀0´)ﾉ

Σ(-`Д´-ﾉ；)ﾉ o(-`д´- ｡) ヽ(●-`Д´-)ノ （｀＾´）ノ (╯‵□′)╯︵ ┴─┴ （╯－＿－）╯╧╧ ┗|｀O′|┛

(o#゜ 曲゜)o (╯‵□′)╯···*～● 凸(艹皿艹 ) (ʘдʘ╬) ╰（‵□′）╯ s(・｀ヘ´・;)ゞ 山(≧皿≦)山

(ノ｀Д´)ノ (┙>∧<)┙へ┻┻

双人

(●ゝω)ノヽ(∀＜●) o(╬￣皿￣)=○# (￣#)3￣) ╭(′▽`)╭(′▽`)╯(￣ε(#￣)☆╰╮o(￣皿￣///)

( *￣▽￣)((≧︶≦*) (～￣▽￣)→))*￣▽￣*)o (┘￣︶￣)┘└(￣︶￣└) (〃￣︶￣)人(￣︶￣〃)

<( ‵□′)───C＜─___-)|| └(￣ ￣└)(┘￣ ￣)┘ ( *￣▽￣)((≧︶≦*) └│∵│┐┌│∵│┘ヽ(*´∀｀)八(´∀｀*)ノ \(“▔□▔)/\(“▔□▔)/ （*＾ω＾）人（＾ω＾*）(((*°▽°*)八(*°▽°*)))♪ヽ(＾▽＾)人(＾▽＾)人(＾▽＾)ﾉ

｡*:★(´・ω・人・ω・`)｡:゜★｡ヽ(∀゜ )人( ゜∀)ノ

得意 <(￣︶￣)> 乾杯 []~(￣▽￣)~* 滿足 (￣ˇ￣) 沒睡醒 (￣﹏￣) 狡猾(‵﹏′)

被打一巴掌 (￣ε(#￣) 無言 (￣.￣) 無奈 ╮(￣▽￣)╭ 裝傻 (￣▽￣)~*

驚訝 (⊙ˍ⊙) 發現(￣.￣)+ 驚嚇 Σ( ° △ °|||)︴ 冷 (￣▽￣)” 沒辦法 ╮(╯▽╰)╭

貓咪臉 (=￣ω￣=) 疑惑 (￣３￣)a 阿達 (￣0 ￣)y 重創 (。_。) 不 (＞﹏＜)

懷疑 (→_→) 睏 (￣o￣) . z Z 崇拜 m( _ _ )m 我想想 (ˇˍˇ) 生氣 <(￣ ﹌ ￣)>

就是你 <(￣ ﹌ ￣)@m

小眼睛

( ・ˍ・) (・ˍ・*) （p・_q） (〃・ｏ・〃) (*^・_・) (。・ˍ・。) (*・０・) (・ε・●) (｡･ω･) (。・д・。) (・∀・) （／ˍ・、） (・□・、*) (・－・。) (・▽・。) (・_・。)

(・O・。) (ノ△・。) (＠・ˍ・) (*・・*) 人(・ε・；) (・ o ・) (・ェ・o) (′・∀・『)

瞇瞇眼

(* ￣ー￣) (￣ー￣〃) (＠￣ー￣＠) (* ￣︿￣) (*￣∇￣*) <(ˍ ˍ*)>

(￣(●●)￣) (￣・・￣) (ー∀ー) (￣ｏ￣) (￣、￣) (*￣△￣*) (￣へ￣) (￣□￣) (￣～￣；) (。-ˍ-。 ) (￣ε￣；) (￣┬￣；) (￣∀￣) (ノへ￣、) (*￣ro￣)

(ー人ー) (*￣ｍ￣)

日系小眼睛

(′▽`〃) ( ′ｏ`) (′ェ`) (′ε` ) (=′ー`) ( ′θ`) (′○` ) ( ′－`) (′∀`=)

(*′▽`) (*′ノ0`) ( ′ロ` ) (′～`；） (′ ︿ `) (*′∇`*) (′ｍ`） (′0ノ`*)

(＠。ε。＠) (=′∇`=） (●′ω`●) (′～`●) (′へ`、 ) (〃′o`) ( ；′⌒`)

日系大眼睛

(ΘΘ) (Θ～Θ〃) (ΘｏΘ) (ΘェΘ) (Θ∀Θ＃) (ΘдΘ；) (Θ皿Θメ) (ΘーΘ*)

(Θ０Θ●) (Θ▽Θ) (ΘεΘ◎) (Θ◇Θ。) (ΘへΘ) (ΘˍΘ＝) (Θ、Θ) (Θ△Θ＠)

(Θ３Θ)

圆珠眼

(°ー°〃) (＃°Д°) (。□。) (*。∀。) (*。∇^*) (* ^ー。)

(＠。ー。 ＠) (。∇^☆) (ｏ。◇。) ( 。 ▽ 。) (＃。ε。＃) (。∇^d) (。・。；) (。皿。メ) (* 。 ３ ^) (〃。 ｏ 。〃) ( °◇ °) ( 。⊿。) (°□°；) ( ロ)。 。 (。Д。 ；) (*。ノO。) (； 。。)

紧闭眼

(><) (;><) (>_<) (>.<) (>o<) （＞▽＜） (＞Ｏ＜) (o>▽<) (>◇< ) (>▽<) (;>△<) (>з<) (o>ェ<) (＞д＜) (>皿<) (>_<、) (/_＜。) (>。；) (>。ヘ) (ノ_<) (＞。☆) (>y<;)

小狗嘴

(-ω- ) (+ω+) (*ω* ) ( ^ω^) (;ω;) (。ω。) (『ω′) (・ω・=) (￣ω￣)

(〃ω〃) (≧ω≦) (。・ω・) (=・ω・=) ( ＞ω＜) (′・ω・`) (/ω＼) (/ω・＼)

(/・ω・＼) (ΘωΘ) (ΦωΦ)

悲伤眼

(ＵＵ＊) (ｕｕ〃) (ｕｏｕ〃) (Ｕ３Ｕ*) (●Ｕ_Ｕ●) (ｕ～ｕ=)

(＠Ｕ▽Ｕ＠) (ＵAＵ＊) (Ｕ△Ｕ●) (ｕДｕ〃) (Ｕ◇Ｕ◎) (○ｕAｕ○)

(ｕ▽ｕ＃) (＠Ｕ～Ｕ＠) (ｕ△ｕ＊) (ｕ◇ｕ〃) (ＵДＵ◎) (＝ｕ３ｕ＝)

(ｕ_ｕ＃) (ＵｏＵ＊)



＜（￣︶￣）＞ 满足且得意

＜（￣︶￣）／ 满足并且伸出手表示赞同

＜（＠￣︶￣＠）＞ 满足地脸红

（＃￣▽￣＃） 害羞

＼（￣︶￣）／ 抱抱

ｂ（￣▽￣）ｄ 竖起双手拇指说好

╰（￣▽￣）╭ 眉飞色舞

（￣︶￣）↗ 出发吧

○（＊￣︶￣＊）○ 吃饱睡好

♀（￣▽￣）／ 优质女孩

♂（￣▽￣）／ 优质男孩

╮（╯◇╰）╭ 啾～啾～亲一个

╭（′▽‵）╭（′▽‵）╭（′▽‵）╯ GO!

（￣▽￣）～■□～（￣▽￣） 干杯

＜（￣︶￣）＞＜（￣︶￣）＞＜（￣︶￣）＞ 当我们同在一起

伤心

（┬＿┬） 流泪

（＞﹏＜） 痛苦

（┬＿┬）↘ 跌倒

〒▽〒 真命苦

生气

…（⊙＿⊙；）… 嘎？

（￣∞￣） 猪！

（︶︿︶） 不满

╰（‵□′）╯ 暴怒

（（‵□′）） 暴怒

（︶︿︶）＝凸 比中指

（╯－＿－）╯╧╧ 翻桌A

（╯‵□′）╯︵┴─┴ 翻桌B

┴─┴︵╰（‵□′╰） 翻桌C

╭∩╮（￣▽￣）╭∩╮ 哼，去你的

┴┴︵╰（‵□′）╯︵┴┴ 拆房子

（╬￣皿￣）＝○＃（￣＃）３￣） 看拳

＜（‵□′）＞───Ｃε（┬＿┬）３ 生气扭耳朵

＜( ￣︿￣)︵θ︵θ︵θ︵θ︵☆（＞口＜－） 无影脚攻击

道歉

〈（＿ ＿）〉 道歉、鞠躬

无奈、尴尬

╮（￣▽￣）╭

╮（╯＿╰）╭

╮（﹀＿﹀）╭

╮（￣﹏￣）╭

ˋ（′～‵）ˊ

┐（─__─）┌

（￣口￣）

（＃－.－）

（─.─||）

≡￣﹏￣≡

其他

（～￣▽￣～） 装傻

\(“▔□▔)/\(“▔□▔)/\(“▔□▔)/ 大冷场

<(￣3￣)>

－(>口＜-)

<(￣ c￣)y▂ξ 抽烟

（￣Ｑ￣）╯ 滚一边去

使用emoji

⭕✅☑✔✖❌❎🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀🌝🌞⭐🌟💉💊

😀😁😂😃😎😍😘😗😙😚☺😇😐😑😶😏😣😥😮😯😪😫😴😭

更多 emoji 参考 ( 👁️︠ ‿‿ ︡👁️)✊

emoji表情符号

full-emoji-list

fsymbols

插入html

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

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

文字颜色

#519D9E颜色演示

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

文字大小

0.7em 文字大小演示

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

文字位置

内容居中演示

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

页内跳转

点击到达跳转位置演示

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

综合演示

综合演示
优雅使用 Hexo 写文章

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

iframe 页面镶套

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

iframe自动加载

<iframe src="/galleries/" width="100%" height="500" loading="lazy" name="topFrame" scrolling="yes"  noresize="noresize" frameborder="0" id="topFrame" loading="lazy"></iframe>

  <ul>
    <li> <a id="download" onclick="frameA.src='/'"  aria-label="iframe测试">点击加载主页</a> </li>
    <li> <a id="download" onclick="frameB.location='/galleries/'" >点击加载相册</a> </li>
  </ul>
  <iframe id="frameA" src="" loading="lazy" style="width:100%;height:500px;background-image:url(/medias_webp/loading.webp);background-size: 100% 100%;" frameborder="0"></iframe>  
<iframe name="frameB" src="" loading="lazy" style="width:100%;height:500px;background-image:url(/medias_webp/loading.webp);background-size: 100% 100%;"  frameborder="2"></iframe>

object标签

<object width="100%" height="400" data="/galleries/"></object>

details 标签

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

Demo

夜法之书

欢迎光临

<details>
<summary>Demo</summary>
<p><a href="/" target="_blank"><b>夜法之书</b></a></p>
<p><b>欢迎光临</b></p>
<img width="200" src="/favicon.webp" alt="wechat">
</details>

配图

众所周知，博客好不好看，配图占一半。这里给大家推荐几个我常用找配图的地方。另外，请遵循相关网站的版权协议。

Google Image是你的好搭档

Wallpaper Hub

点击跳转到 Wallpaper Hub

Wallhaven

点击跳转到 Wallhaven

Unsplash

点击跳转到 Unsplash

插入Mermaid

直接在我网页前端生成SVG图像，能够实现非常复杂，美观的流程图！

Mermaid 简明教程 pluntuml 简明教程

graph LR
    1[Sonarr] == request Jackett / Prowlarr Torznab api ==> 2(JProxy) == proxy Sonarr request ==> 3(Jackett / Prowlarr) 
    3(Jackett / Prowlarr) == return ==> 2(JProxy) == return result after format ==> 1(Sonarr)
    2(JProxy) == replace search key ==> 2(JProxy)
    2(JProxy) == format result title ==> 2(JProxy)

graph LR
    1[Sonarr] == request Jackett / Prowlarr Torznab api ==> 2(JProxy) == proxy Sonarr request ==> 3(Jackett / Prowlarr) 
    3(Jackett / Prowlarr) == return ==> 2(JProxy) == return result after format ==> 1(Sonarr)
    2(JProxy) == replace search key ==> 2(JProxy)
    2(JProxy) == format result title ==> 2(JProxy)

数学公式

GeoGebra（网页版 & 桌面 & 手机）

📌 最强参数动态可视化工具之一

特点

画函数、几何图形、参数曲线、微积分相关图形
支持 滑块（slider）动态参数 拖动，可以实时观察变化
支持三维图形
可插入公式、表达式、参数、表格
支持导出图像、分享链接

📊 优点

交互式非常强
可保存文件、分享到网页
动态滑动参数调整非常自然
免费且功能强大

示例：GeoGebra 怎么做动态参数

1) 输入公式

f(x) = a * sin(bx + c)

2) 自动提示创建滑块 a, b, c

图形就会出现滑块：
🟦 a — 控制振幅
🟩 b — 控制频率
🟥 c — 控制相位

拖动滑块实时变图形！

📌 在 Hexo 博客里嵌入可交互图（例如 Geogebra/Desmos）

你也可以在 Hexo 文章里嵌入：

🔹 Desmos iframe 嵌入

<iframe src="https://www.desmos.com/calculator?embed" width="600" height="400"></iframe>

🔹 GeoGebra 嵌入

GeoGebra 提供分享链接 → 嵌入：

<iframe src="https://www.geogebra.org/classic/XXXXXX" width="800" height="600"></iframe>

📌 另外附上几款针对公式OCR与解题的工具（非拖动参数）

工具	功能
Mathpix Snip	公式 OCR → LaTeX + 解析
Photomath	拍照解题、步骤解析
Microsoft Math Solver	解题 + 图形显示
Mathway	解题 + 图像

这些更适合 识别公式与求解步骤，而不是 动态参数实验。

🎯 你适合哪种？

✅ 教学/视觉化分析 → GeoGebra / Desmos
✅ 公式识别 → LaTeX 导出 → Mathpix Snip
✅ 自动解析/求解 → Wolfram Alpha
✅ 科研符号运算 → Mathematica/Maple

插入音乐和视频

教程：插入音乐和视频

插入优美的音乐可以愉悦阅读过程

插入视频教程或者视频Live可以极大提高知识传播速度！

内容为王

前面提到了那么多的方法和工具，但是内容才是最重要的！

内容好，前面提到的写作技巧和工具都可以忽略；内容不好，再多的方法和工具都是白费！谨记！

尺度控制

不同平台，能够容忍的尺度是不同的！

面对不同的人群，不同地域，不同背景的读者，写作尺度需要区分！也就是需要主动自我阉割！

能说的比能写的至少严格一个等级，私密场合口耳相传的可以更接近真相！

能写出来，广泛传播的大众平台言论，都是被阉割删减过的。顶多给你一个入门的方向指引，甚至很多时候故意给你一个错误的方向误导你！

很多假话，套话，写一写，喊一喊，自己真信就是傻逼了

文学技巧

对于技术文章，是不需要什么文学技巧的，有足够的行业积累，才能够写的深入浅出！

如果你写的是头条账号，瓜田李下，下里巴人才能够吸引眼球，一些写作技巧，如适当的疑问，引用，递进，顶珠，等方法可以大大提高流量。但是，不要做标题党，广大读者包括笔者都痛恨标题党！

关于谣言

造谣一张嘴，辟谣跑断腿！

社交平台通过故意制造谣言，引起社会对立，可以极大提高平台活跃度与曝光量！

Facebook 内部员工就爆料 Facebook 故意挑起种族仇恨言论（具体详情请自行搜索新闻来源）。

微博为什么是女权发源地，这与微博的故意放纵，背后资本都是相关的。

另外，有不少收钱发帖的账号！

国家应该对接受资本资助的平台账号备案，并严令禁止社交平台账号接受国外资本资助！

这种账号日常就发一些没有时间，地点，人物等详细细节的文章，引导舆论，或者文化打压，渗透！

关键这种你很难举报，博主举报了很多次，平台都说举报不成立，不算谣言！即使举报成功了，谣言也已经传播开了，对于造谣者来说也没多大损失！顶多删除一条就是，这种应该严惩的行为目前没看到什么法律法规的约束！

但是，国家早晚会对这一块整治，法律会严惩这些造谣者的！别看这些造谣者一时收黑钱一时爽，总会有清算的一天的。各位读者遇到这类文章也多点击一下举报吧，举报间谍成功奖励50W哦！

私有笔记云

平时不积累，用时方嫌少！

建立自己的知识库，就显得那么重要了

完美笔记进化论

经历了很长时间，使用了各种各样的方案，最终选择了一种相对完美的方式。docker私有部署运行的joplin，使用markdown语法，github作为图床，picgo作为图像自动上传后端，pypora作为MD编辑器，Snipaste作为截图工具。后备gitlab ee selfhost备份，自建图床VPS多线负载均衡。cloudflare partner cdn加速，jsdelivr加速。

pigo图床搭建与配置

Joplin教程

Snipaste截图工具

Typora 作为Markdown编辑器最强

完美笔记进化论

wiznote docker版作为笔记管理搜索工具，typora作为markdown编辑器，只使用markdown格式笔记，Picgo作为图上上传工具，github作为图像图床，Snippaste作为截屏工具。一起组成笔记工具链。整体免费，满足selfhost，富文本，多平台，版本管理，目录管理，可搜索，对图像友好的苛刻要求，超越市面所有产品，wiznote 还可以对外网提供服务。

Joplin入门指南&实践方案

Joplin和使用

Joplin同步与备份

Joplin导入与导出

替代Evernote免费开源笔记Joplin-网盘同步笔记历史版本Markdown可视化

Joplin安装使用，调用外部编辑器，网盘同步等等

Joplin 插件以及其Markdown语法。All in One!

Joplin简明教程

markdown语法简明教程

Joplin 插件使用推荐

教你用各种插件打造一个强大的笔记工具。

为知笔记私有化Docker部署

如何部署自己私有的为知笔记。

其实博主更推荐私有部署joplin

私有Nas

丰富自己的知识图谱！

数据最值钱，自己的数据真正属于自己的，所以你需要一个私有Nas

使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程

使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程

jackett 作为种子源，sonarr剧集管理，bt下载，qbittorrent主力下载，使用iyuu转移辅种，emby，jellyfin做海报墙，sunfinder自动下载字幕。基本算是完美打通全流程自动追剧。bt种子文件命名规则SxxExx的自动识别下载，国内的资源手动查找下载，自动推送到emby刮削好

结构化自己的图书，音乐，和视频！

丰富自己的见识，知识储备

如何建立自己的私人电子图书馆

图书管理员似乎是个非常有前途的职业，远的有孔子，游学之前当图书管理员，近的有本朝开国毛教员，也当了很长时间图书管理员。我们也可以自己做个私人电子图书馆，当个图书管理员，说不定很有前途？

如何使用media Go,MusicBrainz,Mp3tag工具刮削音乐整理音乐资料库

音乐文件则是将歌名、歌手、专辑、发行时间、歌词、封面图等信息写入文件标签，称为ID3 Tag 。它能够在MP3中附加曲子的演出者、作者以及其它类别资讯，方便众多乐曲的管理。

如何使用tinyMediaManager刮削电影和电视剧，动画，并自动下载字幕

tinyMediaManager是最好用的视频刮削工具，可以刮削电影，动画，电视剧。使用TinyMediaManager生成nfo元数据文件，多媒体软件解析生成海报墙展示丰富的影片信息，配合Emby，Plex使用体验绝佳

RSS订阅

一直输出知识怎么能行？身体被掏空，急需补充能量！

那么，你就需要一个好用的RSS订阅工具，TTRSS是一个好选择

RSS的使用与Tiny Tiny RSS Selfhost自建

RSS是一种消息来源的格式规范，网站可以按照这种格式规范提供文章的标题、摘要、全文等信息给订阅用户，用户可以通过订阅不同网站 RSS 链接的方式将不同的信息源进行聚合，在一个工具里阅读这些内容

文献参考

除了 rss 还有最新前沿可以需要参阅。推荐使用 zotero 来管理论文文献。

以下是主要中文文献网站的综合指南，涵盖免费与付费资源，结合权威性、覆盖范围和访问方式，并标注免费可用的平台：

📚 权威付费平台（需机构订阅或个人付费）

中国知网 (CNKI)

地位：国内最大综合性学术数据库，覆盖95%以上中文期刊。
资源：期刊、博硕论文、会议、专利等（文献量超2亿篇）。
限制：个人用户按篇付费（15-25元/篇），学校或机构订阅为主。
免费替代：iData镜像站（每日限1-2篇免费下载）。

万方数据

整合期刊、学位、会议、专利等资源，期刊库每周更新。
特点：文档清晰度高，但检索需精准技巧。

维普数据库 (VIP)

专注科技期刊（1989年至今），按《中图法》分类。
不足：部分领域更新较慢。

🆓 免费开放平台（无需订阅）

国家哲学社会科学文献中心

网址：http://www.ncpssd.org
资源：社科类期刊为主，注册后可免费下载全文。
特点：国家推出，文献较新但核心期刊覆盖率低于知网。

PubScholar公益学术平台

网址：https://pubscholar.cn
资源：整合中科院资源，开放8,000万篇全文（含论文、专利）。
亮点：每日更新，含中科院学位论文、预印本等特色数据。

中国国家数字图书馆

网址：http://www.nlc.cn
资源：图书、古籍、期刊（需实名注册）。
限制：版权期内图书仅可读前两章。

汉斯出版社

网址：http://www.hanspub.org
资源：125本开源中文学术期刊，支持PDF/HTML免费下载。

🔍 特色资源与工具

Scholaread 靠岸学术

网址：https://www.scholaread.cn
功能：
集成知网、Sci-Hub等引擎入口，一键获取文献。
AI辅助阅读（翻译、图表解析、速览模式）。
免费使用，支持跨平台同步。

公共图书馆服务

中国国家图书馆：实名注册后免费使用维普、万方等数据库。
地方图书馆：如广州图书馆、杭州图书馆提供文献传递服务。

开放获取期刊平台

DOAJ：全球开放获取期刊检索（含310种中文期刊）。
Cnplinker：收录1.85万种OA期刊，支持免费下载。

💎 免费资源获取技巧

预印本平台：

中国预印本服务系统：获取未正式发表的科技论文。
SINDAP：全球预印本一站式检索（74万篇）。

文献传递服务：

通过全国图书馆参考咨询联盟申请，邮箱接收全文。

高校资源利用：

毕业校友可尝试通过母校图书馆的远程访问系统（如VPN）登录知网等库。

📊 平台选择建议

需求场景	推荐平台	原因
社科文献下载	国家哲学社会科学文献中心	免费、更新快、注册简单
科技论文与专利	PubScholar	中科院资源，全文开放量大
一站式检索	Scholaread靠岸学术	集成多引擎+AI阅读工具
历史文献/古籍	中国国家数字图书馆	古籍全文免费，资源独特

提示：知网虽为最大中文库，但免费替代方案已足够满足多数需求。优先使用 PubScholar（综合性强）、国家哲社文献中心（社科专精）及 Scholaread（检索+阅读工具）可降低获取成本。若需下载学位论文等深度资源，建议通过公共图书馆的文献传递服务申请。

图书参考

除了前沿的博客 RSS 订阅，文献 RSS 订阅，还有文献查阅之外，还有图书参考，虽然不是最新最前沿，但还是有很多参考价值的！

Zlibrary 图书资源下载与 Calibre 图书管理打造结构化电子图书馆高阶教程

电子书不仅要下载可看，还要有书签，封面，简洁，作者，出版社等元数据帮助记忆和管理，否则，下载了一堆没法查找和没下载差不多！再加上世界上最大的电子书图书馆 Zlibrary ，这里几乎能找到所有的电子化图书！Calibre 和 Zlibrary 结合起来使用，就可以创建结构化的电子图书馆！本文将介绍Calibre 的使用，刮削，图书管理，web 界面的图书管理，重点介绍 Zlibrary 的使用。

图书&音乐&视频参考

结构化自己的图书，音乐，和视频！

正因为你懂得多，才能明白自己的无知，才能明白如何更快更好的去学习新知识！

视频图书和音乐完全自动化管理框架图解

音视频，音乐和图书管理全过程自动化解决方案框架图解！结构化你的音视频、音乐和图书资源。所有过程一张图搞定！

如何建立自己的私人电子图书馆--出版书籍，网络小说，漫画一网打尽!

如何使用media Go,MusicBrainz,Mp3tag工具刮削音乐整理音乐资料库

私人在线音乐服务器搭建与使用介绍

私人在线音乐服务器搭建与使用介绍！Mstream Docker 部署， rclone 挂载 webdav 网盘。 cloudflare parterner加速

如何使用tinyMediaManager刮削电影和电视剧，动画，并自动下载字幕

使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程

使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程。jackett 作为种子源，sonarr剧集管理，bt下载，qbittorrent主力下载，使用iyuu转移辅种，emby，jellyfin做海报墙，sunfinder自动下载字幕。结合本地DNS管理，DNS去广告，Nginx反向代理去端口访问，形成一个完整解决方案。

私人资料库与私人搜索引擎

资料太多，就需要结构化整理了，再加上本地 AI 管理，加上线上 AI 查询结合使用，效率直接起飞！

如何创建属于自己的私人资料库与私人搜索引擎

平时积累了很多私人工具和资料，可以极大的提高工作效率，并丰富个人知识图谱。这里整理了一下所使用的各种工具和方法，包括AI助手，RSS搜索引擎，邮件网关，代码搜索，笔记管理，音视频图书管理仓库等等！

博客搭建

为什么推荐每个人都自建一个独立博客网站？

一个自我展示的名片！

最大的言论自由，不被任何外人以及公司审查删帖封号！

[三万字教程]基于Hexo的matery主题搭建博客并深度优化

一文介绍了Hexo利用github page搭建博客全过程，还附带一个博主自己定制过的`hexo Docker`，使用docker 配合博文将引导你搭建一个功能完善的blog，并指导全程免费seo优化，性能极致优化过程和工具。并附带几个常见问题的解决方案在文章最后。

hexo博客博文撰写篇之完美笔记大攻略终极完全版

hexo博客文章卷写技巧，包括MarkDown，hexo技巧，html插入，美化方法，写作方法，知识储备方法，开发工具，等一系列全介绍！终极攻略篇

系列文章

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

Gitbook使用

长篇专业电子书制作工具

当你的文章写的长了，就可以考虑用Gitbook来制作电子书了

开发工具

上面都是说的写作工具，该说说开发工具了。私有建立一个完善的DevOps将极大的提高你的开发效率和能力！

自建全套开源Devops开发系统

目标：单节点，以最低成本，最低消耗，使用开源软件实现一个可用的DevOps！满足中小企业的研发、测试、运维需求。

Docker使用

博客美观性

博客美观性增强方法

使用标准Markdown语法
使用hexo tag
使用 hexo 主题 tag
使用hexo 插件
特殊符号
CSS自定义

博文可迁移性

博客文章可迁移性评价

使用标准Markdown语法
少用hexo tag
少用 hexo 主题 tag
少用hexo 插件

可以说，美观和可迁移性是不可兼得的。

写作工具

工欲善其事，必先利其器

Markdown编辑器 Typora，早期beta版本免费
截图 snippaste
动图 ScreentoGIF
图床 Picgo
脑图 Draw.IO
密码同步+随机生成+保存 BitWarden Docker
图片处理 Photoshop？
笔记工具 git + gitlab docker 或者 Joplin Docker
PDF 转换 Markdown , json 工具 MinerU

AI 助手

熟练使用各种AI 工具可以极大的提升工作与写作体验！下面简单介绍几种

图书管理

calibre

文献管理

zotero

zetero 中文社区

zotero入门教程

编辑器

有些基于JavaScript的Markdown编辑器在处理大型文档时可能会表现出性能问题，以下是一些高性能的Markdown编辑器推荐，这些编辑器大多是桌面应用程序，通常能提供更流畅的使用体验：

Typora

特点：
- 实时预览
- 支持自定义主题
- 集成表格、图表、代码块和数学公式
- 无干扰的写作模式
优点：界面简洁，性能优异，支持多种导出格式。
下载：Typora

Mark Text

特点：
- 实时预览
- 支持CommonMark和GFM
- 多标签页支持
- 主题自定义
优点：开源，轻量且功能丰富。
下载：Mark Text

Obsidian

特点：
- 强大的链接和笔记组织功能
- 支持插件扩展
- 离线使用
- 实时预览和多面板支持
优点：适合笔记和知识管理，性能良好。
下载：Obsidian

Zettlr

特点：
- 专为学术写作设计
- 支持文献管理
- 实时预览
- 多种导出格式（如LaTeX、PDF）
优点：开源，适合长篇文档和学术写作。
下载：Zettlr

HedgeDoc

特点：
- 实时协作
- 支持嵌入媒体和LaTeX公式
- 可自托管
优点：适合团队协作，开源。
下载：HedgeDoc

VNote

特点：
- 多标签页
- 支持Markdown、Vim/Emacs模式
- 集成文件管理
- 实时预览和分屏模式
优点：性能稳定，适合技术写作和管理。
下载：VNote

这些Markdown编辑器大多是本地应用程序，具有更高的性能和稳定性，适合处理大型文档和复杂的写作需求。你可以根据自己的需求选择合适的编辑器。

图片上传

Picgo

截图

snipaste
FastStone Capture
ScreenToGif

笔记管理

Joplin

疑难杂陈

问答 1：hexo g出错怎么办？

npm包升级到最新试试？
npm modules 模流删除，重新安装
先移除所有文章，编译看看是否文章中出现了语法错误！
可以用二分法定位语法错误
特别注意插件tag语法是否有误
hexo或者npm包先删除编译试试
hexo，theme主题功能先零时关闭试试

问答2：笔记丢失怎么办？

使用 Git 保存 + Gitlab 服务器
使用 Joplin，没有任何限制的批量导入导出 Markdown！
不要使用任何私有格式的笔记工具，例如X知笔记

问答3：修改不生效怎么办？

本地 Docker 或者直接本地测试时，重启 hexo docker，hexo 一些修改需要下一次启动才能生效
重启电脑
如果插件问题，试着删除插件，重新安装插件测试
如果使用了 CDN 服务，在线测试时，修改不生效怎么办？清除 CDN 缓存，暂时停用 CDN（如Cloudflare），CTRL + F5 来刷新网页试试！或者检查CDN版本是否正确，如 Jsdelivr

后记

写到这篇文章，基本把博客很大部分文章都串起来了，串成了一个圆环，一颗颗珍珠终于连成一串美丽的珍珠项链。一篇篇博文不再是孤岛，而是开始连成一片大陆了。

参考

系列教程

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

笔记系列

使用nodeppt给hexo博客嵌入PPT演示

2022-08-11T13:48:59.000Z

给网页添加PPT演示功能，一定会炫酷到你的小伙伴，这里介绍nodeppt给hexo博客添加PPT演示功能，当然PPT演示也可以独立域名访问

插入PPT

Github

demo

安装nodeppt

$ 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，见Github nodePPT v1.2.0
- 当前版本产生html利用built指令，例如nodeppt build slide.md，产生的html在默认文件夹dist中，包含CSS、IMG、JS三个文件夹和demo.html。
- 在nodeppt仓库的Issue上找到一个小哥做的爬虫程序，亲测有效。会生成一个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

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

:::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" />

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

<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文件<head>引用katex的JS和CSS。

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<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">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <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>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <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文件添加

skip_render: 
  - nodeppt/*.html

通过nodeppt build的html页面

skip_render: 
  - nodeppt/**

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

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

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

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

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下找到。

系列教程

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

在 Hexo 博客中插入 ECharts 动态图表

2022-08-11T12:29:29.000Z

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

插入 ECharts 动态图表

在 12 Best Charting Libraries for Web Developers - Christopher Watkins 一文中，博主 Christopher Watkins 向我们介绍了 12 款为网页开发者推荐的绘图库。其中不乏大名鼎鼎的 Google Charts，D3.js 和 HighCharts 这样的富图表库，还有不少其他的特型图表库，它们在展示某些特定的图表时，非常出色。百度开发维护的 ECharts 当然也在其中。

ECharts 作为国产工具，在语言上对中文开发者有着天然的优势，官方文档对每一个细节、参数、配置都有详尽的说明，对于新手非常的友好。另外一个重要的方面，就是 ECharts 的图表颜值很高，默认的主题和配色可以呈现出优雅漂亮的图表。所以，我也一直选择 ECharts 作为我的网页图表绘图工具。

Hexo 中的 ECharts

npm install hexo-tag-echarts --save

注意：ECharts官网教程-[5 分钟上手 ECharts]([https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts](https://echarts.apache.org/zh/tutorial.html#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 %}

<script>中添加定义的变量和函数，若无设定则可删掉<script></script>
{% 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中直接绘制，然后用<iframe></iframe>展示效果更佳。关于hexo的html文件渲染问题，可以参考Fluid+自定义html，主要是去掉head部分的说明。
在html绘图ECharts的格式如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<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>Copy

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

<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>Copy

实例

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

折线图Line

Stacked area chart

Area Pieces

Rainfall

Line Easing Visualizing

柱状图Bar

柱状图动画延迟

柱状图框选

极坐标系下的堆叠柱状图

饼图Pie

Texture on Pie Chart

地理坐标/地图GEO/Map

Air Quality - Baidu Map

可进入页面查看

K 线图Candlestick

Candlestick Brush

可进入页面查看

雷达图Radar

Proportion of Browsers

关系图Graph

Graph Webkit Dep

可进入页面查看

树图Tree

Multiple Trees

日历坐标系Calendar

Calendar Heatmap Horizontal

3D

Bar3D - Simplex Noise

可进入页面查看

Surface Wave

pyecharts

py + echarts = pyecharts

是什么

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

怎么用–py或jupyter

pip 安装

$ 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 画廊
pyecharts仓库

参考

系列教程

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

基于Hexo的matery主题搭建博客常见问题篇6

2022-03-27T07:28:46.000Z

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

独立博客相关组织

一些有趣的相关组织介绍。

一个人码文太孤单，但是，别忘了，你还有这么多同路人！

建立独立博客之后，可以试着加入一些博客联盟，相互学习，引流！

BlogFinder

发现优秀的个人博客

BlogWe

致敬还在写博客的我们！

笔墨迹

# 致敬还在写博客的我们

博客录

# 博客收录展示平台

博客之家

博客之家」—— 一个专注收录优质个人博客的导航网站。

我们之所以做这件事，是因为相信个人博客是互联网世界里特别的存在。现在很多网站小编为了完成KPI，生产出大量“洗稿”或拼凑出来的内容。这些东西到底是在丰富互联网，还是在拉低整体内容质量？真的不好说。

但个人博客不一样。没有业绩压力，没有流量绑架，博主写的都是自己真实的想法和见解。它像是互联网的一片自留地，安静、干净，也更有灵魂。

博客圈

# 致力于个人独立博客，按地区分类，由段先森维护

博客志

优秀个人独立博客导航

博友圈

# 博客人的朋友圈

川流

川流，取川之意，流水之情

个站商店

# 一个精致的，带社交元素的个人网站发布平台，博客收录网站

积薪

致敬那些还在写博客的人

开往

# 让传统友链“活跃”，让网页相互接力，让流量相互流动，让网络开放起来

未来信息

希望在未来还能遇见你博客的信息

十年之约

十年之约，即从加入这个活动起，我们的博客十年不关闭，保持更新和活力！

点击加入点击查看成员

中文博客列表导航项目

尝试链接几乎所有的中文博客

申请加入

中文独立博客列表

一个自动合并PR,CVS管理博客列表的Github项目

加入方法，点击 Fork chinese-independent-blogs

在 ./blogs-original.csv 中填入博客的名称、URL、RSS以及标签

提交 PR

(自动) PR 被 merge 之后 README 通过 ./script.js 生成

中文独立博客文章聚合搜索

目标是做一个独立博客文章聚合搜索引擎

要不要加参考链接？

要加！一定要加！

本来就是白嫖了别人的成功，去掉署名声称是原创就要下做了。

不加引用后果：

本来加个署名可以和原作者成为朋友，不加就弄成了仇人！

别人不一定告你，告你，输是一定的。但违反人家发布协议，弄臭你很容易

创作圈不大，很快大家都知道了

文章人家原创，后续很可能还会更新、修改，留个链接好跟过去看看有没有更新

等等其它

出错了，怎么办？

首先，学会搜索，最好实用Google，准确率比X毒高几个数量级。你遇到过的问题，90%以上其他人也遇到过，网上能找到现成的解决方案。

个人独立博客文章质量最高，stackoverflow质量也很非常高，CSDN基本就是垃圾场，普通搜索文章能有50%准确率就非常不错了，独立博客和stackoverflow之类的80%以上的准确率！

如何调试博客

需要一定的web开发知识才能做。

学会一些简单调试及基本html语言很容易，网上教程很多。

按F12进入调试模式，元素，网络，控制台，是常用的页面。

网站被克隆镜像了怎么办？

在 analytic 后台（如umami）发现一些来源异常的域名，惊奇的发现你的网站被镜像了，下面是一些处理方法

JS 域名检测

代码如下**（插入到页面 head 或 foot）**：

<script>document.location.hostname!='blog.17lai.site'&&(location.href=new URL(location.href).hostname='blog.17lai.site')</script>

展开上面脚本

<script>
if (document.location.hostname !== 'blog.17lai.site') {
  // 获取当前页面的 URL 对象
  var url = new URL(document.location.href);
  
  // 修改 hostname 为目标值
  url.hostname = 'blog.17lai.site';

  // 跳转到修改后的 URL
  window.location.href = url.href;
}
</script>

如果对方不讲武德的通过反代把文件内的域名全部替换为了他的域名，就出现了死循环。

后来通过 String.fromCharCode 混淆的方式，把网址给混淆了，这样就防止了域名被修改。

代码如下：

<script>
if (document.location.hostname !== decryptHostname()) {
  // 获取当前页面的 URL 对象
  var url = new URL(document.location.href);
  
  // 修改 hostname 为解密后的值
  url.hostname = decryptHostname();

  // 跳转到修改后的 URL
  window.location.href = url.href;
}

function decryptHostname() {
  return String.fromCharCode(
    98, 108, 111, 103, 46, 49, 55, 108, 97, 105, 46, 115, 105, 116, 101
  ); // 对应 'blog.17lai.site' 的 ASCII 码
}
</script>

允许多个域名来源

<script>
(function() {
  var allowedHostnames = [
    'blog.17lai.site',
    'example.com',
    'another-allowed-site.com'
  ];

  var currentHostname = document.location.hostname;

  if (!isHostnameAllowed(currentHostname)) {
    // 获取当前页面的 URL 对象
    var url = new URL(document.location.href);
    
    // 修改 hostname 为允许的域名数组中的第一个
    url.hostname = allowedHostnames[0];

    // 跳转到修改后的 URL
    window.location.href = url.href;
  }

  function isHostnameAllowed(hostname) {
    return allowedHostnames.includes(hostname);
  }
})();
</script>

使用 fromCharCode 来完善

<script>
(function() {
  var allowedHostnames = [
    decryptHostname([98, 108, 111, 103, 46, 49, 55, 108, 97, 105, 46, 115, 105, 116, 101]), // 'blog.17lai.site'
    decryptHostname([101, 120, 97, 109, 112, 108, 101, 46, 99, 111, 109]), // 'example.com'
    decryptHostname([97, 110, 111, 116, 104, 101, 114, 45, 97, 108, 108, 111, 119, 101, 100, 45, 115, 105, 116, 101, 46, 99, 111, 109]) // 'another-allowed-site.com'
  ];

  var currentHostname = document.location.hostname;

  if (!isHostnameAllowed(currentHostname)) {
    // 获取当前页面的 URL 对象
    var url = new URL(document.location.href);
    
    // 修改 hostname 为允许的域名数组中的第一个
    url.hostname = allowedHostnames[0];

    // 跳转到修改后的 URL
    window.location.href = url.href;
  }

  function isHostnameAllowed(hostname) {
    return allowedHostnames.includes(hostname);
  }

  function decryptHostname(charCodes) {
    return String.fromCharCode.apply(null, charCodes);
  }
})();
</script>

使用弹窗提示跳转

<script>
(function() {
  var allowedHostnames = [
    decryptHostname([98, 108, 111, 103, 46, 49, 55, 108, 97, 105, 46, 115, 105, 116, 101]), // 'blog.17lai.site'
    decryptHostname([101, 120, 97, 109, 112, 108, 101, 46, 99, 111, 109]), // 'example.com'
    decryptHostname([97, 110, 116, 111, 104, 101, 114, 45, 97, 108, 108, 111, 119, 101, 100, 45, 115, 105, 116, 101, 46, 99, 111, 109]) // 'another-allowed-site.com'
  ];

  var currentHostname = document.location.hostname;

  if (!isHostnameAllowed(currentHostname)) {
    showAlertAndRedirect();
  }

  function isHostnameAllowed(hostname) {
    return allowedHostnames.includes(hostname);
  }

  function decryptHostname(charCodes) {
    return String.fromCharCode.apply(null, charCodes);
  }

  function showAlertAndRedirect() {
    var countdown = 5;
    var alertDiv = document.createElement('div');
    alertDiv.style.position = 'fixed';
    alertDiv.style.width = '50%';
    alertDiv.style.height = '50%';
    alertDiv.style.top = '50%';
    alertDiv.style.left = '50%';
    alertDiv.style.transform = 'translate(-50%, -50%)';
    alertDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    alertDiv.style.color = 'white';
    alertDiv.style.display = 'flex';
    alertDiv.style.justifyContent = 'center';
    alertDiv.style.alignItems = 'center';
    alertDiv.style.fontSize = '24px';
    alertDiv.style.textAlign = 'center';
    alertDiv.style.zIndex = '10000';
    alertDiv.innerHTML = '<div>您访问的网页为镜像地址，<span id="countdown">' + countdown + '</span>秒后会跳转到源地址</div>';
    document.body.appendChild(alertDiv);

    var countdownInterval = setInterval(function() {
      countdown--;
      document.getElementById('countdown').innerText = countdown;
      if (countdown <= 0) {
        clearInterval(countdownInterval);
        window.location.href = new URL(document.location.href).href.replace(currentHostname, allowedHostnames[0]);
      }
    }, 1000);
  }
})();
</script>

通过`hexo g -d`部署时报`Error: Spawn failed`错误:

这是由于 git 本地记录的提交版本号与 github 上不一致导致的，通过git reset --hard commitCode即可解决。

检查本地最近提交记录，获取最后一次提交记录的更新时间及标识，如280a7fdd46fcfd7d34e652aec15523dcd247fac8

cd .deploy_git
cat .git/logs/HEAD

获取 github pages 服务所关联分支的最近一次提交记录，获取更新时间及标识。地址一般为：https://github.com/用户名/仓库名/commits/分支名，如https://github.com/lxl80/blog/commits/gh-pages
如果发现提交最新的提交时间/标识不一致，通过以下命令即可解决:

git reset --hard f085038efdf79546c09641d37b2a2429c1ae8e60 #github上最新的提交标识

hexo docker 本地访问内容没有更新

可能是node内部PM2模块的缓存机制导致的。pm2模块重启一下就可以了。

pm2 restart /hexo_run.js

fsevents报错

npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for
fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"}) npm ERR! notsup Valid OS:    darwin npm
ERR! notsup Valid Arch:  any npm ERR! notsup Actual OS:   win32 npm
ERR! notsup Actual Arch: x64

解决方法：修改package.json

"optionalDependencies": {
  "fsevents": "^2.3.2"
},

关于百度无法爬取GitHub内容解决方案

使用coding搭建一个可以被百度爬取到的代码托管平台

使用vps搭建一个hexo 镜像访问，专门针对搜索引擎。

Tips: 博主用了第二种方法，2个域名，前端域名用dnspod，采用cloudflare parter cname接入。dnspos有选路选择，针对搜索引擎进入vps搭建的blog，对于其它线路到cloudflare parter 加速过的github pages cname。后端域名用cloudflare parter 以及免费版cloudflare管理。

既然百度无法爬取GitHub，那么我们只需要找个可以被百度爬取到的代码托管平台即可（并且还提供pages服务），基本只有国内的平台了：Gitee和Coding！Gitee自定义域名要花钱（九十多，都可以买服务器了），而Coding是可以免费自定义域名的。这里推介大家使用企业版的Coding，因为企业版的Coding仓库服务器是在香港的，而普通版的服务器是在新加坡。地理原因，理论上企业版的更快一些！

将博客同时部署到两个仓库：GitHub和Coding

deploy:
- type: git
  repository: git@github.com:xxx/xxx.github.io.git
  branch: master

- type: git
  repository: git@e.coding.net:xxx/xxx.git
  branch: master

在域名那里，配置两个解析

线路类型作用：如果该值填“国内”，国内的IP就会去访问此项对应的记录值地址

同理，如果该值填写“国外”，国外的IP就会去访问“国外”对应的记录值地址
1. 线路类型为百度或者国内，记录值为Coding仓库的地址
2. 线路类型为默认或者国外，记录值为GitHub仓库地址
这样来自百度的spider就会去爬国内Coding的地址，而两个仓库的内容又都是一样的，如果请求IP来自国外，它又会去访问国外的GitHub，这样还有利于外国华侨和那些科学上网的用户访问，一石二鸟！（我真他妈天才！）
如果你只用Coding仓库，那就不需要这么麻烦了
测试百度Spider能不能爬你的域名
1. 在任意目录下执行以下命令（将“你的域名”换成你的域名）
```
curl -A "Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)" -o example.html 你的域名
```
2. 执行完命令，在该目录下会生成一个文件：example.html，打开它，如果显示
  - Moved Permanently，说明301，被重定向了
  - Found，也就是爬到了
  - 如果打开是你的首页，说明爬取到的内容就是你的首页HTML内容。
  - 如果显示：
    
    说明域名是解析到GitHub的，403Forbidden访问禁止。

busuanzi不蒜子计数显示异常，一闪就没

原因可能有两种live2d看板娘和busuanzi不蒜子计数冲突

busuanzi不蒜子网络访问异常。

不在leancloud安全名单

不是正常域名访问

各种网络访问错误等等

近日安装了live2d看板娘插件，github项目地址，安装后却意外发现busuanzi不蒜子计数失效了,在页面中不显示，但强制刷新后出现，再刷新又消失。经排查，未发现问题，但事实是网站源码出现了变化。

正常时

<div id="busuanzi_container_page_pv" class="info-break-policy" style="display: inline;">
    <i class="far fa-eye fa-fw"></i>阅读次数:  
    <span id="busuanzi_value_page_pv">433</span>

异常时

<div id="busuanzi_container_page_pv" class="info-break-policy" style="display: none;">
    <i class="far fa-eye fa-fw"></i>阅读次数:  
    <span id="busuanzi_value_page_pv">434</span>

对比发现出现了多余的style="display: none;。经过搜索主题源码，发现这个文件themes\matery\source\libs\others\busuanzi.pure.mini.js控制显示。

可以直接下载下面这个地址的js替换，来自个人blog的js busuanzi.pure.mini.js，直接下载这个js替换即可。下面源码经过了展开美化，原始文件是压缩去空格版本的。
注意：这是一种破坏性修复，没有解决根本问题，临时修复方案。

var bszCaller, bszTag;
! function () {
    var c, d, e, a = !1,
        b = [];
    ready = function (c) {
        return a || "interactive" === document.readyState || "complete" === document.readyState ? c.call(document) :
            b.push(function () {
                return c.call(this)
            }), this
    }, d = function () {
        for (var a = 0, c = b.length; c > a; a++) b[a].apply(document);
        b = []
    }, e = function () {
        a || (a = !0, d.call(window), document.removeEventListener ? document.removeEventListener(
            "DOMContentLoaded", e, !1) : document.attachEvent && (document.detachEvent("onreadystatechange",
            e), window == window.top && (clearInterval(c), c = null)))
    }, document.addEventListener ? document.addEventListener("DOMContentLoaded", e, !1) : document.attachEvent && (
        document.attachEvent("onreadystatechange", function () {
            /loaded|complete/.test(document.readyState) && e()
        }), window == window.top && (c = setInterval(function () {
            try {
                a || document.documentElement.doScroll("left")
            } catch (b) {
                return
            }
            e()
        }, 5)))
}(), bszCaller = {
    fetch: function (a, b) {
        var c = "BusuanziCallback_" + Math.floor(1099511627776 * Math.random());
        window[c] = this.evalCall(b), a = a.replace("=BusuanziCallback", "=" + c), scriptTag = document.createElement(
                "SCRIPT"), scriptTag.type = "text/javascript", scriptTag.defer = !0, scriptTag.src = a,
            document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)
    },
    evalCall: function (a) {
        return function (b) {
            ready(function () {
                try {
                    a(b), scriptTag.parentElement.removeChild(scriptTag)
                } catch (c) {
                    bszTag.hides()
                }
            })
        }
    }
}, bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback", function (a) {
    bszTag.texts(a), bszTag.shows()
}), bszTag = {
    bszs: ["site_pv", "page_pv", "site_uv"],
    texts: function (a) {
        this.bszs.map(function (b) {
            var c = document.getElementById("busuanzi_value_" + b);
            c && (c.innerHTML = a[b])
        })
    },
    hides: function () {
        this.bszs.map(function (a) {
            var b = document.getElementById("busuanzi_container_" + a);
            b && (b.style.display = "")
        })
    },
    shows: function () {
        this.bszs.map(function (a) {
            var b = document.getElementById("busuanzi_container_" + a);
            b && (b.style.display = "inline")
        })
    }
};

替换的人请操作其实就是把其中的b.style.display="none"中none去掉。

不蒜子 (busuanzi) 文章计数出错问题

出现这个原因，和 Chrome 85 版本 Referrer Policy 更改有关。什么是 Referrer，简单理解，就是请求 Web 服务器时，可以在 HTTP Request 的请求头 (header) 中加上当前页面的 URL，例如我们在浏览某个博客页面，需要加载一些图片，从服务器请求这些图片时，referrer 就是当前的博客页面 URL。从这里也可以看出，referrer 可能会暴露请求来源的某些信息或者隐私，有一定的隐私或安全风险。之前版本的 Chrome 浏览器，如果网站没有指定自己的 Referrer Policy，那么 Chrome 默认 policy 是 no-referrer-when-downgrade，在 Chrome 85 版本中，为了保护用户的隐私，默认的 Referrer Policy 则变成了 strict-origin-when-cross-origin。

no-referrer-when-downgrade: 当两个网站的 http 协议安全等级相当，或者目的网站安全协议等级高于当前网站(HTTP –> HTTP, HTTPS –> HTTPS, HTTP –> HTTPS)， referer 将会包含源网站的域名，路径，查询字符串；如果目的网站安全协议等级低于源网站 (HTTPS –> HTTP)，将不会发送这些信息。
strict-origin-when-cross-origin：只有当做同一域名请求时 (源网址和目标网址是同一域名），才发送域名，路径和请求字符串，当两个网站安全协议相当时，发送源网站的域名(没有具体路径信息和查询字符串)，如果目标网站安全协议等级低于源网站，不发送 header 信息。

不蒜子统计博客文章访问量就是通过 referer 来计算的，通过上面的分析，如果 Referrer Policy 是 strict-origin-when-cross-origin，不蒜子接收到的只有博客的域名，没有文章的具体路径，所以具体某个文章的 PV 统计会出现错误。

修复方法：

在主题文件夹下/layout/_partial/head.ejs中添加

<meta name="referrer" content="no-referrer-when-downgrade">

如何多个域名映射同一个github pages

可能由于某种原因，换了一个域名，之前又有一些被搜索引擎收录，但是又不想让原来的链接失效，就需要让两个域名都映射到github pages中。本文介绍几种当前可能的方法。欢迎提出更多有效方法。

直接映射有什么问题？

你可能会想，两个域名都映射到github pages不就可以了？然而事实并非如此。首先当前github 的CNAME中只支持一个域名。因此CNAME文件中只能有一个域名，而如果在域名映射中将两个域名都映射到username.github.io，那么其中有一个会出现404错误。

前提

以下方法的前提是你已经明白如何为自己的github pages添加自定义域名。

需要注意什么？

需要给各大网站提交新的域名网址，重新被收录
域名变换前面网站的内容结构不能变，否则重定向也没有意义
当前单纯的域名没有办法进行备案
注意修改配置文件里的主域名为新的域名
由于更换了新的域名，导致原来leancloud统计的访问数据需要重新计算，也就是网站访问量被清零了，leancloud也需要更新域名
新的com域名可申请免费的SSL证书，保证https可访问，而不会提示不安全
301重定向会将旧地址的权重转义到新地址上
百度收录速度较慢

方法一：域名托管平台重定向

有的域名服务商提供重定向功能，以阿里云为例，在域名映射添加记录的时候，可以选择显性URL或隐性URL。但是自己在尝试这种方法的时候，会提示我URL备案异常。可能是由于这个时候已经用新的域名映射了博客地址，但是新的域名实际上是没有备案的。更无奈的是，目前貌似没有办法单独对域名进行备案。因此本人放弃了该方法。

如果你的博客也是部署在github上的，那么这种方法就不用尝试了，如果你的博客是部署在自己的服务器上的，那么网上都很多方法，这里就不介绍了。

方法二：部署两个仓库

我们注意到，除了github pages，还有coding.net可用。它与github类似。原来的域名映射到这个地址就可以了。而在部署hexo的时候，是可以添加两个仓库地址的：

deploy:
- type: git
  repository: git@github.com:username/username.github.io.git
  branch: master
- type: git
  repository: git@git.coding.net:username/username.git
  branch: coding-pages

这两个仓库内容唯一的差别就是域名不一样，即CNAME中的记录值不一样。这样当访问两个不同的域名的时候，是访问不同的两个平台仓库。但是原来域名的权重不会转到新的域名中去。

方法三：新增项目重定向

假如你已经有username.github.io项目，新建一个名为blog(名字自定义)的项目，在项目的setting中，开启github pages服务，并且将旧的域名映射到username.github.io。

实际上，github pages并不是只能有一个，例如，你新创建的仓库访问地址为：username.github.io/blog。由于旧的域名映射会导致404错误，那么在我们的新项目中增加一个404.html，在页面中进行跳转即可：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
 <script language="javascript">
var domain = "换成你自己的新域名";
var src = window.location.href;
var prtc = src.substring(0, src.indexOf(':'));
var target = src.substring(src.indexOf('/', src.indexOf(':') + 3));
window.location.href = prtc + "://" + domain + target;
location.href=prtc + "://" + domain + target;
</script>
<body>
 <h1></h1>
</body>
</html>

另外，需要利用google的地址更改功能，使得旧网址的权重往新网址转移。找到search console中的地址更改工具（设置按钮中找到）。

除了增加404页面外，还需要增加CNAME文件，里面的内容是你原先的域名。

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" }
  	]

更多Vercel部署用法，戳vercel部署

其它主题

博主从这些主题学到了很多有用的技巧，大大丰富了个人定制

hexo-theme-butterfly

hexo-theme-next

hexo-theme-fluid

Hexo-Theme-MengD

hexo-theme-itsneko

参考&感谢

编写整个系列教程花费时间和精力很长，如有遗漏，可以联系添加！

性能

本教程还有其它五大部分，更多内容请见Hexo系列教程

系列教程

Hexo系列

[十万字图文教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

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

笔记系列