博客折腾记录

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

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

设置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/