Next写作常用样式

Posted on Edited on In Views: Waline: Word count in article: 3.1k Reading time ≈ 3 mins.

This is an automatically translated post by LLM. The original post is in Chinese. If you find any translation errors, please leave a comment to help me improve the translation. Thanks!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Some syntax rules beyond markdown make the article more aesthetically pleasing.

> This article is excerpted from [Zhou Yufeng's blog](https://yfzhou.coding.me/2018/08/27/Hexo-Next%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%EF%BC%88%E4%B8%BB%E9%A2%98%E4%BC%98%E5%8C%96%EF%BC%89/).

![8MAadJ.md](https://download.kezhi.tech/img/8MAadJ.md.jpg?x-oss-process=style/webp)

<!--more-->

### 1. Text Alignment

Effect:
{% cq %}
Life is like a mirror,
Knowing oneself from the mirror,
I call it a top priority,
It is also the goal we pursue!
{% endcq %}

Source Code:

Life is like a mirror, Knowing oneself from the mirror, I call it a top priority, It is also the goal we pursue!

1
2
3
4
5

For more tags provided by NexT theme, click: [http://theme-next.iissnan.com/tag-plugins.html](http://theme-next.iissnan.com/tag-plugins.html)

### 2. Theme's Built-in Style Note Tag

default 

1
2
3

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

primary 

1
2
3

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

success 

1
2
3

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

info 

1
2
3

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

warning 

1
2
3

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

danger 

1
2
3

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

danger no-icon 

1
2
3
4
5

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

First, configure in the theme configuration file:

Note tag (bs-callout).

note: # Style style: flat # Whether to have icons icons: true # Rounded rectangle border_radius: 3 light_bg_offset: 

1
2
3
4

### 3. Built-in Label

{% label default@default %}
default 
1
{% label primary@primary %}
primary 
1
{% label success@success %}
success 
1
{% label info@info %}
info 
1
{% label warning@warning %}
warning 
1
{% label danger@danger %}
danger 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

### 4. Tabs

{% tabs Tabs, 2 %}
<!-- tab -->
**This is Tab 1** Haha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha...
<!-- endtab -->
<!-- tab -->
**This is Tab 2**
<!-- endtab -->
<!-- tab -->
**This is Tab 3** Wow, you found me! φ(≧ω≦*)♪～
<!-- endtab -->
{% endtabs %}

This is Tab 1 Haha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha, hahaha...

This is Tab 2

This is Tab 3 Wow, you found me! φ(≧ω≦*)♪～

1
2
3
4
5

### 5. Theme's Built-in Tabs

Source Code:

Click to download Baidu 
1
Effect:{% btn https://www.baidu.com, Click to download Baidu, download fa-lg fa-fw %}