docs(writing): 取消彩色强调次数限制,补灯箱 caption 排版说明
用户原话:「色彩强调不要设置限制,取消一页不超过三处的限制」。原「一页 ≤3 处」 是文档纪律(代码层从未硬性拦截),故改动集中在文档、模板文章与后台提示: - 写作指南 / 管理台:改为「彩色不限次数」,同时明确仍守的另一条红线是 **外壳灰阶**(导航/页脚/按钮/背景不染色)——外壳是气质,正文是表达 - 写作模板文章中英双语同步:章节改名「想用多少用多少」,删掉"三处之后不再上色" 的示范约束,表格里「一页 ≤3 处」改为「不限次数(外壳仍灰阶)」 - 顺带补灯箱 caption 文档:照片说明支持 markdown + 排版类,深底自动取暗档; 以及灯箱四种关闭路径(右上 ×、Esc、点背景、1× 时点图) 验证: 构建 exit 0;全仓 grep 「≤3 处/页」只剩「已取消」的历史说明 Spec: 2026-11-02_blog-5i-fonts-polish (T5) Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
138d3d976b
commit
5c015c6577
4 files changed
+31
-11
No files matched your search
@@ -18,15 +18,15 @@ Use `##` for a section and `###` for a subsection. **Never use `#`** — the pos
|
|||||||
|
|
||||||
Leave a blank line between paragraphs. Inline you can use **bold**, *italic*, ~~strikethrough~~, `inline code`, and [ordinary links](https://astro.build).
|
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
|
## 2. Colour emphasis: as much as you need
|
||||||
|
|
||||||
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.
|
Colour is **no longer capped** (the old "three per page" limit was lifted on 2026-11-02). The one rule that remains is the shell: navigation, footer, buttons and background stay greyscale — the shell is temperament, the body is expression.
|
||||||
|
|
||||||
<span class="c-blue">First use: state one key conclusion in blue.</span> Then carry on normally.
|
<span class="c-blue">First use: state one key conclusion in blue.</span> Then carry on normally.
|
||||||
|
|
||||||
<span class="c-red">Second use: warn about a trap in red.</span> For example, “after changing a Markdown plugin you must clear `node_modules/.astro`, or the change silently does nothing”.
|
<span class="c-red">Second use: warn about a trap in red.</span> For example, “after changing a Markdown plugin you must clear `node_modules/.astro`, or the change silently does nothing”.
|
||||||
|
|
||||||
<span class="c-green">Third use: confirm a working path in green.</span> After three, this section stays uncoloured.
|
<span class="c-green">Confirm a working path in green.</span> If a whole paragraph deserves emphasis, mark the whole paragraph.
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
@@ -84,7 +84,7 @@ Refer to variables inline like `posts`.
|
|||||||
|
|
||||||
| Capability | Syntax | Note |
|
| Capability | Syntax | Note |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| Colour emphasis | `<span class="c-blue">` | three per page at most |
|
| Colour emphasis | `<span class="c-blue">` | no limit (shell stays greyscale) |
|
||||||
| Typeface | `<span class="font-kai">` | a whole page adds font weight |
|
| Typeface | `<span class="font-kai">` | a whole page adds font weight |
|
||||||
| Image | `` | see the writing guide for size rules |
|
| Image | `` | see the writing guide for size rules |
|
||||||
| Video | frontmatter `video:` | lives in public/media, ≤50MB |
|
| Video | frontmatter `video:` | lives in public/media, ≤50MB |
|
||||||
|
|||||||
@@ -17,15 +17,15 @@ description: 一篇文章演示全站可用的排版能力:标题层级、彩
|
|||||||
|
|
||||||
段落之间空一行即可。行内可以**加粗**、*斜体*、~~删除线~~、`行内代码`,也可以放[普通链接](https://astro.build)。
|
段落之间空一行即可。行内可以**加粗**、*斜体*、~~删除线~~、`行内代码`,也可以放[普通链接](https://astro.build)。
|
||||||
|
|
||||||
## 二、彩色强调:一页不超过三处
|
## 二、彩色强调:想用多少用多少
|
||||||
|
|
||||||
纪律来自设计基线:站点外壳是灰阶的,颜色只用来给正文某一个判断加重,一页最多三处。超过就变成花哨。
|
颜色现在**没有次数限制**(2026-11-02 起取消了原来的「一页最多三处」)。唯一还守着的是外壳:导航、页脚、按钮、背景保持灰阶——外壳是气质,正文是表达。
|
||||||
|
|
||||||
<span class="c-blue">第一处:一个关键结论用蓝色提出。</span> 后面照常叙述。
|
<span class="c-blue">第一处:一个关键结论用蓝色提出。</span> 后面照常叙述。
|
||||||
|
|
||||||
<span class="c-red">第二处:需要警示的坑用红色。</span> 比如「改完 Markdown 插件必须清 `node_modules/.astro`,否则改动静默不生效」。
|
<span class="c-red">第二处:需要警示的坑用红色。</span> 比如「改完 Markdown 插件必须清 `node_modules/.astro`,否则改动静默不生效」。
|
||||||
|
|
||||||
<span class="c-green">第三处:确认可行的路径用绿色。</span> 三处之后,本节不再上色。
|
<span class="c-green">确认可行的路径用绿色。</span> 想让整段都是重点也不必克制,把它们都标出来即可。
|
||||||
|
|
||||||
可用色相共 8 组(blue / teal / green / yellow / orange / red / pink / purple),每组有标准与 `-soft` 两档;另有 4 个灰阶层级类(`ink-muted` / `ink-warm` / `ink-cool` / `ink-faint`)用于降调,不算彩色额度。
|
可用色相共 8 组(blue / teal / green / yellow / orange / red / pink / purple),每组有标准与 `-soft` 两档;另有 4 个灰阶层级类(`ink-muted` / `ink-warm` / `ink-cool` / `ink-faint`)用于降调,不算彩色额度。
|
||||||
|
|
||||||
@@ -83,7 +83,7 @@ export function sortPosts<T extends Post>(posts: T[]): T[] {
|
|||||||
|
|
||||||
| 能力 | 写法 | 注意 |
|
| 能力 | 写法 | 注意 |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| 彩色强调 | `<span class="c-blue">` | 一页 ≤3 处 |
|
| 彩色强调 | `<span class="c-blue">` | 不限次数(外壳仍灰阶) |
|
||||||
| 换字族 | `<span class="font-kai">` | 整页换会拉字体体积 |
|
| 换字族 | `<span class="font-kai">` | 整页换会拉字体体积 |
|
||||||
| 图片 | `` | 体积纪律见写作指南 |
|
| 图片 | `` | 体积纪律见写作指南 |
|
||||||
| 视频 | frontmatter `video:` | 放 public/media,≤50MB |
|
| 视频 | frontmatter `video:` | 放 public/media,≤50MB |
|
||||||
|
|||||||
+8
-2
@@ -11,10 +11,10 @@ cp content/posts/writing-template.md content/posts/my-new-post.md
|
|||||||
# 改 frontmatter 的 title / pubDate / tags / description,删掉不需要的段落
|
# 改 frontmatter 的 title / pubDate / tags / description,删掉不需要的段落
|
||||||
```
|
```
|
||||||
|
|
||||||
模板本身是一篇真文章(线上读:`/archives/writing-template/`),每节都在跑一种能力,你看到的效果就是源码的效果:标题层级、三处彩色强调、两族字体、引用、列表、代码窗条、表格、图片放大、链接卡片、`<details>` 折叠、分隔线。
|
模板本身是一篇真文章(线上读:`/archives/writing-template/`),每节都在跑一种能力,你看到的效果就是源码的效果:标题层级、彩色强调、字族切换、引用、列表、代码窗条、表格、图片放大、链接卡片、`<details>` 折叠、分隔线。
|
||||||
|
|
||||||
写之前只需记住三条纪律:
|
写之前只需记住三条纪律:
|
||||||
- **彩色 ≤3 处/页**:外壳是灰阶,颜色只用来给某个判断加重;超过就花哨
|
- **彩色不限次数**(2026-11-02 用户拍板取消原「一页 ≤3 处」限制):正文想用多少处颜色都可以;仍守的是另一条——**外壳灰阶**(导航/页脚/按钮/背景不染色),因为外壳是气质,正文是表达
|
||||||
- **整页换字族要谨慎**:会给访问者拉一份中文字体(汇文明朝整页约 420KB,已子集化)
|
- **整页换字族要谨慎**:会给访问者拉一份中文字体(汇文明朝整页约 420KB,已子集化)
|
||||||
- **折叠放细节不放结论**:`<details>` 里的内容可能永远没人展开
|
- **折叠放细节不放结论**:`<details>` 里的内容可能永远没人展开
|
||||||
|
|
||||||
@@ -96,6 +96,12 @@ public/media/my-post/clip.mp4 ← 文件放这里
|
|||||||
|
|
||||||
见 `content/posts/media-sample.md`(draft 文章,仅构建验证用,不上线)。
|
见 `content/posts/media-sample.md`(draft 文章,仅构建验证用,不上线)。
|
||||||
|
|
||||||
|
## 灯箱说明文字(图库 caption)
|
||||||
|
|
||||||
|
图库照片的 `caption` 字段走同一套富文本管线:markdown(`**加粗**`、换行)+ 排版类(`<span class="c-blue font-kai">`)。灯箱里深底上的彩色会自动取暗底档。
|
||||||
|
|
||||||
|
图库灯箱关闭:右上 `×`、`Esc`、点背景、点图(1× 时)都能关;缩放后移动鼠标召唤控件。
|
||||||
|
|
||||||
## 链接卡片(OG 预览卡)
|
## 链接卡片(OG 预览卡)
|
||||||
|
|
||||||
**一行只放一个链接、且它独立成段**时,构建期会抓取该页的 OG 信息渲染成卡片(标题 / 描述 / 站点图标 / 可选缩略图):
|
**一行只放一个链接、且它独立成段**时,构建期会抓取该页的 OG 信息渲染成卡片(标题 / 描述 / 站点图标 / 可选缩略图):
|
||||||
|
|||||||
+15
-1
@@ -39,12 +39,26 @@
|
|||||||
|
|
||||||
- markdown:`**加粗**`、`*斜体*`、列表、`> 引用`、`` `行内代码` ``
|
- markdown:`**加粗**`、`*斜体*`、列表、`> 引用`、`` `行内代码` ``
|
||||||
- 排版类 HTML:`<span class="c-blue font-kai">彩色 + 楷体</span>`(可用类清单见写作指南「文章排版类」一节,与文章完全同一份白名单)
|
- 排版类 HTML:`<span class="c-blue font-kai">彩色 + 楷体</span>`(可用类清单见写作指南「文章排版类」一节,与文章完全同一份白名单)
|
||||||
- 仍守外壳灰阶纪律:彩色是**强调**不是装饰,一页 ≤3 处
|
- 彩色**不再限次**(原「≤3 处/页」已取消);仍守外壳灰阶:导航/页脚/按钮/背景不染色
|
||||||
|
|
||||||
**每条瞬间自带评论区**:时间线卡片下方有「评论」折叠条,读者点开才加载评论(不点开不为它付任何加载成本)。中文页与英文页共用同一条评论流,语言切换不会丢评论。
|
**每条瞬间自带评论区**:时间线卡片下方有「评论」折叠条,读者点开才加载评论(不点开不为它付任何加载成本)。中文页与英文页共用同一条评论流,语言切换不会丢评论。
|
||||||
|
|
||||||
**每条的浏览 / 评论数字是只读的**:读者点开评论区不会虚增浏览数(只有整页访问才计一次)。
|
**每条的浏览 / 评论数字是只读的**:读者点开评论区不会虚增浏览数(只有整页访问才计一次)。
|
||||||
|
|
||||||
|
## 照片说明文字(灯箱右侧)支持排版(5i 新增)
|
||||||
|
|
||||||
|
照片的「说明」(caption)现在支持 markdown 与排版类,与文章正文同一套:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
caption: 落日把海与城一齐烫成金箔,**这一帧等了二十分钟**
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span class="c-blue">蓝色</span>、<span class="font-kai">楷体</span> 这些类都能用。
|
||||||
|
```
|
||||||
|
|
||||||
|
灯箱是深底,颜色类会自动取柔和对暗底的那一档,不会刺眼。EXIF 那几行是相机数据,不做排版。
|
||||||
|
|
||||||
## 照片上传流
|
## 照片上传流
|
||||||
|
|
||||||
1. 图库照片 → New Entry:填标题(**必填**,空标题会让构建炸——实测坑)、选分组(street/landscape)、可写 alt
|
1. 图库照片 → New Entry:填标题(**必填**,空标题会让构建炸——实测坑)、选分组(street/landscape)、可写 alt
|
||||||
|
|||||||
Reference in new issue
Block a user