我对这个博客做了什么

发表于 更新于 分类于 阅读次数： 本文字数： 4.4k 阅读时长 ≈ 4 分钟

  原本是想记笔记，写一些技术性的东西。然而现在为止好像还没有干啥正事。那我对这个博客做了些什么呢？干了这些：

重新配置

按这个步骤重新配置了一遍。之前不知道从哪里下载的一个山寨版还是啥的，应该是老版本，很多东西都没有。所以重新下载了最新版本。折腾了好久。对了，还干了好多无用功。网上搜来的很多教程版本都比较老。别马上按着别人的办法干，先看看主题的配置文件，或官方的文档。

插入脚注

请参见此神仙[1]。

封面模式

参见[11]。下载这个插件：

1
npm install --save hexo-less

语法是在封面后面加上

1
<!--less-->

这样前面的部分不会显示到文章主题部分。可以搞一张图片就完美了。

1
2
![封面](图片地址)
<!--less->

设置标签云

按照这位大仙[3]的操作弄好了标签云，但是发现它不在正中啊。于是找到了tag cloud的github。里面有一句：

1
<canvas width="250" height="250" id="resCanvas" style="width:100%">

那个100%前面是一个冒号，而大仙[3]写做等号。我发现等号就偏右边，冒号就在正中，很奇怪。

侧边栏圆角

搜索到这位大神[8]。我的Scheme选的是Pisces，所以先在next/source/css/_variables/Pisces.styl里面改一下变量

1
$border-radius                    = 5px;

然后到next/source/css/_schemes/Pisces/_layout.styl里面的.header-inner(对应菜单栏)字段改

1
border-radius: $border-radius;

在.content-wrap(对应文章页面)字段改

1
border-radius: $border-radius;

如此改完，然后……不对劲。在主页菜单栏和文章页面确实变圆角了，然而站点概况不是圆角。然而往下拖动，直到看不到菜单栏的时候，站点概况就变圆角了，不能忍。所以可能还要改siderbar字段。可惜_layout.styl里面木有。诶，我发现有next/source/css/_schemes/Pisces/_sidebar.styl文件。打开看。果然找到了。.sidebar字段是没有border-radius变量的，于是我添加了

1
border-radius: $border-radius;

除此以外，还看到了.sidebar-inner字段。也一并改了。这下就大功告成了。忘了说。这些字段的另一个变量是background，把它替换成

1
background: rgba(255,255,255,0.9);

就可以让博客变透明了。

站内引用语法

这样:

1
{% post_link post_name %}

出来默认是博文题目，或者自己取个名字。

1
{% post_link post_name 点击查看%}

设置网站图标

同样来自这位大神[2]。最重要的是找到自己喜欢的图片放在next/source/images里，然后在next/_config.yml里这样干就好了：

1
2
3
4
5
6
favicon:
  small: /images/j-icon-16x16.png
  medium: /images/j-icon-32x32.png
  apple_touch_icon: /images/icon.png
  safari_pinned_tab: /images/icon.png

首页文章加框

设置请查看hexo next首页文章加框

添加版权信息

根据此大仙[5]的说明弄好了以后，发现署名”前面的cc图标老是乱码（一个叉）。那怎么可以，弄了半天没弄好。结果人家next已经集成了。在next/_config.yml里面这样就好了。

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

加动态背景图片

根据这位大仙[7]的方法弄的。
动态图片感觉太慢了。我在百度下了一个，有阳光森林，人，牛。感觉还不错，希望不要侵权。

点击头像回到主页

设置请查看这篇文章

参见[10]。首先安装程序：

1
npm install hexo-abbrlink --save

然后在_config.yml中设置：

1
2
3
4
5
6
7
8
permalink: posts/:abbrlink/
abbrlink:
  alg: crc32
  rep: hex
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks

footer添加运行时间

参见[9]。找到/next/layout/_partials/footer.swig，在里面添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
<span id="timeDate">Loading days...</span><span id="times">Loading sec....</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("05/26/2020 00:00:00");
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "Running safely for: "+dnum+" d ";
        document.getElementById("times").innerHTML = hnum + " h " + mnum + " m " + snum + " s";
    }
setInterval("createtime()",250);
</script>
</div>

本来大神[9]是写的中文，但我的出来是乱码，就改成了英文了。

字数和阅读时长统计

请参见[4]，或者请查看next网站字数统计。

添加google广告到post

参见[6]。

隐藏网页底部 powered By Hexo

股沟出此大神[2]的方法。
但事实上next已经集成了这个功能，直接在next/_config.yml里将powered改为false就可以了，像这样：

1
2
3
4
footer：
   xxx
   powered: false
   xxx
  1. 1.https://github.com/kchen0x/hexo-reference ↩
  2. 2.https://blog.csdn.net/as480133937/article/details/100138838 ↩
  3. 3.https://blog.csdn.net/Aoman_Hao/article/details/89416634 ↩
  4. 4.https://github.com/theme-next/hexo-symbols-count-time ↩
  5. 5.https://wylu.me/posts/e0424f3f/ ↩
  6. 6.https://juejin.im/post/5c95d230e51d45124e35cef6#comment ↩
  7. 7.https://blog.diqigan.cn/posts/add-background-picture-for-next.html ↩
  8. 8.http://eternalzttz.com/hexo-next.html ↩
  9. 9.https://www.93bok.com/Hexo网站运行时间添加/ ↩
  10. 10.https://github.com/Rozbo/hexo-abbrlink ↩
  11. 11.https://github.com/fuchen/hexo-less ↩