From e1efc487ffe6fd42932fcc2417b66933138ecd7d Mon Sep 17 00:00:00 2001
From: joeytoday <joeytoday632@outlook.com>
Date: Sat, 4 Jul 2026 20:44:54 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E6=8C=87=E5=8D=97=E5=92=8C=20CSS=20=E4=B8=BB=E9=A2=98=E7=BC=96?=
 =?UTF-8?q?=E5=86=99=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GUIDE.md: 补充属性提取、图片描述、脚注、伪元素转换的功能说明和截图
- CSS_THEME_GUIDE.md: 新增伪元素自动转换文档（第 14 节），修正图片描述 CSS 值，更新伪元素使用规则
- CHANGELOG.md: 补充截图和演示视频

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 CHANGELOG.md       | 25 +++++++++++++++++++++++++
 CSS_THEME_GUIDE.md | 42 ++++++++++++++++++++++++++++++++++++------
 GUIDE.md           | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25cc77d..5994103 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,17 @@
 
 - **图片描述**：新增"图片描述"开关，开启后图片下方的 alt 文字会以居中灰色小字显示，复制/发布到公众号后样式保留
 
+#### 设置开关
+
+<img width="825" height="322" alt="image" src="https://github.com/user-attachments/assets/716c8f31-b4d0-4bf2-9937-e6017e722bab" />
+
+#### 效果预览
+
+<!-- obsidian -->
+obsidian | 公众号预览
+-- | --
+<img width="694" height="432" alt="image" src="https://github.com/user-attachments/assets/e4ebdc6b-e0a8-4d1e-8b70-921edf503db1" />  |  <img width="635" height="406" alt="image" src="https://github.com/user-attachments/assets/ff550874-3fb9-4932-9c30-68840bdc57f9" />
+
 ---
 
 ## [2.7.2] - 2026-07-01
@@ -55,9 +66,23 @@
 
 - **从属性提取标题和描述**：发布时自动从 Markdown frontmatter 中提取标题和描述，填充到发布表单。可在设置中开启（默认关闭），属性名可自定义（默认 `title` 和 `description`）
 - **发布摘要支持**：发布弹窗新增描述输入框，内容同步到微信草稿的 `digest` 字段（可选，120 字以内）
+
+**设置内打开**
+
+<img width="818" height="249" alt="image" src="https://github.com/user-attachments/assets/27f958a5-25d6-45c5-a3f9-ac7951268d82" />
+
+**效果显示**
+
+<!-- obsidian -->
+属性设置 | 效果
+-- | --
+<img width="376" height="207" alt="image" src="https://github.com/user-attachments/assets/68af950d-eb53-4182-a39b-a59848224d4e" />  |  <img width="539" height="265" alt="image" src="https://github.com/user-attachments/assets/35474d7e-baa1-4914-99de-a3d648d10f71" />
+
 - **外部链接转脚注**：预览、复制、发布时自动将 `[文本](https://url)` 外部链接转为脚注格式（文本 + 上标编号 + 文末 URL 列表），不修改源文件
 - **内部链接转纯文本**：`[[内部链接]]` 自动转为纯文本，去除链接标记
 
+https://github.com/user-attachments/assets/fdd36123-9c3a-4401-ac8f-86089c71c0cb
+
 ### 🎨 优化
 
 - **发布弹窗重构**：精简布局，去除冗余分割线，左右 30%/70% 对齐，封面图预览区域扩大，遵循 Obsidian 主题色变量
diff --git a/CSS_THEME_GUIDE.md b/CSS_THEME_GUIDE.md
index f59d826..c5708ee 100644
--- a/CSS_THEME_GUIDE.md
+++ b/CSS_THEME_GUIDE.md
@@ -21,6 +21,7 @@ Markdown 源文本
     ├── 图片 → 解析内部链接
     └── 图片描述（可选） → 在图片下方插入 .mp-image-caption 描述文字
   → ThemeManager.applyTheme() 注入 <style> 标签
+  → prerenderPseudoElements() 将 ::before/::after 转为真实 <span> DOM
   → juice 将 CSS 内联到每个元素的 style 属性
   → CopyManager 后处理（代码高亮补全、属性清理）
   → 最终 HTML（复制到剪贴板 / 发布到草稿箱）
@@ -241,12 +242,14 @@ Obsidian 原生渲染，标签不做转换。
 }
 
 /* 图片描述（当用户在设置中开启「图片描述」时出现） */
+/* 注意：复制/发布时样式由内联样式控制，此处仅影响预览 */
 .mp-content-section .mp-image-caption {
   display: block;
   text-align: center;
-  font-size: 0.85em;
+  font-size: 12px;
   color: #888;
-  margin-top: 0.25em;
+  margin: 0 0 1em 0;
+  padding: 0;
 }
 ```
 
@@ -303,6 +306,31 @@ Callout 已被 `converter.ts` 从 Obsidian 原生结构转换为带内联样式
 
 支持的 Callout 类型：`note`、`info`、`tip`、`hint`、`important`、`warning`、`caution`、`attention`、`danger`、`error`、`bug`、`success`、`check`、`done`、`question`、`help`、`faq`、`failure`、`fail`、`missing`、`abstract`、`summary`、`tldr`、`example`、`todo`、`quote`、`cite`
 
+#### 14. 伪元素自动转换（v2.7.4+）
+
+`prerenderPseudoElements()` 会在 juice 内联之前，将主题 CSS 中的 `::before`/`::after` 规则自动转为真实 `<span>` DOM 元素，公众号编辑器可正常渲染。
+
+**转换后的 class 命名规则：**
+
+| CSS 规则 | 生成的 `<span>` class | 插入位置 |
+|----------|----------------------|----------|
+| `h1::after` | `h1-dot` | 作为最后一个子元素 |
+| `h2::before` | `h2-num` | 作为第一个子元素 |
+| `h3::after` | `h3-dot` | 作为最后一个子元素 |
+| `blockquote::before` | `bq-mark` | 作为第一个子元素 |
+| `.mp-callout::before` | `callout-mark` | 作为第一个子元素 |
+| 其他 `tag::before/::after` | `{tag}-before` 或 `{tag}-after` | 根据伪类型决定 |
+
+**计数器支持：**
+
+CSS 计数器（`counter-reset`/`counter-increment`/`counter()`）会被自动计算并填入 `<span>` 文本内容。支持的计数器样式：`decimal`、`decimal-leading-zero`、`upper-roman`、`lower-roman`、`upper-alpha`/`upper-latin`、`lower-alpha`/`lower-latin`。
+
+混合内容也支持：`"Chapter " counter(h2-counter) ": "` 会解析为如 `"Chapter 01: "`。
+
+**注意事项：**
+- 转换后的 `<span>` 样式由 juice 从原始 CSS 规则中提取并内联，主题作者无需额外编写样式
+- 转换完成后，原始 CSS 中的伪元素规则会被自动移除，不会进入 juice 内联阶段
+
 ---
 
 ## 样式约束与注意事项
@@ -319,7 +347,7 @@ Callout 已被 `converter.ts` 从 Obsidian 原生结构转换为带内联样式
 | 不要使用 `@media` 查询 | juice 内联时会被丢弃（`preserveMediaQueries: false`） |
 | 不要使用 `@font-face` | juice 内联时会被丢弃（`preserveFontFaces: false`） |
 | 不要使用 CSS 变量 `var(--xxx)` | juice 无法解析 CSS 变量，内联后值会丢失 |
-| 不要使用伪元素 `::before`、`::after` | juice 无法将伪元素内联到 `style` 属性 |
+| 不要使用伪元素 `::before`、`::after`（除非了解自动转换机制） | v2.7.4+ 会自动将伪元素转为真实 `<span>` DOM，但 juice 无法直接内联伪元素。详见下方「伪元素自动转换」章节 |
 | 不要使用伪类 `:hover`、`:focus` 等 | 公众号不支持交互伪类 |
 | 不要使用 `!important` | 会与 ThemeManager 的字体覆盖冲突 |
 | 不要使用 `position: fixed/absolute` | 公众号编辑器不支持定位布局 |
@@ -523,12 +551,14 @@ Callout 已被 `converter.ts` 从 Obsidian 原生结构转换为带内联样式
 }
 
 /* 图片描述（设置中开启「图片描述」后生效） */
+/* 复制/发布时由内联样式控制，此处仅影响预览 */
 .mp-content-section .mp-image-caption {
   display: block;
   text-align: center;
-  font-size: 0.85em;
+  font-size: 12px;
   color: #888;
-  margin-top: 0.25em;
+  margin: 0 0 1em 0;
+  padding: 0;
 }
 
 /* ==================== 脚注 ==================== */
@@ -682,7 +712,7 @@ Callout 已被 `converter.ts` 从 Obsidian 原生结构转换为带内联样式
 - [ ] 没有使用 `ul`、`ol`、`li` 选择器
 - [ ] 没有使用 CSS 变量 `var(--xxx)`
 - [ ] 没有使用 `@media`、`@font-face`
-- [ ] 没有使用伪元素 `::before`、`::after`
+- [ ] 没有使用伪元素 `::before`、`::after`（除非已了解自动转换机制，见第 14 节）
 - [ ] 没有使用 `!important`
 - [ ] 列表样式仅使用 `.mp-list-section` 和 `.mp-list-item`
 - [ ] `.mp-list-item` 没有设置 `padding-left`、`margin`、`display`
diff --git a/GUIDE.md b/GUIDE.md
index 98e30f9..dd35682 100644
--- a/GUIDE.md
+++ b/GUIDE.md
@@ -47,6 +47,42 @@
 
 <video src="https://github.com/user-attachments/assets/24288345-b5c8-4613-956b-78b622317d95"  controls></video>
 
+### 从属性提取标题和描述
+
+发布时可以从 Markdown frontmatter 中自动提取标题和描述，填充到发布表单，省去手动填写。属性名支持自定义（默认 `title` 和 `description`）。
+
+在设置中开启「从属性提取标题和描述」即可使用。
+
+<img width="818" height="249" alt="设置中开启从属性提取" src="https://github.com/user-attachments/assets/27f958a5-25d6-45c5-a3f9-ac7951268d82" />
+
+<!-- obsidian -->
+属性设置 | 效果
+-- | --
+<img width="376" height="207" alt="属性设置" src="https://github.com/user-attachments/assets/68af950d-eb53-4182-a39b-a59848224d4e" /> | <img width="539" height="265" alt="发布效果" src="https://github.com/user-attachments/assets/35474d7e-baa1-4914-99de-a3d648d10f71" />
+
+发布弹窗中也新增了描述输入框，内容会同步到微信草稿的摘要字段（120 字以内），可选填。
+
+### 图片描述
+
+开启后，图片下方的 alt 文字会以居中灰色小字显示在图片下方，复制/发布到公众号后样式保留。
+
+在设置中开启「图片描述」即可使用。写法：`![这是图片描述](图片链接)`。
+
+<img width="825" height="322" alt="图片描述设置" src="https://github.com/user-attachments/assets/716c8f31-b4d0-4bf2-9937-e6017e722bab" />
+
+<!-- obsidian -->
+Obsidian | 公众号预览
+-- | --
+<img width="694" height="432" alt="Obsidian 效果" src="https://github.com/user-attachments/assets/e4ebdc6b-e0a8-4d1e-8b70-921edf503db1" /> | <img width="635" height="406" alt="公众号预览效果" src="https://github.com/user-attachments/assets/ff550874-3fb9-4932-9c30-68840bdc57f9" />
+
+### 脚注
+
+支持 Markdown 脚注语法（`[^1]`）。正文中的脚注编号显示为 `[1]` 上标格式，文末脚注列表格式为 `[1] 文本：url`，方便阅读。
+
 ### 数学公式
 
 支持 LaTeX 数学公式（`$...$` 行内，`$$...$$` 块级），发布时自动转为图片，微信公众号能正常显示。在设置里可以开关这个功能。
+
+### 伪元素自动转换
+
+CSS `::before`/`::after` 伪元素和计数器在复制/发布时会自动转为真实 DOM 元素，确保公众号编辑器完美兼容，无需手动处理。