本网站的主题修改主要参照这位大佬的博客，但其边缘波动的部分配置是无效的，下文有详细介绍。

1 站点基本优化

1.1 基本信息配置

NexT主题默认风格为Muse，可以在主题目录的配置文件_config.yml，注意这不是根目录下网站的配置文件

1
2
3
4
5

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

而根目录下的_config.yml文件负责站点的相关配置包括了网站标题、网站描述、网站语言等

1
2
3
4
5
6
7

# Site
title: Chou Bin's Blog
subtitle: ''
description: '慢就是快，快就是慢'
keywords:
author: Chou Bin
language: zh-CN

1.2 生成标签、分类、归档页面

主题首页的默认页面中是没有标签、分类、归档页面的，需要手动生成一下。先在博客根目录下打开git-bash或终端，然后键入以下命令

1

hexo new page tags && hexo new page categories && hexo new page archives

然后打开新增的source/tags/index.md，修改如下

1
2
3

  title: 标签
  date: 2018-10-19 22:57:00
+ type: tags

同理再修改另外两个新增文件夹下的index.md。

最后修改主题配置文件的menu字段

1
2
3
4
5
6

menu:
  home: / || home
  about: /about/ || user
+ tags: /tags/ || tags
+ categories: /categories/ || th
+ archives: /archives/ || archive

效果如下

1.3 首页显示文章摘要

默认的主题配置里，首页会显示每一篇文章的全文，如果想只显示文章摘要，对主题配置文件做如下更改

1
2
3

auto_excerpt:
  enable: true  # 开启自动摘要提取
  length: 150

此时文中的前150个字符将作为摘要。

用户可以在文章中通过<!-- more -->标记来精确划分摘要信息，标记之前的段落将作为摘要显示在首页。

如果在文章的 Front-Matter 中有非空的 description 字段，则该字段的内容会被作为摘要显示在首页。

1.4 修改站点页脚

在主题配置文件中修改网站页脚信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14

footer:  # 底部信息区
  since: 2018  # 建站时间
  icon:
    name: heart   # 图标名称
    animated: true   # 开启动画
    color: "#ff0000"   # 图标颜色

  powered:
    enable: false  # 隐藏由 Hexo 强力驱动
    version: false  # 隐藏 Hexo 版本号

  theme:
    enable: false  # 隐藏所用的主题名称
    version: false  # 隐藏主题版本号

更改后效果如本站底部，但字数统计和访问统计等在后续配置中。

1.5 修改网站 Favicon

Favicon 即浏览器标签左侧的图标。下载自己喜欢的图标置于 themes\next\source\images\ 目录下，命名方式参考主题配置文件中的 favicon 字段。 这里介绍一个在线制作 favicon的网站，可以上传喜欢的图片制作成favicon。

1
2
3
4
5

favicon:
  small: /images/favicon-16x16-next.png  # 小图标
  medium: /images/favicon-32x32-next.png  # 大图标
  apple_touch_icon: /images/apple-touch-icon-next.png  # 苹果图标
  safari_pinned_tab: /images/logo.svg  # safari浏览器标签页图标

1.6 添加友情链接

在主题配置文件中修改相应的字段，可以加入一些朋友的网站。

1
2
3
4
5

links_icon: link
links_title: 友情链接
links_layout: inline
links:
  yearito: http://choubin.site

1.7 添加社交链接

默认可选选项中，国内能用的基本只有github，邮箱，微博，当然其他只要有账号就可以放上去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

social:
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Weibo: https://weibo.com/yourname || weibo
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  FB Page: https://www.facebook.com/yourname || facebook
  VK Group: https://vk.com/yourname || vk
  StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  YouTube: https://youtube.com/yourname || youtube
  Instagram: https://instagram.com/yourname || instagram
  Skype: skype:yourname?call|chat || skype

social_icons: 
  enable: true  # 显示社交软件图标
  icons_only: false  # 显示图标的同时显示文字

1.8 添加版权协议

先在主题配置文件中开启相关字段

1

creative_commons: by-nc-sa

2 网站逻辑优化

2.1 点击头像回到首页

修改侧边栏模板代码

1
2
3
4
5
6
7

  {% if theme.avatar.url %}
+   <a href="/">
      <img class="site-author-image" itemprop="image"
        src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
        alt="{{ author }}" />
+   </a>
  {% endif %}

2.2 文章页优化

取消文章目录中的数字编号，因为一般我写markdown文档的时候都是自己为章节编号，所以需要取消主题中的文章目录的数字编号，否则就会有两个数字很别扭。

1
2

toc:
  number: false  # 关闭目录中的数字编号

默认情况下文章的多级目录会被折叠，需要点击才能触发下级菜单的展开，并且同时只能展开一个目录分支，这会造成看文章点击目录很不方便，所以本站点设置了展开全部目录层级，这里需要新建一个自定义样式文件themes\next\source\css\_custom\custom.styl，然后添加以下代码。

1
2
3
4

//TOC目录默认全部展开
.post-toc .nav .nav-child {
  display: block;
}

因为这里是第一次新建自定义样式文件，还需要做如下修改，在 themes\next\layout\_layout.swig 文件中引入刚才新建的文件

1
2
3
4
5
6
7
8

      ...
      {% include '_third-party/exturl.swig' %}
      {% include '_third-party/bookmark.swig' %}
      {% include '_third-party/copy-code.swig' %}

+     {% include '_custom/custom.swig' %}
    </body>
  </html>

另外如果文章不长，就没必要展示目录了，否则侧边文章目录栏空荡荡的也有点别扭。这里需要修改侧边栏的布局模板相关逻辑代码

1
2

- {% set display_toc = is_post and theme.toc.enable %}
+ {% set display_toc = is_post and theme.toc.enable and not page.hide_toc %}

2.3 修改文章 meta 信息

默认主题下， 标题下方会显示文章的创建时间、文章的修改时间、文章分类信息等元数据，用户可以在主题配置文件中自定义设置需要显示的 meta 元信息：

1
2
3
4
5
6
7

post_meta:
  item_text: true  # 显示文字说明
  created_at: true  # 显示文章创建时间
  updated_at:
    enabled: false  # 隐藏文章修改时间
    another_day: true  # 只有当修改时间和创建时间不是同一天的时候才显示
  categories: false  # 隐藏分类信息

3 主题定制优化

3.1 修改博客字体

在 Google Fonts 上找到心仪的字体，然后在主题配置文件中为不同的应用场景配置字体：

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

font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family:

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family:

3.2 为标签添加图标

默认情况下标签前缀是 # 字符，用户可以通过修改主题源码将标签的字符前缀改为图标前缀

1
2
3
4
5
6
7
8
9
10
11

  <footer class="post-footer">
    {% if post.tags and post.tags.length and not is_index %}
      <div class="post-tags">
        {% for tag in post.tags %}
-          <a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>
+          <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tags"></i> {{ tag.name }}</a>
        {% endfor %}
      </div>
    {% endif %}
    ...
  </footer>

Next 中使用 FontAwesome 作为图标库，用户可以在 FontAwesome 上找到心仪的图标来替换标签的字符前缀。

3.3 添加结束标记

在文末添加结束标记，效果如下：

新建布局模板文件 post-end-tag.swig，添加如下代码：

1
2
3
4
5
6
7
8
9

<div>
  {% if not is_index %}
    <div style="text-align:center;color:#bfbfbf;font-size:16px;">
      <span>-------- 本文结束 </span>
      <i class="fa fa-{{ config.post_end_tag.icon }}"></i>
      <span> 感谢阅读 --------</span>
    </div>
  {% endif %}
</div>

在文章布局模板中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{#####################}
{### END POST BODY ###}
{#####################}

+ {% if config.post_end_tag.enabled and not is_index %}
+   <div>
+     {% include 'post-end-tag.swig' %}
+   </div>
+ {% endif %}

{% if theme.wechat_subscriber.enabled and not is_index %}
  <div>
    {% include 'wechat-subscriber.swig' %}
  </div>
{% endif %}

在站点配置文件末尾添加如下代码

1
2
3

post_end_tag:
  enabled: true  # 是否开启文末的本文结束标记
  icon: paw # 结束标记之间的图标

3.4 页面加载进度条

当网络不好的时候可能会在打开站点或跳转文章时出现短暂的白屏，此时如果能有加载进度提示将会提高用户操作体验。

在根目录下执行以下命令安装相关依赖：

1

$ git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace

在主题配置文件中设置 pace: true。

默认提供了多种主题的进度条加载样式，有顶部提示的，有中间提示的，还有全页面遮挡提示的，默认进度条就非常合适。

3.5 侧边栏放左边

Next 主题的各种主题风格中只有 Pisces 和 Gemini 支持通过主题配置文件来将侧边栏置于左侧或右侧，而 Muse 和 Mist 则需要深度修改源码才能实现改变侧边栏位置。

在上文新建的自定义样式文件中添加如下代码

1
2
3
4
5
6
7

.sidebar-toggle {
  left: 30px;
}

.sidebar {
  left: 0px;
}

修改动效脚本代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(document)
  .on('sidebar.isShowing', function() {
    NexT.utils.isDesktop() && $('body').velocity('stop').velocity(
-     {paddingRight: SIDEBAR_WIDTH},
+     {paddingLeft: SIDEBAR_WIDTH},
      SIDEBAR_DISPLAY_DURATION
    );
  })
  .on('sidebar.isHiding', function() {
  });
  ...
  hideSidebar: function() {
-   NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingRight: 0});
+   NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingLeft: 0});
    this.sidebarEl.find('.motion-element').velocity('stop').css('display', 'none');
    this.sidebarEl.velocity('stop').velocity({width: 0}, {display: 'none'});

    sidebarToggleLines.init();
    ...
}

如此以来就可以将侧边栏放置在左边了，但当窗口宽度缩小到 991px 之后会出现样式错误：侧边栏收缩消失但是页面左侧仍留有空白间距，此时修改如下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

body {
  position: relative; // Required by scrollspy
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color;
  background: $body-bg-color;

- +mobile() { padding-left: 0 !important; }
- +tablet() { padding-left: 0 !important; }  
+ +mobile() { padding-right: 0 !important; }
+ +tablet() { padding-right: 0 !important; }
  +desktop-large() { font-size: $font-size-large; }
}

4 添加个性特效

4.1 边缘摆动效果

个人一直认为，博客是给人阅读的，而添加一些花里胡哨的动态背景，实在有违博客初衷。可是过于朴素又失去了趣味性，故而加入了一个边缘摆动效果，个人觉得还有点小俏皮，效果如下。

但上文提到的博客中的教程有点小问题，添加的代码路径出错了，导致无法成功显示特效。个人亲测有用，修正如下。

首先下载脚本，置于 themes\next\source\js\ 目录下 ，然后将以下代码添加到 themes\next\layout\_layout.swig，原教程中是添加到 themes\next\layout_custom\custom.swig ，亲测无效。

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
35
36
37
38
39
40
41
42
43

{# wobble窗口摆动特效 #}
{% if theme.wobble %}
  <script src="/js/wobblewindow.js"></script>
  <script>
    //只在桌面版网页启用特效
    if( window.innerWidth > 768  ){
      $(document).ready(function () {
        {% if theme.wobble.header %}
          $('#header').wobbleWindow({
            radius: {{ theme.wobble.radius }},
            movementTop: false,
            movementLeft: false,
            movementRight: false,
            debug: false,
          });
        {% endif %}

        {% if theme.wobble.sidebar %}
          $('#sidebar').wobbleWindow({
            radius: {{ theme.wobble.radius }},
            movementLeft: false,
            movementTop: false,
            movementBottom: false,
            position: 'fixed',
            debug: false,
          });
        {% endif %}

        {% if theme.wobble.footer %}
          $('#footer').wobbleWindow({
            radius: {{ theme.wobble.radius }},
            movementBottom: false,
            movementLeft: false,
            movementRight: false,
            offsetX: {{ theme.wobble.offset }},
            position: 'absolute',
            debug: false,
          });
        {% endif %}
      });
    }
  </script>
{% endif %}

然后在自定义样式文件中添加一下样式，注意是在themes\next\source\css\_custom\custom.styl文件中添加，这里的代码也与原教程中稍有不同。

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

//窗口波动效果相关样式
if hexo-config('wobble')  {
  .sidebar {
    box-shadow: none;
  }

  .wobbleTransparentBK{
    background-color: rgba(0,0,0,0) !important;
  }

  .wobbleTransparentLine{
    border-color: rgba(0,0,0,0) !important;
  }

  //Next.Muse中为Header和Footer添加背景色
  .header, .footer {
    background-color: rgb(245, 245, 245);
  }

  //防止sidebar和footer同时开启动效时堆叠异常
  .sidebar, .header {
    z-index: 1 !important;
  }

  //防止挡住页末文章的阅读全文按钮
  .main {
    padding-bottom: 200px;
  }
}

主要是因为 Next.Muse 主题方案中 Header 和 Footer 是没有背景色的，所以需要添加背景色后才能看出边缘摆动效果。另外，实现边缘摆动效果所需的 z-index 属性可能会导致元素堆叠异常，需要添加以上样式来矫正。

最后在主题配置文件中添加以下代码

1
2
3
4
5
6
7

# window woblle
wobble:
  enable: true  # 是否开启边缘波动效果
  radius: 65  # 波动半径
  sidebar: false  # 不开启侧边栏边缘摆动，设为true的话则目录的侧边栏也会摆动
  header: true  # 开启头部边缘摆动
  footer: true  # 开启脚部边缘摆动

4.2 使用小猫咪回到顶部

就像本站一样，使用右侧的小猫咪来回到顶部，还蛮可爱的，建议添加。

原理就是将 back-to-top按钮添加图片背景，然后添加CSS3动效。这里用的图片素材就是一个小猫上吊的图片，点这里下载，然后放置到 source\images\ 目录下 。

然后在自定义样式文件中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//自定义回到顶部样式
.back-to-top {
  right: 60px;
  width: 70px;  //图片素材宽度
  height: 900px;  //图片素材高度
  top: -900px;
  bottom: unset;
  transition: all .5s ease-in-out;
  background: url("/images/scroll.png");

  //隐藏箭头图标
  > i {
    display: none;
  }

  &.back-to-top-on {
    bottom: unset;
    top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
  }
}

4.3 鼠标点击特效

鼠标点击特效常用的有礼花特效、爆照特效、浮出特效、浮出文字，礼花特效如下图所示，个人比较中意礼花特效，可以点击下方按钮下载相应脚本 并置于 themes\next\source\js\cursor\ 目录下

然后在主题自定义布局文件照片那个添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12

{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
  <script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
  <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  <script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
  <script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
  <script async src="/js/cursor/text.js"></script>
{% endif %}

若该文件不存在则新建后见步骤2.2。

然后在主题配置文件中添加以下代码

1
2

# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks

4.4 打字特效

这里的特效是为评论输入文字时添加的特效，关于如何添加评论功能见步骤6.4。

点击这里 下载相应脚本，并置于 themes\next\source\js\ 目录下。

然后在主题自定义布局文件中添加以下代码

1
2
3
4
5
6
7
8
9

{# 打字特效 #}
{% if theme.typing_effect %}
  <script src="/js/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = {{ theme.typing_effect.colorful }};
    POWERMODE.shake = {{ theme.typing_effect.shake }};
    document.body.addEventListener('input', POWERMODE);
  </script>
{% endif %}

如果 custom.swig 文件不存在则需要新建，然后见步骤2.2。最后在主题配置文件中添加以下代码

1
2
3
4

# typing effect
typing_effect:
  colorful: true  # 礼花特效
  shake: false  # 震动特效

5 站点数据统计

5.1 站点访问量统计

使用不蒜子来实现， 由于不蒜子是基于域名来进行统计计算的，所以通过 localhost:4000 端口访问的时候统计数据 PV 和 UV 都会异常的大，属于正常现象。

在页脚布局模板文件首行添加如下代码：

1
2
3
4

<script
  async
  src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"
></script>

在主题配置文件中做如下修改

1
2
3
4
5
6
7
8

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  {% if theme.busuanzi_count.total_visitors %}
-   <span class="site-uv" title="{{ __('footer.total_visitors') }}">
+   <span class="site-uv">
+     {{ __('footer.total_visitors', '<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>') }}
-     <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
-     <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
    </span>
  {% endif %}

  {% if theme.busuanzi_count.total_views %}
-   <span class="site-pv" title="{{ __('footer.total_views') }}">
+   <span class="site-pv">
+     {{ __('footer.total_views', '<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>') }}
-     <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
-     <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
    </span>
  {% endif %}

在自定义样式文件中添加如下样式

1
2
3
4

//修改不蒜子数据颜色
.busuanzi-value {
  color: #1890ff;
}

然后修改表述文案

1
2
3
4

footer:
  total_views: "历经 %s 次回眸才与你相遇"
  total_visitors: "我的第 %s 位朋友，"

5.2 站点运行时间统计

效果如下：

在自定义布局文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{# 页脚站点运行时间统计 #} {% if theme.footer.ages.enable %}
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
<script>
  function timer() {
    var ages = moment.preciseDiff(moment(),moment({{ theme.footer.ages.birthday }},"YYYYMMDD"));
    ages = ages.replace(/years?/, "年");
    ages = ages.replace(/months?/, "月");
    ages = ages.replace(/days?/, "天");
    ages = ages.replace(/hours?/, "小时");
    ages = ages.replace(/minutes?/, "分");
    ages = ages.replace(/seconds?/, "秒");
    ages = ages.replace(/\d+/g, '<span style="color:{{ theme.footer.ages.color }}">$&</span>');
    div.innerHTML = `{{ __('footer.age')}} ${ages}`;
  }
  var div = document.createElement("div");
  //插入到copyright之后
  var copyright = document.querySelector(".copyright");
  document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
  timer();
  setInterval("timer()",1000)
</script>
{% endif %}

如果该文件不存在，则手动新建，见步骤2.2。

然后修改主题配置文件

1
2
3
4
5
6
7
8
9

  footer:
    ...
+   ages:
+     # site running time
+     enable: true
+     # birthday of your site
+     birthday: 20181001
+     # color of number
+     color: "#1890ff"

然后补全对应文案

1
2
3
4
5
6

  footer:
    powered: "由 %s 强力驱动"
    theme: 主题
+   age: 我已在此等候你
    total_views: "历经 %s 次回眸才与你相遇"
    total_visitors: "我的第 %s 位朋友，"

5.3 文章访问量统计

这里需要借助LeanCloud来提供后端数据服务。

在 LeanCloud 上注册账号并创建应用，应用名称可以为ForBlog，然后在该应用中，新建一个名为 Counter 的 Class，ACL 权限设置为 无限制：

在控制台的 设置 -> 应用 Key 中获取 App ID 和 App Key 填入到主题配置文件中：

1
2
3
4
5
6

leancloud_visitors:
  enable: true
  app_id: ***<app_id***
  app_key: ***<app_key>***
  security: false
  betterPerformance: false

站点上线后可以在 设置 -> 安全中心 中添加博客域名到 Web 安全域名中，设置后仅可在该域名下通过 JavaScript SDK 调用服务器资源，借以保护 LeanCloud 应用的数据安全。

如果想要自定义 PV 表述文案，可以修改文章布局模板中的相关代码：

1
2
3
4
5
6
7
8
9

  {# LeanCould PageView #}
    ...
    {% if theme.post_meta.item_text %}
-     <span class="post-meta-item-text">{{__('post.views') + __('symbol.colon') }}</span>
+     <span class="post-meta-item-text">{{__('post.views')}} </span>
    {% endif %}
    <span class="leancloud-visitors-count"></span>
+   <span>℃</span>
    ...

修改统计表述文案

1
2

post:
  views: 热度

如遇到报错，在主题配置中设置security: false。

5.4 站点及文章字数统计

目前由 hexo-symbols-count-time 提供的字数统计功能需要NexT主题的版本在v7.5或更高才能有效，否则会出现站点总字数比文章总字数更少的bug，留待有空的时候再解决吧。

6 部分功能扩展

6.1 搞怪网页标题

离开和进入页面时动态修改 Tab 标签中的标题。 效果如下

在主题自定义布局文件中添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{# 搞怪网页标题 #} {% if theme.title_trick.enable %}
<script>
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      document.title = "{{ theme.title_trick.leave }}" + OriginTitile;
      clearTimeout(titleTime);
    } else {
      document.title = "{{ theme.title_trick.enter }}" + OriginTitile;
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
</script>

如果首次新建该文件的话，见步骤2.2。

然后在主题配置文件中添加以下代码

1
2
3
4
5

# a trick on website title
title_trick:
  enable: true
  leave: "(つェ⊂)看不见我看不见我"
  enter: "(*´∇｀*) 咦，竟然被你发现了~"

6.2 添加站内搜索

该功能由 hexo-generator-searchdb 提供 ，在根目录下执行以下命令

1

npm install hexo-generator-searchdb --save

在主题配置文件中修改相关字段：

1
2
3
4
5

local_search: 
  enable: true
  trigger: auto # 每次输入改变都执行搜索
  top_n_per_article: 3 # 每篇文章显示的搜索结果数量
  unescape: false

在站点配置文件中添加以下字段：

1
2
3
4
5

search:
  path: search.xml
  field: post # 指定搜索范围，可选 post | page | all
  format: html # 指定页面内容形式，可选 html | raw (Markdown) | excerpt | more
  limit: 10000

在自定义样式文件中添加如下样式规则来增加搜索弹窗的页边距：

1
2
3
4
5

//增加搜索弹窗的页边距
.local-search-popup #local-search-result {
  padding: 25px 40px
  height: calc(100% - 95px)
}

如果你同时在站点内启用了 wobblewindow 边缘摆动效果，则有可能会出现背景蒙版叠加在弹窗之前的问题，这种层级叠加异常的问题主要是因为 wobblewindow 中修改了弹窗父元素的 position 定位和 z-index 优先级，目前只能通过修改 localsearch 源码来修复该 Bug：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  $.ajax({
    url: path,
    dataType: isXml ? "xml" : "json",
    async: true,
    success: function(res) {
      // get the contents from search data
      isfetched = true;
-     $('.popup').detach().appendTo('.header-inner');
+     $('.popup').detach().appendTo('body');
      var datas = isXml ? $("entry", res).map(function() {
        return {
          title: $("title", this).text(),
          content: $("content",this).text(),
          url: $("url" , this).text()
        };
      }).get() : res;
      ...

6.3 热门文章排行

该功能是基于 LeanCloud 提供的后端服务支持，原博客教程中的脚本在我这里有点问题没有效果，参考了别的博客的代码。

具体实现方案如下：

在站点目录下执行以下命令新建页面

1

$ hexo new page top

在主题配置文件中新增一项菜单入口：

1
2
3
4
5
6
7

  menu:
    home: / || home
+   top: /top/ || signal
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive
    about: /about/ || user

在语言包中新增菜单中文：

1
2
3
4
5
6
7

  menu:
    home: 首页
    archives: 归档
    categories: 分类
    tags: 标签
    about: 关于
+   top: 排行榜

然后在新增的排行榜页面内添加以下内容，注意要替换掉LeanCloud的appId、appKey和你的博客地址：

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

---
title: 热门文章Top 10
comments: false
date: 2019-12-28 23:48:26
---

<div id="top"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script>AV.initialize("需要替换appID", "需要替换appKEY");</script>
<script type="text/javascript">
    var time=0
    var title=""
    var url=""
    var query = new AV.Query('Counter');
    query.notEqualTo('id',0);
    query.descending('time');
    query.limit(1000);
    query.find().then(function (todo) {
        for (var i=0;i<1000;i++){
            var result=todo[i].attributes;
            time=result.time;
            title=result.title;
            url=result.url;
            var content="<center>"+"<a href='"+"需要替换https://choubin.site"+url+"'>"+title+"</a>"+"<br />"+"<font color='#ff0000'>"+"热度："+time+"℃"+"</font>"+"<br /><br />"+"</center>";
            document.getElementById("top").innerHTML+=content
        }
    }, function (error) {
        console.log("error");
    });
</script>

<style>.post-description { display: none; }</style>

6.4 添加评论功能

在此使用valine，简洁美观，支持Markdown语法。同样需要 LeanCloud 的 App ID 和 App Key。在主题的配置文件中修改如下。

1
2
3
4
5
6
7
8
9
10
11

valine:
  enable: true
  appid:  ***<app_id***
  appkey: ***<app_key>***
  notify: false  # 收到新评论是否邮件通知
  verify: false  # 是否开启验证码
  placeholder:  # 默认填充文字
  avatar: mm  # 设置默认评论列表
  guest_info: nick,mail  # 评论区头部表单
  pageSize: 10  # 每页评论数
  visitor: true  # 同时开启文章阅读次数统计

6.5 文末版权声明

效果如图

在主题配置文件中开启文章底部的版权声明，版权声明默认使用 CC BY-NC-SA 4.0 许可协议，用户可以根据自身需要修改 licence 字段变更协议。

1
2
3

post_copyright:
  enable: true
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

默认版权声明中只有 本文作者、本文链接、版权声明 三项，如果你想添加更多内容，如 创建时间、修改时间、引用链接 等，需要修改版权声明的相关代码：

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!-- JS库 clipboard 拷贝内容到粘贴板-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>

<!-- JS库 sweetalert 显示提示信息-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<ul class="post-copyright">
  <!-- 本文标题 -->
  <li>
    <strong>{{ __('post.copyright.title') + __('symbol.colon') }} </strong>
    {{ post.title }}
  </li>

  <!-- 本文作者 -->
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
    {{ post.author | default(author) }}
  </li>

  <!-- 创建时间 -->
  <li>
    <strong>{{ __('post.created') + __('symbol.colon') }} </strong>
    {{ post.date.format("YYYY年MM月DD日 - HH时MM分") }}
  </li>

  <!-- 修改时间 -->
  <li>
    <strong>{{ __('post.modified') + __('symbol.colon') }} </strong>
    {{ post.updated.format("YYYY年MM月DD日 - HH时MM分") }}
  </li>

  <!-- 引用链接 -->
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    <a href="{{ post.url | default(post.permalink) }}" title="{{ post.title }}"
      >{{ post.url | default(post.permalink) }}</a
    >
    <span class="copy-path" title="点击复制引用链接"
      ><i
        style="cursor: pointer"
        class="fa fa-clipboard"
        data-clipboard-text="[{{ post.author | default(author) }}'s Blog | {{ post.title }}]({{ post.permalink }})"
        aria-label="{{ __('post.copy_success') }}"
      ></i
    ></span>
  </li>

  <!-- 版权声明 -->
  <li class="post-copyright-license">
    <strong
      >{{ __('post.copyright.license_title') + __('symbol.colon') }}
    </strong>
    {{ __('post.copyright.license_content', theme.post_copyright.license) }}
  </li>
</ul>

<script>
  var clipboard = new ClipboardJS(".fa-clipboard");
  clipboard.on("success", function(target) {
    var message = document.createElement("div");
    message.innerHTML =
      '<i class="fa fa-check-circle message-icon"></i><span class="message-content">' +
      target.trigger.getAttribute("aria-label") +
      "</span>";
    swal({
      content: message,
      className: "copy-success-message",
      timer: 1000,
      button: false
    });
  });
</script>

在版权样式文件中添加如下样式：

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

  background-color: transparent;
}

.copy-success-message {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  width: auto;
  margin: 16x 0px;
  vertical-align: top;
}

.copy-success-message .swal-content {
  margin: 0px 0px !important;
  padding: 10px 16px;
  line-height: 1em;
}

.copy-success-message .message-icon {
  color: #52c41a;
  margin-right: 8px;
}

.copy-success-message .message-content {
  font-size: 14px;
}

补全版权信息文案

1
2
3
4
5
6
7
8
9
10

post:
  created: 创建时间
  modified: 修改时间
  copy_success: 复制成功
  copyright:
    title: 本文标题
    author: 本文作者
    link: 引用链接
    license_title: 版权声明
    license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！"

在实际使用过程中，并非每篇文章都需要版权声明，如果转载了别人的文章，文末再出现个人版权声明就不太合适。此时可在 Front-Matter 中设定变量 copyright 用于控制是否显示版权信息。修改文章布局模板中相关代码，使得只有当主题配置文件中 post_copyright.enable 字段和 page.copyright 字段同时为 true 时才会插入版权声明：

1
2
3
4
5
6

- {% if theme.post_copyright.enable and not is_index %}
+ {% if theme.post_copyright.enable and page.copyright and not is_index %}
    <div>
      {% include 'post-copyright.swig' with { post: post } %}
    </div>
  {% endif %}

为了批量为每篇新文章设定该变量并赋默认值，可以修改草稿模板内容，这样以来每篇草稿发布为正文后都会默认显示底部版权信息：

1
2
3
4

  title: {{ title }}
  tags:
  categories:
+ copyright: true

或者在每次发布文章时，设定该变量。

6.6 添加打赏功能

启用主题配置文件中的打赏相关字段，并将个人收款码图片置于 themes\next\source\images\ 目录下，注意保持图片命名与配置文件中一致：

1
2
3

reward_comment:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.jpg

关闭悬停收款码上的文字抖动效果，可以在自定义样式文件中添加以下代码：

1
2
3
4

//关闭打赏收款码的文字抖动效果
#QR > div:hover p {
  animation: none;
}

注意原博客中，添加reward字段来控制 是否在本文章中添加打赏信息，然后修改文章布局模板中相关的判定条件将会导致网站首页变成归档，生成静态文件也会报错，故而在此没有采用。

6.7 添加图片灯箱

添加灯箱功能，实现点击图片后放大聚焦图片，并支持幻灯片播放、全屏播放、缩略图、快速分享到社交媒体等，该功能由 fancyBox 提供，效果如下

在根目录下执行以下命令安装相关依赖：

1

git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

在主题配置文件中设置 fancybox: true 即可。

6.8 相关文章推荐

该功能由 hexo-related-popular-posts 插件提供，会在文末出现本站相关的博客。

在站点根目录中执行以下命令安装依赖：

1

npm install hexo-related-popular-posts --save

在主题配置文件中开启相关文章推荐功能：

1
2
3
4
5
6

related_posts:
  enable: true
  title: # custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5

此时会在每篇文章结尾根据标签相关性和内容相关性来推荐相关文章。

6.9 文章评分功能

Next 主题中已经集成了 widgetpack 的星级评分系统，用户无须再安装或引入插件脚本，只需在 widgetpack 中注册账号并修改主题配置即可，应用效果如下：

（刚刚还给自己打了个2分。。。。。。）

在 widgetpack 中注册账号(这个网站经常注册没反应，应该是网络差或者墙的问题，过段时间多试几次就好了），根据引导填写应用名称和域名创建应用，创建后可在页面左上角看到应用 id。

在主题配置文件中开启评分功能，填写应用 id，并设置评分颜色：

1
2
3
4
5
6

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id: #<app_id>
  color: fadb14

在控制台中点击左上角展开菜单，在 Rating -> Setting 中将 Vote via 选项改为 Device(cookie) 以开启匿名评分，该选项将基于设备认证访问者身份，如果不开启这个选项，那么就需要登录 facebook、twitter 等墙外的社交软件 才能评分，在国内就没啥用了。

7 提交网址&&购买域名

7.1 向搜索引擎提交网址

这里主要是向谷歌、百度提交网址，以使得可以在搜索引擎中搜到本博客网站的内容。

在站点根目录下执行以下命令安装相关依赖并重新生成静态文件：

1
2
3

$ npm install hexo-generator-sitemap --save-dev
$ npm install hexo-generator-baidu-sitemap --save-dev
$ hexo g

此时即可在 public 目录下找到 sitemap.xml 和 baidusitemap.xml 两个文件，将该文件提交到搜索引擎站长后台即可帮助搜索引擎分析收录站点内容，各个搜索引擎收录效率不同，可能需要耐心等上几天。

在 Google Search Console 中提交站点域名，此时会提供几种验证网站所有权的方法，建议使用HTML文件验证方法，非常简单，把给的HTML文件下载下来保存到根目录下source文件夹下，然后hexo g && hexo d返回终端点击验证即可。

百度同理点这里。

注意这个HTML文件之后也不能删除。然后等一天左右就可以了。

7.2 购买域名

购买域名建议去阿里云或者腾讯云，貌似一些域名腾讯云会比阿里云便宜1块钱。至于后缀是选择.com还是别的看个人喜好就行，理论上不影响站点网速。价格上当然.com最贵啦，然后一般网址越短越贵，也越容易已经被人注册过了，已经被人注册了的域名需要回购，而阿里云的代理回购价格是2000起步。。。所以尽量选没人注册的域名吧。

根据网站提示，购买完以后根据相应的网站的提示进行操作和配置就可以了，绑定域名的方法选择CNAME，然后在根目录下的source文件夹中新建一个名为CNAME的文件，文件内容为你购买的域名。然后

1

hexo g && hexo d

基本过一小会就可以通过你购买的域名来访问自己的博客了。

• Windows/Linux 下使用 hexo+github+NexT 主题建立个人博客网站