ESC
输入关键词搜索文章
目录

博客特性介绍

2026/01/28 00:00:00·2026/05/19 10:23:00
杂识/博客·11 min read
hugo博客

这个博客基于 hugo-xmin 主题，采用了极简主义设计理念，同时添加了一些实用功能。本文介绍这些特性的使用方法。

Dark Mode / Bright Mode

博客默认启用暗黑模式（Dark Mode），点击右上角的按钮可以切换到亮色模式（Bright Mode）。

两种模式下的样式保持一致，包括链接颜色、菜单样式、代码块高亮、表格样式、自定义滚动条等。

特殊 Markdown 语法

博客扩展了标准 Markdown 语法，支持一些便捷的链接格式。

Wikipedia 链接

快速链接到 Wikipedia（支持多语言）：

[wiki Python](./wiki-python.html)
[wiki.zh 维基百科](./wikizh-维基百科.html)
[Langage de programmation](./wikifr-python.html)

效果示例：wiki Python、wiki.zh 维基百科

Google 搜索

快速创建 Google 搜索链接：

[google 如何学习编程](./google-如何学习编程.html)
[Hugo 静态站点生成器](./google-hugo.html)

效果：google Hugo

GitHub 链接

快速链接到 GitHub 仓库：

[github yihui/hugo-xmin](./github-yihuihugo-xmin.html)
[我的博客源码](./github-gongshangzhenggsai.html)

效果：github yihui/hugo-xmin

arXiv 论文链接

快速链接到 arXiv 论文：

[arxiv 1706.03762](./arxiv-170603762.html)
[PDF 版本](./arxiv-170603762-pdf.html)
[论文标题](./arxiv-170603762-abs.html)

效果：arxiv 1706.03762

内部链接

链接到博客内的其他文章或章节：

[博客特性介绍](./博客特性介绍.html)
[博客特性介绍#shortcodes-功能](./博客特性介绍shortcodes-功能.html)
[查看图片部分](./博客特性介绍图片使用.html)

点击跳转到 Shortcodes 部分

图片使用

基本图片语法

使用 图片路径 语法插入图片，图片会自动居中显示：

[img/photo.jpg](./imgphotojpg.html)
[图片说明](./imgscreenshotpng.html)

高级图片功能

使用 figure shortcode 可以获得更多功能（WebP 自动转换、响应式等）。由于篇幅原因，详细用法请参考 docs/SHORTCODES.md。

高亮文本

使用 文本 语法高亮重要内容：

这是==重要内容==需要特别注意。

效果：这是重要内容需要特别注意。

MathJax 数学公式

博客支持 MathJax 数学公式渲染。在文章的 frontmatter 中添加 mathjax: true 即可启用：

---
title: "文章标题"
mathjax: true
---

行内公式

支持两种语法：

美元符号语法：

爱因斯坦质能方程：$E = mc^2$

圆括号语法：

二次公式：\\(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\\)

效果示例：

块级公式

双美元符号语法：

$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$

方括号语法：

\[
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
\]

效果示例：

$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

[ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} ]

复杂公式示例

麦克斯韦方程组：

$$\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \ \nabla \cdot \mathbf{B} &= 0 \ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned}$$

矩阵：

$$\mathbf{A} = \begin{pmatrix} a_{11} & a_{12} & a_{13} \ a_{21} & a_{22} & a_{23} \ a_{31} & a_{32} & a_{33} \end{pmatrix}$$

注意：代码块内的数学公式不会被渲染，会保持原样显示。

代码块保护

博客的 replace.html 脚本会智能识别代码块，确保代码块内的特殊语法不会被处理。

保护范围

以下内容会被保护，不会被转换：

  1. 代码块内的特殊链接语法：
# 这些不会被转换为链接
wiki_link = "[wiki Python](./wiki-python.html)"
arxiv_link = "[[arxiv 1706.03762]"
github_link = "[[github user/repo]"
  1. 行内代码：
`[wiki Python](./wiki-python.html)`  - 保持原样
  1. 代码块内的高亮语法：
highlighted = "==important=="  // 不会被高亮

测试示例

代码块内（不会被处理）：

[wiki Python](./wiki-python.html)
[arxiv 1706.03762](./arxiv-170603762.html)
==高亮文本==

代码块外（正常处理）：

这个保护机制确保了代码示例的准确性和可读性。

Shortcodes 功能

博客提供了多种 Hugo shortcodes，增强内容呈现能力。

可折叠内容

使用 details shortcode 创建可折叠的内容块：

{/{< details summary="点击查看示例" >}}
这里是隐藏的内容，可以包含任何 Markdown 格式。
比如：

- 列表项
- **粗体文本**
- `代码`

{/{< /details >}}

效果示例：

这里是隐藏的内容，可以包含任何 Markdown 格式。 比如：

提示框

使用 admonition shortcode 添加提示框：

{/{< admonition type="note" title="注意" >}}
这是一条提示信息，使用 note 类型。
{/{< /admonition >}}

{/{< admonition type="warning" title="警告" >}}
这是一条警告信息，使用 warning 类型。
{/{< /admonition >}}

{/{< admonition type="tip" title="技巧" >}}
这是一条技巧，使用 tip 类型。
{/{< /admonition >}}

效果示例：

这是一条提示信息，使用 note 类型。

这是一条警告信息，使用 warning 类型。

这是一条技巧，使用 tip 类型。

支持的类型：note、tip、important、warning、caution

视频嵌入

YouTube

使用轻量级的 lite-youtube（性能优化）：

{/{< youtube 视频ID "视频标题" >}}

示例（使用 Hugo 官方介绍视频）：

B站

{/{< bilibili BV码 >}}

代码高亮

Hugo 内置语法高亮支持：

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

其他功能

标题锚点

所有标题自动添加锚点链接，鼠标悬停时显示链接图标。

页面引用

使用 ref 和 relref shortcode 引用其他页面（详见文档）。

二维码生成

使用 qr shortcode 生成二维码图片（详见文档）。

设计理念

极简主义

响应式设计

性能优化

技术栈

完整文档

所有 shortcodes 的完整使用说明请参见：

docs/SHORTCODES.md

总结

这个博客旨在提供一个简洁、高效的写作和阅读体验。主要特性包括：

如果你喜欢这个设计，欢迎查看 GitHub 源码。

Categories:杂识 / 博客
Tags:hugo, 博客