水墨风博客写作指南

欢迎使用本博客！本博客基于 Jekyll 构建，采用了优雅的“水墨（Shuimo）”主题，并经过了一系列深度优化。

本文将向你展示如何在这里优雅地创作文章。

1. 文章结构 (Front Matter)

每一篇文章的开头都需要有一段 YAML 格式的配置信息，我们称之为 Front Matter。这是一篇文章的“骨架”。

新建文章时，在 _posts/ 目录下创建一个命名格式为 YYYY-MM-DD-你的标题拼音.md 的文件，然后在文件开头写入：

---
layout: post
title: "你的文章标题"
category_path: "开发/前端/React"  # 树状分类路径
cover: "https://你的图片地址.png" # 封面图（可选）
description: "文章的一句话简介，用于 SEO 和列表展示。"
keywords: "标签1, 标签2"
---

关于 category_path

这是我们特别优化的功能。你可以通过斜杠 / 来定义多级分类，比如 随笔/生活/2026。这会自动在“分类”页面生成可折叠的树状菜单，并且文章底部的“上一篇/下一篇”会优先推荐同一路径下的文章。

2. 插入图片 (自动 WebP)

你完全不需要担心图片格式和体积问题！

你只需要像平常写 Markdown 一样插入本地的 png 或 jpg 图片：

![美丽的风景](/assets/images/scenery.jpg)

发生了什么？ 当你推送到 GitHub 后，我们配置好的后台机器人（GitHub Actions）会自动拦截这张图片，将其无损压缩并转换为体积更小的 WebP 格式，同时悄悄把你文章里的链接也改掉。 你只管贴图，剩下的交给我们。

3. 归档与时间线

你可能注意到了本博客独特的“归档”页面。 所有的文章都会自动按照年份收纳进折叠面板中。年份节点旁边的圆点，当你把鼠标悬停上去时，会呈现出一种水墨晕染扩散的呼吸感动效。

这一切都不需要你额外配置，只要写文章，时间线就会自动生成。

4. 图表与代码

作为一个科技与文艺并重的博客，我们内置了对程序员极其友好的功能。

代码高亮

// 你的代码会自动拥有优雅的高亮配色和一键复制按钮
console.log("Hello, Shuimo!");

Mermaid 矢量图

你可以直接在 Markdown 中画流程图，它们会被自动渲染成符合当前主题颜色（墨青色）的矢量图：

` ``mermaid
graph TD
    A[构思] --> B(写作)
    B --> C{是否配图?}
    C -->|是| D[上传 PNG/JPG]
    C -->|否| E[发布]
    D --> E
    E --> F[自动转为 WebP 并上线]
` ``

(注意：实际书写时请去掉 ` ``` ` 之间的空格)

5. 发布文章

完成写作后，只需将 .md 文件提交并 Push 到 GitHub 仓库的 main 分支。 我们的自动化工作流将在几分钟内完成构建，你的文章就会带着最完美的排版和最优化的图片，呈现在读者面前。

祝你创作愉快！