hexo博客配置优化

2023-07-20

关于配置问题暂且不作讨论，hexo官网有详尽教程，网上也有很多教程。因此仅就笔者博客配置优化中遇到的问题进行讨论。
hexo中文文档链接:https://hexo.io/zh-cn/docs/

添加永久链接(Permalink)

hexo默认生成的文章默认链接格式为日期，导致目录层次过多
永久链接能够帮助缩短目录层次，便于爬虫抓取，方便推广
存储于仓库的页面可以方便地使用相对路径引用仓库内图片等资源
因此添加永久链接的原则是
- 使目录层次尽可能短
- 能够唯一标识一篇文章
abbrlink插件能够利用对title的默认十进制CRC16校验得到校验码，可将其作为唯一链接标识，如本文的校验码为29379，请保证博客文章md标题与文章内定义标题一致。

操作步骤

安装插件
1
npm install hexo-abbrlink --save

在全局设置文件_config.yml中添加

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://even904.github.io
permalink: posts/:abbrlink.html #注意此处的修改 

#原先为:year/:month/:day/:title/ 
#其他方式
#1.md文章信息页自定义pid，再使用pid进行标识/posts/:pid/ 
#2.目录+标题模式:category/:title/

permalink_defaults: posts/:abbrlink.html
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

生成、预览和部署

添加访问人数

参考：腾讯云@試毅-思伟:Hexo博客添加访问量统计
笔者使用yilla主题，这里直接采用不蒜子进行统计。

操作步骤

在themes/yilia/_config.yml添加属性
1
2
busuanzi:
enable: true

在themes/yilia/layout/_partial/footer.ejs末尾添加如下代码,注意添加在<footer></footer>标签内

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_site_pv">
                本站总访问量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站访客数<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<% } %>

在themes/yilia/layout/_partial/post/date.ejs开头添加如下代码

<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
        </span>
<% } %>

注意：使用hexo s本地预览时，数值会出现问题，但部署后能够正常显示。

添加下载链接

引用页面存储库内资源不需要额外操作，仅需在markdown内使用html标签即可，举例如下

    <a href="../assets/test.txt" download="test.txt">点击下载测试txt文件</a>

效果如下：
点击下载测试txt文件

推送网络问题

使用git config --global http.proxy http://127.0.0.1:1080指定所有http连接通过本机1080端口转发。
使用git config --global https.proxy https://127.0.0.1:1080指定所有https连接通过本机1080端口转发。

本机开启代理后，使用以上两个命令指定相应代理端口，解决gitbash内命令执行失败。

本地网络端口访问失效

默认端口为localhost:4000，可能被占用，可以在启动时修改为其他端口
临时解决：使用hexo server -p [port_num]指定访问端口为其他端口

背景美化等

参考这里

评论系统

由于yilla主题原先使用的gitment停止维护，因此使用gitalk作为评论系统，其功能和UI更丰富。
参考这里

Gitalk评论系统需要使用github的Oauth第三方登录认证系统。因此需要在github上进行配置。Gitalk的评论以github的issue形式存储和读取，因此需要开设一个仓库用于存储评论，或使用博客所在(github.io)仓库。

注册OAuth服务

首先应注册OAuth服务，在github个人页->settings->Developer settings中可以找到该服务。选择New OAuth App，如下图

项目	内容
Application name	服务名称，如`Even's blog`
Homepage URL	主页地址，可选择`https://xxx.github.io`
Application description	服务简介，选填
Authorization callback URL	回调地址，即认证后返回地址，非常不推荐填写与主页地址相同的地址
Enable Device Flow	勾选后可以使用设备流登录，即扫码登录等方式

创建完成，需记录Client ID，还需生成一个Client secrets并记录，稍后使用。

添加配置信息

在themes\yilia\_config.yml中添加如下配置信息，以备调用

gitalk:
  enable: true #开启gitalk评论，不需要配置
  owner: #github 用户名
  admin: #github 仓库管理员用户名，多个管理员可以逗号分隔
  repo: #github 用于存储评论的仓库名，如GitComments
  ClientID: #OAuth中获取的ClientID
  ClientSecret: #OAuth中获取的ClientSecret
  labels: #github issue 对应的issue标签，可任意取
  distractionFreeMode: true  #无干扰模式，不需要更改

创建gitalk代码段

在themes\yilia\layout\_partial\post\路径下创建gtialk.ejs，其内容如下：

<div id="gitalk-container"></div> 
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="https://priesttomb.github.io/js/md5.min.js"></script>
<script type="text/javascript">

var gitalk = new Gitalk({
  clientID: '<%=theme.gitalk.ClientID%>',
  clientSecret: '<%=theme.gitalk.ClientSecret%>',
  repo: '<%=theme.gitalk.repo%>',      // The repository of store comments,
  owner: '<%=theme.gitalk.owner%>',
  admin: ['<%=theme.gitalk.admin%>'],
  id: md5(location.pathname),      // Ensure uniqueness and length less than 50
  distractionFreeMode: true // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')

</script>

</script>

其中，分别引入了gitalk的样式文件、gitalk实现以及md5编码的js文件。
gitalk采用id属性为评论的唯一标识，对应issue中的标题，其会被gitalk截断至50字符。这里id属性为location.pathname，即页面本身URL，但由于其长度可能超过50字符。采用md5编码，可以将标题编码为32位16进制数，避免超过50字符。
在生成时，hexo自动将_config.yml中的对应参数传入gtialk.ejs并将替换后的片段插入生成的html页面，从而显示评论区域。

如果希望登录后回调定位回源地址，则可采用发送含有源地址信息的请求执行，这里并未实现该功能。

在themes\yilia\layout\_partial\article.ejs末尾添加使能代码片段：

1
2
3

<% if (theme.gitalk.enable){ %>
	<%- include post/gitalk.ejs %>
<% } %>

该片段处理_config.yml中的gitalk使能操作。