0%

Hexo-NexT 主题:文章内容美化

写在前面

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

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

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

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

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

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

内容更新列表

主题自带样式

主题自带的一些标签功能在官方文档中有详细的说明。

主题自带样式 文本居中引用

效果:

人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!

源码:

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!
{% endcq %}

[2019/6/30] 更新

近日浏览这篇文章时发现,文字居中后,两边的双引号图片并没有加载出来,但是在我的博客中的「关于」版块却加载了出来。经检查发现,原来是引用图片的时候,图片路径出现了错误。原本路径应该是网站根目录的/images/quote-l.svg/images/quote-r.svg,现在的路径却与这一篇文章同级。而由于「关于」版块/about//images/本来就同级,所以能加载出来。所以需要修改图片的路径。

目前我的解决办法是,在css_custom.styl中,添加以下内容:

文件位置:~/themes/next/source/css/_custom.styl
1
2
3
4
5
6
7
//修复next主题文字居中图片显示BUG
.blockquote-center::before, .page-home .post-type-quote blockquote::before, .page-post-detail .post-type-quote blockquote::before {
background-image: url(../../../../images/quote-l.svg);
}
.blockquote-center::after, .page-home .post-type-quote blockquote::after, .page-post-detail .post-type-quote blockquote::after {
background-image: url(../../../../images/quote-r.svg);
}

[2019/8/20] 更新

目前已确认引起该问题的插件为 hexo-filter-optimize,对该问题的具体分析可参见我的文章《加速 Hexo 博客的方法及遇到的问题》。

主题自带样式 note 标签

在主题配置文件_config.yml里有一个关于这个的配置

default

1
<div class="note default"><p>default</p></div>

primary

1
<div class="note primary"><p>primary</p></div>

success

1
<div class="note success"><p>success</p></div>

info

1
<div class="note info"><p>info</p></div>

warning

1
<div class="note warning"><p>warning</p></div>

danger

1
<div class="note danger"><p>danger</p></div>

danger no-icon

1
<div class="note danger no-icon"><p>danger no-icon</p></div>

首先可以在主题配置文件中需要配置下:

文件位置:~/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
# Note tag (bs-callout).
note:
# 风格
style: flat
# 要不要图标
icons: true
# 圆角矩形
border_radius: 3
light_bg_offset:

[2019/8/5] 更新

在最近的几次网站更新中,我发现使用 Typora 编辑 Markdown 文档时,使用 HTML 格式的内容与使用 Markdown 语法的内容之间如果没有空行,会出现使用 Markdown 语法的内容无法正常显示的现象。因此我建议不直接使用上述 HTML 格式的写作方法,而是使用下面所示的方式,效果相同。

1
2
3
{% note default %}
这里插入内容
{% endnote %}

显示为:

这里插入内容

主题自带样式 label 标签

首先可以在主题配置文件中有配置,需要配置下:

文件位置:~/themes/next/_config.yml
1
2
# Label tag.
label: true

效果如下(@ 前面的是label的名字,后面的是要显示的文字):

  • default
1
{% label default@default %}
  • primary
1
{% label primary@primary %}
  • success
1
{% label success@success %}
  • info
1
{% label info@info %}
  • warning
1
{% label warning@warning %}
  • danger
1
{% label danger@danger %}

主题自带样式 tabs 标签

效果:

这是选项卡 1 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……

这是选项卡 2

这是选项卡 3 哇,你找到我了!φ(≧ω≦*)♪~

源码:

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……
<!-- endtab -->
<!-- tab -->
**这是选项卡 2**
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇,你找到我了!φ(≧ω≦*)♪~
<!-- endtab -->
{% endtabs %}

首先可以在主题配置文件中有配置,需要配置下:

文件位置:~/themes/next/_config.yml
1
2
3
4
5
6
7
# Tabs tag.
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 0

然后上面源码中, 2表示一开始在第二个选项卡,非必须,若数值为-1则隐藏选项卡内容。

如果想要更换每一个选项卡的标题,可参照下面的代码。

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab 标题 1 -->
**这是选项卡 1**
<!-- endtab -->
<!-- tab 标题 2 -->
**这是选项卡 2**
<!-- endtab -->
<!-- tab 标题 3 -->
**这是选项卡 3**
<!-- endtab -->
{% endtabs %}

效果如下所示。

这是选项卡 1

这是选项卡 2

这是选项卡 3

主题自带样式 button 标签

效果:

点击下载

源码:

1
{% btn https://www.guanqr.com, 点击下载, download fa-lg fa-fw %}

自定义样式

自定义样式 引用

首先由于是自定义的样式,故要自己将 CSS 代码加到custom.styl中,下文的自定义样式都是如此。点击这里了解一些 CSS 中idclass的知识。

需加入css_custom.styl的代码:

文件位置:~/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
// 自定义的引用样式
blockquote.question {
color: #555;
border-left: 4px solid rgb(16, 152, 173);
background-color: rgb(227, 242, 253);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 20px;
}
  • 文字颜色改color的值
  • 背景色改background-color的值
  • 边框颜色和粗细改border-left的值

效果:

内容
源码:
1
<blockquote class="question">内容</blockquote>

自定义样式 数字块

需加入css_custom.styl的代码:

文件位置:~/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
// 自定义的数字块
span#inline-toc {
display: inline-block;
border-radius: 80% 100% 90% 20%;
background-color: rgb(227, 242, 253);
color: #555;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}

1.左边是效果。

源码:

1
<span id="inline-toc">1.</span>

自定义样式 note 风格

需加入css_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
//自定义 note 风格
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #3a87ad;
background-color: #e2eaee;
border-color: #c5d5dd;
}
.alert-warning {
color: #c09853;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #ebccd1;
}

使用时的源码及效果如下所示:

本文旨在介绍样式的使用规则。
1
<div class="alert alert-success"><i class="fa fa-lightbulb-o"></i> 本文旨在介绍样式的使用规则。</div>
本文旨在介绍样式的使用规则。
1
<div class="alert alert-info"><i class="fa fa-info"></i> 本文旨在介绍样式的使用规则。</div>
本文旨在介绍样式的使用规则。
1
<div class="alert alert-warning"><i class="fa fa-bell"></i> 本文旨在介绍样式的使用规则。</div>
本文旨在介绍样式的使用规则。
1
<div class="alert alert-danger"><i class="fa fa-bug"></i> 本文旨在介绍样式的使用规则。</div>

自定义样式 文字背景色块

需加入css_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
//自定义文字背景色块
span#inline-blue, span#inline-green, span#inline-purple, span#inline-yellow {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
vertical-align: baseline;
border-radius: 0;
white-space: nowrap;
}
span#inline-blue {
background-color: #2780e3;
}
span#inline-purple {
background-color: #9954bb;
}
span#inline-yellow {
background-color: #f0ad4e;
}
span#inline-green {
background-color: #5cb85c;
}

站点配置文件 <span id="inline-blue">站点配置文件</span>

主题配置文件 <span id="inline-purple">主题配置文件</span>

站点配置文件 <span id="inline-yellow">站点配置文件</span>

主题配置文件 <span id="inline-green">主题配置文件</span>

自定义样式 彩色引用边框

左侧彩色边框

文件位置:~/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
//左侧
p#div-border-left-red, p#div-border-left-yellow, p#div-border-left-green, p#div-border-left-blue, p#div-border-left-purple{
display: block;
padding: 10px;
margin: 10px 0;
border-left-width: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
p#div-border-left-red {
border-left-color: #df3e3e;
}
p#div-border-left-yellow {
border-left-color: #f0ad4e;
}
p#div-border-left-green {
border-left-color: #5cb85c;
}
p#div-border-left-blue {
border-left-color: #2780e3;
}
p#div-border-left-purple {
border-left-color: #9954bb;
}

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-left-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-left-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-left-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-left-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-left-purple">且不问结果如何,尽自己之所能,积极的面对。</p>

右侧彩色边框

文件位置:~/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
//右侧
p#div-border-right-red, p#div-border-right-yellow, p#div-border-right-green, p#div-border-right-blue, p#div-border-right-purple{
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
p#div-border-right-red {
border-right-width: 5px;
border-right-color: #df3e3e;
}
p#div-border-right-yellow {
border-right-width: 5px;
border-right-color: #f0ad4e;
}
p#div-border-right-green {
border-right-width: 5px;
border-right-color: #5cb85c;
}
p#div-border-right-blue {
border-right-width: 5px;
border-right-color: #2780e3;
}
p#div-border-right-purple {
border-right-width: 5px;
border-right-color: #9954bb;
}

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-right-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-right-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-right-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-right-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-right-purple">且不问结果如何,尽自己之所能,积极的面对。</p>

顶部彩色边框

文件位置:~/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
//顶部
p#div-border-top-red, p#div-border-top-yellow, p#div-border-top-green, p#div-border-top-blue, p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
p#div-border-top-red {
border-top-width: 5px;
border-top-color: #df3e3e;
}
p#div-border-top-yellow {
border-top-width: 5px;
border-top-color: #f0ad4e;
}
p#div-border-top-green {
border-top-width: 5px;
border-top-color: #5cb85c;
}
p#div-border-top-blue {
border-top-width: 5px;
border-top-color: #2780e3;
}
p#div-border-top-purple {
border-top-width: 5px;
border-top-color: #9954bb;
}

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-top-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-top-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-top-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-top-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-top-purple">且不问结果如何,尽自己之所能,积极的面对。</p>

底部彩色边框

文件位置:~/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
//底部
p#div-border-bottom-red, p#div-border-bottom-yellow, p#div-border-bottom-green, p#div-border-bottom-blue, p#div-border-bottom-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
p#div-border-bottom-red {
border-bottom-width: 5px;
border-bottom-color: #df3e3e;
}
p#div-border-bottom-yellow {
border-bottom-width: 5px;
border-bottom-color: #f0ad4e;
}
p#div-border-bottom-green {
border-bottom-width: 5px;
border-bottom-color: #5cb85c;
}
p#div-border-bottom-blue {
border-bottom-width: 5px;
border-bottom-color: #2780e3;
}
p#div-border-bottom-purple {
border-bottom-width: 5px;
border-bottom-color: #9954bb;
}

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-bottom-red">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-bottom-yellow">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-bottom-green">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-bottom-blue">且不问结果如何,尽自己之所能,积极的面对。</p>

且不问结果如何,尽自己之所能,积极的面对。

1
<p id="div-border-bottom-purple">且不问结果如何,尽自己之所能,积极的面对。</p>

插入 图片

给文章插入图片分为本地引用和 CDN 引用两种办法,使用 CDN 引用的话,将图片上传到一些免费的 CDN 服务中。比如 Cloudinary 提供的图片 CDN 服务,在 Cloudinary 中上传图片后,会生成对应的 url 地址,将地址直接拿来引用即可。建议一些大的图片使用 CDN 引用,既节省空间,又能节省图片载入的时间。

我在网上搜索到的本地图片引用方法有分为绝对路径和相对路径两种,但我使用绝对路径引用并没有成功。由于文章总要插入一些图片实现图文并茂,较多的图片放置在同一文件夹引用不方便管理,这里还是推荐采用使用相对路径引用的方法。

通过修改博客配置文件_config.yml

1
post_asset_folder: true

_config.yml文件中的配置项post_asset_folder设为 true 后,执行命令$ hexo new post_name,在~/source/_posts/中会生成文章post_name.md和同名文件夹post_name。将图片资源放在post_name中,文章就可以使用相对路径引用图片资源了。

为了方便起见,可以安装 hexo-asset-image 插件:

1
npm install hexo-asset-image --save

然后就可以使用下述格式引用图片了。

1
![](post_name/image.jpg)

[2019/6/14] 遇到问题

经多次试验验证,此插件存在一定的 BUG,生成图片的路径存在问题,如果你采用的是 yourname.github.io 域名,生成的 HTML 文件中图片引用地址为/.io//imagename.jpg/;如果你设置为yourname.github.io/blog/这样的地址,生成的 HTML 文件中图片引用地址为/blog/blog/imagename.jpg/。发生此类错误的原因是,在 v1.0.0 版本第 26 行代码中,

1
link = link.substring(beginPos, endPos) + '/' + appendLink

endPos小于beginPos的时候,link会往回取字符串.io,导致img url 多了/.io,从而获取不到正确的图片路径。目前我的解决方案是使用旧版本的插件。

[2019/8/5] 解决方案

该插件作者至今未修复 v1.0.0 版本中的 BUG,在该插件的 Issues 中,有人提出问题的解决方案。

打开博客文件夹下的node_modules/hexo-asset-image/index.js,即该插件的安装位置,修改第 24 行代码,如下所示。

文件位置:~/node_modules/hexo-asset-image/index.js
1
2
3
4
else {
+ var endPos = link.length-1;
- var endPos = link.lastIndexOf('.');
}

插入 音乐 和 视频

音乐

网易云音乐的外链很好用,不仅有可以单曲,还能有歌单。在网易云音乐的播放列表中有生成外链播放器,配置好样式直接复制代码插入文章即可。但是有一些音乐因为版权原因放不了,还有就是不完全支持 https,导致小绿锁不见了。要解决这些缺点,就需要安装插件。

也可以直接使用 HTML 的标签,写法如下:

1
`<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>`

这里推荐 hexo-tag-aplayerAPlayer 播放器的 Hexo 标签插件。

首先在站点文件夹根目录安装插件:

1
npm install hexo-tag-aplayer --save

文章中的写法:

1
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

还可以支持歌单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% aplayerlist %}
{
"autoplay": false,
"showlrc": 3,
"mutex": true,
"music": [
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
},
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
}
]
}
{% endaplayerlist %}

具体的参数设置可以参考该插件的 README 和这插件的 Aplayer 的官方文档

关于lrc歌词,可以用相关工具下载网易云音乐的歌词,另发现暂时不支持offset参数。

[2019/8/20] 更新

该插件与 hexo-filter-optimize 插件共同使用会出现 BUG,对该问题的具体分析可参见我的文章《加速 Hexo 博客的方法及遇到的问题》。

视频

可以直接用 HTML 的标签,写法如下:

1
<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

如果想用插件的话,这里推荐 hexo-tag-dplayer,和音乐播放器 Aplayer 属于同一系列插件,是 Dplayer 播放器的 Hexo 标签插件,支持弹幕。

首先还是在站点文件夹根目录安装插件:

1
npm install hexo-tag-dplayer --save

在文章中的写法:

1
{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

要使用弹幕,必须有apiid两项。

插入 ECharts 动态图表

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari 等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

插件的安装

Hexo 的 ECharts 插件是博主 KChen 根据周旅军的原型插件开发的。进入博客根目录安装插件:

1
npm install hexo-tag-echarts --save

插件的使用

在文章中使用 ECharts 时,格式为:

1
2
3
{% echarts 400 '85%' %}
\\TODO option goes here
{% endecharts %}

其中echarts是标签名,不需要更改,400是图表容器的高度,85%是图表容器的相对宽度。而在tag之间的部分,则是需要自己填充的图表数据了。

比如,在文章中输入以下内容:

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
{% echarts 400 '85%' %}
{
title: {
text: "某站点用户访问来源",
subtext: "ECharts 示例",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{
value: 335,
name: "直接访问"
},
{
value: 310,
name: "邮件营销"
},
{
value: 234,
name: "联盟广告"
},
{
value: 135,
name: "视频广告"
},
{
value: 1548,
name: "搜索引擎"
}
]
}
]
}
{% endecharts %}

本站基本不使用该功能,因此已经停用该插件。此处不再给出示例。

如果按照上例不能正确绘制图表,请照下面的指导修改一下 ECharts 的模板文件。
用编辑器打开博客目录下~/node_modules/hexo-tag-echarts/echarts-template.html 文件。
作如下修改:

文件位置:~/node_modules/hexo-tag-echarts/echarts-template.html
1
2
3
4
5
<div id="<%- id %>" style="width: <%- width %>;height: <%- height %>px;margin: 0 auto"></div>
+ <script src="https://echarts.baidu.com/dist/echarts.common.min.js"></script>
<script type="text/javascript">
...
</script>

如何用好 ECharts

有一种很便捷的使用 ECharts 图表的方法。百度·图说是 ECharts 团队开发的另一款非常方便的工具,提供 UI 界面给你快速的绘制和定义图表,然后导出为代码、图片以及其他格式。

插入 知乎卡片样式链接

具体样式如下所示:

如果没有显示该样式,请尝试刷新页面。

荷戟独彷徨 - The Sound of Silence

新建 linkcard.js

首先在博客主题下的~/themes/next/sourse/js/下新建一个名为 linkcard.js的文件,内容如下:

所在目录:~/themes/next/sourse/js/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload=function(){
var LinkCards=document.getElementsByClassName('LinkCard');
if(LinkCards.length != 0){
var LinkCard=LinkCards[0];
var link=LinkCard.href;
var title=LinkCard.innerText;
LinkCard.innerHTML="<style type=text/css>.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard{position:relative;display:block;margin:1em auto;width:390px;box-sizing:border-box;border-radius:12px;max-width:100%;overflow:hidden;color:inherit;text-decoration:none}.ztext{word-break:break-word;line-height:1.6}.LinkCard-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:center}.LinkCard,.LinkCard:hover{text-decoration:none;border:none!important;color:inherit!important}.LinkCard-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:inherit;background-color:rgba(246,246,246,0.88)}.LinkCard-text{overflow:hidden}.LinkCard-title{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(16px * 1.25 * 2);font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}.LinkCard-meta{display:flex;margin-top:4px;font-size:14px;line-height:20px;color:#999;white-space:nowrap}.LinkCard-imageCell{margin-left:8px;border-radius:6px}.LinkCard-image{display:block;width:60px;height:auto;border-radius:inherit;margin-bottom:0!important}</style><span class=LinkCard-backdrop style=background-image:url(/images/logo.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center><svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=logo src=/images/logo.svg></span></span>";

for (var i = LinkCards.length - 1; i >= 1; i--) {
LinkCard=LinkCards[i];
title=LinkCard.innerText;
link=LinkCard.href;
LinkCard.innerHTML="<span class=LinkCard-backdrop style=background-image:url(/images/logo.svg)></span><span class=LinkCard-content><span class=LinkCard-text><span class=LinkCard-title>"+title+"</span><span class=LinkCard-meta><span style=display:inline-flex;align-items:center><svg class="+"'Zi Zi--InsertLink'"+" fill=currentColor viewBox="+"'0 0 24 24'"+" width=17 height=17><path d="+"'M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z'"+" fill-rule=evenodd></path></svg></span>"+link+"</span></span><span class=LinkCard-imageCell><img class=LinkCard-image alt=logo src=/images/logo.svg></span></span>";
}
}
}

代码说明:

其中有两处引入了图片:

1
<span class=LinkCard-backdrop style=background-image:url(/images/logo.svg)></span>

这里的图片是卡片链接的背景图片,较为模糊。

1
<img class=LinkCard-image alt=logo src=/images/logo.svg>

这里的图片是卡片链接右侧显示的图片。

两处的图片地址需要根据自己的设定进行修改,这里所示的仅为个人的设定,不一定适用其他人的配置。另外,建议引入的图片格式为svg格式,效果更好。

修改 _layout.swig

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

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

使用方法

使用下面的代码插入该样式的链接:

1
<a href="website URL" class="LinkCard">your description</a>

插入 脚注

Markdown 基本语法中并不包含脚注语法,但是脚注作为一种常见的文本格式,对于文字编辑工作者,特别是喜欢插入引文的人而言,有着很大的使用需求。所以 Multi-Markdown 在其扩充语法集中增添了脚注的语法。大部分的 Markdown 编辑器现在都采用了该语法来渲染脚注。但 Hexo 的默认渲染器是不支持脚注语法的。

目前我了解到的有三款脚注插件:

  1. hexo-footnotes
  2. hexo-reference
  3. hexo-renderer-markdown-it

第一款插件已经停止维护,且原作者推荐使用这里列出的第三款插件,但亲测第一款还是可以用的。我之前使用的是第二款插件,这一款插件最大的特点是能够在做脚注的原文角标处弹出悬浮窗。但该插件存在一个小 BUG,在移动端或者屏幕较窄的情况下,悬浮窗会超出页面边界。第三款插件,准确地来说,它不仅仅是脚注插件,这是一款用于 Markdown 解析和渲染的插件。

实际上在 Hexo 官方的插件库中,还可以找到一款名叫 hexo-renderer-markdown-it-plus 的插件。该插件从名字上即可看出,是第三款插件的升级版本,支持的扩展语法更多,也支持 KaTeX 数学公式的渲染。但我比较喜欢使用 MathJax 渲染数学公式,因为公式的显示可以适应屏幕的大小。使用该插件后,会出现使用 MathJax 和 KaTeX 共同渲染的情形。这种情况下,还需要在custom.styl中对页面显示的内容进行修改(详见 Issues),并且我基本也不会用到这个插件提供的扩展语法,所以没有采用该插件。如果你的博客没有开启渲染数学公式的功能,可以考虑一下该插件。

插件的安装

进入博客根目录安装插件,根据喜好选择一款插件即可:

1
2
3
npm install hexo-footnotes --save
npm install hexo-reference --save
npm install hexo-renderer-markdown-it --save

如果你选择的是第三款插件,则需要先卸载 Hexo 默认自带的 Markdown 渲染器:

1
npm uninstall hexo-renderer-marked --save

插件的使用

前两款插件直接使用脚注语法即可,生成的脚注在文章的末尾。比如:

我的博客1

第三款插件,需要在博客的配置文件_config.yml中进行配置。

可参考官方说明进行详细的配置,在博客的配置文件_config.yml中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Markdown-it config
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol:

可以看到,该插件还能够对每一章节添加锚点,对锚点的标记样式进行修改。

关于数学公式渲染问题的解决方案。

该插件在对数学公式的渲染上同样会出现问题,不过问题不大,可以考虑在出现渲染错误的数学公式上添加一个标签,使公式最后渲染:

1
2
3
4
5
{% raw %}
$$
Formulas
$$
{% endraw %}

代码块添加 复制功能

目前主题已自带此功能,在主题配置文件设置即可,且提供不同主题风格(default / flat / mac)进行选择。

下载 clipboard.js

可以进入 clipboard.js 的主页GitHub 了解具体的功能与使用方法。下载地址:

下载上述文件之一,保存在:~/themes/next/source/js/。我个人推荐下载第二个文件,下述方法中使用的便是第二个文件。

clipboard.js 使用

~/themes/next/source/js/目录下,创建clipboard-use.js,文件内容如下:

所在目录:~/themes/next/source/js/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
copy  /*页面载入完成后,创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
//fa fa-globe可以去字体库替换自己想要的图标
copyHtml += ' <i class="fa fa-clipboard"></i><span>copy</span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);

~/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
34
35
36
copy//代码块复制按钮
.highlight{
//方便copy代码按钮(btn-copy)的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}

引用

~/themes/next/layout/_layout.swig文件中,添加引用(注:在 swig 末尾或 body 结束标签(</body>)之前添加):

文件位置:~/themes/next/layout/_layout.swig
1
2
3
copy<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<script type="text/javascript" src="/js/clipboard-use.js"></script>

文章标题添加 颤抖效果

在自定义 CSS 文件中添加以下内容即可:

文件位置:~/sourse/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 标题颤抖效果
h1.post-title:hover {
animation: shake-it 0.5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes shake-it {
0% {
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25% {
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50% {
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100% {
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}

段落标题添加 锚点

在添加脚注功能时所使用的 hexo-renderer-markdown-it 插件包含了添加锚点的功能,具体如何设置请参考上一章节的内容。

这一插件添加的锚点最大的问题就是,在文章目录中每一章节标题前也会显示锚点的图案,即:

1
2
3
1. ¶第一章
1.1 ¶第一节
2. ¶第二章

这样显得比较难看。

在这里我推荐一个更好的插件,是 NexT 官方制作的一个锚点插件:hexo-theme-next-anchor

如果你使用了 hexo-renderer-markdown-it 插件,为了使插件之间不冲突,可以先设置好 hexo-renderer-markdown-it 插件的功能:

1
2
3
4
5
6
7
  anchors:
level: 2
collisionSuffix: 'v'
- permalink: true
+ permalink: false
permalinkClass: header-anchor
permalinkSymbol: ¶

然后再安装该插件:

1
npm install hexo-theme-next-anchor

如果你使用的是 Hexo 默认渲染器 hexo-renderer-marked,则可忽略上述步骤。

在主题的配置文件_config.yml中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
anchor:
enable: true
color: '#0e83cd'
position: right # If left, anchors will always be visible.
margin: 7px
text: '#'
icon:
# If true, the `text` option will be ignored.
enable: false
# By default, NexT has built-in FontAwesome support.
# This option means `font-family: FontAwesome`, so DO Not change it.
# Also you can choose ForkAwesome, but that's another story.
font: FontAwesome
content: \f0c1 # CSS content for FontAwesome & ForkAwesome.

根据自己的喜好进行设定即可。

文章结尾添加 推荐文章

实现该功能的插件有两个。

插件说明特点
hexo-related-popular-posts最新版本已集成,可以在主题配置文件_config.yml中配置。可以利用 Google Analytics API 将高浏览量(热门)的文章按配置比例加入推荐列表。
hexo-recommended-posts主题尚未集成,但插件本身支持自动显示,自定义位置请查看 README。可以与其它博客相关联,不限于自己博客。

目前我使用的是第二个插件,因此这里主要讲解第二个插件的设定方法。

插件的安装

进入博客根目录安装插件:

1
npm install hexo-recommended-posts --save

在编辑完新的文章之后,使用如下命令获取推荐列表

1
hexo recommend

自定义风格

在官方 README 中有相关说明,但我根据官方说明并没有很顺利的实现自定义的功能,下面是我自己的设定方法。

在博客根目录的_config.yml添加:

1
2
3
4
5
6
7
8
9
10
11
#推荐文章# Dependency: https://github.com/huiwang/hexo-recommended-posts
recommended_posts:
server: https://api.truelaurel.com #后端推荐服务器地址
timeoutInMillis: 10000 #服务时长,超过此时长,则使用离线推荐模式
internalLinks: 5 #内部文章数量
externalLinks: 0 #外部文章数量
fixedNumber: true
autoDisplay: false
#自动在文章底部显示推荐文章
#excludePattern: []
#titleHtml: <div class="note primary"><p>相关文章</p></div> #自定义标题

在主题根目录的_config.yml添加:

1
2
3
4
# Recommended posts
# Dependency: https://github.com/huiwang/hexo-recommended-posts
recommended_posts:
enabled: true

在主题语言包中添加:

文件位置:~/theme/next/languages/zh-CN.yml
1
2
3
4
5
6
7
8
9
  copyright:
author: 本文作者
link: 本文链接
license_title: 版权声明
license_content: "本博客所有文章除特别声明外,均采用 %s 许可协议。转载请注明出处!"
+ recommended_posts: 推荐文章
page:
totally: 共有
tags: 标签

~/next/layout/_macro/post.swig中如下所示的位置添加:

文件位置:~/theme/next/layout/_macro/post.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
    {#####################}
{### END POST BODY ###}
{#####################}

+ {% if theme.recommended_posts.enabled and not is_index %}
+ <div>
+ {% include 'recommended_posts.swig' with {post: post, site: site} %}
+ </div>
+ {% endif %}

{% if theme.wechat_subscriber.enable and not is_index %}
{% include '../_partials/post/wechat-subscriber.swig' %}
{% endif %}

~/next/layout/_macro/中新建recommended_posts.swig,将下文内容复制进去即可。

所在目录:~/theme/next/layout/_macro/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="post-body">
<div class="note primary">
<div class="recommended_posts">
{% set recommended_posts = recommended_posts(post, site) %}
{% if recommended_posts.length > 0 %}
<font size="4" color="#6f42c1"><strong>{{ __('post.recommended_posts') }}</strong></font>
<ul>
{% for link in recommended_posts %}
<li><a href="{{ link.permalink }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>

文章结尾添加 结束标语

添加 passage-end-tag.swig

~/themes/next/layout/_macro/中新建passage-end-tag.swig文件,添加代码至该文件中:

所在目录:~/themes/next/layout/_macro/
1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>

修改 post.swig

打开~/themes/next/layout/_macro/post.swig文件,在post-body后,post-footer前,添加下面内容:

文件位置:~/themes/next/layout/_macro/post.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
    {#####################}
{### END POST BODY ###}
{#####################}

+ <div>
+ {% if not is_index %}
+ {% include 'passage-end-tag.swig' %}
+ {% endif %}
+ </div>

{% if theme.wechat_subscriber.enable and not is_index %}
{% include '../_partials/post/wechat-subscriber.swig' %}
{% endif %}

修改 _config.yml

打开主题配置文件_config.yml,在末尾添加:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

文章结尾添加 今日诗词

注意:下述方法仅适用于 NexT v7.2.0+ 版本。

准备工作

首先通过主题配置文件 _config.yml 启用选项:

1
2
3
4
custom_file_path:
postBodyEnd: source/_data/post-body-end.swig
bodyEnd: source/_data/body-end.swig
style: source/_data/styles.styl

简单使用

最基础的设置参考官方说明文档:通用简单安装代码

首先在~/source/_data/body-end.swig文件内引入今日诗词的 SDK:

1
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js"></script>

然后在~/source/_data/post-body-end.swig文件内放入标签:

1
<span id="jinrishici-sentence">正在加载今日诗词....</span>

高级使用

简单使用的话不显示作者、朝代等信息,参考官方说明文档:通用高级安装代码以及接口返回结果格式,值得注意的地方是这一句话:

使用定制加载时,不要将标签的id或者class设置为jinrishici-sentence,否则 SDK 会自动加载一次。

也就是说插入的标签不应该使用之前的jinrishici-sentence,需要重新命名。参考上一节配置的两个文件,把内容修改一下即可:

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
<script src="//sdk.jinrishici.com/v2/browser/jinrishici.js"></script>
<script>
console.log('今日诗词 - 开始加载...');
jinrishici.load((result) => {
let jrsc = document.getElementById('jrsc');
if (jrsc) {
console.log('今日诗词 - 标签获取成功.');
} else {
console.log('今日诗词 - 标签获取失败!');
return;
}
const data = result.data;
let author = data.origin.author;
let title = '《' + data.origin.title + '》';
let content = data.content.substr(0, data.content.length - 1);
let dynasty = data.origin.dynasty.substr(0, data.origin.dynasty.length - 1);
jrsc.innerText = content + ' @ ' + dynasty + '·' + author + title;
console.log('今日诗词 - 载入完毕.');
if (data.origin.author == '李白') {
let audio = document.createElement("audio");
audio.src = "/ding.mp3";
audio.play();
}
});
</script>
1
<div style="text-align: center"><span id="jrsc" >正在加载今日诗词....</span></div>

标签样式

~/source/_data/styles.styl内写入如下内容,请自行发挥:

1
2
3
4
5
#jrsc {
font-style: italic;
font-size: initial;
color: midnightblue;
}

文章结尾添加 版权声明

目前主题已自带此功能,在主题配置文件设置即可。不过主题自带的样式与下述自行添加的样式不同,可根据个人喜好进行选择。

在目录~/themes/next/layout/_macro/下添加my-copyright.swig,内容如下:

所在目录:~/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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

<p><span>本文标题:</span>{{ page.title }}</a></p>
<p><span>文章作者:</span>{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)">署名-非商业性使用-相同方式共享 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
swal({
title: "",
text: '复制成功',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}

添加 my-post-copyright.styl

在目录~/themes/next/source/css/_common/components/post/下添加my-post-copyright.styl,内容如下:

所在目录:~/themes/next/source/css/_common/components/post/
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
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #333333; // title color
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #0593d3; // link color
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

修改 post.swig

修改~/themes/next/layout/_macro/post.swig,如下所示:

文件位置:~/themes/next/layout/_macro/post.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
    {#####################}
{### END POST BODY ###}
{#####################}

+ <div>
+ {% if not is_index %}
+ {% include 'my-copyright.swig' %}
+ {% endif %}
+ </div>

{% if theme.wechat_subscriber.enable and not is_index %}
{% include '../_partials/post/wechat-subscriber.swig' %}
{% endif %}

修改 post.styl

打开~/themes/next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

文件位置:~/themes/next/source/css/_common/components/post/post.styl
1
@import "my-post-copyright"

在使用 Markdown 书写文章时,在开头声明版权即可:

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
copyright: true #新增,开启版权声明
---

[2019/8/11] 更新:消除警告

在添加版权声明后,可能出现一个问题,在浏览器审查元素中,点击「原始链接」右边的复制按钮,会弹出一个复制成功的提醒,这时候会出现 warning: “showConfirmButton” option has been deprecated. Please use “button” instead。

实际上只需要将my-copyright.swig文件末尾作如下修改:

文件位置:~/themes/next/layout/_macro/my-copyright.swig
1
2
- showConfirmButton: false
+ button: false

  1. 1.https://www.guanqr.com

本文结束啦感谢您阅读