从一张白纸开始写作

用来检查 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 示例视频
平台视频保持 16:9 比例,并在进入视口附近时加载。

YouTube #

YouTube 示例视频

  1. 这条脚注用来检查脚注内容和返回正文的链接。 ↩︎