从一张白纸开始写作
用来检查 Hugox Ink 正文排版、代码高亮和常见 Markdown 元素的测试文章。
AI 摘要
本文记录从空白开始搭建并测试 Hugox Ink 文章页面,通过标题、引用、列表、脚注、代码高亮、表格、图片及长链接检查响应式排版,并展示 Hugo 新建文章命令,以及原生音视频、Bilibili 和 YouTube 媒体组件的加载与样式效果。
这是我测试 Hugox Ink 排版时用的第一篇文章。主题没有 JavaScript,页面由 HTML、CSS 和一套中文阅读字体构成。
正文排版 #
中文正文的行距通常要比拉丁文字宽一些。这里放了标题、段落和元信息,用来观察它们之间的间距。正文宽度有限制,手机屏幕两侧也留有边距。
这段引用用来检查文字、边框和正文之间的距离。
下面顺手放几个常见的 Markdown 元素:
- 这是一项无序列表内容
- 列表里也可以放
行内代码 - 链接指向 Hugo 官方文档
按下 Tab 可以依次访问页面中的链接。这里还有一段已经删除的文字,以及一个较长的地址:https://gohugo.io/content-management/markdown-attributes/。1
第一层引用使用油墨蓝。
嵌套引用使用暖灰色,正好可以一起检查层级样式。
代码高亮 #
Hugo 内置 Chroma。高亮结果直接写入静态 HTML,不需要浏览器下载脚本。
package main
import "fmt"
func main() {
fmt.Println("这是一段测试文本。")
}
表格与长内容 #
在较窄的屏幕上,表格可以横向滚动,不会撑破正文布局。
| 原则 | 实现方式 | 运行时依赖 |
|---|---|---|
| 正文 | 语义化模板与基础排版 | 无 |
| 亮色页面 | 暖色背景与油墨蓝 | 无 |
| 代码高亮 | Hugo Chroma | 无 |
图片 #

创建下一篇文章时,可以运行:
hugo new content posts/my-note.md
这是一篇不发布的媒体组件测试文章,用于检查不同内容状态下的正文排版。
本地或外部视频 #
一段示例视频
外部音频 #
示例录音
Bilibili #
Bilibili 示例视频
YouTube #
YouTube 示例视频
-
这条脚注用来检查脚注内容和返回正文的链接。 ↩︎