hexo-tree主题-使用笔记

阅读量: searchstar 2021-02-28 13:59:30
Categories: Tags:

先说坑点

可能是由于浏览器有缓存,每次打开页面都要刷新才能显示最新内容,浏览器居然不会自动把旧的内容覆盖掉???firefox和chrome都是这样。只好每次更新了内容就清理浏览器缓存了。firefox和chrome清理缓存的快捷键是ctrl+shift+del,firefox勾选Cache即可,chrome勾选缓存的图片和文件即可。如果有更方便的方式欢迎评论区发言/狗头

使用hexo+代码托管平台搭建博客的优劣

优势:

劣势:

新建代码仓库

最好建立两个代码仓库,一个存放网站,一个存放生成网站的博客源码。存放网站的代码仓库可以自动同时push到gitee和github上。博客源码的代码仓库只能手动push,所以最好只放到一个代码托管平台上(非得写脚本一起push当我没说)。由于gitee国内访问比较稳定,所以我选择把博客源码放到gitee上。

gitee

新建一个名字同自己的用户名的仓库用来存放网站。新建一个任意名字(我的叫blog)的代码仓库用来放博客源码。

github

新建名字为自己用户名.github.io的仓库。

安装hexo

可以用npm安装:

npm install hexo-cli -g

初始化博客

在本地新建一个blog空文件夹(不要clone),然后执行

hexo init

就初始化了目录结构。然后才能git init,把gitee上的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主题,它有如下优点:

缺点也很明显:

更换主题

这里选择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来存储评论以及访问量。

注册一下leancloudhttps://www.leancloud.cn/
点击免费试用,然后注册就好了。有一定的免费额度。

登陆进去之后可以切换中文,然后创建应用,应用名称随便,我的是blog,类别选开发版,创建好了之后点进去,点击左边设置里的应用keys,把AppID和AppKey放到_config.tree.yml里,并且把enableCommentenableCounter都设置成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就好了(我为什么这么菜)。

修改底部版权开始年份

_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

npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc --save

更换渲染器之后要在_config.yml中把默认的highlight关掉,才能使用新的渲染器提供的highlight:

highlight:
  enable: false

注意这里要把之前的预览ctrl+c关掉,然后重新hexo g && hexo s才能生效。

然后就可以开启对Latex风格的公式的支持了:Hexo支持Latex风格的公式编辑

写博客

在项目根目录执行

hexo new '博客标题'

会在source/_posts下生成博客标题.md
用你喜欢的工具编辑之(例如vscode),然后预览一下,如果没什么问题的话就hexo d -g把它部署到gitee和github上。

最后记得还要git push博客源码到代码仓库里,不然换了一台机器博客源码就丢失了。

换一台机器写博客

把gitee上的博客源码仓库clone下来,再把网站的仓库clone到源码仓库的.deploy_git下。然后npm install,然后就可以正常hexo g && hexo s预览和hexo d -g部署了。比如我的:

# 源码
git clone git@gitee.com:searchstar/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%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87/

让文章的URL中不含目录

https://seekstar.github.io/2021/11/16/hexo-tree%E4%B8%BB%E9%A2%98%E8%AE%A9%E6%96%87%E7%AB%A0%E7%9A%84url%E4%B8%AD%E4%B8%8D%E5%90%AB%E7%9B%AE%E5%BD%95/

升级

升级某个包的版本

以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/

其他

折叠部分文字

Hexo+Github博客:如何折叠(显示/隐藏)部分文字

https://github.com/fletchto99/hexo-sliding-spoiler

保留代码块中的tab

pandoc:
  extra:
    - preserve-tabs:  # note this colon!!

然后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

脚注

https://github.com/kchen0x/hexo-reference