Tabs

1
2
3
4
5
{% tabs [Unique name] [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. [Unique name]: The unique name for each tab block, without commas.
    1. It will be used as a prefix for the #id of each tab and its index number.
    2. If the name contains spaces, all spaces will be replaced with hyphens in the generated #id.
    3. The current URL of the post/page must be unique!
  2. [index]: The index number of the active tab.
    1. If not specified, the first tab will be selected (1).
    2. If the index is -1, no tab will be selected. This will be a spoiler.
    3. Optional parameter.
  3. [Tab caption]: The title of the current tab.
    1. If not specified, the unique name with the tab index suffix will be used as the tab title.
    2. If no title is specified but an icon is specified, the title will be empty.
    3. Optional parameter.
  4. [@icon]: The icon name (full name, e.g., “fas fa-github”).
    1. Spaces can be specified with or without spaces; for example, “Tab caption @icon” is similar to “Tab caption@icon”.
    2. Optional parameter.

Demo 1 - Default, selects the first tab by default

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 2 - No default selection

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 3 - Custom tab names + icon + tab names and icons

This is Tab 1.

This is Tab 2.

This is Tab 3.

Demo 1 - Default, selects the first tab by default

1
2
3
4
5
6
7
8
9
10
11
12

{% subtabs Demo1 %}
<!-- tab test1 -->
This is Tab 1.
<!-- endtab-->
<!-- tab test2 -->
This is Tab 2.
<!-- endtab-->
<!-- tab test3 -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Demo 2 - No default selection

1
2
3
4
5
6
7
8
9
10
11
{% subtabs Demo2 %}
<!-- tab -->
This is Tab 1.
<!-- endtab-->
<!-- tab -->
This is Tab 2.
<!-- endtab-->
<!-- tab -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

Demo 3 - Custom tab names + icon + tab names and icons

1
2
3
4
5
6
7
8
9
10
11
{% subtabs Demo3 %}
<!-- tab test1  -->
This is Tab 1.
<!-- endtab-->
<!-- tab @st-disc-fill -->
This is Tab 2.
<!-- endtab-->
<!-- tab Music @st-disc-fill -->
This is Tab 3.
<!-- endtab-->
{% endsubtabs %}

mermaid

Using the mermaid tag allows you to create Flowcharts, Sequence diagrams, Class Diagrams, State Diagrams, Gantt Charts, and Pie Charts. For more details, refer to the mermaid documentation.
If you are using gulp, make sure to close the pages that have used mermaid. Refer to the documentation for more details.

  • Enable the switch in the theme configuration file
1
mermaid: true
1
2
3
4
5
6
7
{% mermaid %}
graph TD:
   A-->B;
   A-->C;
   B-->D;
   C-->D;
{% endmermaid %}

1
2
3
4
5
6
7
{% mermaid %}
graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
{% endmermaid %}
1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
Group Image Gallery
Wallpapers

Collection of some wallpapers

Group Image Gallery
Girls

My girls

1
2
3
4
<div class="gallery-group-main">
{% galleryGroup 'Wallpapers' 'Collection of some wallpapers' '/' https://s3.qjqq.cn/47/661f408a2be39.webp!color %}
{% galleryGroup 'Girls' 'My girls' '/posts/e19cb4b7.html#gallery-%E7%9B%B8%E5%86%8C' https://s3.qjqq.cn/47/661f3fcd06662.webp!color %}
</div>
  1. Tag syntax 
    1
    2
    3
    {% gallery %}
    markdown content
    {% endgallery %}
  2. Preview
  3. Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {% gallery %}
    ![](https://s3.qjqq.cn/47/661f3f3ce9415.webp!color)
    ![](https://s3.qjqq.cn/47/661f3f76a0233.webp!color)
    ![](https://s3.qjqq.cn/47/661f3f96048cf.webp!color)
    ![](https://s3.qjqq.cn/47/661f3fb392fb9.webp!color)
    ![](https://s3.qjqq.cn/47/661f3fcd06662.webp!color)
    ![](https://s3.qjqq.cn/47/661f3fe838050.webp!color)
    ![](https://s3.qjqq.cn/47/661f4001816f0.webp!color)
    ![](https://s3.qjqq.cn/47/661f3f3ce9415.webp!color)
    ![](https://s3.qjqq.cn/47/661f3f76a0233.webp!color)
    ![](https://s3.qjqq.cn/47/661f3f96048cf.webp!color)
    ![](https://s3.qjqq.cn/47/661f3fb392fb9.webp!color)
    ![](https://s3.qjqq.cn/47/661f3fcd06662.webp!color)
    ![](https://s3.qjqq.cn/47/661f3fe838050.webp!color)
    ![](https://s3.qjqq.cn/47/661f4001816f0.webp!color)
    {% endgallery %}

Chart.js

Enable the switch in the theme configuration file

1
chart: true
1
2
3
{% chartjs %}
options
{% endchart %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{% chart %}
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
{% endchart %}

Typeit

Enable the switch in the theme configuration file

1
typeit: true
1
2
3
4
5
{% typeit 'h1' '{
  options
}' %}
content
{% endtypeit %}

1
2
3
4
5
6
7
{% typeit 'h1' '{
  speed: 50,
  waitUntilVisible: true,
  loop: true
}' %}
Hello, World!
{% endtypeit %}

Article

1
{% article 'path' %}
1
{% article 'posts/ad1f5ca2.html' %}
Replace prismjs
Course
Replace prismjs
prismjs