# 网站文章内容支持功能 ## 📝 Markdown 解析器 ### 核心解析器 - **主要解析器**: `markdown-to-jsx` - 将 Markdown 转换为 React 组件 - **标记语言**: 支持标准 Markdown 语法和 YAML Front Matter - **语法高亮**: 使用 `shiki` 进行代码语法高亮 ### YAML Front Matter 支持每篇文章都应该以 YAML Front Matter 开头，用于定义文章的元数据： ```yaml --- title: 文章标题 # 必填：文章标题 date: 2025-08-22T10:00:00.000Z # 必填：发布日期（ISO 8601 格式） updated: 2025-08-22T15:30:00.000Z # 可选：最后更新时间 categories: [编程, 技术, React] # 可选：文章分类（数组格式） tags: [React, TypeScript, 教程] # 可选：文章标签（数组格式） slug: my-article-slug # 可选：URL 友好的文章标识符 type: post # 可选：内容类型（post/note） permalink: posts/my-article # 可选：自定义永久链接 summary: 文章摘要描述 # 可选：文章摘要 cover: /images/cover.jpg # 可选：封面图片 --- ``` **使用技巧**： - 日期格式必须是 ISO 8601 标准 - 分类和标签使用数组格式，支持中英文 - slug 建议使用英文和连字符，便于 SEO ## 🎨 富文本内容支持 ### 1. 数学公式 (KaTeX) 您的网站支持 LaTeX 风格的数学公式渲染，基于 KaTeX 引擎。 #### 行内公式在文本中嵌入数学公式： ```markdown 这是一个行内公式：$ f(x) = ax^2 + bx + c $，它表示二次函数。 ``` **效果**：这是一个行内公式：$ f(x) = ax^2 + bx + c $，它表示二次函数。 #### 块级公式独立显示的数学公式： ```markdown $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$ ``` **复杂公式示例**： ```markdown $$ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned} $$ ``` **使用技巧**： - 行内公式用单个 `$` 包围 - 块级公式用双 `$$` 包围 - 支持所有标准 LaTeX 数学符号和环境 ### 2. 代码块和语法高亮 #### 内联代码在段落中插入代码片段： ```markdown 使用 `console.log('Hello World')` 来输出信息。 ``` #### 代码块支持多种编程语言的语法高亮： ````markdown ```javascript function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); } console.log(fibonacci(10)); // 输出: 55 ``` ```` ````markdown ```python def quick_sort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) // 2] left = [x for x in arr if x < pivot] middle = [x for x in arr if x == pivot] right = [x for x in arr if x > pivot] return quick_sort(left) + middle + quick_sort(right) ``` ```` **支持的语言**：JavaScript, TypeScript, Python, Java, C++, Go, Rust, HTML, CSS, SQL, Shell, JSON, YAML 等。 #### 代码块增强属性 ````markdown ```javascript {1,3-5} title="fibonacci.js" showLineNumbers function fibonacci(n) { if (n <= 1) return n; // 基础情况 return fibonacci(n - 1) + fibonacci(n - 2); // 递归调用 } ``` ```` ```` **属性说明**： - `{1,3-5}`: 高亮指定行 - `title="文件名"`: 显示文件名 - `showLineNumbers`: 显示行号 ### 3. 特殊文本格式 #### 剧透文本（Spoiler）隐藏敏感内容，鼠标悬停显示： ```markdown 电影的结局是 ||主角最终拯救了世界||，但过程很曲折。 ```` **效果**：电影的结局是 ||主角最终拯救了世界||，但过程很曲折。 #### 插入文本（Insert）表示新增或强调的内容： ```markdown 最新版本 ++v2.0++ 增加了许多新功能。 ``` **效果**：最新版本 ++v2.0++ 增加了许多新功能。 #### 高亮标记强调重要内容： ```markdown 这是 ==非常重要== 的信息，请注意。 ``` **效果**：这是 ==非常重要== 的信息，请注意。 #### 删除线表示过时或错误的信息： ```markdown ~~这个方法已经废弃~~ 请使用新的 API。 ``` **效果**：~~这个方法已经废弃~~ 请使用新的 API。 ### 4. 社交媒体提及快速链接到社交媒体用户： #### GitHub 用户 ```markdown 感谢 {GH@octocat} 的贡献！或者显示自定义名称：[GitHub 创始人]{GH@octocat} ``` #### Twitter 用户 ```markdown 推荐关注 {TW@github} 获取最新动态。 ``` #### Telegram 用户 ```markdown 加入我们的群组：{TG@username} ``` **格式说明**： - `{平台@用户名}`: 显示用户名 - `[显示名称]{平台@用户名}`: 自定义显示名称 - 支持的平台：GH (GitHub), TW (Twitter), TG (Telegram) ## 🖼️ 媒体内容支持 ### 1. 图片处理 #### 基础图片语法 ```markdown ![图片描述](https://example.com/image.jpg "图片标题") ``` #### 图片尺寸控制 ```markdown ![图片描述](https://example.com/image.jpg "图片标题"){width=300} ![响应式图片](https://example.com/image.jpg){width=50%} ``` #### 图片对齐 ```markdown ![居中图片](https://example.com/image.jpg){align=center} ![左对齐](https://example.com/image.jpg){align=left} ![右对齐](https://example.com/image.jpg){align=right} ``` #### 图片画廊多张图片自动组成画廊： ```markdown ![图片1](https://example.com/1.jpg) ![图片2](https://example.com/2.jpg) ![图片3](https://example.com/3.jpg) ``` **特性**： - 自动懒加载 - BlurHash 模糊占位符 - 点击放大查看（medium-zoom） - 支持 WebP、AVIF 等现代格式 ### 2. 视频支持 #### HTML5 视频 ```markdown

``` #### 带属性的视频 ```markdown

``` #### 自动播放视频（静音） ```markdown

``` **特性**： - 响应式设计 - 自动播放（静音） - 移动端友好 - 支持多种视频格式 ### 3. 媒体容器 #### 图片画廊容器 ```markdown :::gallery ![图片1](https://example.com/1.jpg) ![图片2](https://example.com/2.jpg) ![图片3](https://example.com/3.jpg) ![图片4](https://example.com/4.jpg) ::: ``` #### 轮播图容器 ```markdown :::carousel ![轮播图1](https://example.com/slide1.jpg) ![轮播图2](https://example.com/slide2.jpg) ![轮播图3](https://example.com/slide3.jpg) ::: ``` #### 瀑布流布局 ```markdown :::masonry gap=8 ![图片1](https://example.com/tall1.jpg) ![图片2](https://example.com/wide1.jpg) ![图片3](https://example.com/square1.jpg) ![图片4](https://example.com/tall2.jpg) ![图片5](https://example.com/wide2.jpg) ::: ``` **参数说明**： - `gap`: 图片间距（像素） - 自动适配不同屏幕尺寸 - 支持图片懒加载 ## 📦 容器和布局 ### 1. 信息提示框用于显示不同类型的提示信息： #### 警告信息 ```markdown :::warn ⚠️ 这是一个警告信息，请注意相关风险。 ::: ``` #### 错误信息 ```markdown :::error ❌ 操作失败，请检查输入参数是否正确。 ::: ``` #### 信息提示 ```markdown :::info 💡 这是一个有用的提示信息。 ::: ``` #### 成功信息 ```markdown :::success ✅ 操作成功完成！ ::: ``` #### 备注信息 ```markdown :::note 📝 这是一个重要的备注说明。 ::: ``` **样式特点**： - 不同颜色的背景和边框 - 对应的图标显示 - 支持 Markdown 内容 ### 2. 自定义容器 #### Banner 横幅 ```markdown :::banner type=info # 重要通知这是一个横幅样式的信息展示区域，适合放置重要公告。 ::: ``` #### 带参数的 Banner ```markdown :::banner type=warning class=my-custom-banner ## 系统维护通知系统将在今晚 22:00-24:00 进行维护，期间可能无法访问。 ::: ``` ### 3. 网格布局 #### 基础网格 ```markdown :::grid cols=2,gap=16 ## 左侧内容这里是左侧的内容区域。 ## 右侧内容这里是右侧的内容区域。 ::: ``` #### 复杂网格布局 ```markdown :::grid cols=3,rows=2,gap=20,type=normal ### 区域 1 第一个区域的内容 ### 区域 2 第二个区域的内容 ### 区域 3 第三个区域的内容 ### 区域 4 第四个区域的内容 ### 区域 5 第五个区域的内容 ### 区域 6 第六个区域的内容 ::: ``` #### 图片网格 ```markdown :::grid cols=2,rows=2,gap=10,type=images ![图片1](https://example.com/1.jpg) ![图片2](https://example.com/2.jpg) ![图片3](https://example.com/3.jpg) ![图片4](https://example.com/4.jpg) ::: ``` **参数说明**： - `cols`: 列数 - `rows`: 行数（可选） - `gap`: 间距（像素） - `type`: 类型（normal/images） ### 4. 响应式瀑布流 #### 基础瀑布流 ```markdown :::masonry gap=12 ![高图](https://example.com/tall.jpg) ![宽图](https://example.com/wide.jpg) ![方图](https://example.com/square.jpg) ![另一张高图](https://example.com/tall2.jpg) ::: ``` **特性**： - 自动计算最佳布局 - 响应式断点： - 移动端（≤350px）：1 列 - 平板端（≤750px）：2 列 - 桌面端（>750px）：动态列数 ## 🔗 链接和引用 ### 1. 智能链接 #### 基础链接 ```markdown [链接文本](https://example.com) [带标题的链接](https://example.com "这是链接标题") ``` #### 自动链接识别 ```markdown 直接粘贴链接也会自动识别：https://github.com 邮箱地址也支持：user@example.com ``` #### 内部链接 ```markdown [跳转到其他文章](/posts/another-article) [跳转到页面](/about) ``` #### 链接卡片预览某些链接会自动生成预览卡片： ```markdown [GitHub 仓库](https://github.com/username/repo) ``` **特性**： - 外部链接自动添加图标 - 内部链接无图标 - 支持链接预览卡片 - 自动识别常见网站 ### 2. 脚注系统 #### 脚注引用 ```markdown 这是一个需要说明的概念[^1]，还有另一个概念[^note-name]。这里引用了多个脚注[^1][^2]。 ``` #### 脚注定义 ```markdown [^1]: 这是第一个脚注的说明文本。 [^note-name]: 脚注标识符可以使用有意义的名称，不仅仅是数字。 [^2]: 第二个脚注的说明，可以包含**格式化文本**和[链接](https://example.com)。 ``` #### 复杂脚注 ````markdown 这是一个复杂的脚注示例[^complex]。 [^complex]: 这个脚注包含多段内容：这是第一段说明。这是第二段，包含代码示例： ```javascript console.log("Hello from footnote!"); ``` - 还可以包含列表 - 和其他 Markdown 元素 ```` **特性**： - 悬浮预览功能 - 点击自动跳转 - 支持复杂格式 - 智能返回功能 ### 3. 引用块 #### 基础引用 ```markdown > 这是一个引用块。 > 可以包含多行文本。 ``` #### 嵌套引用 ```markdown > 这是第一层引用。 > > > 这是嵌套的引用。 > > 可以有多层嵌套。 > > 回到第一层引用。 ``` #### 带作者的引用 ```markdown > 生活就像一盒巧克力，你永远不知道下一颗是什么味道。 > > —— 阿甘正传 ``` #### GitHub 风格警告 ```markdown > [!NOTE] > 这是一个信息提示。 > [!TIP] > 这是一个小贴士。 > [!IMPORTANT] > 这是重要信息。 > [!WARNING] > 这是警告信息。 > [!CAUTION] > 这是危险警告。 ``` ## 📋 表格和列表 ### 1. 表格功能 #### 基础表格 ```markdown | 姓名 | 年龄 | 职业 | | ---- | ---- | -------- | | 张三 | 25 | 程序员 | | 李四 | 30 | 设计师 | | 王五 | 28 | 产品经理 | ``` #### 表格对齐 ```markdown | 左对齐 | 居中对齐 | 右对齐 | | :----- | :------: | -----: | | 左 | 中 | 右 | | 内容 | 内容 | 内容 | ``` #### 复杂表格 ```markdown | 功能 | 基础版 | 专业版 | 企业版 | | -------- | ---------- | ----------- | ------- | | 用户数量 | 最多 10 人 | 最多 100 人 | 无限制 | | 存储空间 | 1GB | 10GB | 100GB | | 技术支持 | ❌ | ✅ | ✅ | | 价格 | 免费 | ¥99/月 | ¥999/月 | ``` #### 表格内的格式化 ```markdown | 项目 | 描述 | 状态 | | ------------ | ------------------------------- | --------- | | **重要功能** | 这是一个`代码片段` | 🟢 完成 | | ~~已废弃~~ | [链接示例](https://example.com) | 🔴 停用 | | ==高优先级== | 包含**粗体**和*斜体* | 🟡 进行中 | ``` **特性**： - 响应式设计 - 移动端横向滚动 - 支持内联格式化 - 自动宽度调整 ### 2. 列表系统 #### 无序列表 ```markdown - 第一项 - 第二项 - 嵌套项目 A - 嵌套项目 B - 更深层嵌套 - 第三项 ``` #### 有序列表 ```markdown 1. 第一步：准备环境 2. 第二步：安装依赖 1. 安装 Node.js 2. 安装 npm 包 3. 第三步：运行项目 ``` #### 任务列表 ```markdown - [ ] 未完成的任务 - [x] 已完成的任务 - [ ] 另一个未完成任务 - [x] 子任务已完成 - [ ] 子任务未完成 - [x] 重要任务已完成 ✅ ``` #### 定义列表 ```markdown HTML : 超文本标记语言，用于创建网页结构。 CSS : 层叠样式表，用于网页的视觉设计和布局。 JavaScript : 一种编程语言，为网页添加交互功能。 ``` #### 混合列表 ```markdown 1. 准备工作 - [ ] 收集需求 - [ ] 设计原型 - [x] 技术选型 2. 开发阶段 - 前端开发 1. 页面布局 2. 交互功能 3. 样式优化 - 后端开发 1. API 设计 2. 数据库设计 3. 业务逻辑 3. 测试部署 - [ ] 单元测试 - [ ] 集成测试 - [ ] 上线部署 ``` **使用技巧**： - 使用不同的标记符号（`-`, `*`, `+`） - 支持多层嵌套 - 任务列表可与其他列表混合使用 - 支持 emoji 和格式化文本 ## 🎯 交互功能 ### 1. 标签页 (Tabs) 创建多标签页内容展示： #### 基础标签页 ````markdown ```javascript function hello() { console.log('Hello from JavaScript!'); } ```` ```python def hello(): print("Hello from Python!") ``` ```java public class Hello { public static void main(String[] args) { System.out.println("Hello from Java!"); } } ``` ``` #### 复杂标签页 ````markdown ## 主要功能 - 支持多种编程语言 - 语法高亮显示 - 响应式设计 ### 使用场景适用于代码示例、教程对比等。 ## 配置选项 ```json { "theme": "dark", "language": "auto", "showLineNumbers": true } ``` ```` ### 注意事项 - 配置文件必须是有效的 JSON 格式 - 主题选项：light, dark, auto ### 常见问题 **Q: 代码不显示高亮？** A: 检查语言标识是否正确。 **Q: 标签页不切换？** A: 确保 JavaScript 已启用。 ```` **特性**： - 支持任意 Markdown 内容 - 响应式设计 - 键盘导航支持 - 可嵌套其他组件 ### 2. 折叠面板 (Details) 创建可展开/收缩的内容区域： #### 基础折叠面板 ```markdown

点击展开详细说明

这里是隐藏的详细内容，只有点击上面的标题才会显示。可以包含： - 列表项目 - **格式化文本** - `代码片段` - 甚至图片和链接

```` #### 默认展开的面板 ```markdown

默认展开的面板

这个面板默认是展开状态的。

``` #### 嵌套折叠面板 ```markdown

主要话题

这是主要内容的介绍。

子话题 A

这是子话题 A 的详细内容。

子话题 B

这是子话题 B 的详细内容。还可以继续嵌套：

更深层的内容

最深层的说明文字。

``` #### 结合其他元素 ````markdown

📚 学习资源

## 在线教程 - [MDN Web Docs](https://developer.mozilla.org/) - [W3Schools](https://www.w3schools.com/) ## 代码示例 ```javascript // 示例代码 const example = "Hello World"; console.log(example); ``` ```` ## 相关图片 ![示例图片](https://example.com/image.jpg)

``` ### 3. 自定义组件 #### 链接卡片 ```markdown ``` #### 标签组件 ```markdown 重要已完成紧急待处理 ``` #### 自定义容器 ```markdown

这里可以放置任何自定义的 HTML 内容。

``` **高级技巧**： - 可以组合多个交互元素 - 支持自定义 CSS 类 - 兼容所有 Markdown 语法 - 响应式设计自动适配 ## 🔧 开发者功能 ### 1. 脚本支持 #### 安全的 JavaScript 执行 ```markdown ``` **安全特性**： - XSS 防护机制 - 沙箱环境执行 - 可选择性启用 - 内容过滤和清理 ### 2. 图表支持 #### Mermaid 流程图 ````markdown ```mermaid graph TD A[开始] --> B{是否登录?} B -->|是| C[显示主页] B -->|否| D[跳转登录页] C --> E[结束] D --> F[用户登录] F --> C ``` ```` ```` #### Mermaid 时序图 ```markdown ```mermaid sequenceDiagram participant 用户 participant 前端 participant 后端 participant 数据库用户->>前端: 提交表单前端->>后端: 发送请求后端->>数据库: 查询数据数据库-->>后端: 返回结果后端-->>前端: 响应数据前端-->>用户: 显示结果 ```` ```` #### Mermaid 甘特图 ```markdown ```mermaid gantt title 项目开发计划 dateFormat YYYY-MM-DD section 设计阶段需求分析 :a1, 2025-01-01, 30d UI设计 :a2, after a1, 20d section 开发阶段前端开发 :b1, after a2, 45d 后端开发 :b2, after a2, 50d section 测试阶段功能测试 :c1, after b1, 20d 性能测试 :c2, after b1, 15d ```` ```` #### Excalidraw 手绘图 ```markdown ```excalidraw // 这里可以嵌入 Excalidraw 生成的 JSON 数据 // 或者使用 Excalidraw 组件进行在线绘制 ```` ```` **支持的图表类型**： - 流程图 (Flowchart) - 时序图 (Sequence Diagram) - 甘特图 (Gantt Chart) - 类图 (Class Diagram) - 状态图 (State Diagram) - 饼图 (Pie Chart) - Git 图 (Git Graph) ### 3. 第三方集成 #### Twitter 推文嵌入 ```markdown ```` #### GitHub Gist 嵌入 ```markdown ``` #### OpenAI 内容生成 ```markdown

这部分内容由 AI 辅助生成。

``` #### 代码沙盒嵌入 ```markdown ``` ### 4. 元数据和 SEO #### 文章元数据 ```yaml --- title: 完整的文章标题 description: 文章摘要描述，用于 SEO 和社交分享 keywords: [关键词1, 关键词2, 关键词3] author: 作者姓名 cover: /images/article-cover.jpg thumbnail: /images/article-thumbnail.jpg ogImage: /images/og-image.jpg twitterCard: summary_large_image canonical: https://yourdomain.com/posts/article-slug --- ``` #### 自定义 meta 标签 ```markdown ``` **SEO 优化特性**： - 自动生成 sitemap - 结构化数据支持 - Open Graph 标签 - Twitter Card 支持 - 自动内链建议 ## 📱 响应式设计 ### 1. 移动端优化 #### 自适应布局所有内容都会自动适配不同屏幕尺寸： - **手机端** (≤768px): 单列布局，触控优化 - **平板端** (769px-1024px): 双列布局，混合交互 - **桌面端** (≥1025px): 多列布局，鼠标优化 #### 触控友好 ```markdown ![可缩放图片](https://example.com/image.jpg) ``` #### 响应式图片 ```markdown ![响应式图片](https://example.com/image.jpg){sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"}

``` ### 2. 主题支持 #### 深色模式适配所有内容都支持自动的深色/浅色主题切换： ```markdown ![浅色主题图片](https://example.com/light-image.jpg){theme="light"} ![深色主题图片](https://example.com/dark-image.jpg){theme="dark"} ![自适应图片](https://example.com/auto-image.jpg){theme="auto"} ``` #### 自定义主题变量 ```css /* 可以使用 CSS 变量进行主题自定义 */ ``` #### 主题响应式代码 ````markdown ```css /* 深色模式样式 */ @media (prefers-color-scheme: dark) { .custom-element { background: #1a1a1a; color: #ffffff; } } /* 浅色模式样式 */ @media (prefers-color-scheme: light) { .custom-element { background: #ffffff; color: #000000; } } ``` ```` ```` ### 3. 性能优化 #### 图片懒加载 ```markdown ![懒加载图片](https://example.com/large-image.jpg) ![带模糊占位符的图片](https://example.com/image.jpg){blurhash="LGF5?xYk^6#M@-5c,1J5@[or[Q6."} ```` #### 代码分割 ```markdown 加载中...}> ``` #### 内容优化 - **文本压缩**: 自动压缩 HTML 输出 - **图片优化**: WebP/AVIF 格式支持 - **资源预加载**: 关键资源优先加载 - **缓存策略**: 智能缓存管理 ## 🚀 性能优化 ### 1. 加载性能 #### 代码分割和懒加载 ```markdown 加载中...}>

点击加载更多内容

大量的文本内容或复杂的组件...

``` #### 图片优化策略 ```markdown

![响应式图片](https://example.com/image.jpg){ sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" } ``` ### 2. 缓存策略 #### 内容缓存 - **静态资源**: 长期缓存策略 - **动态内容**: 智能失效机制 - **离线支持**: PWA 离线访问 - **增量更新**: 只更新变更内容 #### 数据持久化 ```javascript // 文章内容本地缓存 const cacheArticle = (articleId, content) => { localStorage.setItem( `article_${articleId}`, JSON.stringify({ content, timestamp: Date.now(), version: "1.0", }) ); }; ``` ### 3. 渲染优化 #### 虚拟滚动适用于长列表内容： ```markdown {largeDataSet.map(item => ( ))} ``` #### 骨架屏加载 ```markdown

``` ## 📊 数据分析 ### 1. 访问统计 #### 页面分析 - **PV/UV**: 页面访问量和独立用户 - **停留时间**: 用户阅读时长分析 - **跳出率**: 页面质量评估 - **热力图**: 用户交互热点 #### 内容分析 ````markdown

这是文章的介绍部分

```javascript // 代码块使用统计 function example() { return "Hello World"; } ````

``` ### 2. 用户行为追踪 #### 阅读进度 ```markdown

``` #### 交互统计 - **点击统计**: 链接和按钮点击 - **滚动深度**: 内容阅读深度 - **分享统计**: 社交分享次数 - **搜索关键词**: 站内搜索分析 ### 3. 错误监控 #### 前端错误捕获 ```javascript // 自动错误报告 window.addEventListener("error", (event) => { console.error("页面错误:", { message: event.message, filename: event.filename, lineno: event.lineno, colno: event.colno, error: event.error, }); }); ``` #### 性能监控 ```javascript // 性能指标收集 const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.entryType === "largest-contentful-paint") { console.log("LCP:", entry.startTime); } } }); observer.observe({ entryTypes: ["largest-contentful-paint"] }); ``` ## 💡 使用技巧和最佳实践 ### 1. 内容组织 #### 文章结构建议 ```markdown --- title: 清晰的标题 description: 简洁的描述 tags: [相关, 标签] --- # 主标题 ## 简介简要介绍文章内容和目标读者。 ## 目录 - [第一部分](#section1) - [第二部分](#section2) - [总结](#conclusion) ## 第一部分 {#section1} 详细内容... ## 第二部分 {#section2} 详细内容... ## 总结 {#conclusion} 总结要点... --- _本文最后更新于 2025 年 8 月 22 日_ ``` #### 内容分段策略 - **短段落**: 每段不超过 3-4 句话 - **小标题**: 使用层级标题组织内容 - **视觉分隔**: 适当使用分隔线和空白 - **重点突出**: 使用引用框和高亮文本 ### 2. 图片和媒体使用 #### 图片命名规范 ```markdown ![React 组件生命周期图](./images/react-lifecycle-2025.jpg) ![图片](./images/img001.jpg) ``` #### 媒体文件组织 ``` assets/ ├── images/ │ ├── articles/ │ │ ├── 2025/ │ │ │ ├── 08/ │ │ │ │ ├── article-name/ │ │ │ │ │ ├── cover.jpg │ │ │ │ │ ├── diagram-1.svg │ │ │ │ │ └── screenshot.png ├── videos/ │ └── demos/ └── documents/ └── downloads/ ``` ### 3. SEO 优化建议 #### URL 友好化 ```yaml --- slug: how-to-use-react-hooks-effectively permalink: posts/react/how-to-use-react-hooks-effectively --- ``` #### 内容关键词 ```markdown # React Hooks 使用指南：如何高效使用 React Hooks React Hooks 是 React 16.8 引入的新特性，它让我们能够在函数组件中使用状态和其他 React 特性。本文将详细介绍如何高效使用 React Hooks... ``` ### 4. 可访问性支持 #### 语义化标记 ```markdown

文章标题

2025年8月22日

文章内容...

``` #### 替代文本 ```markdown ![显示 React 组件生命周期各个阶段的流程图，包括挂载、更新和卸载三个主要阶段](./lifecycle.jpg) ![](./decorative-border.png) ``` --- ## 🎉 总结网站提供了一个功能非常强大的内容创作平台，支持： ### ✨ 核心特性 - 📝 **丰富的 Markdown 支持** - 从基础语法到高级扩展 - 🎨 **多媒体内容** - 图片、视频、图表、音频 - 🔧 **开发者功能** - 代码高亮、数学公式、图表绘制 - 📱 **响应式设计** - 完美适配所有设备 - 🚀 **性能优化** - 懒加载、缓存、压缩 - 📊 **数据分析** - 详细的访问和用户行为统计 ### 🛠️ 推荐工作流程 1. **规划内容** - 使用 YAML Front Matter 定义元数据 2. **编写正文** - 利用 Markdown 语法和扩展功能 3. **添加媒体** - 插入图片、视频、图表等富媒体内容 4. **优化体验** - 添加交互元素和导航结构 5. **性能检查** - 确保加载速度和移动端体验 6. **发布分析** - 监控访问数据和用户反馈

网站文章支持功能

网站文章支持功能