Hi

Hexo美化 Gemini Next主题优化目标：美化博文

背景

发布博客有段时间了，而且陆陆续续写了一些文章，但页面样式都比较简单，只是单一的MarkDown语法，难道是Hexo + Next + MarkDown只能写出简单样式的文章？有点不相信，于是去Next官方。看了一些使用文档，查看了内建标签，原来Next可以让简单样式的文章可以变得那么好看，总结了一下分享出来。

前言

Next主题使用的内置tag，官方都已经写好js，直接使用对应的语法糖加入到文章中，就可以实现多样式、多功能的效果。下面分别说明了一下本人博客Hexo+Next的版本，如果有加入对应tag没有效果的，可以留言给我，一起交流一起学习。

Next主题内置tag样式都是本人经过实践得出，原创之作，欢迎大家进行转载。

版本介绍

id	name	version	remark
1	Hexo	v3.8.0	系统版本
2	NextT.Pisces	v7.0.1	主题版本

内置tag文件位置：blog/themes/next/scripts/tags。

Tags

内置tags的js文件一共有12个，在这里我只讲解本人实践的tag。

tabs

功能

提供了一个tabs页样式标签，可以进行切换。

代码
1
2
3
4
5
6
7
8
9
10
11
{% tabs t_code_1 %}

tab1


tab2


tab3

{% endtabs %}
配置

打开Next配置文件：blog/theme/next/_config.yml，搜索tabs，更改代码如下：
1
2
3
4
5
6
7
# tabs相关配置
tabs:
enable: true
transition:
tabs: false
labels: true
border_radius: 5 # tab圆角设置
示例
tab1
tab2
tab3
语法糖
- tabs-endtabs 是tab tag语法糖。
- tab-endtab 是tabs里一个完整的tab，多个tab只需要更换标题、内容即可。
cq && centerquote

功能

文本居中、引用样式。

代码
1
2
3
4
{% cq %}
一个爱老婆的Python程序猿。。。。。。
**PyGo²**
{% endcq %}
示例

一个爱老婆的Python程序猿。。。。。。
PyGo²

语法糖
- cq-endcq 是cq tag语法糖。
- cq与centerquote等价。

note

功能

内置note标签。

代码

{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

配置

打开Next配置文件：blog/theme/next/_config.yml，搜索Note tag，更改代码如下：

# note tag 相关配置
note:
  style: flat
  icons: true   # 是否启用图标
  border_radius: 3  #圆角设置
  light_bg_offset: 0     设置0为里面内容为note样式包含

示例

default
提示块标签

primary
提示块标签

语法糖

note-endnote 是cq tag语法糖。
样式：default、primary、success、info、warning、danger，示例中我只展示了2种。

label

功能

内置label标签。

代码
1
2
3
4
5
6
{% label default@default %}
{% label primary@primary %}
{% label success@success %}
{% label info@info %}
{% label warning@warning %}
{% label danger@danger %}
示例

default primary success info warning danger

语法糖
- label 是label tag语法糖，不需要加endlabel标识结束。
- @符号前面是label样式。
- @符号后面是label内容。
- 说明label需要2个参数，有兴趣的可以查看：blog/themes/next/scripts/tags/label.js
  1
  2
  3
  args = args.join(' ').split('@');
  var classes = args[0] || 'default';
  var text = args[1] || '';
button && btn

功能

内置button标签。

代码
1
{% btn https://www.baidu.com, 百度首页, download fa-lg fa-fw %}
示例

百度首页

语法糖
- btn 是btn tag语法糖，不需要加endbtn标识结束。
- 这个标签需要4个参数: url地址、button文本内容、button icon、button title。
- 第四个参数我试了，没什么效果，有了解的小伙伴欢迎留言。
- 这个按钮的样式跟Next主题样式一致，因为按钮样式本人优化过，所以在示例中的button与Next默认样式不一致。
- 说明button需要4个参数，有兴趣的可以查看：blog/themes/next/scripts/tags/button.js
  1
  2
  3
  4
  5
  args = args.join(' ').split(',');
  var url = args[0];
  var text = args[1] || '';
  var icon = args[2] || '';
  var title = args[3] || '';
- btn与button等价。
~~exturl && extlink(过时，不建议使用)~~

功能

外链街功能。

代码
1
{% exturl https://www.baidu.com 百度首页 %}
示例

语法糖
- exturl 是exturl tag语法糖，不需要加endexturl标识结束。
- 看js文件，这个标签需要5个参数: url地址、url文本内容、urltitle、url item、0、结束位置，其中url文本内容是个列表。
- 说明button需要4个参数，有兴趣的可以查看：blog/themes/next/scripts/tags/exturl.js
  1
  2
  3
  4
  5
  6
  7
  var exturl = 'exturl';
  var url = '';
  var text = [];
  var title = '';
  var item = '';
  var i = 0;
  var len = args.length;
- exturl与extlink等价。
  
  特殊说明
  
  在md文档中写完此标签，怎么重启，刷新，发现外链都不管用，研究了好一会儿，我在这里就不买官司了，直接看解决方法：
- 打开Next主题的配置文件，搜索exturl
- 更改代码如下
  1
  exturl: true
- 重新启动服务 && 刷新。
fi && fullimage

功能

全像显示图片。

代码
1
2
{% fi /images/article_wdyxxy.jpg %}
<img src="next_youhua_avatar.gif" style="border:1.5px solid blue"/>
示例

语法糖
- fi 是fullimage tag语法糖，无对应的end结束。
- fi与fullimagee等价。
- 我试了几个发现这个fi tag与正常*imag标签没什么区别，上面示例代码中给出了，效果图是一样的。
gp && grouppicture

功能

多格局显示图片。

这里不做简述，请查看博文：hexo博文展示并排等多样式图片
include_raw

功能

引用html文件，是把部分html代码单独写在一个html文件里面，通过tag标签把文件引入的语法，需要可以看最下面的官方说明。

pdf

功能

通过pdf tag标签把pdf文件引入页面中。

代码

1	{% pdf /images/PythonStudy.pdf %}

配置

安装theme-next-pdf

1 2	cd blog/themes/next git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

打开Next配置文件：blog/theme/next/_config.yml，搜索pdf，更改代码如下：

# pdf相关配置
# See: https://github.com/theme-next/theme-next-pdf
pdf:
  enable: true
  height: 500px  # 设置默认高度
  pdfobject:
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js

新建目录，如果想要把文件单独存放一个目录，那么需要在blog/public目录下新建目录；如果不想新建，可以把文件放在blog/public/images目录下，这个目录是单独用来存放站点图片之用的目录。
在pdf tag，参数的路径写上上面新建的。

示例

语法糖

pdf 是pdftag语法糖，无对应的end结束。

建议：
建议少用此标签，因为页面如果加载大文件会很慢。

mermaid

功能

用了好几个翻译都解释“美人鱼”，但是实现的效果类似于word、excel、ppt里面的架构图，通过mermaid tag标签把架构图引入页面中。

代码

{% mermaid graph TD %}
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
{% endmermaid %}

配置

打开Next配置文件：blog/theme/next/_config.yml，搜索mermaid，更改代码如下：

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest   # 主题
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js

关于架构图的样式取决于theme参数，每个样式我都试了一下，还是forest最漂亮。

示例

            graph TD
            A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss
ssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]

语法糖

mermaid-endmermaid 是mermaid tag语法糖。
例子我就采用官方的例子了，没自己去写，官方有好几种写法、样式，需要的请查阅官方资料。

video

功能

html对视频的引用。

代码
1
2
{% video url %}
{% video /publicfiles/xiao6.mp4 %}
配置
- 我在blog/public目录下新建了publicfiles一个目录用来存放上面pdf&&video用到的文件。
示例

Sorry, your browser does not support the video tag.

语法糖
- video 是video tag语法糖，无endvideo结束。
- 如果是引用视频，找到视频资源，直接写上url地址即可。

已解决问题

开启服务运用的是debug模式，方便进行调试，在启用的时候，发现服务报了好多WARNING，总结下来方便大家解决问题。

exturl and extlink tag will not longer be supported.

翻译出来就是将不再支持exturl和’extlink`的标记，在我的blog很少用到，用到的会用button tag进行代替。

Tabs block must have unique name!

找到tabs-endtabs内置标签，在tabs后面加上tab一个名字，而且要unique。

未解决问题

在文章编写过程中遇到了一些问题，先记录下来，以后解决在来修改。

在tab里面放```代码块```，不生效。
button与exturl共存在同一页面，并启动exturl配置，发现button样式没了，可能是我自己瞎改button造成的原因，问题解决中。

学习

结束语

到这里，Next内置的tag都实践完毕，根据需要使用上述tags，给博文带来了不一样的视觉效果以及便利，欢迎大家转载，一起交流使用。

最好的开始就是从现在开始！！！

背景

前言

版本介绍

Tags

tabs

cq && centerquote

note

label

button && btn

exturl && extlink(过时，不建议使用)

fi && fullimage

gp && grouppicture

include_raw

pdf

mermaid

video

学习

结束语