0%

Hexo-NexT 主题:网站页面优化

写在前面

我的博客主题采用的是 NexT.Muse。从最初建立该博客到现在,我参考了互联网上许多使用 NexT 主题的博主们的文章,对该主题进行了一次又一次的优化与深层次的魔改。在此感谢这些分享自己建站教程的博主们。

秉承着开源共享精神,我也将我在优化博客主题时使用到的方法分享出来。这些内容大都是我从互联网搜集汇总的优化方法,也有一小部分是我个人的修改。文中所讲的一些东西,可能随着 NexT 主题的更新,成为主题自带的一部分,或被主题抛弃;也可能自身就存在一定的错误。望各位读者能及时指出问题,让这篇文章能够更加完善,紧跟主题更新的步伐。

对于 NexT 主题优化的内容,我写了两篇文章:

第一篇文章,主要讲的是对所写文章内容形式上的优化。第二篇文章(也就是你现在所看的这一篇),主要讲的是对博客网站整体界面以及功能的优化。

在对 NexT 主题的美化中,如果想要添加一些个性化的内容,就需要对内部代码进行修改。主题提供了许多注入点,可以通过注入点插入自己想要的东西,而不会对原有的主题内部文件进行大量的修改。这样便于以后主题的升级,避免一系列的错误发生。NexT 主题更新到 v7.2.0 后,简化了自定义内容的添加方法,删除了以前版本中所用的css/_custom.styl自定义 CSS 样式文件。如果想要修改样式或者在 HTML 中的<head><body>等部位插入代码,则可以参照这里的说明。

目前我的博客已经更新至 v7.2.0+ 版本,今后本文更新的美化方法,会采取新版本的修改方式。文中的内容如果有所改动也会在这里标注出来。一些插件可能无法兼容旧版本的主题,在这里也希望各位读者及时更新主题,体验新版本的功能。

内容更新列表

更换网站字体

目前网站字体普遍为黑体,但对于中文书籍,宋体一直是正文印刷的标准字体,而不是目前电子显示屏上普遍的黑体,因为宋体的衬线更适合长时间的阅读。因此可以考虑使用 Google Fonts 提供的思源宋体。

考虑到国内的网络对 Google 的域名并不友好,建议将googleapis.com修改为烧饼博客提供的镜像loli.net。宋体的笔画要比黑体细,因此建议将字体的颜色修改为#000,以达到较好的阅读效果。

首先,文章字体大小可以编辑:

文件位置:~/themes/next/source/css/_variables/base.styl
1
$font-size-base           = 16px

下面为具体的字体修改方法。

[2019/6/19] 更新:添加方法二。新方法中字体的更换更加简单方便,英文字体更换为 EB Garamond。

方法一

中文字体

修改主题 _config.yml
文件位置:~/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
font:
- enable: false
+ enable: true

# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
+ host: https://fonts.loli.net

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.

# Global font settings used for all elements in <body>.
global:
external: true
+ family: Noto Serif SC
size:
修改 base.styl
文件位置:~/themes/next/source/css/_variables/base.styl
1
2
3
4
-$font-family-monospace    = consolas, Menlo, $font-family-chinese, monospace
+$font-family-monospace = consolas, Menlo, $font-family-base, monospace
-$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes')
+$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-base, monospace if get_font_family('codes')
修改 custom.styl
文件位置:~/themes/next/source/css/_custom/custom.styl
1
2
3
body {
color: #000;
}

英文字体

修改 base.styl
文件位置:~/themes/next/source/css/_variables/base.styl
1
2
3
4
5
6
7
// Font families.
-$font-family-chinese = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese = "Linux Biolinum"

$font-family-base = $font-family-chinese, sans-serif
-$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')
+$font-family-base = $font-family-chinese, get_font_family('global'), sans-serif if get_font_family('global')
修改 custom.styl
文件位置:~/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
@font-face {
font-family: 'Linux Biolinum';
src: url("/fonts/LinBiolinum_Rah.eot");
font-display: swap;
src: url("/fonts/LinBiolinum_Rah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_Rah.woff2") format('woff2'), url("/fonts/LinBiolinum_Rah.woff") format('woff'), url("/fonts/LinBiolinum_Rah.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Linux Biolinum';
src: url("/fonts/LinBiolinum_RBah.eot");
font-display: swap;
src: url("/fonts/LinBiolinum_RBah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_RBah.woff2") format('woff2'), url("/fonts/LinBiolinum_RBah.woff") format('woff'), url("/fonts/LinBiolinum_RBah.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Linux Biolinum';
src: url("/fonts/LinBiolinum_RIah.eot");
font-display: swap;
src: url("/fonts/LinBiolinum_RIah.eot") format('embedded-opentype'), url("/fonts/LinBiolinum_RIah.woff2") format('woff2'), url("/fonts/LinBiolinum_RIah.woff") format('woff'), url("/fonts/LinBiolinum_RIah.ttf") format('truetype');
font-weight: normal;
font-style: italic;
}
下载 Linux_Biolinum

这里下载。

下载后将解压的文件全部放到根目录~/source/fonts/下(若无fonts文件夹请自建)。

方法二

上述方法在 deploy 的时候会将字体文件上传至你的仓库,占用空间大。最近原博主更新了更为简便的字体更换方法。

在 Google Fonts 中查找字体

直接进入 Google Fonts 官方网站(需科学上网),搜索Noto Serif SC,点+号选择,选择好后底部会弹出一个提示框,里面有使用说明。还可以点击提示框中的CUSTOMIZE定制要加载的字重与语言。在这里我建议勾选:

  1. regular 400
  2. medium 500
  3. bold 700

语言(Languages)中勾选:

  1. Chinese (Simplified)
  2. Latin

之后,点击EMBED,保存生成的<link>代码。

1
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet">

如果你需要更换英文字体,同样的方法,这里以 Garamond 字体为例,这也是我的博客使用的字体。

搜索EB Garamond,点+号选择,然后CUSTOMIZE勾选四个:

  1. regular 400
  2. regular 400 Italic
  3. bold 700
  4. bold 700 Italic

同样,保存生成的<link>代码。

1
<link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i&display=swap" rel="stylesheet">

字体的配置

修改主题 _config.yml
文件位置:~/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
font:
- enable: false
+ enable: true

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
+ host: https://fonts.loli.net

# Global font settings used for all elements in <body>.
global:
external: true
+ family: EB Garamond
修改 base.styl
文件位置:~/themes/next/source/css/_variables/base.styl
1
2
3
// Font families.
-$font-family-chinese = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese = "Noto Serif SC"
引入字体链接

文件位置:~/themes/next/layout/_partials/head/external-fonts.swig

将这个文件的全部内容直接替换为 Google Fonts 网站生成的<link>代码,可以将googleapis.com修改为loli.net

注意:在主题配置文件 _config.yml 中添加的字体无需再在<head>中添加<link>代码,主题会自动生成这部分代码,因此你只需要引入中文字体。

修改 custom.styl
文件位置:~/themes/next/source/css/_custom/custom.styl
1
2
3
body {
color: #000;
}
其他设定

如果你想要设定不同位置的字体,比如文章标题,段落标题的字体,都可以通过在<head>中引入字体,然后在主题配置文件中自行设定即可。

文件位置:~/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
# Font settings for site title (.site-title).
title:
external: true
family: EB Garamond
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: EB Garamond
size:

归档页面加入十二生肖

[2019/8/25] 更新:在 NexT v7.4.0+ 版本中,归档页面结构发生改变,添加新方法以适配 v7.4.0+ 的版本。

下载十二生肖字体

点击此处下载。

下载后将解压的三个字体文件全部放在根目录~/source/fonts/下(若无fonts文件夹请自建)。

新建 chinese-zodiac.swig

文件名为 chinese-zodiac.swig。如果你的主题版本低于 v7.4.0,文件保存在:~/themes/next/layout/_partials/。如果你的主题版本高于 v7.4.0,文件保存在:~/themes/next/layout/_macro/。内容如下:

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
{% if year % 12 == 0 %}
<i class="symbolic-animals icon-monkey"></i>
{% endif %}
{% if year % 12 == 1 %}
<i class="symbolic-animals icon-rooster"></i>
{% endif %}
{% if year % 12 == 2 %}
<i class="symbolic-animals icon-dog"></i>
{% endif %}
{% if year % 12 == 3 %}
<i class="symbolic-animals icon-pig"></i>
{% endif %}
{% if year % 12 == 4 %}
<i class="symbolic-animals icon-rat"></i>
{% endif %}
{% if year % 12 == 5 %}
<i class="symbolic-animals icon-ox"></i>
{% endif %}
{% if year % 12 == 6 %}
<i class="symbolic-animals icon-tiger"></i>
{% endif %}
{% if year % 12 == 7 %}
<i class="symbolic-animals icon-rabbit"></i>
{% endif %}
{% if year % 12 == 8 %}
<i class="symbolic-animals icon-dragon"></i>
{% endif %}
{% if year % 12 == 9 %}
<i class="symbolic-animals icon-snake"></i>
{% endif %}
{% if year % 12 == 10 %}
<i class="symbolic-animals icon-horse"></i>
{% endif %}
{% if year % 12 == 11 %}
<i class="symbolic-animals icon-goat"></i>
{% endif %}

修改 archive.swig

这一部分内容适用于 NexT v7.4.0 以下版本,如果你的版本高于 v7.4.0,请参照修改 post-collapse.swig

编辑 ~/themes/next/layout/archive.swig 文件,删除红色一行,增加几行(复制粘贴后删除每行前面的+号)。

文件位置:~/themes/next/layout/archive.swig
1
2
3
4
5
6
7
8
9
          <div class="collection-title">
- <{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">{{ year }}</{% if theme.seo %}h2{% else %}h1{% endif %}>
+ <{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">
+ {{ year }}
+ <div class="chinese-zodiac">
+ {% include '_partials/chinese-zodiac.swig' %}
+ </div>
+ </{% if theme.seo %}h2{% else %}h1{% endif %}>
</div>

修改 post-collapse.swig

这一部分内容适用于 NexT v7.4.0 以上版本,如果你的版本低于 v7.4.0,请参照上一步进行修改,跳过这一部分内容。

编辑 ~/themes/next/layout/_macro/post-collapse.swig 文件,删除红色一行,增加以下几行。

文件位置:~/themes/next/layout/_macro/post-collapse.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{%- set year %}
{%- set post.year = date(post.date, 'YYYY') %}

{%- if post.year !== year %}
{%- set year = post.year %}
<div class="collection-year">
- <{%- if theme.seo %}h2{% else %}h1{%- endif %} class="collection-header">{{ year }}</{%- if theme.seo %}h2{% else %}h1{%- endif %}>
+ <{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">
+ {{ year }}
+ <div class="chinese-zodiac">
+ {% include 'chinese-zodiac.swig' %}
+ </div>
+ </{% if theme.seo %}h2{% else %}h1{% endif %}>
</div>
{%- endif %}

添加样式

将下面的 CSS 代码加入到 ~/themes/next/source/css/_custom/custom.styl中。

文件位置:~/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
30
31
32
33
.chinese-zodiac {
float: right;
}
@font-face {
font-family: 'chinese-zodiac';
font-display: swap;
src: url('/fonts/chinese-zodiac.eot');
src: url('/fonts/chinese-zodiac.eot') format('embedded-opentype'),
url('/fonts/chinese-zodiac.woff2') format('woff2'),
url('/fonts/chinese-zodiac.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.symbolic-animals {
display: inline-block;
font: normal normal normal 14px/1 chinese-zodiac;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-dragon:before { content: '\e806'; }
.icon-tiger:before { content: '\e809'; }
.icon-pig:before { content: '\e810'; }
.icon-horse:before { content: '\e813'; }
.icon-rat:before { content: '\e816'; }
.icon-goat:before { content: '\e818'; }
.icon-snake:before { content: '\e820'; }
.icon-ox:before { content: '\e822'; }
.icon-dog:before { content: '\e825'; }
.icon-rabbit:before { content: '\e826'; }
.icon-monkey:before { content: '\e829'; }
.icon-rooster:before { content: '\e82f'; }

具体样式可在博客中的归档界面查看。

添加线状动态背景

修改 _layout.swig

找到~/themes/next/layout/_layout.swig文件,添加内容:
<body>里添加:

文件位置:~/themes/next/layout/_layout.swig
1
2
3
<div class="bg_content">
<canvas id="canvas"></canvas>
</div>

仍是该文件,在末尾添加:

文件位置:~/themes/next/layout/_layout.swig
1
<script type="text/javascript" src="/js/dynamic_bg.js"></script>

添加 dynamic_bg.js

~/themes/next/source/js/中新建文件dynamic_bg.js,参见:dynamic_bg.js,也可点击此处下载。

修改 custom.styl

~/themes/next/source/css/_custom/custom.styl文件末尾添加内容:

文件位置:~/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
copy.bg_content {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}

添加网页标题崩溃欺骗特效

创建 crash_cheat.js

~/theme/next/source/js/文件夹下创建crash_cheat.js,添加代码:

所在目录:~/theme/next/source/js/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

修改 _layout.swig

~/theme/next/layout/_layout.swig文件中,添加引用(注:在swig末尾添加):

文件位置:~/theme/next/layout/_layout.swig
1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/crash_cheat.js"></script>

添加点击爱心效果

创建 clicklove.js

~/themes/next/source/js/下新建文件 clicklove.js ,接着把以下的代码拷贝粘贴到 clicklove.js 文件中

所在目录:~/themes/next/source/js/
1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改 _layout.swig

~/themes/next/layout/_layout.swig文件末尾添加:

文件位置:~/themes/next/layout/_layout.swig
1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/clicklove.js"></script>

添加球型标签云

首先要确保你已经开启标签功能。

[2019/5/18] 更新:添加方法二

了解球形标签云样式

点击这里,了解球形标签云的样式。

方法一

下载插件

这里下载 tagcanvas.js,将下载的 tagcanvas.js 放入主题目录~/themes/next/source/js/

新建 tagcanvas.swig

~/themes/next/layout/_partials/下新建一个名为tagcanvas.swig的文件,并写入如下内容:

所在目录:~/themes/next/layout/_partials/
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
<div class="tags" id="myTags">
<canvas width="350" height="350" id="my3DTags">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div class="tags" id="tags">
<ul style="display: none">
{{ tagcloud({
min_font: 16,
max_font: 35,
amount: 999,
color: true,
start_color: 'red',
end_color: 'red',
}) }}
</ul>
</div>
<script type="text/javascript" src="/js/tagcanvas.js"></script>
<script type="text/javascript" >
window.onload = function() {
try {
TagCanvas.Start('my3DTags','tags',{
textFont: 'Georgia,Optima',
textColour: null,
outlineColour: 'black',
weight: true,
reverse: true,
depth: 0.8,
maxSpeed: 0.05,
bgRadius: 1,
freezeDecel: true
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myTags').style.display = 'none';
}
};
</script>

使用 tagcanvas.swig

~/themes/NexT/layout/page.swig 中,添加所示代码即可:

文件位置:~/themes/NexT/layout/page.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div id="posts" class="posts-expand">
{##################}
{### PAGE BLOCK ###}
{##################}
<div class="post-block page">
{% include '_partials/page/page-header.swig' %}
{#################}
{### PAGE BODY ###}
{#################}
<div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
{# tagcloud page support #}
{% if page.type === 'tags' %}
<div class="tag-cloud">
<div class="tag-cloud-title">
{% set visibleTags = 0 %}
{% for tag in site.tags %}
{% if tag.length %}
{% set visibleTags += 1 %}
{% endif %}
{% endfor %}
{{ _p('counter.tag_cloud', visibleTags) }}
</div>
<div class="tag-cloud-tags">
{% if not theme.tagcloud %}
{{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }}
{% else %}
{{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}
{% endif %}
</div>

+ {# tagcanvas plugin 球型云标签 #}
+ {% include '_partials/tagcanvas.swig' %}

</div>
{% elif page.type === 'categories' %}
<div class="category-all-page">
<div class="category-all-title">
{% set visibleCategories = 0 %}
{% for cat in site.categories %}
{% if cat.length %}
{% set visibleCategories += 1 %}
{% endif %}
{% endfor %}
{{ _p('counter.categories', visibleCategories) }}
</div>
<div class="category-all">
{{ list_categories() }}
</div>
</div>
{% elif page.type === 'schedule' %}
{% include 'schedule.swig' %}
{% else %}
{{ page.content }}
{% endif %}
</div>
{#####################}
{### END PAGE BODY ###}
{#####################}
</div>
{% include '_partials/page/breadcrumb.swig' %}
{######################}
{### END PAGE BLOCK ###}
{######################}
</div>

{% endblock %}

方法二

发现一个更好的标签云插件:hexo-tag-cloud

安装

执行npm install hexo-tag-cloud进行安装。

修改 page.swig

与方法一相同,在 ~/themes/next/layout/page.swig 中,添加所示代码,具体想要放置在页面的哪一部分可根据个人喜好修改:

文件位置:~/themes/next/layout/page.swig
1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width=100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}

在这里官方文档修改的是next/layout/_macro/sidebar.swig文件,我的方法与其有些不同。

生成

完成安装和显示,可以通过 hexo clean && hexo g && hexo s 来进行本地预览,hexo clean为必须选项。

自定义

在你的博客根目录配置文件_config.yml中添加如下的配置项:

1
2
3
4
5
6
7
# hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica
textColor: '#333'
textHeight: 25
outlineColor: '#E2E1D1'
maxSpeed: 0.5

添加评论框输入特效

点击下载 activate-power-mode.zip,解压缩。

activate-power-mode.js放入~/themes/next/source/js/文件夹中。

~/themes/next/layout/_layout.swig的末尾添加

文件位置:~/themes/next/layout/_layout.swig
1
2
3
4
5
6
<script src="/js/activate-power-mode.js"></script>
<script>
POWERMODE.colorful = true; // 控制开启/开启礼花特效
POWERMODE.shake = false; // 控制开启/关闭屏幕震动特效
document.body.addEventListener('input', POWERMODE);
</script>

页脚添加微信二维码

主题默认的微信订阅功能显示在文章的末尾,二维码有些大,个人感觉不美观。看到很多网站都是在页脚有个微信的 LOGO,鼠标移动到上面便会显示二维码,这样感觉很棒。

首先需要在footer.swig 中添加以下代码:

文件位置:~/themes/next/layout/_partials/footer.swig
1
2
3
4
5
6
7
<div class="weixin-box">
<div class="weixin-menu">
<div class="weixin-hover">
<div class="weixin-description">微信扫一扫,订阅本博客</div>
</div>
</div>
</div>

修改 custom.styl

编辑custom.styl,加入:

文件位置:~/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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 自定义的页脚微信订阅号样式
.weixin-box {
position: absolute;
bottom: 43px;
left: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.weixin-menu {
position: relative;
height: 24px;
width: 24px;
cursor: pointer;
background: url(https://微信的logo.svg);
background-size: 24px 24px;
}
.weixin-hover {
position: absolute;
bottom: 0px;
left: 0px;
height: 0px;
width: 0px;
border-radius: 3px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background: url(https://二维码.svg);
background-color: #fff;
background-repeat: no-repeat;
background-size: 150px 150px;
transition: all 0.35s ease-in-out;
z-index: 1024;
opacity: 0;
}
.weixin-menu:hover .weixin-hover {
bottom: 24px;
left: 24px;
height: 170px;
width: 150px;
opacity: 1;
}
.weixin-description {
opacity: 0;
position: absolute;
bottom: 3%;
left: 5%;
right: 5%;
font-size: 12px;
transition: all 0.35s cubic-bezier(1, 0, 0, 1);
}
.weixin-menu:hover .weixin-description {
opacity: 1;
}

图片务必用矢量图 SVG 格式,否则手机上显示效果很差,其它内容请根据自己的情况更改。

微信 LOGO 图片(svg 格式)代码如下:

1
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 300 300"><path fill="#2DC100" d="M300 255c0 24.854-20.147 45-45 45H45c-24.854 0-45-20.146-45-45V45C0 20.147 20.147 0 45 0h210c24.853 0 45 20.147 45 45v210z"/><g fill="#FFF"><path d="M200.803 111.88c-24.213 1.265-45.268 8.605-62.362 25.188-17.271 16.754-25.155 37.284-23 62.734-9.464-1.172-18.084-2.462-26.753-3.192-2.994-.252-6.547.106-9.083 1.537-8.418 4.75-16.488 10.113-26.053 16.092 1.755-7.938 2.891-14.889 4.902-21.575 1.479-4.914.794-7.649-3.733-10.849-29.066-20.521-41.318-51.232-32.149-82.85 8.483-29.25 29.315-46.989 57.621-56.236 38.635-12.62 82.054.253 105.547 30.927 8.485 11.08 13.688 23.516 15.063 38.224zm-111.437-9.852c.223-5.783-4.788-10.993-10.74-11.167-6.094-.179-11.106 4.478-11.284 10.483-.18 6.086 4.475 10.963 10.613 11.119 6.085.154 11.186-4.509 11.411-10.435zm58.141-11.171c-5.974.11-11.022 5.198-10.916 11.004.109 6.018 5.061 10.726 11.204 10.652 6.159-.074 10.83-4.832 10.772-10.977-.051-6.032-4.981-10.79-11.06-10.679z"/><path d="M255.201 262.83c-7.667-3.414-14.7-8.536-22.188-9.318-7.459-.779-15.3 3.524-23.104 4.322-23.771 2.432-45.067-4.193-62.627-20.432-33.397-30.89-28.625-78.254 10.014-103.568 34.341-22.498 84.704-14.998 108.916 16.219 21.129 27.24 18.646 63.4-7.148 86.284-7.464 6.623-10.15 12.073-5.361 20.804.884 1.612.985 3.653 1.498 5.689zm-87.274-84.499c4.881.005 8.9-3.815 9.085-8.636.195-5.104-3.91-9.385-9.021-9.406-5.06-.023-9.299 4.318-9.123 9.346.166 4.804 4.213 8.69 9.059 8.696zm56.261-18.022c-4.736-.033-8.76 3.844-8.953 8.629-.205 5.117 3.772 9.319 8.836 9.332 4.898.016 8.768-3.688 8.946-8.562.19-5.129-3.789-9.364-8.829-9.399z"/></g></svg>

微信订阅号的二维码可以通过这个网站进行转换,下载 SVG 格式的就可以了。

添加知乎豆瓣等图标的支持

因为 NexT 主题是采用了 Font Awesome 图标,并未包含如知乎、豆瓣这类中国大陆的社交网站图标。所以需要加入另一种图标的支持,使得博客可以显示出知乎、豆瓣这类的图标。当然你也可以在 Font Awesome 的 GitHub 项目中提交你想要的图标的请求 Issues,等待官方的更新。

下载图标

首先,前往阿里巴巴矢量库挑选需要的图标,在图标上点击加入 购物车。然后,进入个人购物车,选择你挑选的图标,下方会有一个「下载代码」的选项,将代码下载下来。

将下载的文件解压后,找到iconfont.css文件,打开后将其中的所有内容都复制加入到主题 CSS 自定义文件中的任意位置。这里需要修改部分内容,使得图标样式可以和主题样式保持一致。在这样设置好以后,就可以在博客需要额外图标的地方使用<i class="iconfont icon-xxx"></i>的进行引用了。

但是这里有一个问题,如果想在侧边栏的社交网站列表里加入知乎、豆瓣这类图标,就不是这样引用了。因为主题配置文件中,对侧边栏的社交网站图标的引用省略了class的部分内容,将其加入到了layout的模版里,所以现在不能直接填写zhihu或者icon-zhihu到主题配置文件中,所以我们需要重新设置一下自定义样式。

自定义样式

因为阿里巴巴矢量库里有多个知乎、豆瓣的图标,大小不一,即使设置了字体大小页可能无法和原始图像大小一致,在主题 CSS 自定义文件中可以直接加入以下内容使图标显示一致:

文件位置:~/source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//知乎豆瓣图标 font-class引用
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1528847148903'); /* IE9*/
src: url('iconfont.eot?t=1528847148903#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1528847148903') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1528847148903#iconfont') format('svg'); /* iOS 4.1- */
}
//以上是下载来自阿里巴巴矢量库的图标数据
//以下代码相对下载下来的代码做了部分修改
.fa-custom {
font-family:"iconfont" !important;
font-size:inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.zhihu:before { content: "\e6ba"; }
.douban:before { content: "\e638"; }

图标的应用

举个例子,在主题配置文件中,社交账号图标设置好以后,类似是以下这样的格式:

文件位置:~/themes/next/_config.yml
1
2
3
4
5
social:
Twitter: https://twitter.com/user_id || twitter
GitHub: https://github.com/user_id || github
Zhihu: https://www.zhihu.com/people/user_id || custom zhihu
Douban: https://www.douban.com/people/user_id/ || custom douban

添加友情链接

NexT 主题自带的友情链接的位置是在侧栏的 Social Link 中,位置不太明显,而且容量比较小,不美观。因此可以自定义一个特定的页面,单独显示友情链接。

~/themes/next/layout/目录下新建一个links.swig文件,并写入以下内容:

所在目录:~/themes/next/layout/
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}

<div id="links">
<style>
.links-content{
margin-top:1rem;
}

.link-navigation::after {
content: " ";
display: block;
clear: both;
}

.card {
width: 240px;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
@media (max-width: 767px) {
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: left !important;
}
}

.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 3rem!important;
height: 3rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;

}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 100%;
}
.card .card-header a {
font-style: normal;
color: #2bbc8a;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #a166ab;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}

span.focus-links {
font-style: normal;
margin-left: 10px;
position: unset;
left: 0;
padding: 0 7px 0 5px;
font-size: 11px;
border-color: #42c02e;
border-radius: 40px;
line-height: 24px;
height: 22px;
color: #fff !important;
background-color: #42c02e;
display: inline-block;
}
span.focus-links:hover{
background-color: #318024;
}

.friends-btn{
text-align: center;
color: #555!important;
background-color: #fff;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
border: none!important;
transition-property: unset;
padding: 0 15px;
margin: inherit;
}

.friends-btn:hover{
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
margin: inherit;
}
}
</style>
<div class="links-content">
<div class="link-navigation">

{% for link in theme.mylinks %}

<div class="card">
<img class="ava" src="{{ link.avatar }}"/>
<div class="card-header">
<div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> <a href="{{ link.site }}"><span class="focus-links">关注</span></a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>

{% endfor %}

</div>
{{ page.content }}
</div>
</div>

{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}

其中的样式可以根据个人喜好进行更改。

修改 page.swig

修改~/themes/next/layout/page.swig文件,在如下所示位置处进行添加:

文件位置:~/themes/next/layout/page.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
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{#
#}{%- set page_title_suffix = ' | ' + title %}{#

#}{%- if page.type === 'categories' and not page.title %}{#
#}{{ __('title.category') + page_title_suffix }}{#
#}{% elif page.type === 'tags' and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#
+ <!-- 友情链接-->
+ #}{% elif page.type === 'links' and not page.title %}{#
+ #}{{ __('title.links') + page_title_suffix }}{#
#}{% elif page.type === 'schedule' and not page.title %}{#
#}{{ __('title.schedule') + page_title_suffix }}{#
#}{% else %}{#
#}{{ page.title + page_title_suffix }}{#
#}{%- endif %}{#
#}{% endblock %}

{% block content %}

<div id="posts" class="posts-expand">
{##################}
{### PAGE BLOCK ###}
{##################}
<div class="post-block page">
{% include '_partials/page/page-header.swig' %}
{#################}
{### PAGE BODY ###}
{#################}
<div class="post-body{%- if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}">
{# tagcloud page support #}
{%- if page.type === 'tags' %}
<div class="tag-cloud">
<div class="tag-cloud-title">
{%- set visibleTags = 0 %}
{%- for tag in site.tags %}
{%- if tag.length %}
{%- set visibleTags += 1 %}
{%- endif %}
{%- endfor %}
{{ _p('counter.tag_cloud', visibleTags) }}
</div>
<div class="tag-cloud-tags">
{%- if not theme.tagcloud %}
{{ tagcloud({min_font: 12, max_font: 30, amount: 200, color: true, start_color: '#ccc', end_color: '#111'}) }}
{% else %}
{{ tagcloud({min_font: theme.tagcloud.min, max_font: theme.tagcloud.max, amount: theme.tagcloud.amount, color: true, start_color: theme.tagcloud.start, end_color: theme.tagcloud.end}) }}
{%- endif %}
</div>
</div>
{% elif page.type === 'categories' %}
<div class="category-all-page">
<div class="category-all-title">
{%- set visibleCategories = 0 %}
{%- for cat in site.categories %}
{%- if cat.length %}
{%- set visibleCategories += 1 %}
{%- endif %}
{%- endfor %}
{{ _p('counter.categories', visibleCategories) }}
</div>
<div class="category-all">
{{ list_categories() }}
</div>
</div>
+ <!-- 友情链接-->
+ {% elif page.type === 'links' %}
+ {% include 'links.swig' %}
{% elif page.type === 'schedule' %}
<ul id="event-list">
</ul>
{% include '_scripts/pages/schedule.swig' %}
{% else %}
{{ page.content }}
{%- endif %}
</div>
{#####################}
{### END PAGE BODY ###}
{#####################}
</div>
{% include '_partials/page/breadcrumb.swig' %}
{######################}
{### END PAGE BLOCK ###}
{######################}
</div>

{% endblock %}

{% block sidebar %}
{{ sidebar_template.render(true) }}
{% endblock %}

创建页面

1
hexo new page "links"

这样在~/source/目录下会生成一个/links/ 文件夹,打开其中的index.md文件,在标题头中写入type = "links"这个属性头,如下:

1
2
3
4
5
---
title: 友情链接
date: 2019-09-29 13:08:43
+ type: "links"
---

如果要想在菜单栏中显示该页面的中文名称的话,不要忘记在~/themes/next/languages/zh-CN.yml文件中添加:

1
2
3
4
5
6
7
8
9
10
11
12
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
top: 热门
+ links: 友链

添加友链

在主题配置文件~/themes/next/_config.yml文件中添加:

1
2
3
4
5
6
7
8
9
10
11
# 友情链接
mylinks:
- nickname: # 昵称
avatar: # 头像地址
site: #友链地址
info: #相关说明

- nickname: # 昵称
avatar: # 头像地址
site: #友链地址
info: #相关说明

我的 custom.styl

由于同一主题的不同风格以及不同版本之间在设计上存在一定的差异,因此请各位读者根据自己的实际情况,通过在浏览器中按F12审查元素,找到要自定义的元素,调试成自己喜欢的值,然后再复制到custom.styl,而不是直接复制我的代码。一定要找对元素,不然可能会制造出新 BUG,建议大家修改一个就加一个注释,方便以后调试修改。最新版本的代码可以在我的 GitHub 仓库中查询。


本文结束啦感谢您阅读