Hugo Theme Stack

Usegit

Wed, 13 May 2026 14:16:17 +0800

Git 目前世界上最先进的分布式版本控制系统

版本控制系统：手动控制自动控制系统

Git与Github的区别

Git安装：

Git的使用： 1.本地仓库 1.1 工作流程： git本地操作的三个区域

Git Repository（Git仓库）
- 最终确定额文件保存到仓库，成为一个新的版本，并且对他人可见
暂存区
- 暂存已经修改的文件最后统一提交到git仓库中
工作区（Working Directory）（写代码工作目录）
- 添加、编辑、修改文件等动作

暂存区的作用：等待所有修改完成，统一提交commit

git add test.php 添加到暂存区

git status

1.2 本地仓库操作 repository 每个文件的修改，删除等操作都能跟踪到

1.进行全局配置操作

$ git config --global user.name "用户名"
$ git config --global user.email "邮箱地址"

2.创建仓库创建一个空目录： windows中创建命令行中创建

$ mkdir pro_name

在命令行中进入这个目录

Git仓库初始化（让git知道，自己需要管理这个目录）

进入到工程目录初始化
$ git init

在任意位置，初始化指定的工程目录
$ git init newrepo

表现，执行之后，会在项目目录下创建".git"的隐藏目录，这个目录是Git所创建的，不能删除，也不能随意更改其中的内容。

Git常用指令操作查看当前状态：git status

添加到缓存区： git add 文件名 说明：git add 指令，可以添加一个文件，也可以同时添加多个文件。 语法1：git add 文件名添加一个文件 语法2：git add 文件名1 文件名2 文件名3 语法3：git add . 添加当前目录到暂存区中

提交至版本库： git commit -m “注释内容”

注释可以写中文

Git的版本回退操作版本回退分为两步骤操作：步骤： 1.查看版本，确定需要回到的时刻点指令： $git log $git log --pretty=oneline 显示一行，常用 2.回退操作指令： $git reset --hard 提交编号

3.注意：回到过去之后，想要再回到之前最先的版本的时候，需要使用指令去查看历史操作，以得到最新的commit id 指令： $git reflog

小结： 1.要想回到过去，必须先得到commit id ，然后通过git reset –hard 进行回退 2.想要回到未来，需要使用 git reflog进行历史操作查看，得到最新的commit id 3.在写回退指令的时候，commit id可以不用写全，git会自动识别

2.远程仓库

2.1远程仓库创建

2.2两种常见的使用方式 HTTPS协议使用 1.创建一个空目录

2.使用clone指令克隆线上仓库到本地语法： $git clone 线上仓库地址

3.在仓库上做对应的操作（提交暂存区，提交本地仓库，提交线上仓库，拉取线上仓库）

提交到线上仓库的指令：$git push

首次往线上仓库提交内容时出现403致命错误，原因是：不是任何人都可以往线上仓库提交内容，必须进行鉴权

需要修改，".git/config"文件

拉取线上仓库的指令: $git pull

提醒：在每天工作的第一件事就是先git pull 拉取线上最新的版本每天下班前要做的是 git push 将本地代码提交到线上仓库

基于ssh协议

该方式与前面的https方式相比，只是影响github对于用户的身份鉴权方式，对于git的具体操作（如，提交本地，添加注释，提交远程等操作没有任何影响）

生成私钥对指令（需要先自行安装openssh）：$ssh-keygen -t rsa -C "注册邮箱"

步骤，创建公私钥对文件

上传公钥文件内容（.ssh/*.pub)

一般使用的设备固定，推荐使用ssh方式

Git的分支操作在版本回退的章节里，每次提交后都会有记录，Git把他们串成时间线，形成类似于时间轴的东西，这个时间轴就是一个分支，我们称之为master分支

在开发的时候往往是团队协作，多人进行开发，因此光有一个分支是无法满足多人同时开发的需求，并且在分支上工作，并不影响其他分支的正常使用

分支相关指令

查看分支：
$git branch

创建分支：
$git branch 分支名

切换分支:
$git checkout 分支名
$git checkout -b 分支名
-b选项表示创建并切换，相当于是两个操作指令

合并分支：
$git merge 被合并的分支名

删除分支：
$git branch -d 分支名

注意：在删除分支的时候，一定要先退出要删除的分支，然后才能删除

短代码

Mon, 26 Jan 2026 00:00:00 +0000

Stack 主题还提供了一些自定义短代码来增强你的内容。

引用 (Quote)

quote 短代码允许你显示带有作者、来源和 URL 的引用。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
― 一位名人, 他们写的书

用法

{{< quote author="作者名字" source="文章标题" url="https://example.com" >}}
这里是引用内容。
{{< /quote >}}

视频 (Video)

video 短代码允许你嵌入自托管或远程视频文件。

Your browser doesn't support HTML5 video. Here is a link to the video instead.

用法

{{< video src="https://example.com/video.mp4" >}}

Bilibili

嵌入来自 Bilibili 的视频。支持 av 和 bv 号。

用法

{{< bilibili "BV1634y1t7xR" >}}

YouTube

Hugo 内置的 YouTube 短代码。

用法

{{< youtube ZJthWmvUzzc >}}

腾讯视频 (Tencent Video)

嵌入来自腾讯视频的视频。

用法

{{< tencent "u00306ng962" >}}

GitLab Snippet

嵌入来自 GitLab 的代码片段。

用法

{{< gitlab 2349278 >}}

图表 (Diagrams)

Stack 出箱即用地支持 Mermaid 图表。

  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

用法

将你的 Mermaid 代码包裹在语言设置为 mermaid 的代码块中。

关于

Mon, 26 Jan 2026 00:00:00 +0000

这是给谁看的？

这是一个示例关于页面。你可以用它来介绍你自己、你的博客或你的项目。

关于作者

你好！我是一个热衷于博客和开源的爱好者。我喜欢探索新技术并向社区分享我的经验。

我的旅程

我在 10 多年前开始了我的 Web 开发之旅。自那以后，我参与了许多项目，从个人博客到大规模企业应用。

技能

前端: HTML, CSS, JavaScript, React, Vue
后端: Node.js, Python, Go
工具: Git, Docker, Hugo, Neovim

联系我

如果你有任何问题或只是想打个招呼，请随时联系我！

电子邮件: hello@example.com
Twitter: @example
GitHub: example

“Logic will get you from A to B. Imagination will take you everywhere.”
— Albert Einstein

此页面由 AI 生成。

相册

Mon, 26 Jan 2026 00:00:00 +0000

Stack 主题内置了对相册的支持。你只需要简单地将多张图片并排放置，就可以创建一个精美的相册。

示例相册

它是如何工作的

相册由 Photoswipe 和一个自定义的内部脚本驱动。它会根据图片的宽高比自动计算出最佳布局。

要创建一个相册，你只需要将多张图片放在同一行（或同一个段落）中。

语法

![图片 1](image1.jpg)  ![图片 2](image2.jpg) 

![图片 3](image3.jpg)  ![图片 4](image4.jpg)

注意: 图片之间应该有两个空格，以确保它们在 Markdown 中保持在同一行。

相册语法启发自 Typlog

Markdown 语法指南

Sun, 25 Jan 2026 00:00:00 +0000

这篇文章提供了可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，同时也展示了 Hugo 主题中基本 HTML 元素是否应用了 CSS 装饰。

标题 (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 语法。

带有出处的引用

不要通过共享内存来通信，而要通过通信来共享内存。 — Rob Pike¹

带提示的引用

[!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)

使用反引号的代码块

<!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 代码块

[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

单行代码块

<p>A paragraph</p>

列表类型 (List Types)

有序列表

第一项
第二项
第三项

无序列表

列表项
另一项
还有一项

嵌套列表

水果
- 苹果
- 橘子
- 香蕉
乳制品
- 牛奶
- 奶酪

其他元素 — abbr, sub, sup, kbd, mark

GIF 是一种位图图像格式。

H2O

Xn + Yn = Zn

按 CTRL + ALT + Delete 结束会话。

大多数蝾螈是夜行性的，捕食昆虫、蠕虫和其他小型生物。

以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的演讲。 ↩︎

数学公式

Sat, 24 Jan 2026 00:00:00 +0000

Stack 主题支持使用 KaTeX 渲染数学公式。

启用 KaTeX

按页面启用

要在特定文章中启用 KaTeX，请在文章的前置参数（frontmatter）中包含 math: true：

---
title: "我的数学文章"
math: true
---

全局启用

要为所有文章启用 KaTeX，请在网站配置（params.yaml 或 params.toml）中将 article.math 设置为 true：

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 文档。

Mermaid Diagrams

Tue, 23 Dec 2025 00:00:00 +0000

This theme supports Mermaid diagrams directly in your Markdown content. Mermaid lets you create diagrams and visualizations using text and code.

About Mermaid.js

This theme integrates Mermaid.js (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.

Getting Started

To create a Mermaid diagram, simply use a fenced code block with mermaid as the language identifier:

```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:

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:

[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:

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:

[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:

```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:

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:

[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

  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:

  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:

  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:

  stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Entity Relationship Diagram

Document database schemas:

  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:

  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:

  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:

  gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

Mindmap

Create hierarchical mindmaps:

  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:

  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:

params:
  article:
    mermaid:
      securityLevel: loose
      htmlLabels: true

hugo.toml:

[params.article.mermaid]
  securityLevel = "loose"
  htmlLabels = true

Then you can use HTML tags like <br/> for line breaks:

```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:

```mermaid
%%{init: {'theme': 'forest'}}%%
graph TD
    A[Start] --> B[End]
```

  %%{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:

```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:

  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:

```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:

  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:

  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:

  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:

params:
  article:
    mermaid:
      darkTheme: base
      darkThemeVariables:
        primaryColor: "#1f2937"
        primaryTextColor: "#ffffff"
        lineColor: "#9ca3af"
        textColor: "#e5e7eb"

hugo.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?

Make sure you’re using a fenced code block with mermaid as the language
Check your browser’s console for syntax errors
Verify your Mermaid syntax at Mermaid Live Editor

HTML not working in labels?

HTML in labels requires securityLevel: loose. Update your configuration:

hugo.yaml:

params:
  article:
    mermaid:
      securityLevel: loose
      htmlLabels: true

hugo.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
Mermaid Live Editor - Test diagrams interactively
Mermaid Syntax Reference

归档

Tue, 28 May 2019 00:00:00 +0000

Pagination Test 12

Wed, 12 Jan 2000 00:00:00 +0000

This is pagination test post 12.

Pagination Test 11

Tue, 11 Jan 2000 00:00:00 +0000

This is pagination test post 11.

Pagination Test 10

Mon, 10 Jan 2000 00:00:00 +0000

This is pagination test post 10.

Pagination Test 09

Sun, 09 Jan 2000 00:00:00 +0000

This is pagination test post 09.

Pagination Test 08

Sat, 08 Jan 2000 00:00:00 +0000

This is pagination test post 08.

Pagination Test 07

Fri, 07 Jan 2000 00:00:00 +0000

This is pagination test post 07.

Pagination Test 06

Thu, 06 Jan 2000 00:00:00 +0000

This is pagination test post 06.

Pagination Test 05

Wed, 05 Jan 2000 00:00:00 +0000

This is pagination test post 05.

Pagination Test 04

Tue, 04 Jan 2000 00:00:00 +0000

This is pagination test post 04.

Pagination Test 03

Mon, 03 Jan 2000 00:00:00 +0000

This is pagination test post 03.

Pagination Test 02

Sun, 02 Jan 2000 00:00:00 +0000

This is pagination test post 02.

Pagination Test 01

Sat, 01 Jan 2000 00:00:00 +0000

This is pagination test post 01.

ドキュメント

Mon, 01 Jan 0001 00:00:00 +0000

链接

Mon, 01 Jan 0001 00:00:00 +0000

要使用此功能，请在 frontmatter 中添加 links 部分。

此页面的 frontmatter：

links:
  - title: GitHub
    description: GitHub 是世界上最大的软件开发平台。
    website: https://github.com
    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
  - title: TypeScript
    description: TypeScript 是 JavaScript 的一个超集，它可以编译成纯 JavaScript。
    website: https://www.typescriptlang.org
    image: ts-logo-128.jpg

image 字段支持本地和外部图像。

搜索

Mon, 01 Jan 0001 00:00:00 +0000

文檔

Mon, 01 Jan 0001 00:00:00 +0000