如何美化Hexo主题

发表于 更新于 分类于 ，

本文介绍了在 Next 主题的基础上进一步对博客进行美化的方案，主要包括:

  • 修改侧边栏的位置到左边
  • 添加不同类型的动态背景效果(待更新…)
  • 添加 live2d 看板娘(待更新…)
  • 为布局元素添加边缘弹性摆动效果(待更新…)
  • 个性化回到顶部按钮(待更新…)
  • 添加不同类型的鼠标点击特效(待更新…)
  • 评论区输入打字礼花特效(待更新…)
    读者可以根据需要选择其中喜欢的方案应用到站点博客中。

修改博客字体

在 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
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:

文章页末美化

侧边栏放左边

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

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

themes\next\source\css\_custom\custom.styl
1
2
3
4
5
6
7
.sidebar-toggle {
  left: 30px;
}

.sidebar {
  left: 0px;
}

修改动效脚本代码：
themes\next\source\js\src\motion.js

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 之后会出现样式错误：侧边栏收缩消失但是页面左侧仍留有空白间距，此时修改如下代码即可：
themes\next\source\css_common\scaffolding\base.styl

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; }
}

数据统计

站点访问量统计

该功能由 不蒜子 提供
独立访客数为 UV，网站浏览量为 PV，访客数和浏览量的区别在于一个用户连续点击 n 篇文章，会记录 n 次浏览量，但只记录一次访客数。

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

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

themes\next\layout\_partial\footer.swig
1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

刷新浏览器即可生效。
高阶用法：通过修改代码来自定义统计文案，如果你想使用本站统计文案，需要对不蒜子的代码做出如下修改:

themes\next\layout\_third-party\analytics\busuanzi-counter.swig
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 %}

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

themes/next/source/css/_custom/custom.styl
1
2
3
4
//修改不蒜子数据颜色
.busuanzi-value {
  color: #1890ff;
}

然后修改统计表述文案：
themes\next\languages\zh-CN.yml

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

站点运行时间统计

在主题自定义布局文件中添加以下代码：
thems\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
{# 页脚站点运行时间统计 #}
{% 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 %}

如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：

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>

修改主题配置文件：

themes\next\_config.yml
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"

然后补全对应文案：

themes\next\languages\zh-CN.yml
1
2
3
4
5
6
  footer:
    powered: "由 %s 强力驱动"
    theme: 主题
+   age: 我已在此等候你
    total_views: "历经 %s 次回眸才与你相遇"
    total_visitors: "我的第 %s 位朋友，"