2020年7月31日星期五

Hexo Next主题进阶写作技巧

以下博客写作都是基于Next主题,其它主题不一定集成了以下写作方式。

1. note标签的官方文档使用

首先我们需要在 Next 主题 _config.xml 中设置一下功能开关,有些默认是开的,有些默认是关的:


# Note tag (bs-callout)
note:
 # Note tag style values:
 # - simple   bs-callout old alert style. Default.
 # - modern   bs-callout new (v2-v3) alert style.
 # - flat     flat callout style with background, like on Mozilla or StackOverflow.
 # - disabled disable all CSS styles import of note tag.
style: flat
icons: true
border_radius: 3
 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
 # Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

note写作方式正如我最上面的样式,我们可以这样使用:

{% note [class] [no-icon] %}
这里写你需要写的内容
{% endnote %}

// 注意上面的class和no-icon属性是可以选择的
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

1.1. 爬坑

标签开头和结尾在一行的写法是错误的

比如,如果你这样写是错误的:

{% note danger %}note text, note text, note text{% endnote %}

或者如果这样写也是错误的:

{% note danger %}note text
note text
note text
{% endnote %}

内容必须要跟note标签不在一行:

{% note danger %}
note text, note text, note text
note text, note text, note text
note text, note text, note text
{% endnote %}

1.2.示例

1.2.1. 没有定义样式类别

{% note %}
(没有定义样式类别)
{% endnote %}

{% note %} (没有定义样式类别) {% endnote %}

1.2.2. 默认的类别

{% note default %}
默认形式的类别
{% endnote %}

{% note default %} 默认形式的类别 {% endnote %}

1.2.3. primary形式的类别

{% note primary %}
首要类型形式
{% endnote %}

{% note primary %} 首要类型形式 {% endnote %}

1.2.4. info形式的类别

{% note info %}
info形式的类别
{% endnote %}

{% note info %} info形式的类别 {% endnote %}

1.2.5. success形式的类别

{% note success %}
success形式的类别
{% endnote %}

{% note success %} success形式的类别 {% endnote %}

1.2.6. warning形式的类别

{% note warning %}
warning形式的类别
{% endnote %}

{% note warning %} warning形式的类别 {% endnote %}

1.2.7. danger形式的类别

{% note danger %}
danger形式的类别
{% endnote %}

{% note danger %} danger形式的类别 {% endnote %}

1.2.8. 无图标形式的note标签

{% note info no-icon %}
没有图标的note标签
{% endnote %}

{% note info no-icon %} 没有图标的note标签 {% endnote %}

1.2.9. note标签中插入有序无序列表

{% note default no-icon %}
在note中放入无序、有序列表
* ul
* ul
* ul

1. ol
2. ol
3. ol
{% endnote %}

{% note default no-icon %} 在note中放入无序、有序列表

  • ul

  • ul

  • ul

  1. ol

  2. ol

  3. ol {% endnote %}

1.2.10. note标签中插入表格

{% note default no-icon %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}

{% note default no-icon %}

12
34
56
78

{% endnote %}

2. note标签的html使用

在主题配置文件 _config.yml 里有一个关于这个的配置,但官方文档没有提供 HTML 的使用方式,个人认为这种方式更简单,也不会产生一些奇怪的显示 bugs……

default
<div class="note default">default</div>
primary
<div class="note primary">primary</div>
success
<div class="note success">success</div>
info
<div class="note info">info</div>
warning
<div class="note warning">warning</div>
danger
<div class="note danger">danger</div>
danger no-icon
<div class="note danger no-icon">danger no-icon</p></div>

3. 主题自带FontAwesome图标

效果:

<i class="fa fa-cog"></i> 丰富的插件 Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade,CoffeeScript。 采用的是 Font Awesome 的图标,下面给出一些简单的使用例子,更多请查看官网的使用示例。

源码:

<i class="fa fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade,CoffeeScript。</i>
采用的是 Font Awesome 的图标,下面给出一些简单的使用例子,更多请查看官网的使用示例。

采用的是 Font Awesome 的图标,下面给出一些简单的使用例子,更多请查看官网的使用示例

- <i class="fa fa-download"></i> 下载
  • <i class="fa fa-download"></i> 下载

- <i class="fa fa-download"></i> 下载
- <i class="fa fa-download fa-lg"></i> 下载变大 33%
- <i class="fa fa-download fa-2x"></i> 下载两倍大
  • <i class="fa fa-download"></i> 下载

  • <i class="fa fa-download fa-lg"></i> 下载变大 33%

  • <i class="fa fa-download fa-2x"></i> 下载两倍大

4. 代码块内部样式高亮

Next主题其实是自带代码块高亮显示的,但是有另外一种好玩的代码块高亮写法,叫 diff 语言。

只需要在 markdown 语法代码块的语言选择处写上 diff 即可,然后在相应代码前面加上 -+ 就行了。

5. 文本居中引用

效果:

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

源码:

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

6. 主题自带label标签

首先需要在Next主题 _config.xml 中配置:(Next 8.0默认开启,无需再设置)

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

{% label default@default %}

{% label default@default %}

{% label primary@primary %}

{% label primary@primary %}

{% label success@success %}

{% label success@success %}

{% label info@info %}

{% label info@info %}

{% label warning@warning %}

{% label warning@warning %}

{% label danger@danger %}

{% label danger@danger %}

注意这个有一个BUG,千万不要把这个放到段首。。。

7. 主题自带tabs标签

{% tabs 选项卡, 1 %} <!-- tab --> 这是选项卡 1 哈哈哈 φ(≧ω≦)♪~ <!-- endtab --> <!-- tab --> 这是选项卡 2 嘿嘿嘿 φ(≧ω≦)♪~ <!-- endtab --> <!-- tab --> 这是选项卡 3 嘻嘻嘻 φ(≧ω≦*)♪~ <!-- endtab --> {% endtabs %}

这是选项卡 1 哈哈哈 φ(≧ω≦*)♪~

{% tabs 选项卡, 1 %}
<!-- tab -->
**这是选项卡 1** 哈哈哈 φ(≧ω≦*)♪~
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 嘿嘿嘿 φ(≧ω≦*)♪~
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 嘻嘻嘻 φ(≧ω≦*)♪~
<!-- endtab -->
{% endtabs %}

首先还是需要在Next主题配置文件中配置:

文件位置:~/hexo/themes/next/_config.yml

# Tabs tag.
tabs:
enable: true
transition:
  tabs: false
  labels: true
border_radius: 0

然后上面源码中 , 1 表示一开始在第一个选项卡,非必须,若数值为 -1 则隐藏选项卡内容。更多用法请查看这个页面

8. 主题自带样式按钮

效果:

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

源码:

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

关于按钮的更多使用可以前往这个页面查看。

9. 参考链接

没有评论:

发表评论