Hexo 博客相关

发表于 2019-04-24 更新于 2024-08-06

Hexo 知识大全。

官方信息

Hexo 官方网站：Hexo.io

官方 Github 仓库：hexojs/hexo: A fast, simple & powerful blog framework, powered by Node.js.

官方介绍：

A fast, simple & powerful blog framework, powered by Node.js.

快速、简洁且高效的博客框架

Hexo 的历史：About | Hexo

优秀入门文章

Hexo 的安装

基础安装命令：npm install hexo-cli -g
npm install。这个命令会根据当前目录下的 package.json 文件安装相关的依赖。
安装 deployer：npm install hexo-deployer-git --save

新建博客

1
2
3

hexo init myblog
cd myblog
npm install

示例仓库

hexojs/hexo-starter: Hexo Starter site (use npx hexo init myBlog)

头像

添加头像

编辑主题的 _config.yml，修改字段 avatar，的url值设置成头像的链接地址。

其中，头像的链接地址可以是：

1.完整的互联网 URL

2.站点内的地址，例如：

/uploads/avatar.jpg需要将你的头像图片放置在站点的 source/uploads/（可能需要新建uploads目录）
/images/avatar.jpg需要将你的头像图片放置在主题的 source/images/ 目录下。

avatar:
  # 头像位置
  url: /images/avatar.jpg
  # 如果为真, 头像将以圆形显示。
  rounded: false
  # 如果为真, 头像将随着光标旋转。
  rotated: false

常用命令

参考：指令 | Hexo

生成静态文件

1	hexo generate

可简写为：

hexo g

启动服务器

1	hexo server

可简写为：

hexo s

新建文章

1	hexo new [layout] <title>

示例：

1	hexo new draft 新文章

Hexo添加sitemap

安装 hexo-generator-sitemap

1	pnpm i hexo-generator-sitemap

在 source 文件夹创建 robots.txt 文件，指定sitemap位置，为 swiftype 搜索引擎优化

另外插件貌似有bug，当文章名称中存在 & 的时候，不能正确处理转义的问题，会导致 XML 无法正常格式化。

TODO需要解决。可以考虑贡献代码。

另外，sitemap 中的 priority，Google 已经明确说明不会参考，所以如果主要目的是给 Google 使用的话，那么可以把这个属性给去掉。

其他优化

安装hexo-asset-image插件

修改主题的配置：

开启fancybox、fastclick、pace. 都需要相关依赖的支持

关于文章

Front Matter

Front-matter | Hexo

配置第三方评论功能

博客评论系统对比 - 墨码山河

第三方评论系统之我见 - 云游君的小站

waline评论迁移到twikoo - Barney’s Blog

第三方评论之2023年版 - Shuibaco • 水八口

为Gridea主题添加Twikoo评论支持 - 记忆一隅

Twikoo

Twikoo | 一个简洁、安全、免费的静态网站评论系统

资料：

使用 Twikoo 为博客网站添加评论系统 - Newverse & Wiki【私有部署 Twikoo】
自部署开源网站评论系统 Twikoo【私有部署】
相关文档 | Twikoo 文档
【Hexo博客】Twikoo评论系统的免费部署(云函数采用Vercel方式) | 百里飞洋
Vercel 部署Twikoo评论教程
更新 Hexo 和 NexT 主题，使用 Twikoo 评论系统 | Homulilly【Next 主题使用 twikoo 评论系统】

Atlas 指定数据库名称：

Where do I find my dbname for MongoDB connection string? - Stack Overflow

1	'mongodb+srv://<username>:<password>@<cluster_name>.jqzujwt.mongodb.net/<dbname(optional)>?retryWrites=true&w=majority'

来比力（LiveRe）

2024-07-10 22:41:42

有广告，弃用。

Disqus

Utterance

A lightweight comments widget built on GitHub issues

首页：https://utteranc.es/

Github项目页：https://github.com/utterance

Waline

walinejs/waline: 💬 A Simple, Safe Comment System

Netlify 修改 Node 版本

资料：如何在netlify中设置node和npm的版本 - 掘金

使用 Netlify 代替 Github pages 进行托管

HTTPS证书

Let’s Encrypt

使用 Let's Encrypt 获取免费的证书必须保证服务器是自己的才可以。

使用CDN

CDN基本原理

CDN学习笔记一（CDN是什么？） - Tinywan - 博客园

CDN 全站加速是什么原理？ - V2EX

腾讯云

只有在工信部备过案的域名才能进行CDN加速。可以选择流量计费和流量峰值计费方式。每个用户每个月有10GB的免费流量包。

七牛云

又拍云

网上的一些讨论

个人博客用七牛云还是又拍云？ - V2EX

请问有免费加速 https 网站的 CDN 吗？ - V2EX

大佬们有没有免备案的 CDN 推荐？ - V2EX

自己有可能可以做的优化

图片展示

现在用的是 fancybox。

https://laravel-china.org/articles/21811这个网站用的图片展示功能很赞，看情况自己实现一下。

主题自定义美化

hexo的next主题个性化教程:打造炫酷网站 - 简书

NexT的主题设定与配置 - BLUEHEART - CSDN博客

Next主题自定义CSS样式（字体） - 二次元の技术宅

在 hexo s 启动本地服务器模式下，修改主题配置文件是实时生效的，可以实时修改看到效果。

重新安装了 node.js 之后

重新安装了 node.js 之后，在博客文件夹执行 hexo new [article name] 时，出现了错误提示，可能是缺少了某些全局模块。

执行了 npm audit fix 解决了。

文章

Markdown 中的尖括号问题

Markdown 支持 HTML 标签，所以一对尖括号括起来的内容会被当作 HTML 的标签来处理。如果要想表示一对尖括号，需要使用转义的 HTML，即使用 < 表示 <，使用 > 表示 >。

修改 FrontMatter 的分类

Hexo 的分类默认是多级分类。分类 - Hexo 官方文档

1
2
3

categories:
- 技术
- Java

上面这种会被分类到 [技术， Java] 分类中，Java 分类作为技术分类的一个子分类存在。

如果希望一篇文章同时分到两个顶级分类中，可以这么做：

1
2
3

categories:
- [技术]
- [Java]

使用 VS Code 的正则表达式替换功能

VS Code 支持使用正则表达式进行查找替换。

VS Code 替换时引用分组不是 \1 这种形式，而是 $1 这种形式。如图：

还可以使用VS Code 打开一个文件夹，然后批量查找替换。

第三方插件

有一些插件可以直接根据目录自动生成 categories，比如：

hexo-directory-category（之前使用一直报错）

hexo-auto-category（可能会覆盖所有frontmatter，谨慎使用）

主题

我对博客以及主题的需求

阅读文章向下滚动的时候，顶部或者侧边栏要有持续显示的导航栏。
文章支持图片可以吸引用户，提高表达能力。（参考微信公众号就有题图）
要有推荐内容的能力，包含文章置顶、文章轮播、筛选热门文章的能力。
鼠标移动到标题图上的时候，图片会略微放大，通过交互给用户带来动感
支持多语言，未来可能会把一些热门文章人工翻译为英文内容。但是英文文章和中文文章是独立的两篇文章。
主题在交互层面应该满足基本要求，比如鼠标移动到可点击元素上的时候，对应元素样式要有所变化来体现出来鼠标已经移动到了可点击区域。有些主题鼠标放到导航栏的按钮上完全没有样式变化。
【备注】可以通过标签来定义【热门】【必看】这些推荐内容。缺点是需要人为根据阅读量来标记。
【备注】自定义 404 页面，并提示用户如果有需要可以给站长留言。
在一篇文章的合适位置推荐相关的文章（有关联得，更有可能引起读者兴趣的）。
【备注】给博客起个不同寻常的名字还是能给人耳目一新的感觉的。
文章列表一般有列表式布局和卡片式点阵布局，我觉得点阵式布局更适合小红书、抖音等大型平台，用户可以同事看到很多，然后选自己感兴趣的。对于博客以及内容营销类网站，一般来讲，感觉还是按照顺序排列的会更好的。可能部分主题的网站适合点阵文章列表。
导航栏颜色允许自定义，导航栏透明度允许自定义。
处理分类名称或者 urlname 带有大写的情况时候，sitemap 需要能够生成正确的 url，避免导致重定向从而影响谷歌 SEO。
hexo 很多博客前边带有代码的时候，在摘要中显示的效果是

题目146. LRU 缓存 - 力扣（LeetCode） LRU Cache - LeetCode 思路哈希表 + 双向链表。题解题解1：基于 Java HashMap 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657…

需要智能判断一下，如果摘要内容是代码，需要考虑一下更好的展示效果。忽略或者缩写，不要显示一串数字。

关于如何选择博客布局的文章：

我该怎样开始设计我的网站？ - 学习 Web 开发 | MDN

常见 web 布局都包含什么？ - 学习 Web 开发 | MDN

国外IT博客网页布局分析 - 卢松松博客

博客文章应该如何布局 - 奇赞

6. 作为一个程序员，我该如何设计我的博客 - 简书

官网Blog 页面优化（ Lesson 1）-博客版面的设计布局 - Leizi Digital

优化博客布局：发挥侧边栏和底部SEO的潜力 – 优易化

你见过的最棒的个人博客界面是什么样的？ - 知乎

吐槽

2024-07-11 23:12:39

发现 ButterFly 这个主题，连导航栏居中这么基础的功能都需要自定义 CSS 来解决，不得不说，使用现成的主题，如果自己对于外观有需求，也还是比较麻烦。

Ailln/awesome-hexo-theme: 🌟排名前 10 的 Hexo 主题 | Top 10 Hexo theme

Hexo 好看的主题推荐_hexo好看呢的主题-CSDN博客

Hexo-主题推荐 | Moonのblog

Hexo 主题推荐

Hexo - Jamstack Themes

Fluid

fluid-dev/hexo-theme-fluid: :ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo

Star：7.1k

贡献者：66人

用户手册：配置指南 | Hexo Fluid 用户手册

优点

带有原生的明亮/黑暗主题切换功能
导航栏两端对齐且有最大宽度限制，不像 ButterFly 导航栏完全右侧对齐。在大屏上鼠标需要移动太远点击导航栏。
支持文章封面

缺点

文章置顶需要在文章的 front-matter 中手动设置数值来操控排序，方法不优雅。
【BUG】从文章列表第2页返回第1页的时候，URL 就是网站的地址，会直接回到首屏而不是文章列表，给用户交互感受不好。
文章列表不是卡片式的，文章之间的分隔不够明显。但是看到有一些博主改造出了卡片式列表。

资料：

Hexo’s Fluid 主题私人定制（持续更新） - Eren の宇宙船

示例

Hexo Theme Fluid

醉里博客

汪汪江的窝【改造出来了卡片式列表】

next-theme/hexo-theme-next: 🎉 Elegant and powerful theme for Hexo.【Next v8.x，2.4k】

theme-next/hexo-theme-next: Elegant and powerful theme for Hexo.【8.1k，v7.x 版本】

iissnan/hexo-theme-next: Elegant theme for Hexo.【15.9k Star，旧仓库】

官方网站：NexT - Theme for Hexo

优点：

支持很多自定义配置。

缺点

不支持文章封面图。【不过可以把图片放到文章开头，当做文章预览显示在文章列表中】
Motion 效果不支持调节过渡时间，默认的时间太慢了，关闭又太突兀了

1	pnpm i hexo-theme-next

关于配置

这个主题有四种布局风格：

Muse 风格

文章右侧默认显示的是目录，可以在目录和站点概览之间进行切换。

Mist 风格

和 Muse 一样，右侧目录和网站概览。

Pisces

左侧目录和概览

Gemini

左侧目录和概览

5.1.4版本的官方文档（比6.6.0版本的详细）

置顶功能：

通过修改 Front Matter 中的 sticky 来实现。

其他注意事项

另外发现，项目中同时安装 Next 和 ButterFly 主题的依赖之后，ButterFly 可能会干扰 Next 主题。

因为两个主题中都有 utils.js，ButterFly 的这个 JS 会影响 Next，导致无法正常显示一些内容。

本地搜索：

本地搜索出来的 URL 中，搜索结果的链接会把文章末尾的 html 也给带上：

http://localhost:4000/articles/about-sql-order-by-rand.html?highlight=rand

暂时还不知道怎么让这个 URL 不带 .html 后缀，需要研究一下。

示例

Blankj’s Blog【这个博主选择了粉色背景色、宠物背景图、文章块透明效果，给 Next 带来了一些生动的感觉。】

TriaL【修改了背景，Next 也可以变得不像 Next】

归档 | Coders@Work【加了格子背景，省略了一些卡片，看起来不那么单调】

卮言【加了背景图，卡片的直角变圆角，也能从原本的冷色调变成温暖的感觉】

Stellar

xaoxuu/hexo-theme-stellar: 内置文档系统的简约商务风Hexo主题，支持大量的标签组件和动态数据组件。

1.2k Star

很好看很用心的主题。作者自己对于博客主题有独特的设计理念：

“真正的简约远不止删繁就简，而是在纷繁中建立秩序。”

人的注意力是有限的，要提高有效信息的醒目程度，就必须降低不重要信息醒目程度，删除所有无效信息。

降低视觉密度

增加留白，增加间距。

减少颜色丰富度，大面积出现的是中性色，彩色必须有其特殊意义，意义相同的元素使用同一种颜色。

提高有效信息优先级

文章标题永远是最大的，对比度最高的

不可交互的不重要的小标题（如侧边栏某个插件的标题）降低对比度

与文章相关的不重要的小标题，使用小号字体

删掉无效信息

文章标签、字数、阅读量、评论数

网站访问量、字数、搭建时间

全局播放器（除了特殊文章）

——Stellar：开始您全新的博客之旅 - XAOXUU

官方文档：Stellar：开始您全新的博客之旅 - XAOXUU

特点：

如果文章没有 updated 字段，那么默认是取文件的更新时间作为文章的更新时间。最近更新的文章会显示在左侧侧边栏。

优点：

有一个独特的【专栏】功能，适合系列文章。
网站的配色很好看。
封面支持多种样式。有【上图下文】类型，还可以整张卡片都是图片，文字显示在图片上。还支持在线自动根据标签搜索封面（文档说的，笔者没试过）。

缺点：

左边是一个位置始终不变、也无法隐藏的固定导航卡片，个人不太喜欢这种风格
文章中的超链接样式是我喜欢的。
导航栏的设计是纯纯的图片，交互上不够友好。
不支持明亮/黑暗模式切换。
作者明确表示不考虑支持 pjax（建议集成Pjax异步加载改善访问速度 · Issue #220 · xaoxuu/hexo-theme-stellar）

优化

【建议】左边的导航栏可以设置为非常驻导航栏，避免影响读者注意力。
【建议】导航栏支持顶部导航栏。

安装：

1	pnpm i hexo-theme-stellar

复制配置文件

1	cp ./node_modules/hexo-theme-stellar/_config.yml ./_config.stellar.yml

本地搜索的原理：

会把所有文章的内容生成一个 search.json 文件，当用户点击了搜索框的时候，就会下载这个 search.json 文件，然后从这个文件中搜索网站内容。

【BUG】而且当前有一个BUG，鼠标每次移动到搜索框，都会重新下载一次这个文件，效率不高，且浪费流量。

技巧

[Hexo Stellar 主题装修笔记 - 宇宙尽头的餐馆](https://www.flyalready.cn/Hexo Stellar 主题装修笔记/)

使用Typora_plugin增强Stellar写作体验 - Thun888

Stellar主题设置 - SFZhang

Stellar主题自定义侧边栏教程「萌新向」 - SkyReeves

Stellar可控夜间模式 - 那个码农

示例

Stellar：使用 Stellar 主题的博客 - XAOXUU

酷小呵【增加了黑暗模式切换】

装修指南

怎么开启导航栏？

参考：Stellar：侧边栏配置 - XAOXUU

独立页面设置导航栏的高亮？

参考：Stellar：编写文章以及独立页面 - XAOXUU

导航栏如何显示每个分类的名字？

在主题配置中，把每个目录项的 icon 属性去掉，就会变成只显示文字的效果了。

Volantis

volantis-x/hexo-theme-volantis: A Wonderful Theme for Hexo.

此外，Volantis 有一个社区，可以分享自己的关于 Hexo 的文章获得曝光。

官方文档：开始使用 - Volantis

优点

支持文章封面
支持文章置顶
图片 icon 好看
网站配色好看
文章内容支持高亮
代码片段样式好看
首页导航栏分为两个概念，一个是展示作品导航栏，一个是博客导航栏。作品导航栏可以用来展示除了博客之外的东西，比如相册、项目等等。博客的导航栏就是传统的分类、标签、归档。
文章卡片底下的时间默认显示的是 YYYY-MM-DD 这种格式的，而不是 XXXX 年 X 月 X 日 这种格式的，不需要考虑多语言适配且更简洁。
文章的卡片上没有显示【标签】（但是显示了分类），显得比较简洁，但是可能有些用户有需求。

缺点：

默认的作品导航栏和文章页面的导航栏不一致，给用户的交互体验可能带来一些困惑。
置顶的文章，在文章列表中，只有右侧有一个图钉的 icon，但是没有【置顶】两个字，个人还是更喜欢【置顶】两个字作为强调，英文的话应该就是提示【Pin】。但是也有个好处，就是不用自然语言，多语言的时候统一都用 icon，就不需要考虑多语言的适配了。
只有下拉到文章列表才显示固定导航栏，才能看到搜索框，搜索框没有在首屏显眼位置，感觉交互不够好。感觉搜索框应该让用户一样可以找到。
文章摘要中如果存在大标题，文章列表中也会显示出来大标题。但是这个其实可以作者自己在文章中规避掉，所以其实可以避免，当然主题如果能优化会更好。
博客标题和博客摘要的字体颜色一样，不够主次分明，感觉摘要的字体颜色可以稍微浅一些，比如改成灰色。
没有原生的明亮和黑暗模式切换功能。
文章列表中的可点击热区太小了，有的主题点击整个卡片都可以进入文章，但是这个只有把鼠标精准移动到标题和【阅读全文】上边的时候才能点进文章。虽然很多主题也是这样，但是有些主题的【阅读全文】是一个按钮样式的，文字周围还有一圈热区，所以交互上的心智负担会更小。但是热区也不应该太大，应该恰到好处，有时候用户就是想复制标题或者摘要的文字，要避免用户手滑点击文章。
文章列表翻页只有【上一页】和【下一页】，不能按照页码翻页，功能性弱一些，不能快速跳到最后一页以及制定页码，有可能用户想要翻到最早的文章看一看。
【归档】页面默认把所有文章排列到一个页面上了，对于文章特别多的博客不友好。

资料

Volantis 主题部署 Pjax - 枋柚梓的猫会发光

安装

pnpm i hexo-generator-json-content

pnpm i hexo-renderer-stylus

pnpm i hexo-renderer-ejs

pnpm i hexo-renderer-marked

示例

Volantis

枋柚梓的猫会发光

Aurora

auroral-ui/hexo-theme-aurora: 🏳️‍🌈 Futuristic auroral Hexo theme.

很有设计感，且首页有很大尺寸的内容推荐卡片，有视觉震撼感。

但是，这个主题属于初看很惊艳，但是还有很多地方可以改进的。

优点

文章渲染的 URL 链接有浅绿色下划线，鼠标移动上去会完全覆盖，效果很好看。和我之前很喜欢的 Draveness 网站中的 URL 效果是类似的（为什么 TCP 建立连接需要三次握手 - 面向信仰编程）
原生支持 pjax
原生支持多语言。
而且图片和文字的分隔是渐变的，更是一种摩登的感觉。

缺点

配置文件中自己搞了一份网站详情，主配置中的不会读取，不太好，主配置有的最好还是能读取主配置的。
pjax 貌似是默认的，不支持开关。
文章排版的默认字体大小和行间距太大了，内容密度太低（虽然视觉效果还不错，但是不能只看颜值啊）
标题下边有彩色下划线，但是长度没有根据标题长度自动调整，视觉效果不美观。
静态资源默认都是从 unpkg 下载的，可能因为网络问题访问不通。
Waline 即使没有 enable，也会尝试加载，且 unpkg 下载失败会阻塞网站打开。
占用过多 CPU 资源，首屏打开什么都不干，CPU 占用能达到 17%，作为对比 Fluid 主题首屏什么都不干 CPU 最多只有 5% 占用。
原生的多语言 URL 不会变，看起来像是单页应用（SPA）式的效果，不利于 SEO。

示例

三钻 Benny X Guo | 三钻 Benny X Guo

ButterFly

jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly

Star：6.9k

官网：Butterfly - A Simple and Card UI Design theme for Hexo

官方文档：Butterfly 安裝文檔(一) 快速開始 | Butterfly

是基于 Melody 主题（Molunerfinn/hexo-theme-melody: :musical_keyboard:A simple & beautiful & fast theme for Hexo.）开发的。

优点

支持 pjax，但是官方提示可能存在 Bug
有轮播图插件，Hexo 增加首页轮播图 | 竹山一叶，Akilarlxh/hexo-butterfly-swiper，jia0213/hexo-butterfly-posts-swiper: A swiper card plugin of posts for theme-butterfly

缺点

首屏信息密度太低，首页只有一张大图，没有文章列表。
可能是因为原作者是来自中国香港，所以官方文档只有繁体中文没有简体中文。

Hexo 集成 Pjax 实现网站无刷新加载 | 竹山一叶

首页 | Butterfly主题美化教程【基于ButterFly做美化】

baidu analytics 和 google analytics 在开启pjax后失效 · Issue #516 · jerryc127/hexo-theme-butterfly

[BUG] 网站分析如 google analytics 无法追踪页面 · Issue #562 · HEIGE-PCloud/DoIt

示例

竹山一页：竹山一叶 - 竹山一叶的小家

雨落泪尽

Fomalhaut🥝【这个 ButterFly 改的很多，很漂亮】博客魔改教程总结(二) | Fomalhaut🥝

Solitude（基于 Butterfly 修改）

everfu/hexo-theme-solitude: 一款设计师风格的 Hexo 主题，支持懒加载、PWA、Latex以及多种评论系统。

基于 张宏Heo 的 HeoBlog 风格设计的一款主题，很有设计风格。

缺点：

性能不好，首屏打开时间太慢，消耗太多 CPU。

示例

Ever Fu

Anzhiyu（基于 Butterfly 修改）

anzhiyu-c/hexo-theme-anzhiyu: 安知鱼主题，这是一个简洁美丽的hexo主题。

1.1k

注意事项：HeoBlog存在大量网址尚未收录到Google的情况解决方案 | 张洪Heo

这里提到可能存在不利于 SEO 的 BUG。

示例

安知鱼 - 生活明朗万物可爱

但是 Peng 体验之后感觉性能不是很好，首屏加载时间要接近3秒。

Melody

Molunerfinn/hexo-theme-melody: :musical_keyboard:A simple & beautiful & fast theme for Hexo.

Minos

ppoffice/hexo-theme-minos: A simple and retro styled Hexo theme, concentrated more on your ideas.

有点像 Medium.com 风格的主题。

示例站

Minos

Yun

YunYouJun/hexo-theme-yun: ☁️ A fast & light & lovely theme for Hexo. 一个对可爱自以为是的 Hexo 主题。

一个有设计感的首页，再加上一些响应式。

示例

云游君的小站

Keep

XPoet/hexo-theme-keep: :rainbow: A simple and light theme for Hexo. It makes you more focused on writing.

和 ButterFly 差不多，但是比较简约。

示例

XPoet’s Blog

Tranquilpeak

LouisBarranqueiro/hexo-theme-tranquilpeak: :lipstick: A gorgeous responsive theme for Hexo blog framework

有一种现代感和时尚感。

示例

Tranquilpeak Hexo theme demo

Ayer 主题

shen-yu/hexo-theme-ayer: 一个干净优雅的hexo主题 A clean and elegant theme for Hexo. 🐋

示例

玄名的博客

Hueman

ppoffice/hexo-theme-hueman: A redesign of Alx’s wordpress theme Hueman, ported to Hexo.

基于 Wordpress 的 Hueman 主题移植过来的。

archer

fi3ework/hexo-theme-archer: 🎯 A smart and modern theme for Hexo.

Flex-Block

miiiku/hexo-theme-flexblock: 一个卡片类拟态风格的Hexo主题

一个卡片类拟态风格的Hexo主题

Matery

blinkfox/hexo-theme-matery: A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com

Star：5.2k

共享者：62人

特点：

首屏可以设置推荐文章进行轮播
首页还有一些板块用来推荐文章，总体着重做了【推荐文章】这个特点

缺点：

不确定是否支持 pjax
没有明亮/黑暗模式切换功能

Yilia

litten/hexo-theme-yilia: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo.

8.4k

示例网站

韶华尐沐

ICARUS

ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo.

Star：6.3k

缺点：不支持 pjax

示例

Zhongtian’s Technical Notes

Maupassant

tufu9441/maupassant-hexo: A simple Hexo theme forked from icylogic.

2.6k

贡献者：42

特点：

简洁、干净、美观

缺点：

不怎么更新
貌似不支持 pjax

Redefine

EvanNotFound/hexo-theme-redefine: Simplicity in Speed, Purity in Design: Redefine Your Hexo Journey.

1.3k

Even

ahonn/hexo-theme-even: :rocket: A super concise theme for Hexo

示例

蓝皮书的自留地

Typography

sumimakito/hexo-theme-typography: Rediscover the beauty of typography.

示例

天仙子

snippet

shenliyang/hexo-theme-snippet: Snippet 简洁而不简单，也许是一款你寻找已久的hexo主题

1.1k star

缺点：最上边始终是不变的 Header 和导航栏。

示例

大白话说前端 - 多看源码多读书，勤于思考善领悟

自己编写主题

编写自己的 Hexo 主题 | Easy Hexo 👨‍💻

首页 | Butterfly主题美化教程

整理一些自己觉得特别有设计感的博客

参考作者的 Notion。

文章摘要

手动指定文章摘要截取部分：在摘要结束的地方，手动加上 ``

Next主题使用 Latax 数学公式

按照要求开启之后，在需要使用数学公式的文章的文件头中加上 mathjax: true

配置搜索

Algolia 和 Switfy 对比

Algolia 需要你手动上传索引，虽然麻烦，但是索引更新和文章更新可以做到同步。

Swiftype 不需要手动上传索引，Swiftype的服务器自动抓取你网站的新内容，但是他们的服务器可能不会实时检测网站变化，索引更新可能会有延迟。

Algolia

官方配置教程关于Swiftype的部分

重点看next主题配置文件中给的两个文章：

See：https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md

Dependencies：https://github.com/theme-next/theme-next-algolia-instant-search

注意，上边的依赖，clone到next主题文件夹下之后，把隐藏的文件夹 .git 删除了，不然 git 同步的时候会导致错误。

另外，algolia的配置信息，既需要在站点的配置文件中加上，还需要在主题的配置文件中加上。两个地方需要的信息是不一样的。

另外，因为对免费用户有限制，所以之索引了标题，没有索引内容。
参考：https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md#known-issues

上传索引

1 2	hexo clean hexo algolia

每次更新索引，需要重新执行这个命令。

配置Swiftype搜索引擎

官方配置教程关于Swiftype的部分

只有免费试用，不能长期使用。

添加自定义 JS

Custom Files | NexT

从 Github 上的 Pull Request 来看，这个方法貌似 v7.3.0 之后才支持。

第三方认证

Authenticate users with Netlify Identity | Netlify Docs

okta

reverentgeek/vuepress-authentication-tutorial: Tutorial on how to add authentication and personalization to a VuePress application【关于 VuePress 使用 okta 认证的教程，可以参考一下。】

延伸

关于 JAMStack

什么是 JAMstack？ | Cloudflare

JAMstack 是一种前端 Web 开发方法（构建用户与之交互的内容和界面）。它允许开发人员快速创建并有效地为用户提供静态网站。

在 JAMstack Web 应用程序中，会预先构建尽可能多的 HTML 并存储在内容交付网络 (CDN) 中。不同于在服务器端运行一个单一的后端应用程序来生成动态内容，应用程序的动态组件基于 API。理想情况下，这会带来更快的用户体验和更简单的开发人员体验。

Jamstack，下一代Web建站技术栈？ - 知乎

性能优化

资料：

秒开的艺术：Hexo 博客首屏耗时优化实践 - 电脑星人【这个网站真的是秒开，但是这个网站最后写的是基于Typecho，所以他写的文章可能和他的网站没有关系…】
Hexo 博客站点加速不完全指南 - Eren の宇宙船
腾讯云大招？静态网站部署终极方案？ | 泫言
Hexo 框架 (七)：博客性能优化提升加载速度 | 你真是一个美好的人类
Hexo博客上手入门指南、性能优化、界面美化、扩展功能、各种疑难杂症等解决方案全系列合辑 | 竹山一叶
Vercel 部署高级用法教程 - Hexo Theme Fluid

CDN 加速：

国内可以考虑又拍云 CDN 加速。

评论和阅读量功能使用了以下服务：

Disqus

不蒜子计数

除此之外，本站通过使用 Exif.js 获取图片的 EXIF 元信息，在满足要求的照片后将会显示其拍摄的具体参数，欢迎体验。

本站的几乎所有前端库使用了 jsDelivr 的 CDN 加速，原因是 BootCDN 服务不稳定（曾在 2018 年 10 月出现长时间的访问异常），而 Cloudflare 在国内某些地区访问速度慢。使用 jsDelivr 可以兼顾国内和国外的访问速度。

由于本站的代码采用了 HTML5，CSS3 和 ES6 标准，可能不被部分较旧的浏览器所支持，因此为了保障您的浏览体验，请务必升级您的浏览器至最新版本。

——实验室 | 米米的博客

pjax

pjax 对于性能的影响

如果网站使用了自定义字体，同时开启 pjax 的话，如果持续在一个网站浏览，后续打开文章的时候，可以避免对于字体的重复下载从而改善访问速度。

关于 pjax 和谷歌分析、百度统计的兼容

HCLonely Blog - 百度分析和谷歌分析适配 pjax

Hexo 的一些缺点

但我想要的不是它们，因为在使用hexo中遇到过一些痛点：

某些文章不上传。比如你还没写完，不希望这篇文章上传，就只能写之前放在_drafts里，写完后再放在_posts里面；又如想把某几篇文章下线，把这些文章移出文件夹又显得多余了。

隐藏某些文章。可以通过url访问，但标签和全部列表里都不展示，我个人是希望有一个show:boolean的标签在markdown文档顶部来控制的，虽然最终也能够找到hexo的某个插件来实现这一点，但还是感觉很麻烦。

希望把技术文章和生活文章分开。之前为了实现这一点，我用了非常扭曲的方法，以不同的文件夹分别构建网页，大概意思是…我有两个博客，虽然粗糙实现了这一点，但生活文章…依旧从没写过hhh…

——使用 Gatsby 搭建个人博客 | 笑呀

字体

关于 woff2 字体

Web 开放字体格式（WOFF） - CSS：层叠样式表 | MDN

WOFF（Web Open Font Format，Web 开放字体格式）是由 Mozilla 与 Type Supply、LettError 及其他组织协同开发的一种新的网页字体格式。

中文 WebFont 小指南 - 从入门到 sans-serif - 惶心博客【关于博客使用字体，写得很详细】

关于霞鹜文楷

lxgw/LxgwWenKai: An open-source Chinese font derived from Fontworks’ Klee One. 一款开源中文字体，基于 FONTWORKS 出品字体 Klee One 衍生。

CDN 资源

淘宝 npmmirror.com

中国网字计划 CDN

Bold

1	<link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/lxgwwenkai/dist/LXGWWenKai-Bold/result.css' />

霞鹜文楷免费前端开发在线使用部署字体 | 霞鹜文楷 | 中文网字计划

Regular：

1	<link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css' />

霞鹜文楷免费前端开发在线使用部署字体 | 霞鹜文楷 | 中文网字计划

Light：

1	<link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/lxgwwenkai/dist/LXGWWenKai-Light/result.css' />

霞鹜文楷免费前端开发在线使用部署字体 | 霞鹜文楷 | 中文网字计划

版本是霞鹜文楷 v1.233（2022-04-01）

中国网字计划计划生成的 font-face：

@font-face {
    font-family: "LXGW WenKai";
    src: local("LXGW WenKai"), url("./0cfbdad51cdbc0c782abf6b9fc0d4c67.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range: U+d50c, U+d514-d515, U+d517, U+d53c-d53d;
}

如果用户本地安装的有 LXGW WenKai 这个字体，会优先使用本地的字体。但是会有一个缺点，就是 web 字体中其实对于字重是有调整的，比如我们引用的是 Bold 字体，但是我们在 font-family 中使用的是 LXGW WenKai，但是实际上字重是加粗的。但是如果使用了本地的 LXGW WenKai 字体，那么字重就会变成普通的。

但是目前（2024-07-25）访问中国网字计划的 CSS 会有 HTTP 307 重定向，下载 CSS 的时候可能就会产生 100ms 到若干秒不等的延迟，可能导致速度慢，且屏幕中有字体切换的不好效果。另外网字计划使用 imagekit 的 CDN，速度有点慢。

截止 2024-07-25，网字计划没有提供 Screen 版本。

BootCDN

lxgw-wenkai-webfont (v1.7.0) - webfont package for the LXGW WenKai typeface | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

提供了多种选择：

Bold：

1	<link href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-bold.min.css" rel="stylesheet">

BootCDN 提供的 CSS：

@font-face {
  font-family: 'LXGW WenKai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./files/lxgwwenkai-bold-subset-4.woff2') format('woff2');
  unicode-range: U+1f1e9-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f37e
}

可以看到，其中没有使用 local 来尝试使用用户本地的字体。

Screen版本

1	<link href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreen.min.css" rel="stylesheet">

Screen 版本要使用 LXGW WenKai Screen

七牛云 CDN

Bold：

1	<link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-bold.min.css">

jsDelivr

Regular：

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-regular.css">

Bold：

1	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/lxgwwenkai-bold.css">

资源首页：

lxgw-wenkai-webfont CDN by jsDelivr - A CDN for npm and GitHub

360 奇舞团 75 CDN

1	<link href="https://lib.baomitu.com/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-regular.min.css" rel="stylesheet">

访问速度 100~300ms 速度不等，速度一般。
baomitu.com 以及 75 CDN 首页貌似都没有怎么在维护，稳定性不一定可靠。
75 CDN 之前出现过由于域名备案导致的访问问题，未来也可能存在可靠性问题。（[重要] 75CDN 静态资源库 CDN 地址更新 - V2EX）

cdnjs

Bold：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-bold.min.css" integrity="sha512-vvNLgKr1GuMMeLpriJ+/ejMT+I5kDqiLlwhRimboPasEu3/EEX2diKUdIC9qwbEX7Kd9jdKh3kvTbVwRil1I6Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

字节跳动 CDN

七牛云、jsDelivr、cdnjs 的原理

这些 CDN 会免费为 npm 开源库提供 CDN 加速服务，而有一个 npm 的开源仓库就是专门把霞鹜文楷做成了 woff 字体分享出来。所以七牛云这些 CDN 就可以用到这些仓库，从而可以使用这个字体。

npm 上原始的仓库：

lxgw-wenkai-webfont - npm

在这里可以看到这个仓库使用的字体版本，截止 2024-07-25，lxgw-wenkai 使用的是 v1.250。

@font-face {
    font-family: 'LXGW WenKai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(files/lxgwwenkai-bold-subset-4.woff2) format('woff2');
    unicode-range: U+1f1e9-1f1f5,U+1f1f7-1f1ff,U+1f21a,U+1f232,U+1f234-1f237,U+1f250-1f251,U+1f300,U+1f302-1f308,U+1f30a-1f311,U+1f315,U+1f319-1f320,U+1f324,U+1f327,U+1f32a,U+1f32c-1f32d,U+1f330-1f357,U+1f359-1f37e
}

因为 Bold 字体的 font-weight 已经设置到 700 了，所以再尝试加粗就没有效果了。

用哪个更好？

2024-08-06 发现，jsdelivr.net 的响应中：

1	cache-control: public, max-age=31536000, s-maxage=31536000, immutable

给的缓存时间特别长，所以如果经常访问网站，缓存可以有很大作用。Chrome 会直接使用本地缓存。

不确定别的是不是都有这个。

熔断机制

另外，使用七牛 CDN 的时候，发现，大部分字体请求在 30ms 内，但是经常会同时发出 15 个请求，其中有几个请求的速度很慢，可能会慢到 200+，甚至500+ ms。

多语言支持

Hexo 实现多语言站点 | DecayQ’s Log

完美的Hexo多语言解决方案 | 井说

插件

对文章进行相似度分析，把相似文章放到对应文章下边进行推荐。

huiwang/hexo-recommended-posts: Keyword based cross blog posts recommendation / Hexo跨博客文章互推插件，共享空间，提升流量

注意事项

关于 urlname

urlname 要使用纯小写的路径，不然浏览器也会自动转换为纯小写的 URL，导致谷歌分析中提示【网页会自动重定向】，从而不会把对应文章收录到搜索引擎，影响 SEO。这个问题的根本原因可能是 sitemap 插件生成的 sitemap 有问题导致的，sitemap 中的 url 应该是全小写才对。当然也可能和主题有关系。

关于链接

如何去掉链接中的 index.html（比如 http://localhost:4000/about/index.html）

有的独立页面或者文章页面，在顶部导航或者别处有永久连接，其中可能会带有 index.html，如果你希望 url 末尾不带有 index.html 这个结尾，可以修改主题配置 _config.yml 中的 pretty_urls 属性中的 trailing_index 和 trailing_html。

文章链接，如何去掉末尾的 /

Can Hexo remove “/“ at the end of the url? · hexojs · Discussion #5320

permalink: articles/:urlname.html
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks

最后带 / 说明当前访问的是一个文件夹，其中有一个 index.html，但是浏览器中没有显示出来。

最后不带 / 说明是一个 HTML 文件，只不过浏览器地址栏省略了 .html 后缀。

正文中使用超链接的注意事项

如果正文中有如下内容：

1
2
3

https://github.com/shyiko/mysql-binlog-connector-java（不维护）

https://github.com/osheroff/mysql-binlog-connector-java（维护中）

在 Typora 编辑器中，会把英文部分当作 URL，把括号和中文当作正文，你以为是没有问题的，但是经过 hexo 渲染之后，括号部分也会被当作 URL 的一部分，所以最好改成这种写法：

1
2
3

[https://github.com/shyiko/mysql-binlog-connector-java](https://github.com/shyiko/mysql-binlog-connector-java)（不维护）

[https://github.com/osheroff/mysql-binlog-connector-java](https://github.com/osheroff/mysql-binlog-connector-java)（维护中）

部署

官方介绍：

One-Command Deployment | Hexo

git 仓库很大，有 28MB。

Peng@DESKTOP-6I6KS5U MINGW64 /d/development/chongyunjun-blog/public (main)
$ git push -u origin main                                                 
Enumerating objects: 893, done.
Counting objects: 100% (893/893), done. 
Delta compression using up to 20 threads
Compressing objects: 100% (885/885), done.
Writing objects: 100% (893/893), 28.54 MiB | 277.00 KiB/s, done.
Total 893 (delta 2), reused 0 (delta 0), pack-reused 0          
remote: Resolving deltas: 100% (2/2), done.
To github.com:52Heartz/chongyunjun-blog.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

可以直接使用 Vercel Cli 部署静态文件：

Vercel CLI Overview

执行 vercel --prod 部署到生产环境。

域名部署到 Vercel

Vercel 本地 Build 的步骤

vercel build

# 构建 production 版本
vercel build --target production

vercel build --prod

# 如果 prebuilt 的产物是 production 级别的，那么直接部署到生产环境
vercel --prebuilt --prod

Vercel 单独查看 Build 时间：Vercel

vercel deploy

vercel deploy 可以缩写为 vercel。

1
2
3

# 如果 prebuilt 的产物是 production 级别的，那么直接部署到生产环境
vercel deploy --prebuilt --prod
vercel --prebuilt --prod

注意部署到生产环境时候，--prod 不能省路，不然会报错：

Error: The "--prebuilt" option was used with the target environment "preview", but the prebuilt output found in ".vercel/output" was built with target environment "production". Please run `vercel --prebuilt --prod`.

Vercel URL 末尾去掉 .html 后缀

Removing HTML tag for Vercel · vercel · Discussion #1425

Configuring Projects with vercel.json

在项目根目录创建一个 vercel.json 文件（如果是直接部署 public 文件夹，那么在 public 文件夹里边创建）

写入下边的内容：

1
2
3

{
  "cleanUrls": true
}

原理：

不添加这个属性的时候，构建完成的 output 文件夹中的 config.json 内容如下

{
  "version": 3,
  "routes": [
    {
      "handle": "error"
    },
    {
      "status": 404,
      "src": "^(?!/api).*$",
      "dest": "/404.html"
    }
  ],
  "crons": []
}

添加了之后，构建出来的内容：

{
  "version": 3,
  "routes": [
    {
      "src": "^/(?:(.+)/)?index(?:\\.html)?/?$",
      "headers": {
        "Location": "/$1"
      },
      "status": 308
    },
    {
      "src": "^/(.*)\\.html/?$",
      "headers": {
        "Location": "/$1"
      },
      "status": 308
    },
    {
      "handle": "error"
    },
    {
      "status": 404,
      "src": "^(?!/api).*$",
      "dest": "/404"
    }
  ],
  "overrides": {
    "archives/2019/03/index.html": {
      "path": "archives/2019/03/index"
    },
    "categories/数据库/Oracle/index.html": {
      "path": "categories/数据库/Oracle/index"
    },
    "tags/数据库/index.html": {
      "path": "tags/数据库/index"
    },
    "about/index.html": {
      "path": "about/index"
    },
    "articles/about-fixed-point-and-floating-point-number.html": {
      "path": "articles/about-fixed-point-and-floating-point-number"
    },
    "articles/about-intel-xeon-cpu.html": {
      "path": "articles/about-intel-xeon-cpu"
    },
    "404.html": {
      "path": "404"
    },
    "google995cb2a0d8db003c.html": {
      "path": "google995cb2a0d8db003c"
    },
    "index.html": {
      "path": "index"
    }
  },
  "crons": []
}

这样，不仅不带 html 的 url 可以正常访问，而且带 html 的 url 会被 308 重定向（308 Permanent Redirect）。

作为对比，Netlify 允许同时使用带 .html 后缀和不带的 url 进行访问，且都会生成 200 OK 的响应。

更多关于 Netlify：

Post processing | Netlify Docs

How to make URLs pretty using Netlify - DEV Community

节选问题

自 7.6.0 版本开始，auto_excerpt 功能被移除，因为按照字数截断文章，必须先移除其中的 HTML 标签，这将导致图片、代码块显示错误；并且，它也并不属于 Hexo 主题应当负责的内容。我们推荐通过 `` 来精确控制 Read More 的位置；或者设置 excerpt_description 然后为每篇文章指定 description。当然，也可以自行安装第三方插件：

https://github.com/chekun/hexo-excerpt
https://github.com/ashisherc/hexo-auto-excerpt

作出以上改动后，请执行 hexo clean。

——【必读】更新说明及常见问题 · Issue #4 · next-theme/hexo-theme-next

自从 Hexo v7.6.0 之后，插件自带的 auto_excerpt 功能被取消了，需要使用其他第三方插件。

或者在主题配置文件中开启 excerpt_description 之后，然后在文章的 front-matter 中使用 description 字段来表示摘要。

Post Settings | NexT

对于 Next v8.20 的测试

hexo-excerpt 插件（chekun/hexo-excerpt: Automatic excerpt generator for Hexo）在 Next 主题 v8.20 上貌似没有效果。

这个插件的原理：

This plugin runs through all your posts, if your post has more than the configured number of direct tags, then they will be the excerpt, otherwise the whole post will be used.

如果文章有超过指定数量的标签才会被当作摘要。

算啦，最后放弃了，还是使用 `` 标签自己指定吧。

Vercel 解析记录设置

Vercel 官方要求是

A 记录到

CNAME 记录到 ``

可以改为：

A记录：

CNAME：cname-china.vercel-dns.com

加速方案

推一下 Vercel 加速节点 - 掘金【注意一下，是私人搭建的，可能存在隐私问题】

Vercel CDN:利用CNAME负载均衡实现的Vercel加速CDN

网站测速工具：网站测速,HTTP测速,CDN测速,网站速度诊断,API测速,多地区网站测速 - 炸了么

Vercel托管站点提速小技巧 - 倾城于你

xingpingcn/enhanced-FaaS-in-China: 提升部署在cloudflare、vercel或netlify的网页在中国的访问速度和稳定性 Improve the access speed and stability in China of web pages hosted on cloudflare, vercel or netlify by merely changing your CNAME record

谷歌 Google Search Console

Google Analytics 和 Google Search Console 的区别：

kinsta-blog-zh/docs/google-search-console-vs-google-analytics.md at master · apachecn/kinsta-blog-zh

Google Search Console 深入分析幕后揭秘 | Google 搜索中心博客 | Google for Developers

谷歌分析GA和站长工具GSC的数据为什么老是对不上？-雨果网

用户停留时间 SEO入门课程 - 外贸商桥 - 专注外贸推广, 英文SEO, Google优化

hexo 不渲染某些文件

如何让Hexo不渲染某些文件 - Rogn - 博客园

执行 hexo clean 能否不清理某些文件夹？

unable to exclude specific folders or files when run ‘hexo clean’ · Issue #2436 · hexojs/hexo【维护团队答复不考虑，中间有人加了一个 after_clean 的功能，但是没有帮助。】

Hexo 不生成 tags 和 categories 目录下的 index.html

hexo不生成categories和tags的index页 | bomo的开发随笔

原因是要在 source 目录下自己创建tags 和 categories 目录以及对应的 index.md。按理说主题应该自己处理好的，但是不知道为什么next没有处理。

Google Analytics 相关

Google Analytics 4 的跟踪代码如下：
1
2
3
4
5
6
7
8
9

<script async src="https://www.googletagmanager.com/gtag/js?id=G-HZ4RDGTX66"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'G-HZ4RDGTX66');
</script>
第一行<script async src=”https://www.googletagmanager.com/gtag/js?id=G-HZ4RDGTX66″%3E%3C/script%3E，异步加载一段js，这段js是放在www.googletagmanager.com域名下的。

window.dataLayer = window.dataLayer || []：是dataLayer是数据层变量的初始化，完整的是var dataLayer = window.dataLayer = window.dataLayer || [] 然后你后面可以直接调用dataLayer.push。

function gtag(){dataLayer.push(arguments)};定义一个函数，方法

gtag(‘js’, new Date())：调用前面的函数，其中“js”是前面引入的那个js里面的一个已经定义的函数,

下面的“config”也是跟踪js里定义的函数，另一个定义函数为set。

——Google Analytics 4 的原理 | GA小站

关于 Favicon

Favicon | 无尽的边界

Favicon.ico图标常见问题 - 沧海一滴 - 博客园

隐藏文章/不渲染文章

如果想给一篇文章搞一篇配套的创作备注（创作手记），也就是记录一下创作这篇文章的时候都用到了什么方法、工具、过程、经验。但是这部分内容又不太适合放到正文当中，是否有什么办法可以很好地管理呢？

目前找到几种方法：

方法1：

创作手记的文件名以下划线（_）开头。Hexo 不会渲染下划线开头的文件。

any file or folder with a name that starts with an underscore under that folder would still be ignored.

——Configuration | Hexo

方法2：

使用配置文件中的 skip_render 属性，这个属性可以指定哪些文件不渲染，原样保留。

示例：

skip_render:
  - baidu_verify_code-xxxxx.html
  - googlexxxxx.html
  - '_posts/remarks_创作备注_xxxxx.md'

方法3：基于 hexo-hide-posts 插件

prinsss/hexo-hide-posts: A plugin to hide specific posts from your Hexo blog and make them only accessible by links. (隐藏 Hexo 文章)

这个插件可以做到文章不显示到首页，但是通过 url 可以访问到对应文章，也就是只有知道 url 的人才能访问文章。

这样可以让一般人看不到，但是知道的人可以自己看。只不过，这个 url 有可能还是出现在 sitemap 等文件中，并不能保证别人完全看不到。

页内跳转

如果我们想在文章开头搞一个链接，一键跳转到文章的某个章节，应该如何实现？

【有缺陷】方法1：

直接用 Markdown 的超链接语法，输入 [链接文字内容](#要链接到的标题)

这样点击之后就会直接跳转到本页的对应标题，同时浏览器的 URL 栏中会加上对应的标题。

注意事项：如果标题中的文字包含一些特殊字符，可能需要把特殊字符去掉，比如如果标题内容是 ORDER BY RAND() 是什么？，那么你可能要写成 [ORDER BY RAND() 是什么？](#ORDER-BY-RAND-是什么？)

2024-08-04 发现这个方法有缺陷，当文章显示在首页的时候，摘要中的部分，URL 没有正确转换，会导致这个页内跳转到超链接是在首页 URL 的后边加上 #标题，这显然是不对的。

文章阅读量计数

如何自己搭建busuanzi不蒜子平台，搭建静态博客的访问量统计 | 张洪Heo

FiniCounter: 静态网站访问量统计工具 | Finisky Garden

网站分析

51la统计体验报告：很全面的惊喜 | 张洪Heo

免费网站统计工具对比：统计鸟比百度统计、CNZZ、51La好在哪里？ - 黄聪 - 博客园

慎用51流量统计 - 阿呆日记

放弃了51LA，但是作为站长的我有话要说 - 文武科技柜

使用 Umami 自建网站流量统计分析工具 - atpX

Umami【自建网站统计】

如何不花一分钱搭建 Umami 统计工具

使用umami统计网站流量 - 一枝梅的博客 - 专注于java开发的小站

发现一个 vercel bug

当 url 中包含中文的时候，访问会 404。

查看了一下 Build 日志，有如下内容：

Warning: Override path "categories/数据库/MySQL/index.html" was not detected as an output path
Warning: Override path "categories/数据库/Oracle/index.html" was not detected as an output path
Warning: Override path "categories/数据库/PostgreSQL/index.html" was not detected as an output path
Warning: Override path "categories/数据库/SQL-Server/index.html" was not detected as an output path
Warning: Override path "categories/数据库/index.html" was not detected as an output path
Warning: Override path "tags/数据库/index.html" was not detected as an output path

然后看了一下对应的 Build 日志中的 Static Assets，里边确实没有这些资源文件，难道是这些文件就没有上传上去？

但是本地的 .vercel/output 中是有这些文件的。

最后发现，可能是 vercel-cli 的 BUG

使用

1 2	vercel build vercel --prebuilt

或者

1 2	vercel build --prod vercel --prebuilt --prod

这种分两步构建和部署的就会有问题。

如果直接

vercel

或者

1	vercel --prod

就没有问题。

vercel 添加网址重定向

如果你发布了一篇文章，已经被 Google 收录，但是你想要修改这篇文章的 URL，但是你的旧 URL 可能还会出现在搜索结果中，用户如果访问了你的旧 URL，就会报错 404 Not Found，所以为了用户的体验，在修改 URL 之后要保证之前的 URL 可以跳转到新的 URL。

Vercel 可以做到这一点。

在你的项目根目录创建一个 vercel.json 文件，里边写入如下内容：

{
  "redirects": [
    { "source": "/me", "destination": "/profile.html", "permanent": true }
  ]
}

其中 source 就是原来的地址，destination 就是新的地址，注意这个地址都是相对于域名根目录来说的。比如 source 的 /me 对应的是 example.com/me 这个 URL。permanent 为 true 代表这是一个 HTTP 308 重定向。

更多规则可以参考 Vercel 的官方文档：

Redirects

Configuring Projects with vercel.json

官方信息

优秀入门文章

Hexo 的安装

新建博客

示例仓库

头像

添加头像

常用命令

生成静态文件

启动服务器

新建文章

Hexo添加sitemap

其他优化

关于文章

Front Matter

配置第三方评论功能

Twikoo

来比力（LiveRe）

Disqus

Utterance

Waline

Netlify 修改 Node 版本

使用 Netlify 代替 Github pages 进行托管

HTTPS证书

Let’s Encrypt

使用CDN

CDN基本原理

腾讯云

七牛云

又拍云

网上的一些讨论

自己有可能可以做的优化

图片展示

主题自定义美化

重新安装了 node.js 之后

文章

Markdown 中的尖括号问题

修改 FrontMatter 的分类

使用 VS Code 的正则表达式替换功能

第三方插件

主题

我对博客以及主题的需求

相关文章

Fluid

示例

Next

关于配置

其他注意事项

示例

Stellar

技巧

示例

装修指南

Volantis

示例

Aurora

示例

ButterFly

示例

Solitude（基于 Butterfly 修改）

示例

Anzhiyu（基于 Butterfly 修改）

示例

Melody

Minos

示例站

Yun

示例

Keep

示例

Tranquilpeak

示例

Ayer 主题

示例

Hueman

archer

Flex-Block

Matery

Yilia

示例网站