博客折腾记录

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

things to do

  • 修改站点下博客文章存放目录
  • 侧边栏toc自动展开
  • 评论系统更换为valine
  • 站点自动备份系统
  • 文章分类、归档页面优化
  • 代码块优化
  • next版本升级
  • SEO优化
  • leetcode文章归档
  • 不再使用notshow来隐藏文章

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

这个其实是在找解决如何将侧边栏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版本已经到6点多,并且在另外一个仓库中。所以又想把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

文章分类、归档页面优化

查了一下才发现,原来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/84894713https://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的文章

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

教程收藏

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