hexo+next博客美化——增加插件

发表于 更新于 分类于 评论数： 阅读次数： 本文字数： 6k 阅读时长 ≈ 10 分钟

本章概述：hexo+next博客美化——增加插件

增加第三方插件可以增强网站的功能、美化网站的界面。

1、网站链接优化

本地访问我们的博客网站会发现我们的URL有时候很长，因为在站点配置文件中默认是年月日然后网站目录最后再是文章的名字，所以我们的URL经常就很长一大串，不美观，而且对搜索引擎也不太友好，所以我们需要优化URL。这里需要下载一个插件——hexo-abbrlink。

1
cnpm install hexo-abbrlink --save

然后在站点配置文件中找到permalink，并修改成以下内容

1
2
3
4
permalink: post/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

弄好后重新hexo clean一下，我们的链接就会变短并且会经过算法处理。

2、文章字数统计、阅读时长估计

安装插件

1
npm install hexo-word-counter

然后在站点配置文件中增加以下内容

1
2
3
4
5
6
7
8
9
10
#文章字数与阅读时长统计
symbols_count_time:
  symbols: true               # 文章字数统计
  time: true                  # 文章阅读时长
  total_symbols: true         # 站点总字数统计
  total_time: true            # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计
  awl: 2                      # 每个单词所占字符数，中文建议设置为2，英文建议设置为4
  wpm: 300                    # 每分钟阅读单词数，中文建议设置为300，英文建议设置为275
  suffix: "mins"              # 时间单位

更改主题配置文件中配置

1
2
3
4
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true  #底部footer是否显示字数统计属性文字(如站点总字数,站点阅读时长 ≈ 1 分钟)
3、添加网站运行时间

添加网站运行时间需要改动next主题源码。进入themes/next/layout/_partials 目录，打开 footer.njk 文件。在最后一行{{- next_inject('footer') }}前添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("07/31/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 = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>
</div>
4、本地搜索功能

安装插件

1
cnpm install hexo-generator-searchdb

然后在主题配置文件中搜索local_search配置，将enable改为true，重新运行后会在侧边栏增加搜索选项。这里我还另外对搜索框的样式做了改变。

1
2
3
4
//搜索框（local-search）的透明度设置
.popup{
  opacity: 0.85;
}
5、增加加载效果

在主题配置文件找到vendors选项，添加pace的cdn地址。

1
2
3
4
5
6
7
8
9
10
11
12
13
pace: https://cdn.jsdelivr.net/npm/pace-js@1.2.4/pace.min.js
pace_css: 
  blue:            
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-barber-shop.min.css
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-big-counter.min.css
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-bounce.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-center-atom.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-center-circle.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-center-radar.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-center-simple.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-corner-indicator.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-fill-left.min.css,
    https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-flash.min.css

然后在pace选项开启加载效果并设置加载类型，这里需要注意，CSS文件需要对应加载效果的颜色和类型，具体可以去jsdelivr看看，这个网站需要上外网才能看到，我喜欢蓝色，所以我把蓝色相关的CSS的链接都给拷贝到配置项里去，当然，大家选择喜欢的颜色喜欢的效果然后复制链接即可。

6、添加网页标题崩溃欺骗搞怪特效

在next\source\js文件夹中创建crash_cheat.js，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        document.title = '(ˉ(∞)ˉ)主人,快回来呀~~';
        clearTimeout(titleTime);
    }
    else {
        document.title = '(๑>؂<๑)欢迎回来！' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

然后在layout目录的_layout.njk文件末尾添加以下内容

1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>
7、增加评论功能

以前next老版本我是直接用的valine，然后用leancloud作为评论系统，但是我现在用的next8.12.1版本发现已经新版本已经弃用valine了。试用了畅言以及livere，发现这两个都需要登录才能发表评论，不太喜欢，因此上必应找了找，发现了一个新的Waline评论系统，支持leadcloud，因此我这里主要讲这个新的系统怎么搭建。

7.1、LeadCloud搭建

LeadCloud搭建方法很简单，注册然后创建应用即可，但是大家要注意，注册的时候需要注册国际版，注册国内版的话需要绑定域名，绑定域名就需要域名有备案才行。所以这里注册国际版比较方便。创建好应用之后在设置里头有个应用凭证，把AppId，AppKey，MasterKey三个复制下来，后面需要用到。

7.2、Vercel 部署

Vercel登录支持github直接登录，在创建账号页面直接选择github快速登录即可！

上一步项目创建后会基于waline进行初始化仓库，这个过程大概需要一两分钟，创建完后点击Go to Dashboard就可以跳转到应用控制台。

点击顶部的Settings的Environment Variables进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名。

环境变量配置好之后，点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

等部署状态变为Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

没有域名的可以跳过，有域名的建议绑定自定义域名，这样你访问也比较方便，但是我个人建议是买一个域名，毕竟一个域名一年也才几十块钱，有了域名你也可以自定义自己的博客，域名可以在腾讯云等平台上购买。

绑定域名点击顶部的 Settings - Domains 进入域名配置页，输入需要绑定的域名并点击 Add

之后添加新的 CNAME 解析记录，指向cname.vercel-dns.com，然后等待生效即可！

  • 评论系统：example.yourdomain.com
  • 评论管理：example.yourdomain.com/ui

管理后台需要创建个账号，不要开启两步验证，两步验证太麻烦了。

7.3、安装插件并启用
1
cnpm install @waline/hexo-next

在主题配置文件末尾添加以下内容，或者在评论系统那里添加也行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Waline
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:
  enable: true
  serverURL: example.yourdomain.com  # vercel 域名
  placeholder: 欢迎评论！ # #评论框的默认文字
  avatar: mm # 头像风格
  meta: [nick, mail, link] # 自定义评论框上面的三个输入框的内容
  pageSize: 10 # 评论数量多少时显示分页
  lang: zh-cn # 语言, 可选值: en, zh-cn
  # Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.
  visitor: false # 文章阅读统计
  comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
  requiredFields: [] # 设置用户评论时必填的信息，[nick,mail]: [nick] | [nick, mail]
  libUrl: # Set custom library cdn url

除了上面的这种免费部署之外，我们还可以把服务端部署在云服务器上、云函数上等等，具体的参考Waline官网。我的是部署在腾讯云CloudBase上的，部署方法很简单，官网上有介绍，而且有免费资源可以用，阿里云也可以，阿里云每个月也有免费资源，然后数据库我也没有部署在LeadCloud上，而是部署在腾讯云开发的数据库上，也有免费额度，我觉得够用了，说实话，部署在服务器上或者云函数上比较好，因为免费的访问很慢，经常加载不出来评论区。

8、图片单击放大

图片缩放不用安装插件，next主题已经内置了，我们只需要在配置文件中开启即可。

1
2
3
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: true

主题优化就到这里，主题配置文件里头还有很多杂七杂八的配置，建议有空的时候多了解了解，尽可能的把自己的网站给优化好。