Next主题优化-内置tags篇

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。

  1. tabs

功能

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

代码

1
2
3
4
5
6
7
8
9
10
11
{% tabs t_code_1 %}
<!-- tab 标题一 -->
tab1
<!-- endtab -->
<!-- tab 标题二 -->
tab2
<!-- endtab -->
<!-- tab 标题三 -->
tab3
<!-- endtab -->
{% 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圆角设置

示例

1
2
3
4
5
6
7
8
9
10
11
{% tabs t1 %}
<!-- tab 标题一 -->
tab1
<!-- endtab -->
<!-- tab 标题二 -->
tab2
<!-- endtab -->
<!-- tab 标题三 -->
tab3
<!-- endtab -->
{% endtabs %}

语法糖

  • tabs-endtabs 是tab tag语法糖。
  • tab-endtab 是tabs里一个完整的tab，多个tab只需要更换标题、内容即可。

  1. cq && centerquote

功能

文本居中、引用样式。

代码

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

语法糖

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

  1. note

功能

内置note标签。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% 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，更改代码如下：

1
2
3
4
5
6
# 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种。

  1. 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

语法糖

1
2
3
4
5
6
7
8
- label 是***label tag***语法糖，不需要加endlabel标识结束。
- @符号前面是label样式。
- @符号后面是label内容。
- 说明label需要2个参数，有兴趣的可以查看：blog/themes/next/scripts/tags/label.js

args = args.join(' ').split('@');
var classes = args[0] || 'default';
var text    = args[1] || '';

  1. button && btn

功能

内置button标签。

代码

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

示例

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等价。

功能

外链街功能。

代码

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

示例

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
  • 重新启动服务 && 刷新。

  1. fi && fullimage

功能

全像显示图片。

代码

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

示例

1
{% fi /images/article_wdyxxy.jpg %}

语法糖

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

  1. gp && grouppicture

功能

多格局显示图片。

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

  1. include_raw

功能

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

  1. 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，更改代码如下：

1
2
3
4
5
6
7
# 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 /publicfiles/PythonStudy.pdf %}

语法糖

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

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

  1. mermaid

功能

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

代码

1
2
3
4
5
6
7
{% 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，更改代码如下：
1
2
3
4
5
6
# 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最漂亮。

示例

1
2
3
4
5
6
7
{% 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 %}

语法糖

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

  1. video

功能

html对视频的引用。

代码

1
2
{% video url %}
{% video /publicfiles/xiao6.mp4 %}

配置

  • 我在blog/public目录下新建了publicfiles一个目录用来存放上面pdf&&video用到的文件。

示例

1
{% video /publicfiles/xiao6.mp4 %}

语法糖

  • 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中文官方：http://theme-next.iissnan.com/tag-plugins.html
Next Tag官方：https://hexo.io/docs/tag-plugins.html
botton：https://theme-next.org/docs/tag-plugins/button/
note：https://theme-next.org/docs/tag-plugins/note/
tabs：https://theme-next.org/docs/tag-plugins/tabs/
cq：https://theme-next.org/docs/tag-plugins/
label：https://theme-next.org/docs/tag-plugins/label/
exturl：https://theme-next.org/docs/tag-plugins/exturl/
fullimage：https://theme-next.org/docs/tag-plugins/full-image
group-pictures：https://theme-next.org/docs/tag-plugins/group-pictures
pdf tag：https://theme-next.org/docs/tag-plugins/pdf
theme-next-pdf：https://github.com/theme-next/theme-next-pdf
mermaid：https://theme-next.org/docs/tag-plugins/mermaid/
video：https://theme-next.org/docs/tag-plugins/video

结束语

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

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

Hexo
#Hexo #Hexo美化
Next主题优化-内置tags篇
http://pygo2.top/articles/25933/
作者
mingliang.gao
发布于
2018年12月26日
许可协议