hexo-tree主题-使用笔记
先说坑点
- 刷新才可查看最新内容
可能是由于浏览器有缓存，每次打开页面都要刷新才能显示最新内容，浏览器居然不会自动把旧的内容覆盖掉？？？firefox和chrome都是这样。只好每次更新了内容就清理浏览器缓存了。firefox和chrome清理缓存的快捷键是ctrl+shift+del，firefox勾选Cache即可，chrome勾选缓存的图片和文件即可。如果有更方便的方式欢迎评论区发言/狗头
- gitee.io每次部署后都需要手动update才能生效。
使用hexo+代码托管平台搭建博客的优劣
优势：
- 可以灵活选择主题
- 博客内容本地云端同时备份，不用担心某个公司倒闭导致博客丢失
劣势：
- 代码托管平台（如gitee）可能有容量限制，导致不能随心所欲放图片
- 手机写博客及其不方便（甚至不可能？）
- 并非所见即所得，有时在编辑器里写好的markdown文档放到博客上就有点不太一样了。
新建代码仓库
最好建立两个代码仓库，一个存放网站，一个存放生成网站的博客源码。存放网站的代码仓库可以自动同时push到gitee和github上。博客源码的代码仓库只能手动push，所以最好只放到一个代码托管平台上。
gitee
新建一个名字同自己的用户名的仓库用来存放网站。新建一个任意名字（我的叫blog）的代码仓库用来放博客源码。
github
新建名字为自己用户名.github.io的仓库。
安装hexo
可以用npm安装：
npm install hexo-cli -g
初始化博客
在本地新建一个blog空文件夹（不要clone），然后执行
hexo init
就初始化了目录结构。然后才能git init，把remote加上去。
预览
hexo s -g
就会编译并且在本地4000端口开一个网站
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
在浏览器地址栏输入http://localhost:4000或者在终端ctrl+左键这个链接（如果终端支持的话）就可以预览博客了。当本地的文件改变之后，预览的博客会自动更新。
修改配置
在blog根目录下的_config.yml里可以修改title、author等配置，然后在文档的最后更改Deployment设置，把之前创建的gitee和github的代码仓库放上去，我的设置如下：
deploy:
type: 'git'
repository:
gitee: git@gitee.com:searchstar/searchstar.git,master
github: git@github.com:seekstar/seekstar.github.io.git,master
新版本github中master可能要改成main。
部署
先生成博客网站并部署到代码托管平台：
hexo d -g
会自动推送到gitee和github。
然后到github的网站仓库用户名.github.io里开启github pages：进入仓库设置，Options里往下划，可以看到GitHub Pages，选择branch为master（或main），然后Save就好了。进入https://用户名.github.io即可查看。
然后到gitee的网站仓库用户名里开启gitee pages：进入仓库，点击Service，然后点击里面的Gitee Pages，同样选择branch为master，并勾选Enforce HTTPS，然后点击Update，等一段时间即可。进入https://用户名.gitee.io即可查看。
github.io部署后等一段时间会自动更新，但是gitee.io每次部署都必须手动Update才能生效，有点恶心。
选择主题
默认主题不好用。https://hexo.io/themes/可以浏览各种主题，点击图片可以预览，点击名字可以进入主题的代码仓库。
建议使用tree主题，它有如下优点：
- 可以把博客以文件夹的形式组织
- 左边的索引可以收起来，防止占用屏幕空间
- 上部有
标签和分类的入口，进入网站即可点击 - header随着页面往下翻可以收起来，防止占用屏幕空间
缺点也很明显：
- 手机版上
标签和分类入口所在的header过短，不能智能收成一个目录，所以header不能放太多东西。 - 访问量和评论的key是博客url，若url改变则访问量和评论全部会清空。
更换主题
这里选择tree主题。在themes下执行
git clone https://github.com/wujun234/hexo-theme-tree tree
cd tree
然后再在_config.yml里把默认的
theme: landscape
改成
theme: tree
然后预览一下就可以看到主题换了。
在blog根目录新建_config.tree.yml，放tree theme的配置文件。主题的配置说明详见themes/tree/README.md。下面介绍一些常用的。
修改header
通过_config.tree.yml里的links配置：
links:
# 改成自己的github链接
github: https://github.com/wujun234
# 自定义链接
custom:
- name: UidGenerator
URL: https://github.com/wujun234/uid-generator-spring-boot-starter
默认有一个作者自己的项目UidGenerator，删掉它或者换成自己的项目。项目链接可以多放几个，但是由于手机上header长度有限，不宜过多。实际上我觉得一个都不放比较好，可以全部塞进后面提到的about页。
开启标签
在_config.tree.yml开启标签：
tags: true
在source目录下执行
hexo new page "tags"
然后编辑source/tags/index.md，在date后面加上
type: "tags"
layout: "tags"
如
---
title: tags
date: 2021-02-26 16:36:55
type: "tags"
layout: "tags"
---
然后预览一下，就能看到右上角多了标签或者Tags。
分类就不开了，因为tree主题的文件夹自带了分类功能。不开分类有助于节约header的空间。
开启评论，统计访问量
已经默认开启了“不蒜子”，可以统计PV(Page View)和UV(Unique Visitor)并在页面下方显示，但是评论和单篇文章访问量却不适合用“不蒜子”。tree主题使用leancloud来存储评论以及访问量。
注册一下leancloud：https://www.leancloud.cn/
点击免费试用，然后注册就好了。有一定的免费额度。
登陆进去之后可以切换中文，然后创建应用，应用名称随便，我的是blog，类别选开发版，创建好了之后点进去，点击左边设置里的应用keys，把AppID和AppKey放到_config.tree.yml里，并且把enableComment和enableCounter都设置成true
# valine
valine:
# 评论
enableComment: true
# 阅读量
enableCounter: true
# valine appID
appID: xxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx
# valine appKey
appKey: xxxxxxxxxxxxxxxxxxxxxxxx
placeholder: 请输入评论
avatar: retro
然后预览一下，可以看到每篇文章下面多出了评论输入框，文章开头多了访问量
注意，评论和访问量都是以博客的url作为key的，所以如果博客的url变了（如重命名），那评论和访问量都会清空。要是可以在创建博文的时候生成一个类似uuid的东西，然后以uuid作为key就好了（我为什么这么菜）。
邮件提醒
官方文档：https://valine.js.org/notify.html
但是官方文档里推荐的https://github.com/zhaojun1998/Valine-Admin看起来已经无人维护了，部署会出错：
build failed: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated superagent@3.8.3: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net npm WARN deprecated formidable@1
而且这个repo连issue都没有。
修复方法：https://github.com/DesertsP/Valine-Admin/issues/151
也可以直接用这个：https://github.com/Druadach/Valine-Admin
按照readme里的步骤部署即可。
环境变量里可以指定TO_EMAIL，提醒邮件就会发送给这个邮箱。如果不指定TO_EMAIL，提醒邮件是发送给SMTP_USER。
修改底部版权开始年份
_config.tree.yml里的siteStartYear: 2019修改成你想要的年份。结束年份会自己计算出来。
更改网站图标
将自己的网站图标（文件名不要跟默认的favicon.ico相同）放进source文件夹里。假如文件名是seekstar.ico，那么就可以通过https://博客网站/seekstar.ico访问到这个图标。然后更改_config.tree.yml：
# 改成自己的图标文件名，比如 /seekstar.ico
favicon: /favicon.ico
即可让网站使用新的网站图标。
将渲染器更换为hexo-renderer-pandoc
默认的渲染器是hexo-renderer-marked，没有语法高亮，而且有BUG，行内代码有时候会被处理成行间代码，然后全乱了。所以需要更换渲染器。hexo-renderer-markdown-it比较流行，但是不支持Latex风格的数学公式。所以这里把渲染器换成hexo-renderer-pandoc：
sudo apt install -y pandoc
npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc --save
更换渲染器之后要在_config.yml中把默认的highlight关掉，才能使用新的渲染器提供的highlight：
# https://hexo.io/docs/syntax-highlight#Disabled
# 如果你的hexo版本是v7.0.0以上（含）
syntax_highlighter: # empty
# 如果你的hexo版本不到v7.0.0
highlight:
enable: false
prismjs:
enable: false
注意这里要把之前的预览ctrl+c关掉，然后重新hexo g && hexo s才能生效。
然后就可以开启对Latex风格的公式的支持了：Hexo支持Latex风格的公式编辑
写博客
在项目根目录执行
hexo new '博客标题'
会在source/_posts下生成博客标题.md。
用你喜欢的工具编辑之（例如vscode），然后预览一下，如果没什么问题的话就hexo d -g把它部署到gitee和github上。
最后记得还要git push博客源码到代码仓库里，不然换了一台机器博客源码就丢失了。
换一台机器写博客
先安装依赖：
sudo apt install -y pandoc
npm install hexo-cli -g
pip3 install panflute
然后把博客源码仓库clone下来，再把网站的仓库clone到源码仓库的.deploy_git下。然后npm install，然后就可以正常hexo g && hexo s预览和hexo d -g部署了。比如我的：
# 源码
git clone --recursive git@github.com:seekstar/blog.git
cd blog
# 网站
git clone git@github.com:seekstar/seekstar.github.io.git .deploy_git
npm install
上传图片
https://seekstar.github.io/2021/11/16/hexo插入图片/
让文章的URL中不含目录
https://seekstar.github.io/2021/11/16/hexo-tree主题让文章的url中不含目录/
Sitemap
给网站添加sitemap有利于搜索引擎收录。这里主要介绍如何生成sitemap。
npm install hexo-generator-sitemap --save
然后在_config.xml里：
sitemap:
path: sitemap.xml
然后hexo d -g，sitemap就会生成在xxx.github.io/sitemap.xml。然后在google search console里的indexing -> Sitemaps -> Add a new sitemap，会有https://xxx.github.io/ Enter sitemap URL，在Enter sitemap URL里填入sitemap.xml即可。
可能会提示couldn't fetch。可能其实是pending，多等几天可能就好了。
需要注意的是，sitemap.xml里的lastmod默认被置为post.updated，而如果front-matter里没有显式指定updated时间，post.updated默认又会被置为.md文件的修改时间。而在另一台机器上clone之后.md文件的修改时间通常会被设置为clone的时间，从而导致sitemap.xml里的lastmod全部变成clone的时间，而且条目的顺序也会乱掉。考虑到sitemap.xml一般是用git管理的，这会导致git history里有很多无用的更改。
可以用hexo-filter-updated-from-git解决这个问题：https://github.com/seekstar/hexo-filter-updated-from-git
原理是在front-matter里没有显式指定updated时间时，让hexo不设置post.updated。然后弄一个before_post_render的filter，在发现post.updated未定义的时候将其设为对应的.md文件的最后一个commit的author time。
升级
升级某个包的版本
以hexo为例：
npm i hexo@latest
hexo --version
检查更新
npm outdated
或者用npm-check-updates:
npm i -g npm-check-updates
ncu
升级全部
npm i -g npm-check-updates
ncu -u
npm i
来源：https://www.freecodecamp.org/news/how-to-update-npm-dependencies/
其他
折叠部分文字
https://github.com/fletchto99/hexo-sliding-spoiler
保留代码块中的tab
pandoc:
args: [
'--preserve-tabs',
]
然后hexo clean && hexo g使其生效。
默认tab宽度是8。可以在themes/tree/source/css/main.css里改成4：
pre{
tab-size: 4;
}
来源：https://matrix4f.com/Web/FrontEnd/tabsize/
如果发现即使清了cache tab宽度仍然是4的话，检查public/css/main.css是不是新版本，如果不是的话把public文件夹删了重新生成：
rm -r public
hexo d -g
标题锚点
https://github.com/seekstar/hexo-pandoc-header-anchor
通过锚点可以得到指向标题的URL，例如：https://seekstar.github.io/2022/03/10/a-collection-of-matrix-groups/#matrix
浙公网安备 33010602011771号