fix: inline stack theme
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 写真ギャラリー
|
||||
description: 内蔵の写真ギャラリー機能を披露
|
||||
date: 2026-01-26
|
||||
slug: image-gallery
|
||||
image: helena-hertz-wWZzXlDpMog-unsplash.jpg
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- Gallery
|
||||
- Photoswipe
|
||||
toc: false
|
||||
---
|
||||
|
||||
Stack テーマには、写真ギャラリー機能が内蔵されています。複数の画像を並べて配置するだけで、美しいギャラリーを作成できます。
|
||||
|
||||
## ギャラリーの例
|
||||
|
||||
 
|
||||
|
||||
 
|
||||
|
||||
## 仕組み
|
||||
|
||||
ギャラリーは **Photoswipe** と独自の内部スクリプトによって動作します。画像の縦横比に基づいて、最適なレイアウトが自動的に計算されます。
|
||||
|
||||
ギャラリーを作成するには、同じ行（または同じ段落）に複数の画像を配置するだけです。
|
||||
|
||||
### 構文
|
||||
|
||||
```markdown
|
||||
 
|
||||
|
||||
 
|
||||
```
|
||||
|
||||
> **注意**: Markdown で画像が同じ行に保持されるように、画像の間には 2 つのスペースを入れる必要があります。
|
||||
|
||||
---
|
||||
|
||||
ギャラリーの構文は [Typlog](https://typlog.com/) にインスパイアされています。
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Image Gallery
|
||||
description: Showcasing the built-in image gallery support
|
||||
date: 2026-01-26
|
||||
slug: image-gallery
|
||||
image: helena-hertz-wWZzXlDpMog-unsplash.jpg
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- Gallery
|
||||
- Photoswipe
|
||||
toc: false
|
||||
---
|
||||
|
||||
Stack theme has a built-in support for image galleries. It allows you to create a beautiful gallery by simply placing multiple images side-by-side.
|
||||
|
||||
## Sample Gallery
|
||||
|
||||
 
|
||||
|
||||
 
|
||||
|
||||
## How it works
|
||||
|
||||
The gallery is powered by **Photoswipe** and a custom internal script. It automatically calculates the best layout for your images based on their aspect ratios.
|
||||
|
||||
To create a gallery, you just need to put multiple images in the same line (or paragraph).
|
||||
|
||||
### Syntax
|
||||
|
||||
```markdown
|
||||
 
|
||||
|
||||
 
|
||||
```
|
||||
|
||||
> **Note**: There should be two spaces between the images to ensure they stay in the same line in Markdown
|
||||
|
||||
---
|
||||
|
||||
Gallery Syntax inspired by [Typlog](https://typlog.com/)
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 相簿
|
||||
description: 展示內置的相簿支持
|
||||
date: 2026-01-26
|
||||
slug: image-gallery
|
||||
image: helena-hertz-wWZzXlDpMog-unsplash.jpg
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- Gallery
|
||||
- Photoswipe
|
||||
toc: false
|
||||
---
|
||||
|
||||
Stack 主題內置了對相簿的支持。你只需要簡單地將多張圖片並排放置，就可以創建一個精美的相簿。
|
||||
|
||||
## 示例相簿
|
||||
|
||||
 
|
||||
|
||||
 
|
||||
|
||||
## 它是如何工作的
|
||||
|
||||
相簿由 **Photoswipe** 和一個自定義的內部腳本驅動。它會根據圖片的寬高比自動計算出最佳佈局。
|
||||
|
||||
要創建一個相簿，你只需要將多張圖片放在同一行（或同一個段落）中。
|
||||
|
||||
### 語法
|
||||
|
||||
```markdown
|
||||
 
|
||||
|
||||
 
|
||||
```
|
||||
|
||||
> **注意**: 圖片之間應該有兩個空格，以確保它們在 Markdown 中保持在同一行。
|
||||
|
||||
---
|
||||
|
||||
相簿語法啟發自 [Typlog](https://typlog.com/)
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 相册
|
||||
description: 展示内置的相册支持
|
||||
date: 2026-01-26
|
||||
slug: image-gallery
|
||||
image: helena-hertz-wWZzXlDpMog-unsplash.jpg
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- Gallery
|
||||
- Photoswipe
|
||||
toc: false
|
||||
---
|
||||
|
||||
Stack 主题内置了对相册的支持。你只需要简单地将多张图片并排放置，就可以创建一个精美的相册。
|
||||
|
||||
## 示例相册
|
||||
|
||||
 
|
||||
|
||||
 
|
||||
|
||||
## 它是如何工作的
|
||||
|
||||
相册由 **Photoswipe** 和一个自定义的内部脚本驱动。它会根据图片的宽高比自动计算出最佳布局。
|
||||
|
||||
要创建一个相册，你只需要将多张图片放在同一行（或同一个段落）中。
|
||||
|
||||
### 语法
|
||||
|
||||
```markdown
|
||||
 
|
||||
|
||||
 
|
||||
```
|
||||
|
||||
> **注意**: 图片之间应该有两个空格，以确保它们在 Markdown 中保持在同一行。
|
||||
|
||||
---
|
||||
|
||||
相册语法启发自 [Typlog](https://typlog.com/)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Markdown Syntax Guide
|
||||
date: 2026-01-25
|
||||
description: Sample article showcasing basic Markdown syntax and formatting for HTML elements.
|
||||
tags:
|
||||
- markdown
|
||||
- css
|
||||
- html
|
||||
- themes
|
||||
categories:
|
||||
- Documentation
|
||||
image: pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg
|
||||
---
|
||||
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Headings
|
||||
|
||||
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
|
||||
|
||||
### H3
|
||||
#### H4
|
||||
##### H5
|
||||
###### H6
|
||||
|
||||
## Paragraph
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use *Markdown syntax* within a blockquote.
|
||||
|
||||
### Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
### Blockquote with alert
|
||||
|
||||
> [!NOTE]
|
||||
> Highlights information that users should take into account, even when skimming.
|
||||
|
||||
> [!NOTE] Custom title
|
||||
> You can also provide a custom title for the note alert.
|
||||
|
||||
> [!TIP]
|
||||
> Optional information to help a user be more successful.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Crucial information necessary for users to succeed.
|
||||
|
||||
> [!WARNING]
|
||||
> Critical content demanding immediate user attention due to potential risks.
|
||||
|
||||
> [!CAUTION]
|
||||
> Negative potential consequences of an action.
|
||||
|
||||
## Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
|
||||
|
||||
| Name | Age |
|
||||
| ----- | --- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| --------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
|
||||
| A | B | C | D | E | F |
|
||||
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------- |
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. | Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus | Proin sit amet velit nec enim imperdiet vehicula. | Ut bibendum vestibulum quam, eu egestas turpis gravida nec | Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien |
|
||||
|
||||
## Code Blocks
|
||||
### Code block with backticks
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code block indented with four spaces
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Diff code block
|
||||
|
||||
```diff
|
||||
[dependencies.bevy]
|
||||
git = "https://github.com/bevyengine/bevy"
|
||||
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
|
||||
- features = ["dynamic"]
|
||||
+ features = ["jpeg", "dynamic"]
|
||||
```
|
||||
|
||||
### One line code block
|
||||
|
||||
```html
|
||||
<p>A paragraph</p>
|
||||
```
|
||||
|
||||
## List Types
|
||||
|
||||
### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
### Nested list
|
||||
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Markdown 语法指南
|
||||
date: 2026-01-25
|
||||
description: 展示基本 Markdown 语法和 HTML 元素格式的示例文章。
|
||||
tags:
|
||||
- markdown
|
||||
- css
|
||||
- html
|
||||
- themes
|
||||
categories:
|
||||
- Documentation
|
||||
image: pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg
|
||||
---
|
||||
|
||||
这篇文章提供了可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，同时也展示了 Hugo 主题中基本 HTML 元素是否应用了 CSS 装饰。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 标题 (Headings)
|
||||
|
||||
以下 HTML `<h1>`—`<h6>` 元素代表了六个级别的章节标题。`<h1>` 是最高级别，而 `<h6>` 是最低级别。
|
||||
|
||||
### H3
|
||||
#### H4
|
||||
##### H5
|
||||
###### H6
|
||||
|
||||
## 段落 (Paragraph)
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## 引用 (Blockquotes)
|
||||
|
||||
引用元素代表从另一个来源引用的内容，可以选择带有引用说明（必须在 `footer` 或 `cite` 元素内），也可以选择带有行内更改（如注释和缩写）。
|
||||
|
||||
### 不带出处的引用
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **注意**：你可以在引用中使用 *Markdown 语法*。
|
||||
|
||||
### 带有出处的引用
|
||||
|
||||
> 不要通过共享内存来通信，而要通过通信来共享内存。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
|
||||
|
||||
### 带提示的引用
|
||||
|
||||
> [!NOTE]
|
||||
> 突出显示用户在快速浏览时也应注意的信息。
|
||||
|
||||
> [!TIP]
|
||||
> 可选信息，帮助用户更顺利地完成任务。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 用户成功所必需的关键信息。
|
||||
|
||||
> [!WARNING]
|
||||
> 由于潜在风险而需要用户立即关注的关键内容。
|
||||
|
||||
> [!CAUTION]
|
||||
> 某个操作可能带来的负面后果。
|
||||
|
||||
> [!NOTE] 自定义标题
|
||||
> 如果你想使用自定义标题，可以在方括号后面添加标题文本，如上所示。
|
||||
|
||||
## 表格 (Tables)
|
||||
|
||||
表格虽然不是 Markdown 核心规范的一部分，但 Hugo 出箱即用地支持它们。
|
||||
|
||||
| 姓名 | 年龄 |
|
||||
| ----- | ---- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
### 表格内的行内 Markdown
|
||||
|
||||
| 斜体 | 加粗 | 代码 |
|
||||
| --------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
|
||||
| A | B | C | D | E | F |
|
||||
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------- |
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. | Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus | Proin sit amet velit nec enim imperdiet vehicula. | Ut bibendum vestibulum quam, eu egestas turpis gravida nec | Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien |
|
||||
|
||||
## 代码块 (Code Blocks)
|
||||
### 使用反引号的代码块
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 使用四个空格缩进的代码块
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Diff 代码块
|
||||
|
||||
```diff
|
||||
[dependencies.bevy]
|
||||
git = "https://github.com/bevyengine/bevy"
|
||||
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
|
||||
- features = ["dynamic"]
|
||||
+ features = ["jpeg", "dynamic"]
|
||||
```
|
||||
|
||||
### 单行代码块
|
||||
|
||||
```html
|
||||
<p>A paragraph</p>
|
||||
```
|
||||
|
||||
## 列表类型 (List Types)
|
||||
|
||||
### 有序列表
|
||||
|
||||
1. 第一项
|
||||
2. 第二项
|
||||
3. 第三项
|
||||
|
||||
### 无序列表
|
||||
|
||||
* 列表项
|
||||
* 另一项
|
||||
* 还有一项
|
||||
|
||||
### 嵌套列表
|
||||
|
||||
* 水果
|
||||
* 苹果
|
||||
* 橘子
|
||||
* 香蕉
|
||||
* 乳制品
|
||||
* 牛奶
|
||||
* 奶酪
|
||||
|
||||
## 其他元素 — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
按 <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> 结束会话。
|
||||
|
||||
大多数<mark>蝾螈</mark>是夜行性的，捕食昆虫、蠕虫和其他小型生物。
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Math Typesetting
|
||||
date: 2026-01-24
|
||||
description: Guide to enabling and using KaTeX in the Stack theme
|
||||
math: true
|
||||
categories:
|
||||
- Documentation
|
||||
slug: math-typesetting
|
||||
---
|
||||
|
||||
The Stack theme supports rendering mathematical notation using [KaTeX](https://katex.org/).
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Enabling KaTeX
|
||||
|
||||
### Per-page basis
|
||||
|
||||
To enable KaTeX for a specific post, include `math: true` in the post's frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "My Math Post"
|
||||
math: true
|
||||
---
|
||||
```
|
||||
|
||||
### Globally
|
||||
|
||||
To enable KaTeX for all posts, set `article.math` to `true` in your site configuration (`params.yaml` or `params.toml`):
|
||||
|
||||
```yaml
|
||||
article:
|
||||
math: true
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Inline Math
|
||||
|
||||
You can include math inline by wrapping the expression in single dollar signs `$`.
|
||||
|
||||
For example: `$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $` renders as $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $
|
||||
|
||||
### Block Math
|
||||
|
||||
For larger equations, use double dollar signs `$$` to create a math block.
|
||||
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
|
||||
### More Complex Formula
|
||||
|
||||
$$
|
||||
f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz
|
||||
$$
|
||||
|
||||
---
|
||||
|
||||
**Note:** For a full list of supported TeX functions, refer to the [KaTeX documentation](https://katex.org/docs/supported.html).
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: 数学公式
|
||||
date: 2026-01-24
|
||||
description: 在 Stack 主题中启用和使用 KaTeX 的指南
|
||||
math: true
|
||||
categories:
|
||||
- Documentation
|
||||
slug: math-typesetting
|
||||
---
|
||||
|
||||
Stack 主题支持使用 [KaTeX](https://katex.org/) 渲染数学公式。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 启用 KaTeX
|
||||
|
||||
### 按页面启用
|
||||
|
||||
要在特定文章中启用 KaTeX，请在文章的前置参数（frontmatter）中包含 `math: true`：
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "我的数学文章"
|
||||
math: true
|
||||
---
|
||||
```
|
||||
|
||||
### 全局启用
|
||||
|
||||
要为所有文章启用 KaTeX，请在网站配置（`params.yaml` 或 `params.toml`）中将 `article.math` 设置为 `true`：
|
||||
|
||||
```yaml
|
||||
article:
|
||||
math: true
|
||||
```
|
||||
|
||||
## 示例
|
||||
|
||||
### 行内公式
|
||||
|
||||
你可以通过将表达式包裹在单个美元符号 `$` 中来包含行内公式。
|
||||
|
||||
例如：`$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $` 将渲染为 $ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $
|
||||
|
||||
### 块级公式
|
||||
|
||||
对于较大的方程式，请使用双美元符号 `$$` 创建数学块。
|
||||
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
|
||||
### 更复杂的公式
|
||||
|
||||
$$
|
||||
f(a) = \frac{1}{2\pi i} \oint_\gamma \frac{f(z)}{z-a} dz
|
||||
$$
|
||||
|
||||
---
|
||||
|
||||
**注意：** 有关受支持的 TeX 函数的完整列表，请参阅 [KaTeX 文档](https://katex.org/docs/supported.html)。
|
||||
@@ -0,0 +1,603 @@
|
||||
---
|
||||
author: Hugo Authors
|
||||
title: Mermaid Diagrams
|
||||
date: 2025-12-23
|
||||
description: A comprehensive guide to creating diagrams with Mermaid in Hugo
|
||||
categories:
|
||||
- Themes
|
||||
- Syntax
|
||||
tags:
|
||||
- Mermaid
|
||||
- Diagrams
|
||||
- Markdown
|
||||
---
|
||||
|
||||
This theme supports [Mermaid](https://mermaid.js.org/) diagrams directly in your Markdown content. Mermaid lets you create diagrams and visualizations using text and code.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## About Mermaid.js
|
||||
|
||||
This theme integrates [Mermaid.js](https://mermaid.js.org/) (v11) to render diagrams from text definitions within Markdown code blocks. Mermaid is a JavaScript-based diagramming and charting tool that uses text-based syntax inspired by Markdown.
|
||||
|
||||
For complete syntax documentation, see the [Mermaid.js documentation](https://mermaid.js.org/intro/syntax-reference.html).
|
||||
|
||||
## Getting Started
|
||||
|
||||
To create a Mermaid diagram, simply use a fenced code block with `mermaid` as the language identifier:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Start] --> B[Process]
|
||||
B --> C[End]
|
||||
```
|
||||
````
|
||||
|
||||
The diagram will be automatically rendered when the page loads.
|
||||
|
||||
## Features
|
||||
|
||||
- **Auto-detection**: Mermaid script only loads on pages that contain diagrams
|
||||
- **Theme Support**: Diagrams automatically adapt to light/dark mode
|
||||
- **HTML Labels**: Support for HTML content in labels (like `<br/>` for line breaks)
|
||||
- **Configurable**: Customize version, security level, and more in your site config
|
||||
|
||||
## Configuration
|
||||
|
||||
You can configure Mermaid in your site config:
|
||||
|
||||
**hugo.yaml:**
|
||||
```yaml
|
||||
params:
|
||||
article:
|
||||
mermaid:
|
||||
version: "11" # Mermaid version from CDN
|
||||
look: classic # classic or handDrawn (sketch style)
|
||||
lightTheme: default # Theme for light mode
|
||||
darkTheme: neutral # Theme for dark mode
|
||||
securityLevel: strict # strict (default), loose, antiscript, sandbox
|
||||
htmlLabels: true # Enable HTML in labels
|
||||
```
|
||||
|
||||
**hugo.toml:**
|
||||
```toml
|
||||
[params.article.mermaid]
|
||||
version = "11" # Mermaid version from CDN
|
||||
look = "classic" # classic or handDrawn (sketch style)
|
||||
lightTheme = "default" # Theme for light mode
|
||||
darkTheme = "neutral" # Theme for dark mode
|
||||
securityLevel = "strict" # strict (default), loose, antiscript, sandbox
|
||||
htmlLabels = true # Enable HTML in labels
|
||||
```
|
||||
|
||||
### Additional Global Options
|
||||
|
||||
These optional settings use Mermaid's defaults when not specified:
|
||||
|
||||
**hugo.yaml:**
|
||||
```yaml
|
||||
params:
|
||||
article:
|
||||
mermaid:
|
||||
maxTextSize: 50000 # Maximum text size (default: 50000)
|
||||
maxEdges: 500 # Maximum edges allowed (default: 500)
|
||||
fontSize: 16 # Global font size in pixels (default: 16)
|
||||
fontFamily: "arial" # Global font family
|
||||
curve: "basis" # Line curve: basis, cardinal, linear (default: basis)
|
||||
logLevel: 5 # Debug level 0-5, 0=debug, 5=fatal (default: 5)
|
||||
```
|
||||
|
||||
**hugo.toml:**
|
||||
```toml
|
||||
[params.article.mermaid]
|
||||
maxTextSize = 50000 # Maximum text size (default: 50000)
|
||||
maxEdges = 500 # Maximum edges allowed (default: 500)
|
||||
fontSize = 16 # Global font size in pixels (default: 16)
|
||||
fontFamily = "arial" # Global font family
|
||||
curve = "basis" # Line curve: basis, cardinal, linear (default: basis)
|
||||
logLevel = 5 # Debug level 0-5, 0=debug, 5=fatal (default: 5)
|
||||
```
|
||||
|
||||
For diagram-specific options (like `flowchart.useMaxWidth`), use Mermaid's init directive directly in your diagram:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
%%{init: {'flowchart': {'useMaxWidth': false}}}%%
|
||||
flowchart LR
|
||||
A --> B
|
||||
```
|
||||
````
|
||||
|
||||
> **Security Note:** The default `securityLevel: strict` is recommended. Set to `loose` only if you need HTML labels like `<br/>` in your diagrams.
|
||||
|
||||
### Available Themes
|
||||
|
||||
| Theme | Description |
|
||||
|-------|-------------|
|
||||
| `default` | Standard colorful theme |
|
||||
| `neutral` | Grayscale, great for printing and dark mode |
|
||||
| `dark` | Designed for dark backgrounds |
|
||||
| `forest` | Green color palette |
|
||||
| `base` | Minimal theme, customizable with themeVariables |
|
||||
| `null` | Disable theming entirely |
|
||||
|
||||
### Custom Theme Variables
|
||||
|
||||
For full control, use the `base` theme with custom variables:
|
||||
|
||||
**hugo.yaml:**
|
||||
```yaml
|
||||
params:
|
||||
article:
|
||||
mermaid:
|
||||
lightTheme: base
|
||||
darkTheme: base
|
||||
lightThemeVariables:
|
||||
primaryColor: "#4a90d9"
|
||||
primaryTextColor: "#ffffff"
|
||||
lineColor: "#333333"
|
||||
darkThemeVariables:
|
||||
primaryColor: "#6ab0f3"
|
||||
primaryTextColor: "#ffffff"
|
||||
lineColor: "#cccccc"
|
||||
background: "#1a1a2e"
|
||||
```
|
||||
|
||||
**hugo.toml:**
|
||||
```toml
|
||||
[params.article.mermaid]
|
||||
lightTheme = "base"
|
||||
darkTheme = "base"
|
||||
|
||||
[params.article.mermaid.lightThemeVariables]
|
||||
primaryColor = "#4a90d9"
|
||||
primaryTextColor = "#ffffff"
|
||||
lineColor = "#333333"
|
||||
|
||||
[params.article.mermaid.darkThemeVariables]
|
||||
primaryColor = "#6ab0f3"
|
||||
primaryTextColor = "#ffffff"
|
||||
lineColor = "#cccccc"
|
||||
background = "#1a1a2e"
|
||||
```
|
||||
|
||||
Common variables: `primaryColor`, `secondaryColor`, `tertiaryColor`, `primaryTextColor`, `lineColor`, `background`, `fontFamily`
|
||||
|
||||
> **Note:** Theme variables only work with the `base` theme and must use hex color values (e.g., `#ff0000`).
|
||||
|
||||
## Diagram Types
|
||||
|
||||
### Flowchart
|
||||
|
||||
Flowcharts are the most common diagram type. Use `graph` or `flowchart` with direction indicators:
|
||||
- `TD` or `TB`: Top to bottom
|
||||
- `BT`: Bottom to top
|
||||
- `LR`: Left to right
|
||||
- `RL`: Right to left
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{Decision}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
```
|
||||
|
||||
### Sequence Diagram
|
||||
|
||||
Perfect for showing interactions between components:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
### Class Diagram
|
||||
|
||||
Visualize class structures and relationships:
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <|-- Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
```
|
||||
|
||||
### State Diagram
|
||||
|
||||
Model state machines and transitions:
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
### Entity Relationship Diagram
|
||||
|
||||
Document database schemas:
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
```
|
||||
|
||||
### Gantt Chart
|
||||
|
||||
Plan and track project schedules:
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2024-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in Another :2024-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
### Pie Chart
|
||||
|
||||
Display proportional data:
|
||||
|
||||
```mermaid
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
```
|
||||
|
||||
### Git Graph
|
||||
|
||||
Visualize Git branching strategies:
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
### Mindmap
|
||||
|
||||
Create hierarchical mindmaps:
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
```
|
||||
|
||||
### Timeline
|
||||
|
||||
Display chronological events:
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook
|
||||
: Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
```
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### HTML in Labels
|
||||
|
||||
To use HTML in labels, you must set `securityLevel: loose` in your site config:
|
||||
|
||||
**hugo.yaml:**
|
||||
```yaml
|
||||
params:
|
||||
article:
|
||||
mermaid:
|
||||
securityLevel: loose
|
||||
htmlLabels: true
|
||||
```
|
||||
|
||||
**hugo.toml:**
|
||||
```toml
|
||||
[params.article.mermaid]
|
||||
securityLevel = "loose"
|
||||
htmlLabels = true
|
||||
```
|
||||
|
||||
Then you can use HTML tags like `<br/>` for line breaks:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Line 1<br/>Line 2] --> B[<b>Bold</b> text]
|
||||
```
|
||||
````
|
||||
|
||||
### Per-Diagram Theming
|
||||
|
||||
Override the theme for a specific diagram using Mermaid's frontmatter:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
%%{init: {'theme': 'forest'}}%%
|
||||
graph TD
|
||||
A[Start] --> B[End]
|
||||
```
|
||||
````
|
||||
|
||||
```mermaid
|
||||
%%{init: {'theme': 'forest'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
```
|
||||
|
||||
### Inline Styling with `style`
|
||||
|
||||
You can style individual nodes directly within your diagram using the `style` directive:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[Start] --> B[Process] --> C[End]
|
||||
style A fill:#4ade80,stroke:#166534,color:#000
|
||||
style B fill:#60a5fa,stroke:#1e40af,color:#000
|
||||
style C fill:#f87171,stroke:#991b1b,color:#fff
|
||||
```
|
||||
````
|
||||
|
||||
**Result:**
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[Start] --> B[Process] --> C[End]
|
||||
style A fill:#4ade80,stroke:#166534,color:#000
|
||||
style B fill:#60a5fa,stroke:#1e40af,color:#000
|
||||
style C fill:#f87171,stroke:#991b1b,color:#fff
|
||||
```
|
||||
|
||||
Style properties include:
|
||||
- `fill` - Background color
|
||||
- `stroke` - Border color
|
||||
- `stroke-width` - Border thickness
|
||||
- `color` - Text color
|
||||
- `stroke-dasharray` - Dashed border (e.g., `5 5`)
|
||||
|
||||
### Styling with CSS Classes
|
||||
|
||||
You can define reusable styles with `classDef` and apply them using `:::className`:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::success --> B:::info --> C:::warning
|
||||
classDef success fill:#4ade80,stroke:#166534,color:#000
|
||||
classDef info fill:#60a5fa,stroke:#1e40af,color:#000
|
||||
classDef warning fill:#fbbf24,stroke:#92400e,color:#000
|
||||
```
|
||||
````
|
||||
|
||||
**Result:**
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::success --> B:::info --> C:::warning
|
||||
classDef success fill:#4ade80,stroke:#166534,color:#000
|
||||
classDef info fill:#60a5fa,stroke:#1e40af,color:#000
|
||||
classDef warning fill:#fbbf24,stroke:#92400e,color:#000
|
||||
```
|
||||
|
||||
### Subgraphs
|
||||
|
||||
Group related nodes together:
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
one --> two
|
||||
three --> two
|
||||
two --> c2
|
||||
```
|
||||
|
||||
## Theme Switching
|
||||
|
||||
This theme automatically detects your site's light/dark mode preference and adjusts the Mermaid diagram theme accordingly:
|
||||
|
||||
- **Light mode**: Uses the `default` Mermaid theme
|
||||
- **Dark mode**: Uses the `dark` Mermaid theme (configurable)
|
||||
|
||||
Try toggling the theme switcher to see diagrams update in real-time!
|
||||
|
||||
## Complex Example
|
||||
|
||||
Here's an example with subgraphs, HTML labels, emojis, and custom styling:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
subgraph client["👤 Client"]
|
||||
A["User Device<br/>192.168.1.10"]
|
||||
end
|
||||
|
||||
subgraph cloud["☁️ Cloud Gateway"]
|
||||
B["Load Balancer<br/>(SSL Termination)"]
|
||||
end
|
||||
|
||||
subgraph server["🖥️ Application Server"]
|
||||
C["API Gateway<br/>10.0.0.1"]
|
||||
D["Auth Service<br/>10.0.0.2"]
|
||||
E["Web Server<br/>10.0.0.3"]
|
||||
F["Database<br/>10.0.0.4"]
|
||||
end
|
||||
|
||||
A -- "HTTPS Request" --> B
|
||||
B -- "Forward<br/>(internal)" --> C
|
||||
C -- "Authenticate" --> D
|
||||
D -- "Token" --> C
|
||||
C -- "Route" --> E
|
||||
E --> F
|
||||
|
||||
style client fill:#1a365d,stroke:#2c5282,color:#fff
|
||||
style cloud fill:#f6ad55,stroke:#dd6b20,color:#000
|
||||
style server fill:#276749,stroke:#22543d,color:#fff
|
||||
```
|
||||
|
||||
> **Note:** This example requires `securityLevel: loose` for HTML labels and styling to work.
|
||||
|
||||
## Known Limitations
|
||||
|
||||
### Dark Mode Theming
|
||||
|
||||
Mermaid.js's built-in themes have some limitations:
|
||||
|
||||
- **`dark` theme** (default): Best text contrast, but some diagram backgrounds may appear brownish (e.g., Gantt charts)
|
||||
- **`neutral` theme**: Better background colors, but some text (labels, legends) may have reduced contrast
|
||||
|
||||
**For full control**, use the `base` theme with custom variables:
|
||||
|
||||
**hugo.yaml:**
|
||||
```yaml
|
||||
params:
|
||||
article:
|
||||
mermaid:
|
||||
darkTheme: base
|
||||
darkThemeVariables:
|
||||
primaryColor: "#1f2937"
|
||||
primaryTextColor: "#ffffff"
|
||||
lineColor: "#9ca3af"
|
||||
textColor: "#e5e7eb"
|
||||
```
|
||||
|
||||
**hugo.toml:**
|
||||
```toml
|
||||
[params.article.mermaid]
|
||||
darkTheme = "base"
|
||||
|
||||
[params.article.mermaid.darkThemeVariables]
|
||||
primaryColor = "#1f2937"
|
||||
primaryTextColor = "#ffffff"
|
||||
lineColor = "#9ca3af"
|
||||
textColor = "#e5e7eb"
|
||||
```
|
||||
|
||||
We plan to improve dark mode theming in future updates as Mermaid.js evolves.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Diagram not rendering?
|
||||
|
||||
1. Make sure you're using a fenced code block with `mermaid` as the language
|
||||
2. Check your browser's console for syntax errors
|
||||
3. Verify your Mermaid syntax at [Mermaid Live Editor](https://mermaid.live/)
|
||||
|
||||
### HTML not working in labels?
|
||||
|
||||
HTML in labels requires `securityLevel: loose`. Update your configuration:
|
||||
|
||||
**hugo.yaml:**
|
||||
```yaml
|
||||
params:
|
||||
article:
|
||||
mermaid:
|
||||
securityLevel: loose
|
||||
htmlLabels: true
|
||||
```
|
||||
|
||||
**hugo.toml:**
|
||||
```toml
|
||||
[params.article.mermaid]
|
||||
securityLevel = "loose"
|
||||
htmlLabels = true
|
||||
```
|
||||
|
||||
> **Warning:** Using `loose` security level allows HTML in diagrams. Only use this if you trust your diagram content.
|
||||
|
||||
### Syntax errors?
|
||||
|
||||
Mermaid is strict about syntax. Common issues:
|
||||
- Missing spaces around arrows
|
||||
- Unclosed brackets or quotes
|
||||
- Invalid node IDs (avoid special characters)
|
||||
|
||||
## Resources
|
||||
|
||||
- [Mermaid Documentation](https://mermaid.js.org/intro/)
|
||||
- [Mermaid Live Editor](https://mermaid.live/) - Test diagrams interactively
|
||||
- [Mermaid Syntax Reference](https://mermaid.js.org/intro/syntax-reference.html)
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 01
|
||||
date: 2000-01-01
|
||||
description: Test post 01 for pagination behavior.
|
||||
slug: pagination-test-01
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **01**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 02
|
||||
date: 2000-01-02
|
||||
description: Test post 02 for pagination behavior.
|
||||
slug: pagination-test-02
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **02**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 03
|
||||
date: 2000-01-03
|
||||
description: Test post 03 for pagination behavior.
|
||||
slug: pagination-test-03
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **03**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 04
|
||||
date: 2000-01-04
|
||||
description: Test post 04 for pagination behavior.
|
||||
slug: pagination-test-04
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **04**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 05
|
||||
date: 2000-01-05
|
||||
description: Test post 05 for pagination behavior.
|
||||
slug: pagination-test-05
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **05**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 06
|
||||
date: 2000-01-06
|
||||
description: Test post 06 for pagination behavior.
|
||||
slug: pagination-test-06
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **06**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 07
|
||||
date: 2000-01-07
|
||||
description: Test post 07 for pagination behavior.
|
||||
slug: pagination-test-07
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **07**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 08
|
||||
date: 2000-01-08
|
||||
description: Test post 08 for pagination behavior.
|
||||
slug: pagination-test-08
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **08**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 09
|
||||
date: 2000-01-09
|
||||
description: Test post 09 for pagination behavior.
|
||||
slug: pagination-test-09
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **09**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 10
|
||||
date: 2000-01-10
|
||||
description: Test post 10 for pagination behavior.
|
||||
slug: pagination-test-10
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **10**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 11
|
||||
date: 2000-01-11
|
||||
description: Test post 11 for pagination behavior.
|
||||
slug: pagination-test-11
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **11**.
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Pagination Test 12
|
||||
date: 2000-01-12
|
||||
description: Test post 12 for pagination behavior.
|
||||
slug: pagination-test-12
|
||||
tags:
|
||||
- pagination
|
||||
- test
|
||||
categories:
|
||||
- Testing
|
||||
draft: false
|
||||
---
|
||||
|
||||
This is pagination test post **12**.
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
title: ショートコード
|
||||
date: 2026-01-26
|
||||
description: Stack テーマでサポートされているさまざまなショートコードを紹介します。
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- 隐私
|
||||
---
|
||||
|
||||
Stack テーマには、コンテンツを強化するためのカスタムショートコードがいくつか用意されています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 引用 (Quote)
|
||||
|
||||
`quote` ショートコードを使用すると、著者、出典、URL を含む引用を表示できます。
|
||||
|
||||
{{< quote author="有名な人" source="彼らが書いた本" url="https://ja.wikipedia.org/wiki/Book">}}
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
{{< /quote >}}
|
||||
|
||||
### 使い方
|
||||
|
||||
```markdown
|
||||
{{</* quote author="著者名" source="出典タイトル" url="https://example.com" */>}}
|
||||
ここに引用内容を入力します。
|
||||
{{</* /quote */>}}
|
||||
```
|
||||
|
||||
|
||||
## ビデオ (Video)
|
||||
|
||||
`video` ショートコードを使用すると、セルフホストまたはリモートのビデオファイルを埋め込むことができます。
|
||||
|
||||
{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" >}}
|
||||
|
||||
### 使い方
|
||||
|
||||
```markdown
|
||||
{{</* video src="https://example.com/video.mp4" */>}}
|
||||
```
|
||||
|
||||
|
||||
## Bilibili
|
||||
|
||||
Bilibili からビデオを埋め込みます。`av` および `bv` ID の両方をサポートしています。
|
||||
|
||||
{{< bilibili "BV1634y1t7xR" >}}
|
||||
|
||||
### 使い方
|
||||
|
||||
```markdown
|
||||
{{</* bilibili "BV1634y1t7xR" */>}}
|
||||
```
|
||||
|
||||
|
||||
## YouTube
|
||||
|
||||
Hugo 内蔵の YouTube ショートコードです。
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
### 使い方
|
||||
|
||||
```markdown
|
||||
{{</* youtube ZJthWmvUzzc */>}}
|
||||
```
|
||||
|
||||
|
||||
## 騰訊視頻 (Tencent Video)
|
||||
|
||||
Tencent Video からビデオを埋め込みます。
|
||||
|
||||
{{< tencent "u00306ng962" >}}
|
||||
|
||||
### 使い方
|
||||
|
||||
```markdown
|
||||
{{</* tencent "u00306ng962" */>}}
|
||||
```
|
||||
|
||||
|
||||
## GitLab Snippet
|
||||
|
||||
GitLab からスニペットを埋め込みます。
|
||||
|
||||
{{< gitlab 2349278 >}}
|
||||
|
||||
### 使い方
|
||||
|
||||
```markdown
|
||||
{{</* gitlab 2349278 */>}}
|
||||
```
|
||||
|
||||
|
||||
## 図表 (Diagrams)
|
||||
|
||||
Stack は [Mermaid](https://mermaid.js.org/) 図表を標準でサポートしています。
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
### 使い方
|
||||
|
||||
Mermaid コードを、言語を `mermaid` に設定したコードブロックで囲みます。
|
||||
|
||||
<pre><code>```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```</code></pre>
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Shortcodes
|
||||
date: 2026-01-26
|
||||
description: Sample article showcasing various shortcodes supported by Stack theme.
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- shortcodes
|
||||
- privacy
|
||||
---
|
||||
|
||||
Stack theme also provides some custom shortcodes to enhance your content.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Quote
|
||||
|
||||
The `quote` shortcode allows you to display a quote with an author, source, and URL.
|
||||
|
||||
{{< quote author="A famous person" source="The book they wrote" url="https://en.wikipedia.org/wiki/Book">}}
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
{{< /quote >}}
|
||||
|
||||
### Usage
|
||||
|
||||
```markdown
|
||||
{{</* quote author="Author Name" source="Source Title" url="https://example.com" */>}}
|
||||
Quote content here.
|
||||
{{</* /quote */>}}
|
||||
```
|
||||
|
||||
## Video
|
||||
|
||||
The `video` shortcode allows you to embed self-hosted or remote video files.
|
||||
|
||||
{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" >}}
|
||||
|
||||
### Usage
|
||||
|
||||
```markdown
|
||||
{{</* video src="https://example.com/video.mp4" */>}}
|
||||
```
|
||||
|
||||
## Bilibili
|
||||
|
||||
Embed videos from Bilibili. Supports both `av` and `bv` IDs.
|
||||
|
||||
{{< bilibili "BV1634y1t7xR" >}}
|
||||
|
||||
### Usage
|
||||
|
||||
```markdown
|
||||
{{</* bilibili "BV1634y1t7xR" */>}}
|
||||
```
|
||||
|
||||
## YouTube
|
||||
|
||||
Hugo's built-in YouTube shortcode.
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
### Usage
|
||||
|
||||
```markdown
|
||||
{{</* youtube ZJthWmvUzzc */>}}
|
||||
```
|
||||
|
||||
## Tencent Video
|
||||
|
||||
Embed videos from Tencent Video.
|
||||
|
||||
{{< tencent "u00306ng962" >}}
|
||||
|
||||
### Usage
|
||||
|
||||
```markdown
|
||||
{{</* tencent "u00306ng962" */>}}
|
||||
```
|
||||
|
||||
## GitLab Snippet
|
||||
|
||||
Embed snippets from GitLab.
|
||||
|
||||
{{< gitlab 2349278 >}}
|
||||
|
||||
### Usage
|
||||
|
||||
```markdown
|
||||
{{</* gitlab 2349278 */>}}
|
||||
```
|
||||
|
||||
## Diagrams
|
||||
|
||||
Stack supports [Mermaid](https://mermaid.js.org/) diagrams out of the box.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
Wrap your Mermaid code in a code block with the language set to `mermaid`.
|
||||
|
||||
<pre><code>```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```</code></pre>
|
||||
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: 短代碼
|
||||
date: 2026-01-26
|
||||
description: 展示 Stack 主題支持的各種短代碼。
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- 隐私
|
||||
---
|
||||
|
||||
Stack 主題還提供了一些自定義短代碼來增強你的內容。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 引用 (Quote)
|
||||
|
||||
`quote` 短代碼允許你顯示帶有作者、來源和 URL 的引用。
|
||||
|
||||
{{< quote author="一位名人" source="他們寫的書" url="https://zh.wikipedia.org/wiki/Book">}}
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
{{< /quote >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* quote author="作者名字" source="文章標題" url="https://example.com" */>}}
|
||||
這裡是引用內容。
|
||||
{{</* /quote */>}}
|
||||
```
|
||||
|
||||
## 視頻 (Video)
|
||||
|
||||
`video` 短代碼允許你嵌入自託管或遠程視頻文件。
|
||||
|
||||
{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* video src="https://example.com/video.mp4" */>}}
|
||||
```
|
||||
|
||||
## Bilibili
|
||||
|
||||
嵌入來自 Bilibili 的視頻。支持 `av` 和 `bv` 號。
|
||||
|
||||
{{< bilibili "BV1634y1t7xR" >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* bilibili "BV1634y1t7xR" */>}}
|
||||
```
|
||||
|
||||
## YouTube
|
||||
|
||||
Hugo 內置的 YouTube 短代碼。
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* youtube ZJthWmvUzzc */>}}
|
||||
```
|
||||
|
||||
|
||||
## 騰訊視頻 (Tencent Video)
|
||||
|
||||
嵌入來自騰訊視頻的視頻。
|
||||
|
||||
{{< tencent "u00306ng962" >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* tencent "u00306ng962" */>}}
|
||||
```
|
||||
|
||||
|
||||
## GitLab Snippet
|
||||
|
||||
嵌入來自 GitLab 的代碼片段。
|
||||
|
||||
{{< gitlab 2349278 >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* gitlab 2349278 */>}}
|
||||
```
|
||||
|
||||
|
||||
## 圖表 (Diagrams)
|
||||
|
||||
Stack 出箱即用地支持 [Mermaid](https://mermaid.js.org/) 圖表。
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
### 用法
|
||||
|
||||
將你的 Mermaid 代碼包裹在語言設置為 `mermaid` 的代碼塊中。
|
||||
|
||||
<pre><code>```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```</code></pre>
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: 短代码
|
||||
date: 2026-01-26
|
||||
description: 展示 Stack 主题支持的各种短代码。
|
||||
categories:
|
||||
- Documentation
|
||||
tags:
|
||||
- 隐私
|
||||
---
|
||||
|
||||
Stack 主题还提供了一些自定义短代码来增强你的内容。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 引用 (Quote)
|
||||
|
||||
`quote` 短代码允许你显示带有作者、来源和 URL 的引用。
|
||||
|
||||
{{< quote author="一位名人" source="他们写的书" url="https://zh.wikipedia.org/wiki/Book">}}
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
{{< /quote >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* quote author="作者名字" source="文章标题" url="https://example.com" */>}}
|
||||
这里是引用内容。
|
||||
{{</* /quote */>}}
|
||||
```
|
||||
|
||||
## 视频 (Video)
|
||||
|
||||
`video` 短代码允许你嵌入自托管或远程视频文件。
|
||||
|
||||
{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* video src="https://example.com/video.mp4" */>}}
|
||||
```
|
||||
|
||||
## Bilibili
|
||||
|
||||
嵌入来自 Bilibili 的视频。支持 `av` 和 `bv` 号。
|
||||
|
||||
{{< bilibili "BV1634y1t7xR" >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* bilibili "BV1634y1t7xR" */>}}
|
||||
```
|
||||
|
||||
## YouTube
|
||||
|
||||
Hugo 内置的 YouTube 短代码。
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* youtube ZJthWmvUzzc */>}}
|
||||
```
|
||||
|
||||
## 腾讯视频 (Tencent Video)
|
||||
|
||||
嵌入来自腾讯视频的视频。
|
||||
|
||||
{{< tencent "u00306ng962" >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* tencent "u00306ng962" */>}}
|
||||
```
|
||||
|
||||
## GitLab Snippet
|
||||
|
||||
嵌入来自 GitLab 的代码片段。
|
||||
|
||||
{{< gitlab 2349278 >}}
|
||||
|
||||
### 用法
|
||||
|
||||
```markdown
|
||||
{{</* gitlab 2349278 */>}}
|
||||
```
|
||||
|
||||
## 图表 (Diagrams)
|
||||
|
||||
Stack 出箱即用地支持 [Mermaid](https://mermaid.js.org/) 图表。
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
### 用法
|
||||
|
||||
将你的 Mermaid 代码包裹在语言设置为 `mermaid` 的代码块中。
|
||||
|
||||
<pre><code>```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```</code></pre>
|
||||
Reference in New Issue
Block a user