排版示例
2023.11.19
markdown 排版 示例 Seiheki
开启探索之旅
欢迎使用 Seiheki 主题!这是一个为文字爱好者设计的 Hugo 主题,强调优雅的中文排版与流畅的交互体验。本篇文章将作为你的实验室,展示主题所有的视觉元素。
文本排版之美
段落与呼吸感
中国文字之美,在于其形,更在于其意。正如《论语》所云:“学而时习之,不亦说乎?有朋自远方来,不亦乐乎?人不知而不愠,不亦君子乎?” 在 Seiheki 中,我们为正文配置了舒适的行高与字间距,确保长文阅读不再是一种负担。
这是一个引言示例。在 Seiheki 中,引言采用了侧边栏设计,配合柔和的背景色,让它在正文中既显眼又不显突兀。
即使是多段落的引用,也能保持良好的视觉连续性。
强调与修饰
你可以轻松地使用 粗体 来突出重点,或者使用 斜体 来增加文学感。当然,如果你需要删除某些过时的内容,删除线 也是必不可少的。如果你想让文字显得更加专业,行内代码 是个不错选择。
多级标题与 TOC 测试
通过侧边栏的 TOC(目录),你可以快速跳转到以下各个章节。请注意侧边栏在滚动时的放大高亮效果。
三级标题演示 A
这里是一些占位文本,用于拉长页面高度,以便测试滚动。
三级标题演示 B
再来一点文本。在 Seiheki 中,我们特别优化了中文标题的 ID 生成与匹配,确保点击和滚动追踪都能完美支持。
列表与交互
任务与步骤
- 第一步:安装 Hugo
- 第二步:克隆 Seiheki 主题仓库
- 第三步:开始撰写你的第一篇博客
- 记得配置
config.toml - 尝试添加一张精美的封面图
- 记得配置
无序列表
- 极简设计
- 响应式布局
- 优秀的中文排版支持
- 丝滑的移动端菜单
特色功能展示
代码高亮
Seiheki 集成了优雅的代码块渲染,支持行号显示。
|
|
丰富的短代码
数学公式 (LaTeX)
我们完美支持 MathJax。无论是行内公式 $E=mc^2$,还是复杂的段落公式:
$$ \int_{a}^{b} f(x) ,dx = F(b) - F(a) $$
$$ \bbox[10px, border:2px solid #268785]{ \psi(x, t) = A e^{i(kx - \omega t)} } $$
表格排版
| 功能模块 | 描述 | 状态 |
|---|---|---|
| 搜索 | 基于 Fuse.js 的全站搜索 | 已完成 |
| 评论 | 集成 Utterances | 已完成 |
| 统计 | 集成 Umami | 已完成 |
| 暗色模式 | 自动适配系统主题 | 已完成 |
媒体演示
图片灯箱
点击下方图片即可唤起 Fancybox 灯箱进行查看。
多图排列
使用自定义短代码实现多图横向排列。
结语
感谢你阅读本示例。希望这能帮助你更好地了解 Seiheki 的无限可能。如果你有任何建议,欢迎前往 Github 提交 Issue。