2021年7月16日星期五

Hexo Next主题进阶写作技巧

 title: "Hexo Next主题进阶写作技巧"

slug: "hexo-next-writing-skill"
date: 2020-07-11T14:19:25+08:00
draft: false
toc: true
weight: false
categories: ["建站笔记"]
tags: ["hexo"]
​
以下博客写作都是基于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: false
  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 %}

效果：

{% btn https://www.bilibili.com/video/BV1cK4y1u7Dq/, 点击前往bilibili, link fa-lg fa-fw %}

源码:

{% btn https://www.bilibili.com/video/BV1cK4y1u7Dq/, 点击前往bilibili, link fa-lg fa-fw %}

为了避免未知换行问题，一般用法：

​
用pr做了一个电子相册，参考： {% btn https://www.bilibili.com/video/BV1Wx41177ps,使用 Premiere 把照片变成唯美动画效果, link fa-lg fa-fw %}
​

源码：

<div class="note primary">用pr做了一个电子相册，参考： {% btn https://www.bilibili.com/video/BV1Wx41177ps,使用 Premiere 把照片变成唯美动画效果, link fa-lg fa-fw %} </div>
# fa-lg：放大图标33%
# fa-fw：图标和文字之间合理间距显示
# download：图标的名称，fa-download，这里只写download即可
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}
<div class="text-center">
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}
</div>
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-rotate-90 %}

最终效果：

{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}

​
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}
​

{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-rotate-90 %}

9. 参考链接

发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)