【从零开始的博客生活 - 4】排版效果展示

演示文章

使用 hugo new content post/example/index.md 命令创建了这篇文章。

📝 备注
样式微调是一个持续的过程，如果你在本文中看到未曾在本系列博文中仔细描述的改进，那么以本文为最新实现。

行内代码：Python 的列表推导式 x2 = [x**2 for x in range(10)] 可以快速生成平方数列。

块级代码：大幅改善了样式和功能性

1
2
3
4
5
6
7
def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a

print(fibonacci(10))  # 55

不同语言不同高亮

1
2
3
[markup.highlight]
    noClasses = false
    lineNos = true

行内公式：质能方程 $E = mc^2$，欧拉公式 $e^{i\pi} + 1 = 0$。

块级公式：

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

带编号的公式：

$$ \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{bmatrix}, \quad \det(\mathbf{A}) = a_{11}a_{22} - a_{12}a_{21} \tag{1.2} $$

改进了引用的样式，使用更经典的居中卡片

任何足够先进的技术，都与魔法无异。
—— 亚瑟·C·克拉克

💡 提示
带标识的引用，这里是TIP

引用/脚注：

其实这玩意¹也叫引用，为了区分，也常常叫脚注(footnote)。

这个引用当然也可以在markdown的所谓的引文片段²中使用。

修改了引用的样式，使得数字都带有中括号。文末的列表也调整了字号和颜色，采用更经典的视觉形态，以便与正文区分。

Hugo Stack 的插图允许行内和块级两种形式。行内的效果往往不好，除非是将小图作为语素的特殊情况，否则不推荐使用。

块级图片必须有上下两行空行：

1
2
3
(空行)
![块级图片自带题注](合成_2026-1_1.png)
(空行)

默认样式将图片宽度设置为100%，高度自动缩放，以适应页面宽度。这往往导致图片过大，视图窒息。

我这里将图片高度设置为50vh，宽度自适应，比较符合一般网络阅读的习惯。

另外点击图片可以放大预览，这是Stack默认就有的功能。

效果展示：

块级图片的alt text 自动显示为题注

分割线优化：细=高级懂不懂啊？+变大变高更显著。

分割线下方的内容。

注意到右侧显示了本文的目录。

正文内容。

正文内容。

[EOF]