Next主题的简单优化(一)

Posted on | Edited on | In | Comments: | Views:

前言

之前匆匆忙忙建站，没有加评论、搜索、数据统计与分析、搜索功能等等，这些功能对于搭建博客也是很重要的。参考了很多大佬的博客，受益匪浅，以下是我的一些摸索。

实际上Next主题的官方文档非常详细了，建议多查看。

Next主题版本：Muse v6.3.0

评论系统

一开始按照Next主题的官方文档配置来必力评论系统，但是后来发现来必力加载速度有点慢。于是转用基于LeanCloud的评论系统Valine，Valine也是有官方文档的（看官方文档可是个好习惯）。

简要步骤如下：

1.获取APP ID和APP Key。首先在LeanCloud注册自己的账号。进入控制台创建应用。应用创建好以后，进入刚创建的应用，选择设置>应用Key，就能看到APP ID和APP Key了：

2.设置安全域名 :

3.修改主题配置文件中的Valine部分 :

（未开邮件提醒​​）

文件位置：themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid: your APP ID
  appkey: your Key
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: monsterid # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

4.如需取消某个页面/文章 的评论，在 md 文件的 front-matter 中增加 comments: false。

数据统计与分析

文章阅读量统计

1.仍然使用LeanCloud。按下图创建Class，Class名称必须为Counter。

2.修改主题配置文件中的leancloud_visitors配置项：

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: 
  app_key:

博客访问量统计

用的是不蒜子统计，修改主题配置文件中的busuanzi_count的配置项，当enable: true时，代表开启全局开关。

1
2
3
4
5
6
7
8
9
10
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

博客图标

网站的默认图标不是特别好看，因此换成了现在的小鱼。

修改方法：

1.到这个神奇的网站EasyIcon找心仪的图标，下载32PX和16PX的ICO格式，并把它们放在/themes/next/source/images里。

2.修改主题配置文件中的favicon配置项，其中small对应16px的图标路径，medium对应32px的图标路径。

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16.ico
  medium: /images/favicon-32x32.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

博客运行时间

来源reuixiy的博客。

文件位置：themes/next/layout/_custom/sidebar.swig（其中的BirthDay改成自己的）

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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/20/2018 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

文件位置：themes/next/layout/_macro/sidebar.swig (其中加上带加号的那句)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 {# Blogroll #}
        {% if theme.links %}
          <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
              {{ theme.links_title }}&nbsp;
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
            </div>
            <ul class="links-of-blogroll-list">
              {% for name, link in theme.links %}
                <li class="links-of-blogroll-item">
                  <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
                </li>
              {% endfor %}
            </ul>
+        {% include '../_custom/sidebar.swig' %} 
          </div>
         {% endif %}

搜索功能

文件位置：themes/next/_config.yml

1
2
3
4
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: ture

安装插件

1
$ npm install hexo-generator-search --save

但是我在安装插件的时候一直报错

1
2
3
4
5
6
7
8
9
10
npm ERR! path /home/song/hexo/test/node_modules/babylon
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access '/home/song/hexo/test/node_modules/babylon'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/song/.npm/_logs/2018-11-11T06_59_34_564Z-debug.log

解决办法：

1
2
$ npm install -g cnpm --registry=http://registry.npm.taobao.org
$ cnpm install hexo-generator-search --save

预告

1.关于更新主题

2.关于如何推广博客

3.评论邮件提醒

0%