Lutpul

文本示例

Thu, 29 Oct 2026 12:00:00 +0800

这篇不是文章，是一张对照表：主题（以及它现在用的 Ubuntu Light / Ubuntu Regular 两档英文字脸）在各种文本形态下长什么样。中文目前还是系统的微软雅黑，Serif 档下会变成华文宋体。

标题层级

主题把 h1 和 h2 画成一样大、加粗；h3、h4 稍小；h5、h6 在同字号下变灰。所以下面这五级才是正文里真正能用到的层次。

三级标题 Third level

四级标题 Fourth level

五级标题 Fifth level

六级标题 Sixth level

中英文混排

Lutpul 是一个 Hugo 主题，每一页都是桌面灰上的一扇窗口：条纹标题栏、下沉的内容框、状态条，还有一排像素按钮。A page is one window, and the window is the page —— 这句话放在 12px 的字号里读起来刚刚好。

中文与 English 之间没有加空格；数字 2026、版本 v0.161.1、时间 12:00:00、比例 1.2 倍、区间 10–20px 混在同一行里。标点：逗号，句号。分号；冒号：问号？感叹号！引号「直角」、“弯引号”、‘单引号’；破折号 —— 这样；省略号…… 全角与半角 (half-width) 并用。

强调

粗体：这一段的字重是 700，由浏览器对 Ubuntu Light 做合成加粗。

斜体：斜体没有对应文件，是合成倾斜，注意看它有没有发糊。

粗斜体：两者叠加的样子。

代码示例

Sat, 26 Sep 2026 09:00:00 +0800

这是一篇用来检查代码排版的示例文章：行内代码、围栏代码块、Hugo 高亮、长行折行、中文注释、斜体合成各来一份。

行内代码长这样：hugo server -D，夹在中文句子里 --scale: 1.2 也要看得清。较长的行内代码 themes/lutpul/static/fonts/UbuntuMono-R.ttf 应该整段不断字地贴着文字走。

Shell

# 中文注释：把主题字体换成自带文件之后，构建产物落在 public/fonts/
hugo --minify --gc && rsync -av --delete public/ /var/www/blog/
curl -sS -H 'Content-Type: application/json' -d '{"name":"lutpul","tags":["hugo","mac-os-9","platinum"]}' https://example.org/api/v1/posts

JavaScript

// 长行不换行会撑破窗口，主题用 pre-wrap，会在任意处折回来
const apply = () => {
 doc.style.setProperty("--ts", size + "px");
 doc.classList.toggle("serif", serif);
 for (const b of document.querySelectorAll(".type [data-type]")) {
 b.setAttribute("aria-pressed", String((b.dataset.type === "serif") === serif));
 }
};

Python

import json
from pathlib import Path

def load_config(path: Path) -> dict:
 """读取 hugo.yaml 里 params 的一段，注释里的中文占两个字符宽。"""
 text = path.read_text(encoding="utf-8")
 return json.loads(json.dumps({"raw": text, "size": len(text)}))

斜体、粗体、删除线

italic: the quick brown fox jumps over the lazy dog
bold: the quick brown fox jumps over the lazy dog

没有斜体文件时，italic 由浏览器合成倾斜，可能比正文糊一点；这一点用肉眼对一下就知道了。

图片示例

Sat, 22 Aug 2026 07:00:00 +0800

这篇是图片的对照表。主题只对独占一个段落的图片做处理：套上 1px 黑框 + 下沉阴影 + 淡蓝底，像一张贴在纸上、压进框里的照片。行内小图、徽章不套框。

独占一段：会套上下沉框

图片单独占一段（前后空行，Markdown 会包成 <p><img></p>），于是拿到边框和阴影。原来 800×500，会被压到窗口宽度内等比缩放。

图片 + 说明文字

说明：图片后面紧接一行斜体，读起来像图注。主题没有专门的 figure，斜体段落就够了。

行内小图：不套框

段首放一张小图然后接着写字，因为图片不是独占一段，所以它老老实实待在文字流里，没有边框也没有背景——适合表情、徽章这种小东西。

88×31 的像素徽章

这张恰好是 88×31，主题把它当像素画处理：image-rendering: pixelated，缩放时不做插值，边缘保持硬边；而且即使它独占一段也不套框。

竖图

400×600 的竖图，高度会按比例放大，超过窗口宽度时会先缩到宽度。

图片当链接

图片外面套 [ ]( ) 就成了链接；框和阴影跟着图片走，鼠标移上去没有额外动效（主题整体没有 hover 状态）。

附：文件放哪

这篇用的是 page bundle：content/posts/media-sample/ 里放 index.md 和图片，引用写成 /posts/media-sample/xxx.jpg。也可以把图片统一扔进 static/images/，用 /images/xxx.jpg 引用（不会经过 Hugo 的处理管道，路径固定）。

一张普通的收尾图

关于

Mon, 01 Jan 0001 00:00:00 +0000

这是 Lutpul，一个把每一页画成桌面窗口的 Hugo 主题：条纹标题栏、下沉的内容框、状态条，还有一排像素按钮。

这个站

文章在 content/posts/ 下，一篇一个目录（index.md）。
归档页是 content/archive/_index.md，front matter 里写 layout: archive。
字体只有三份文件：Ubuntu Mono 两份（细 / 粗）、思源黑体 Light 一份，其余靠系统自带。

联系

把这里换成你自己的邮箱、社交账号或者 RSS 地址就行。

友链

Mon, 01 Jan 0001 00:00:00 +0000

下面是常逛的站点。想交换友链的话，按下面的格式发邮件给我就行。

申请友链

站点名称：两到六个字最好
站点地址：https://
一句话描述：三十字以内
一个图标（可选）：32×32 或 88×31 的 PNG

满足下面两条就加：站点能正常访问、内容不是纯采集或广告站。加好后我会回信。

徽章

Mon, 01 Jan 0001 00:00:00 +0000

把这枚 88×31 的徽章放到你的友链页、关于页或者博客侧栏，读者就能顺着它回到这里。

<a href="https://lutpul.com/" target="_blank" rel="noopener"><img src="https://lutpul.com/images/badge.png" alt="Lutpul" width="88" height="31"></a>

怎么用

把上面的 HTML 整段复制走（代码块右上角有复制按钮）；
想把图片存到自己站上，就下载这个文件：/images/badge.png，改一下 src 的地址；
尺寸正好 88×31，别用 CSS 再缩放，像素画一缩就糊。

交换友链

愿意互换的话，把你这边的站名、地址、一句话描述，外加一枚图标发到友链页上写着的方式给我就行。