博客折腾记录

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
字数统计: 3.4k | 阅读时间 ≈ 14

之前一直没有记录修改&优化博客的过程，其实这是一个不太好的习惯，现在都忘了自己修改过哪些地方了(虽然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/ 为一下内容：

1
2
3
4
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中加入以下代码，可以自动展开二级标题。

1
2
3
.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

1
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的设置复制过去，就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
{% 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的代码复制过去，就大功告成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{% 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，增加下面几行。

1
2
3
4
5
6
7
8
9
10
11
# 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代理和取消

1
2
3
4
5
6
7
# 设置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

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

1
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改成

1
2
mid_size : 1,
escape   : false

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

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