博客折腾记录

之前一直没有记录修改 & 优化博客的过程，其实这是一个不太好的习惯，现在都忘了自己修改过哪些地方了 (虽然 vscode 可以标出来)，哪些修改对应了网站哪些变化。所以还是要记录一下修改的记录，为方便日后对博客持续优化。

things to do

• 修改站点下博客文章存放目录
• 侧边栏 toc 自动展开
• 评论系统更换为 valine
• 站点自动备份系统
• 文章分类、归档页面优化
• 代码块优化
• next 版本升级
• SEO 优化
• leetcode 文章归档
• 不再使用 notshow 来隐藏文章
• 设置 git 代理和取消
• menu 中自定义中文页面
• hexo g 之后不能正常生成内容

修改站点下博客文章存放目录

这个其实是在找解决如何将侧边栏 toc 自动展开时，找到一篇博客无意中发现的。原来那种年 / 月 / 日… 的方式真的太挫了，于是就按照他的这种方式，生成一个永久链接。
首先安装 hexo-abbrlink 插件，使用命令 npm install hexo-abbrlink –save 即可。然后需要在站点配置文件，即 hexo 目录下的_config.yml 文件中修改 permalink: :year/:month/:day/:title/ 为一下内容：

复制

permalink: posts/:abbrlink/
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex

然后在 hexo clean 和 hexo g && hexo d 即可。不过令人伤心的是，在重新生成文章链接后原来的阅读量也随之清零了😭，我这可怜的阅读量不知道什么时候才能四位数啊。

侧边栏 toc 自动展开

目前在 github 上找到了几个 issue:#307 #531 #710
具体的解决方法就是在 themes/next/source/_custom/custom.styl 中加入以下代码，可以自动展开二级标题。

复制

.post-toc .nav .nav-level-1>.nav-child { 
   display: block; 
}

评论系统更换为 valine

真的受不了 disqus，首先被河蟹了，然后即使能加载也非常的慢，界面也十分的丑。今天看到一些博客用了 valine 发现比 disqus 好看多了，抽时间赶紧把这个给改了。
一开始弄好了，但是发现刷新后评论就会消失。后来在 github 上问了下#159，原来 valine 和 next 自带的统计阅读量会有冲突。然后还发现一个很严重的问题，一开始在选主题的时候没有仔细调研，就下了旧的 next 版本 5.1.4。现在最新的 next 版本已经到 7 点多，并且在另外一个仓库中。所以又把 next 换成了最新的版本。

站点自动备份系统

https://notes.doublemine.me/2015-07-06-%E8%87%AA%E5%8A%A8%E5%A4%87%E4%BB%BDHexo%E5%8D%9A%E5%AE%A2%E6%BA%90%E6%96%87%E4%BB%B6.html

首先新建一个 Github 的仓库，然后把整个博客文件夹 push 上去。然后安装shelljs

复制

npm install --save shelljs

最后在博客目录下新建一个 script 文件夹，用于在 deploy 之后自动将整个博客文件夹 push 上去。

文章分类、归档页面优化

查了一下才发现，原来 hexo 已经支持二级分类了

代码块优化

代码块 mac 风格
https://blog.ihoey.com/posts/Hexo/2018-05-27-hexo-code-block.html
代码块复制 (在 next7.0 中已经集成了代码块复制功能)
https://qiming.info/Hexo%E5%8D%9A%E5%AE%A2%E4%B8%AD%E5%8A%A0%E5%85%A5%E4%BB%A3%E7%A0%81%E5%9D%97%E5%A4%8D%E5%88%B6%E5%8A%9F%E8%83%BD/

next 版本升级

升级到 7.0，先将就的 themes/next 文件夹重命名为 next-old，然后在把最新的 next 下载到 themes/next 中，在把之前的一些配置修改一下。

不知道为什么新的字数统计加载不出来，还是想用回原来的。现在 next-old/_config.yml 中找到原来的 wordcount 设置字段复制到新的 next 的_cogfig.yml 中。先找到了整个网站页低的字数统计是在 theme/next/layout/footer.swig 中设置的。将旧的 wordcount 的设置复制过去，就可以了。

复制

{% if theme.post_wordcount.totalcount %}
  <span class="post-meta-divider">|</span>
  <span class="post-meta-item-icon">
    <i class="fa fa-area-chart"></i>
  </span>
  {% if theme.post_wordcount.item_text %}
    <span class="post-meta-item-text">{{ __('文字总数') }}&#58;</span>
  {% endif %}
  <span title="{{ __('post.totalcount') }}">{#
  #}{{ totalcount(site, '0,0.0a') }}{#
#}</span>
{% endif %}

然后还需要修改每篇文章上的显示设置，在旧的 next 主题 github 地址 https://github.com/iissnan/hexo-theme-next 中搜索 post_wordcount 可以找到在 next/layout/_marco/post.swig 中有用到，那么这里就应该是设置每篇文章的字数统计的地方。再把旧的和新的对比一下把旧的包括 post_wordcount 的代码复制过去，就大功告成。

复制

{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
  <div class="post-wordcount">
    {% if theme.post_wordcount.wordcount %}
      {% if not theme.post_wordcount.separated_meta %}
        <span class="post-meta-divider">|</span>
      {% endif %}
      <span class="post-meta-item-icon">
        <i class="fa fa-file-word-o"></i>
      </span>
      {% if theme.post_wordcount.item_text %}
        <span class="post-meta-item-text">{{ __('字数统计') }}&#58;</span>
      {% endif %}
      <span title="{{ __('post.wordcount') }}">
        {{ wordcount(post.content) }}
      </span>
    {% endif %}

    {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
      <span class="post-meta-divider">|</span>
    {% endif %}

    {% if theme.post_wordcount.min2read %}
      <span class="post-meta-item-icon">
        <i class="fa fa-clock-o"></i>
      </span>
      {% if theme.post_wordcount.item_text %}
        <span class="post-meta-item-text">{{ __('阅读时间') }} &asymp;</span>
      {% endif %}
      <span title="{{ __('post.min2read') }}">
        {{ min2read(post.content) }}
      </span>
    {% endif %}
  </div>
{% endif %}

SEO 优化

终于空下来有时间弄弄博客啦，首先就是感觉把 SEO 弄了，一直都拖了好久。SEO 主要参考了这篇博客 https://blog.csdn.net/qq_34149805/article/details/84894713 和 https://www.jianshu.com/p/c20bb9df1867 以及 https://felixxiong.github.io/2018/10/06/%E5%8D%9A%E5%AE%A2SEO%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/

不过现在卡在百度的认证上了，下载认证文件放到 next 主题目录的路径下，会显示验证失败：“您的站点有链接未通过 https 校验 “黑人问号？？？

leetcode 文章归档

想法是写 leetcode 的文章不会自动显示在主页上，然后新建一个 page，里面专门收录写的关于 leetcoede 的文章。可以在 scaffolds 目录中新建一个 leet.md，以后直接用 hexo new leet [leet 题目] 这样方式来新建一个文章。将文章不显示在主页的方法参考这篇文章 https://www.jianshu.com/p/79fe9fb9dfa0，修改好之后，就在 leet.md 中加上 notshow: true，以后新建就可以自动设置为不显示了。

然后还想弄一个类似于 github 上个人主页那种日历表，如果有一天有做题的话，就会设置成绿色。找了下，发现可以通过 baidu 的 echart 或者 google chart 来实现。baidu 的好处就是有中文的文档，google 的例子似乎更好看一些，但是不知道会不会被 emmmm，就还是先试试百度的吧。只要 npm install hexo-tag-echarts3 –save 就可以来，下面是一个 echart 测试：

可以点击上方的利润、收入、支出来设置显示和不显示，还是很炫酷滴🕶️，接下来试下日历表：

好吧，好像不能显示… 不知道是因为 echart 没写好还是不支持… 那就先搁置下来，以后有时间就试试 google 的吧，但是 hexo 中 google chart 的插件最后一次更新已经是 4 年前了。

不再使用 notshow 来隐藏文章

2020.2.13 更新
https://www.jianshu.com/p/79fe9fb9dfa0
用了很久的 notshow 来隐藏不想显示在主页的文章，但是用久了会有一个问题，就是虽然文章不在主页显示了，但是还是会算在主页的文章数当中，如果写了 10 篇 notshow 的文章，那么主页就是空白了。之前都是通过修改主页的文章显示数量来避免这个问题，现在终于下定决心去解决一下了。百度到了一个插件：https://github.com/Jamling/hexo-generator-index2，这个插件可以根据标签、种类或路径来选择主页包括 / 不包括的文章，简直完美契合我的需求。把 notshow 给删掉了，然后安装好插件，只需要修改在 hexo 目录下的_config.yml，增加下面几行。

复制

# index2 generator是否包含官方的hexo-generator-index，默认true（包含）
index2_include_index: true # defult is true

# 配置index2 generator，可以是数组或对象
index2_generator:
  per_page: 10
  order_by: -date
  # include:
  #   - category Web # 只包含Web分类下的文章
  exclude:
    - category leetcode # 不包含标签为Hexo的文章

这个插件也有了很久了，不知道为什么之前没有找到。。。

设置 git 代理和取消

复制

# 设置ss代理
git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'

# 取消
git config --global --unset http.proxy
git config --global --unset https.proxy

再过一个月 git 好像就不能用用户密码来登陆了，先收藏下地址，后面再改（拖）
https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/

https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token

menu 中自定义中文页面

2021.9.13 更新。
想要添加一个学习笔记的 page，但是没有对应的中文，需要手动设置。
首先新建一个 page:

复制

hexo new page notes

然后修改主题目录下的_config.yml，在 menu 中加入notes: /notes/ || book（这里最后的 book 是图标的选择，可以在 https://fontawesome.com/ 中找想要的图标）。最后在next/languages/zh-CN.yml中的 menu 加入对应的中文，例如notes: 笔记就可以了。

参考：https://www.playpi.org/2017050701.html#5e799a238a84ab00777c84ca

hexo g 之后不能正常生成内容

因为其他项目要用到 node 更高的版本，所以重装了 node。但是发现更新之后hexo d不会正常的生成网页内容😭。记录一下修复过程。

找了很多文章，也尝试了很多方法，发现大概率应该是 node 版本过高，而且也不应该升级 npm 里面包的等级。首先安装了 nvm 一个 node js 的多版本控制软件，然后用 nvm 安装了 12.14.1 版本的 node 并启用，当前 npm 版本为 6.13.4。之前不小心升级了 npm 的包，导致 blog 主目录下的package.json已经发生了改变。好险前不久删除 icloud 的备份的时候，把整个目录都复制出来了，于是找到备份文件将package.json重新恢复并npm install，然后重新hexo clean && hexo g && hexo d网站就有内容啦。

但是可能还是和之前的版本不一样，所以网站页首的图标变得不能正常显示了，显示出来全是什么：<i class="menu-item-icon fa fa-fw fa-home"></i> <br/> 首页之类的。感觉应该也是各种版本问题导致的，查了好久的资料，也尝试了各种办法都无功而返。甚至直接下载图标替换也失败了。

本来都打算把 Next 的版本更新到 8.x 了，正在看更新文档的时候：https://github.com/next-theme/hexo-theme-next/issues/4。发现里面提到了：

NexT v7.4.1 及之前的版本在 Hexo 4.0 下会出现图标被转义无法显示的问题（见 <theme-next/hexo-theme-next#1175>），需更新到 v7.4.2 以上版本。

于是就看了一下这个 commit，只改了两行代码，马上试一试发现真的可以！图标又能显示啦。具体修改的代码是:
https://github.com/theme-next/hexo-theme-next/pull/1175/commits/7d6272274afcc88edcefe3504e452a502c05329f

需要改两个文件，第一个是 next 主题目录下layout/_partials/pagination.swig中，将mid_size=1改成

复制

mid_size : 1,
escape   : false

然后是scripts/helpers/next-url.js中的第 69 行，需要将返回值最后多加一个 false:

复制

return htmlTag(tag, attrs, text, false);

直接照着改一下就可以了。

现在还没有太大的升级的动力，收藏两篇升级 8.x 用的文章，立一个 flag 等着hexo g超过 30 秒就把主题更新了。

https://github.com/next-theme/hexo-theme-next/issues/4
https://www.imczw.com/post/tech/hexo5-next8-updated.html

教程收藏

http://yearito.cn/tags/Hexo/