diff --git a/content/posts-en/writing-template.md b/content/posts-en/writing-template.md new file mode 100644 index 0000000..ff4fab2 --- /dev/null +++ b/content/posts-en/writing-template.md @@ -0,0 +1,125 @@ +--- +title: "Writing template: this post is the template" +pubDate: 2026-11-02 +category: tech +tags: [writing, template] +pinned: true +locked: true +description: One post that exercises every typographic capability on the site — heading levels, colour emphasis, typefaces, quotes, code windows, tables, images, link cards, folding. Copy it to start a new post. +--- + +This is not a tutorial — it is a **template you can copy**. Every section below actually runs: what you see is what Markdown produces. To start a new post, copy this file, change the slug, and delete what you do not need. + +It is also the live sample for **pinning**: `pinned: true` in the frontmatter lifts a post to the front of the home page, the archive and the bookshelf, while its date, URL and RSS timestamps stay untouched. + +## 1. Heading levels and paragraphs + +Use `##` for a section and `###` for a subsection. **Never use `#`** — the post title comes from the frontmatter `title`, and a second level-one heading confuses both screen readers and search snippets. + +Leave a blank line between paragraphs. Inline you can use **bold**, *italic*, ~~strikethrough~~, `inline code`, and [ordinary links](https://astro.build). + +## 2. Colour emphasis: three per page at most + +The rule comes from the design baseline: the shell is greyscale, so colour exists to weight one judgement in the body — three per page, maximum. More than that and it turns loud. + +First use: state one key conclusion in blue. Then carry on normally. + +Second use: warn about a trap in red. For example, “after changing a Markdown plugin you must clear `node_modules/.astro`, or the change silently does nothing”. + +Third use: confirm a working path in green. After three, this section stays uncoloured. + +There are eight hues (blue / teal / green / yellow / orange / red / pink / purple), each with a standard and a `-soft` variant, plus four greyscale classes (`ink-muted` / `ink-warm` / `ink-cool` / `ink-faint`) for lowering tone — those do not count against the colour budget. + +## 3. Typefaces: change only what you wrap + +Body text is sans-serif by default. To give one sentence a different temperament, wrap it: + +This sentence is in Kai. Good for epigraphs, quoted lines in a review, or paragraphs that should be read slowly. + +This sentence is in Huiwen Ming. Over a long paragraph it noticeably slows reading, so use it for short lines only. + +Six families are available (`font-kai`, `font-song`, `font-hei-sys`, `font-fangsong`, `font-huiwen`, `font-kuaile`), plus an artistic heading class `font-art-kuaile`. **Mind the weight**: switching a whole page to a family makes every visitor download a CJK font, so avoid changing the body default casually. + +### A level-three heading looks like this + +One step smaller than level two, bold, with tighter spacing. Use it to split a section into topics. + +## 4. Quotes and lists + +> Block quotes are for quoting someone. An attribution can follow as italics. +> +> — an invented attribution + +Unordered list: + +- First item +- Second item, with `inline code` +- Third item, nested: + - Child one + - Child two + +Ordered lists suit steps: + +1. Copy the template +2. Change the slug and title in the frontmatter +3. Delete the sections you do not need + +## 5. Code blocks + +Blocks of four lines or more get a greyscale window bar (three dots); shorter fragments do not, so small snippets do not look like screenshots. + +```ts +// Sort contract: pinned first → newest first → id as a tie-breaker +export function sortPosts(posts: T[]): T[] { + return [...posts].sort((a, b) => { + const pin = Number(b.data.pinned === true) - Number(a.data.pinned === true); + return pin !== 0 ? pin : b.data.pubDate.getTime() - a.data.pubDate.getTime(); + }); +} +``` + +Refer to variables inline like `posts`. + +## 6. Tables + +| Capability | Syntax | Note | +| --- | --- | --- | +| Colour emphasis | `` | three per page at most | +| Typeface | `` | a whole page adds font weight | +| Image | `![alt](./assets//x.jpg)` | see the writing guide for size rules | +| Video | frontmatter `video:` | lives in public/media, ≤50MB | +| Link card | a bare URL on its own line | OG fetched at build time, falls back to a plain link | + +## 7. Images + +Reference images by relative path, stored under `content/posts/assets//`; they expand on click and vectors stay sharp: + +![Sample image: a greyscale coast](../posts/assets/media-sample/sample-photo.jpg) + +## 8. Link cards + +A bare URL on its own line becomes an OG preview card at build time; if the fetch fails it degrades to a plain link, never breaking the layout: + +https://astro.build + +## 9. Folding long content + +Long appendices, full logs and big configs can fold away with zero JavaScript, using native `details`: + +
+Open the folded example + +A folded region can hold anything — paragraphs, lists, code blocks. + +- Best for “read on demand” detail +- Not for conclusions (readers may never open it) + +
+ +## 10. Closing after the rule + +--- + +Three sentences are enough to close: what this covered, what the reader should take away, and where to go next. The template is not a demand to write ten sections — it is a promise that **the capabilities are at hand when you need to express something**. + +Next time, copy this file and delete until only your point remains. diff --git a/content/posts/writing-template.md b/content/posts/writing-template.md new file mode 100644 index 0000000..3c2167f --- /dev/null +++ b/content/posts/writing-template.md @@ -0,0 +1,124 @@ +--- +title: "写作模板:这篇文章本身就是模板" +pubDate: 2026-11-02 +category: tech +tags: [写作, 模板] +pinned: true +description: 一篇文章演示全站可用的排版能力:标题层级、彩色强调、字族、引用、代码窗、表格、图、链接卡、折叠。复制它开始写新文。 +--- + +这篇不是教程,是**可复制的模板**。下面每一节都在真跑——你看到的效果,就是 Markdown 源码能产出的效果。写新文章时,把本文件复制一份、改个 slug、删掉不需要的段落即可。 + +它同时是**置顶功能**的活样本:`frontmatter` 里的 `pinned: true` 会让它排在首页、归档与书架的最前面,而日期、URL、订阅源里的时间都不变。 + +## 一、标题层级与段落 + +正文用 `##` 作一级节标题,`###` 作二级。**不要用 `#`**——文章标题由 frontmatter 的 `title` 渲染,正文再写 `#` 会出现两个一级标题,屏幕阅读器与搜索摘要都会困惑。 + +段落之间空一行即可。行内可以**加粗**、*斜体*、~~删除线~~、`行内代码`,也可以放[普通链接](https://astro.build)。 + +## 二、彩色强调:一页不超过三处 + +纪律来自设计基线:站点外壳是灰阶的,颜色只用来给正文某一个判断加重,一页最多三处。超过就变成花哨。 + +第一处:一个关键结论用蓝色提出。 后面照常叙述。 + +第二处:需要警示的坑用红色。 比如「改完 Markdown 插件必须清 `node_modules/.astro`,否则改动静默不生效」。 + +第三处:确认可行的路径用绿色。 三处之后,本节不再上色。 + +可用色相共 8 组(blue / teal / green / yellow / orange / red / pink / purple),每组有标准与 `-soft` 两档;另有 4 个灰阶层级类(`ink-muted` / `ink-warm` / `ink-cool` / `ink-faint`)用于降调,不算彩色额度。 + +## 三、字族:换字体只作用于被包裹的文字 + +正文默认是无衬线。想给某句话换气质,用类包起来就行: + +这一句是楷体。适合题记、书评里引的原句,或者需要慢一点读的段落。 + +这一句是汇文明朝体。长段落用它会明显降低阅读速度,所以只用在短句上。 + +可用字族共 6 族(`font-kai` 楷、`font-song` 宋、`font-hei-sys` 黑、`font-fangsong` 仿宋、`font-huiwen` 汇文明朝、`font-kuaile` 快乐体),另有 `font-art-kuaile` 艺术字标题类。**注意体积**:整页换字族会让访问者下载一份中文字体,正文默认字体不要轻易改。 + +### 三级标题长这样 + +比二级小一档、加粗、上下留白更紧。用于把一节拆成几个小话题。 + +## 四、引用与列表 + +> 引用块用于摘录别人的话。署名可以换成斜体放在最后。 +> +> —— 一句虚构的署名 + +无序列表: + +- 第一项 +- 第二项,可以带 `行内代码` +- 第三项,可以嵌套: + - 子项一 + - 子项二 + +有序列表适合步骤: + +1. 复制模板 +2. 改 frontmatter 的 slug 与标题 +3. 删掉不需要的段落 + +## 五、代码块 + +四行及以上的代码块会带上灰阶窗条(三个点),短代码块不加——避免小片段看着像截图。 + +```ts +// 排序契约:置顶优先 → 时间倒序 → id 兜底 +export function sortPosts(posts: T[]): T[] { + return [...posts].sort((a, b) => { + const pin = Number(b.data.pinned === true) - Number(a.data.pinned === true); + return pin !== 0 ? pin : b.data.pubDate.getTime() - a.data.pubDate.getTime(); + }); +} +``` + +行内提到变量时用 `posts` 这种形式即可。 + +## 六、表格 + +| 能力 | 写法 | 注意 | +| --- | --- | --- | +| 彩色强调 | `` | 一页 ≤3 处 | +| 换字族 | `` | 整页换会拉字体体积 | +| 图片 | `![说明](./assets//x.jpg)` | 体积纪律见写作指南 | +| 视频 | frontmatter `video:` | 放 public/media,≤50MB | +| 链接卡片 | 裸链接单独成段 | 构建期抓 OG,失败回落普通链接 | + +## 七、图片 + +图片用相对路径引用,挂在 `content/posts/assets//` 下,点击可放大(矢量图不糊): + +![示例配图:一片灰阶海岸](./assets/media-sample/sample-photo.jpg) + +## 八、链接卡片 + +一个裸链接单独成段,构建期会抓取 OG 预览生成卡片;抓不到就退回普通链接,不会坏版: + +https://astro.build + +## 九、折叠长内容 + +长附录、完整日志、大段配置可以折叠,零 JS,原生 `details`: + +
+展开看一个被折叠的长例子 + +折叠区里可以放任何东西——段落、列表、代码块。 + +- 适合放「按需查看」的细节 +- 不适合放结论(读者可能永远不展开) + +
+ +## 十、分隔线之后收尾 + +--- + +收尾三句就够:这篇讲了什么、读者该带走什么、下一步去哪。模板不是要你写满十节,而是**在你需要表达时,能力都在手边**。 + +下一篇开始,复制本文件,删到只剩你要说的。 diff --git a/docs/写作指南.md b/docs/写作指南.md index 7b98257..6429cce 100644 --- a/docs/写作指南.md +++ b/docs/写作指南.md @@ -2,6 +2,36 @@ > 适用:`content/posts/*.md`(书评与技术轨通用)。资产目录约定 + 三种媒体的写法 + 体积纪律。 +## 写作模板(从这里开始,2026-11-02 起) + +别从空白文件起步——**复制现成的模板**: + +```bash +cp content/posts/writing-template.md content/posts/my-new-post.md +# 改 frontmatter 的 title / pubDate / tags / description,删掉不需要的段落 +``` + +模板本身是一篇真文章(线上读:`/archives/writing-template/`),每节都在跑一种能力,你看到的效果就是源码的效果:标题层级、三处彩色强调、两族字体、引用、列表、代码窗条、表格、图片放大、链接卡片、`
` 折叠、分隔线。 + +写之前只需记住三条纪律: +- **彩色 ≤3 处/页**:外壳是灰阶,颜色只用来给某个判断加重;超过就花哨 +- **整页换字族要谨慎**:会给访问者拉一份中文字体(汇文明朝整页约 420KB,已子集化) +- **折叠放细节不放结论**:`
` 里的内容可能永远没人展开 + +## 置顶文章 + +首页、归档、书架三处列表默认按日期倒序。想让某篇长期排在最前,frontmatter 加一行: + +```yaml +pinned: true +``` + +语义边界(刻意设计成这样): +- **只影响列表顺序**,不改 `pubDate`、不改 URL、不影响 RSS 的时间序列(订阅者不会看到时间错乱) +- 多篇同时置顶时,它们内部仍按日期倒序 +- 列表里会显示一个灰阶「置顶」小徽标,取消置顶后立刻回到时间序 +- 后台「文章」编辑页有「置顶」开关,不必手改 frontmatter + ## 目录约定 ``` @@ -223,6 +253,23 @@ typography: **层 3 · 艺术字体**:`font-art-kuaile`(站酷快乐体,艺术字专用类)。⚠️ **仅用于标题/短句**:艺术字字形大,CJK 切片体积高(实测用到页 +163KB),长段使用会显著抬高单页字体成本。 +## 瞬间(/moments)怎么写 + +瞬间与文章一样支持富文本,但入口在后台「瞬间」集合(`content/moments/*.md`): + +```yaml +--- +pubDate: 2026-11-02 +tags: [随手拍] +text: 今天把**置顶**做完了,顺手试了 彩色 +--- +``` + +- `text` 支持 markdown(`**加粗**`、列表、`> 引用`)与**同一套排版类**(字体/颜色),因为走的是与全站文案相同的净化管线:危险标签整棵丢弃,只放行 35 项白名单类 +- 一条瞬间 = 一行时间线卡片,**每条都带独立评论区**(展开才挂载,双语页共用同一评论流,评论不分裂) +- 每条的「浏览 / 评论」数字是只读统计(不会因为别人点开评论而虚增浏览) +- `text` 与 `image` 至少填一项;图片建议先压缩 + ## 页面块(关于页 blocks,字段速查) 关于页正文可由九个块拼成(后台拖拽排序,每块有「显示」开关)。完整操作见 [管理台](./管理台.md);这里是写内容时对照的字段表——文本字段一律 `{zh, en}`。 diff --git a/public/admin/config.yml b/public/admin/config.yml index 0d7156d..ad0c1cb 100644 --- a/public/admin/config.yml +++ b/public/admin/config.yml @@ -98,7 +98,11 @@ collections: sortable_fields: [pubDate, text] fields: - { label: 时间, name: pubDate, widget: datetime, date_format: 'YYYY-MM-DD', time_format: false, format: 'YYYY-MM-DD' } - - { label: 文字, name: text, widget: text, required: false, hint: '一句话(与图片至少填一项)' } + - label: 文字 + name: text + widget: markdown + required: false + hint: '与图片至少填一项。支持 markdown(**加粗**、列表、> 引用)与排版类 HTML,例如 彩色+楷体;装饰色仍守“外壳灰阶、彩色只作强调”的纪律' - { label: 图片, name: image, widget: image, required: false, hint: '与文字至少填一项;建议先压缩' } - label: 标签 name: tags