DDW的小站

DDW-1123 博客维护手册

Tue, 14 Apr 2026 16:30:00 GMT

这篇文章是 DDW-1123 的第一篇完整维护手册。

以后无论是在本地改，还是直接在 GitHub 网页上改，都可以回到这里查步骤。目标很简单：把博客变成一个可以长期自己维护、慢慢生长的小站。

一句话记忆版：
文字配置改 config/site.yaml，图库改 config/gallery.yaml，文章放 src/content/blog，图片放 public/img，上线用 git push origin main。

1. 项目目录速览

项目在本地的位置：

C:\Users\1\Desktop\DDW-worktree\DDW-1123

最常用的文件和目录：

位置	用途
`config/site.yaml`	站点标题、导航、头像、社交链接、歌单、追番等总配置
`config/gallery.yaml`	图库分类与图片列表
`src/pages/about.md`	关于页
`src/pages/music.md`	歌单页
`src/content/blog`	文章目录
`public/img`	图片总目录
`public/img/posts`	文章插图建议放这里
`public/img/gallery`	图库图片建议放这里
`src/components/ui/cover/Cover.astro`	博客内页大横幅

1.1 日常维护优先改哪里

日常 DIY 优先改这些：

config/site.yaml
config/gallery.yaml
src/pages/about.md
src/pages/music.md
src/content/blog/xxx.md
public/img/xxx

尽量少直接改这些：

.astro 组件
.ts 代码
.css 样式

除非是在改布局、交互或页面功能。

2. 本地修改版流程

本地修改适合稍微复杂一点的调整，因为可以先预览，再上线。

2.1 启动本地预览

打开 PowerShell：

cd C:\Users\1\Desktop\DDW-worktree\DDW-1123
corepack pnpm dev

浏览器打开：

http://localhost:4321/

遇到端口被占用的情况，(或者关闭代理)：

cd C:\Users\1\Desktop\DDW-worktree\DDW-1123
corepack pnpm dev -- --port 4322

浏览器打开：

http://localhost:4322/

然后就可以一边改文件，一边刷新浏览器看效果。

2.2 停止本地预览

确认没问题后，在 PowerShell 里按：

Ctrl + C

如果提示是否终止，输入：

2.3 构建检查

上线前先跑一次构建：

$env:ASTRO_TELEMETRY_DISABLED='1'; corepack pnpm build

看到 Complete!，并且没有红色报错，就可以推送。

2.4 提交并推送

git status
git add -A
git commit -m "chore: update site content"
git push origin main

这几行分别表示：

命令	含义
`git status`	查看改了哪些文件
`git add -A`	把所有改动加入提交
`git commit -m "..."`	保存一个版本
`git push origin main`	推送到 GitHub

推送成功后，GitHub 更新，Cloudflare 和 Vercel 会自动部署。

3. GitHub 网页修改版流程

GitHub 网页修改适合小改动，比如改文字、换配置、上传图片、写文章。

3.1 进入仓库

打开：

https://github.com/1314520ddw/ddw-1123

找到要改的文件，例如：

config/site.yaml
config/gallery.yaml
src/pages/about.md
src/pages/music.md
src/content/blog
public/img

3.2 编辑并提交

点右上角铅笔图标。
修改内容。
页面底部填写提交说明，例如 update site content。
选择 Commit directly to the main branch。
点 Commit changes。

提交后会自动触发 Cloudflare 和 Vercel 部署。

3.3 哪些适合 GitHub 网页改

适合：

文章内容
关于页
歌单页
图库 YAML
少量站点配置
上传图片

不太建议：

大改 .astro 页面结构
大改 .ts 逻辑
大改 CSS 样式
批量重构

GitHub 网页没有本地预览，复杂修改更容易出错。

4. 站点基本信息

站点基本信息在：

config/site.yaml

核心区域：

site:
  title: DDW的小站
  subtitle: WA 的一声就哭了
  name: DDW
  description: DDW 记录生活的博客
  avatar: /img/ddw.jpg
  author: DDW
  url: https://ddw-1123.pages.dev
  defaultOgImage: /img/ddw.jpg
  startYear: 2026

对应关系：

字段	控制内容
`site.title`	博客主页大标题
`site.subtitle`	博客主页副标题
`site.name`	左侧栏名称
`site.description`	左侧栏个性签名
`site.avatar`	左侧栏头像
`site.url`	站点正式地址，影响 SEO 和 RSS
`defaultOgImage`	分享预览图
`startYear`	页脚起始年份

5. 起始页维护

起始页配置在 config/site.yaml 的 startPage。

startPage:
  enabled: true
  title: DDW
  subtitle: ""
  quote: "我想把喜欢的东西放进来^-^"
  avatar: /img/ddw.jpg
  backgroundImage: /img/bg.png
  blogPath: /blog
  footer: © DDW-1123

对应关系：

字段	控制内容
`title`	起始页大字
`subtitle`	大字下面的小字，不想要就写 `""`
`quote`	引号里的句子
`avatar`	起始页头像
`backgroundImage`	起始页背景
`blogPath`	进入博客按钮，保持 `/blog`
`footer`	底部版权文字

5.1 起始页按钮

buttons:
  - label: 哔哩哔哩
    url: https://space.bilibili.com/你的ID
    icon: ri:bilibili-fill
    variant: secondary
    external: true
  - label: 进入博客
    url: __BLOG__
    icon: ri:quill-pen-ai-fill
    variant: primary

进入博客按钮建议保持：

url: __BLOG__

6. 图片管理

网站里图片路径和本地文件路径的对应关系：

本地文件	网页路径
`public/img/ddw.jpg`	`/img/ddw.jpg`
`public/img/bg.png`	`/img/bg.png`
`public/img/posts/a.jpg`	`/img/posts/a.jpg`
`public/img/gallery/a.jpg`	`/img/gallery/a.jpg`

6.1 头像

avatar: /img/ddw.jpg

6.2 起始页背景

backgroundImage: /img/bg.png

6.3 文章封面

cover: /img/posts/my-cover.jpg

6.4 文章插图

![图片说明](/img/posts/my-image.jpg)

注意：

文件名大小写必须一致。
不要在网页路径里写 public。
正确：/img/bg.png
错误：public/img/bg.png

7. 博客内页大横幅

博客主页、文章页、图库页顶部的大横幅在：

src/components/ui/cover/Cover.astro

现在使用：

const bannerLqipStyle = getLqipStyle('/img/bg.png');

图片本体：

<img
  src="/img/bg.png"
  alt="cover"
  class="h-full w-full object-cover"
  loading="eager"
  fetchpriority="high"
  decoding="async"
/>

如果以后换成：

public/img/blog-banner.jpg

就把两处都改成：

/img/blog-banner.jpg

7.1 关于 srcset

如果只有一张图，不建议使用 srcset。

如果要使用，格式必须是：

图片路径 空格 宽度

例如：

srcset="/img/bg-800.jpg 800w, /img/bg-1920.jpg 1200w"

8. 社交图标

社交图标在 config/site.yaml 的 social。

social:
  github:
    url: https://github.com/1314520ddw
    icon: ri:github-fill
    color: '#191717'
  bilibili:
    url: https://space.bilibili.com/你的ID
    icon: ri:bilibili-fill
    color: '#fb7299'
  email:
    url: mailto:你的邮箱@qq.com
    icon: ri:mail-line
    color: '#55acd5'

想删除某个图标，就删除对应整块。

想新增网易云：

music:
  url: https://music.163.com/#/user/home?id=你的ID
  icon: ri:netease-cloud-music-line
  color: '#e60026'

9. 顶部导航

顶部导航在 config/site.yaml 的 navigation。

navigation:
  - name: 首页
    path: /blog
  - name: 文章
    children:
      - name: 分类
        path: /categories
      - name: 标签
        path: /tags
      - name: 归档
        path: /archives
  - name: 友情链接
    path: /friends
  - name: 关于
    path: /about
  - name: 歌单
    path: /music
  - name: 图库
    path: /gallery

想隐藏某个导航，就删除对应整段。

10. 文章写作

中文文章放在：

src/content/blog

比如：

src/content/blog/life/my-first-post.md

文章模板：

---
title: 我的第一篇文章
link: my-first-post
date: 2026-04-15 12:00:00
description: 这里写文章摘要
cover: /img/posts/my-cover.jpg
tags:
  - 生活
  - 记录
categories:
  - 随笔
catalog: true
sticky: false
draft: false
---

这里开始写正文。

## 小标题

这是一段文字。

![图片说明](/img/posts/example.jpg)

10.1 Frontmatter 字段

字段	含义
`title`	文章标题
`link`	文章链接，建议英文、数字、短横线
`date`	发布时间
`description`	摘要
`cover`	封面图
`tags`	标签
`categories`	分类
`catalog`	是否显示目录
`sticky`	是否置顶
`draft`	是否草稿

不想置顶：

sticky: false

不想上线：

draft: true

10.2 Markdown 排版

# 一级标题

## 二级标题

### 三级标题

这是一段正文。

- 无序列表
- 第二项

1. 有序列表
2. 第二步

> 这是一段引用。

**加粗文字**

`行内代码`

```js
console.log('hello');

链接文字

图片说明


## 11. 删除文章

直接删除对应 `.md` 文件即可。

例如：

```text
src/content/blog/life/hello-world.md

不确定要不要删时，可以先改成草稿：

draft: true

这样线上不显示，本地还可以继续看。

12. 精选分类

首页“精选分类”在：

config/site.yaml

featuredCategories:
  - link: life
    label: 随笔
    image: /img/cover/2.webp
    description: 生活记录、随想随笔

分类映射在：

categoryMap:
  随笔: life
  笔记: note
  工具: tools

文章里这样写：

categories:
  - 随笔

它就会进入 /categories/life。

12.1 新增分类示例

categoryMap:
  灵感: inspiration

精选卡片：

featuredCategories:
  - link: inspiration
    label: 灵感
    image: /img/cover/inspiration.jpg
    description: 图片、配色、想法收集

文章：

categories:
  - 灵感

13. 歌单页

歌单页在：

src/pages/music.md

示例：

---
layout: ../layouts/PageLayout.astro
title: "歌单"
description: "我喜欢的音乐"
---

{% media audio %}
- title: CN
  list:
    - https://music.163.com/playlist?id=12700562532
- title: ENG
  list:
    - https://music.163.com/playlist?id=12699099138
{% endmedia %}

新增歌单：

- title: 新歌单名
  list:
    - https://music.163.com/playlist?id=你的歌单ID

13.1 全站 BGM

右下角全站 BGM 在：

config/site.yaml

bgm:
  enabled: true

不想要右下角音乐按钮：

bgm:
  enabled: false

14. 图库维护

图库配置文件：

config/gallery.yaml

基本结构：

title: 图库
description: ""
defaultCategory: all
categories:
  - id: favorite
    name: 收藏
    description: 喜欢的图先放这里
    images:
      - src: /img/gallery/a.jpg
        title: 标题可不写
        description: 说明可不写
        alt: 图片说明

字段说明：

字段	含义
`title`	图库页标题
`description`	图库页说明，不想显示就写 `""`
`defaultCategory`	默认分类，`all` 表示全部
`categories`	分类列表
`id`	分类英文 ID，不要中文，不要空格
`name`	页面显示的分类名
`images`	图片列表
`src`	图片路径
`title`	图片标题，可空
`description`	图片说明，可空
`alt`	图片替代文本，建议写
`downloadName`	下载文件名，可不写

14.1 无文字图片

- src: /img/gallery/photo-01.jpg
  title: ""
  description: ""
  alt: photo 01

14.2 新增分类

- id: anime
  name: 动漫
  description: 喜欢的动漫图
  images:
    - src: /img/gallery/anime-01.jpg
      title: ""
      description: ""
      alt: 动漫图片

图库现在支持：

分类筛选
点击图片放大预览
Esc 关闭预览
右下角下载按钮
图片说明可有可无

15. 追番页

追番使用 Bangumi，也就是：

https://bgm.tv

配置在：

config/site.yaml

bangumi:
  userId: 你的Bangumi用户名
  label: 追番
  icon: ri:bilibili-fill

如果没有数据，检查：

用户名是否正确
收藏是否公开
Bangumi 是否能访问
API 是否临时不稳定

16. 关于页

关于页在：

src/pages/about.md

示例：

---
layout: ../layouts/PageLayout.astro
title: "About"
coverTitle: "关于我"
description: "关于我？"
---

# 你好，这里是 DDW

这里写你的介绍。

17. 自动部署

现在站点可以通过 GitHub 自动部署。

17.1 Cloudflare

Cloudflare Pages 绑定 GitHub 后，只要 main 分支更新，就会自动部署。

17.2 Vercel

Vercel 推荐配置：

Framework Preset: Astro
Root Directory: ./
Build Command: corepack pnpm build
Output Directory: dist
Install Command: corepack pnpm install
Production Branch: main

只要执行：

git push origin main

或者在 GitHub 网页上 Commit changes 到 main，就会自动触发：

GitHub 更新
Cloudflare 部署
Vercel 部署

18. 常见问题

18.1 图片不显示

检查：

图片是否真的在 public/img
路径是否写成 /img/xxx
文件名大小写是否一致
后缀是否一致，比如 .jpg、.png、.webp

18.2 GitHub 提交后线上没变化

检查：

Cloudflare / Vercel 是否有新的部署记录
部署是否成功
是否提交到了 main 分支
浏览器是否缓存，试试强制刷新

18.3 YAML 报错

YAML 对缩进很敏感。

正确：

site:
  title: DDW的小站
  name: DDW

错误：

site:
title: DDW的小站
name: DDW

字符串里有特殊符号时，可以加引号：

quote: "我想把喜欢的东西放进来^-^"

18.4 本地没有改动可提交

如果看到：

nothing to commit, working tree clean

说明没有新改动，不需要推送。

19. 推荐维护节奏

小改动用 GitHub 网页：

改文章
改关于页
改歌单
改图库 YAML
上传图片
改少量配置

大改动用本地：

改布局
改样式
改 Astro 组件
改图库功能
批量删文章
排查构建错误

推荐顺序：

本地预览。
只改一小块。
刷新确认。
构建检查。
提交推送。
查看 Cloudflare / Vercel 部署状态。

20. 最后

这个博客会从这篇文章开始，慢慢变成自己的地方。

它不需要一下子完整，也不需要每一处都完美。先把喜欢的东西放进来，再慢慢整理。

自定义关键词示例

Sun, 05 Apr 2026 10:43:11 GMT

本文展示如何设置文章关键词。

frontmatter 关键词设置

在文章的 frontmatter 中添加 keywords 字段即可设置关键词：

---
title: 我的文章
date: 2026-01-01
keywords:
  - 示例关键词一
  - 示例关键词二
---

这是篇带有关键词的文章。

然后生成的页面会包含以下 meta 标签：

<meta name="keywords" content="示例关键词一, 示例关键词二, ... site.keywords">

🔒 加密文章演示

Mon, 16 Feb 2026 16:00:00 GMT

この記事は暗号化されています。ウェブサイトでご覧ください。

Shoka 主题 Markdown 语法演示

Sat, 07 Feb 2026 04:00:00 GMT

本文展示了从 Hexo Shoka 主题迁移的所有特殊 Markdown 语法。

文字特效

下划线 (ins)

++这是下划线文字++

++波浪下划线++{.wavy}

++着重点标记++{.dot}

这是下划线文字

波浪下划线

着重点标记

下划线颜色

++主色调++{.primary} ++成功++{.success} ++警告++{.warning} ++危险++{.danger} ++信息++{.info}

主色调成功警告危险信息

高亮 (mark)

==这是高亮文字==

这是高亮文字

上下标

H~2~O 是水的化学式
E = mc^2^ 是质能方程

H₂O 是水的化学式

E = mc² 是质能方程

颜色文字

[红色]{.red} [粉色]{.pink} [橙色]{.orange} [黄色]{.yellow} [绿色]{.green} [水色]{.aqua} [蓝色]{.blue} [紫色]{.purple} [灰色]{.grey}

红色粉色橙色黄色绿色水色蓝色紫色灰色

彩虹文字

[这段文字会有彩虹渐变效果]{.rainbow}

这段文字会有彩虹渐变效果

键盘键

[Ctrl]{.kbd} + [C]{.kbd} 复制，[Ctrl]{.kbd} + [V]{.kbd} 粘贴

Ctrl + C 复制，Ctrl + V 粘贴

隐藏文字 (Spoiler)

这里有一段!!隐藏文字，鼠标点击显示!!

这里有一段!!模糊文字，鼠标悬停显示!!{.blur}

这里有一段隐藏文字，鼠标点击显示

这里有一段模糊文字，鼠标悬停显示

标签块 (Labels)

[默认]{.label .default} [主要]{.label .primary} [信息]{.label .info} [成功]{.label .success} [警告]{.label .warning} [危险]{.label .danger}

默认主要信息成功警告危险

提醒块 (Note Blocks)

:::default
这是默认提醒块
:::

:::primary
这是主要提醒块，用于重要提示
:::

:::info
这是信息提醒块，用于提供额外信息
:::

:::success
这是成功提醒块，用于正面反馈
:::

:::warning
这是警告提醒块，请注意
:::

:::danger
这是危险提醒块，务必谨慎
:::

:::info no-icon
这是没有图标的信息块
:::

这是默认提醒块

这是主要提醒块，用于重要提示

这是信息提醒块，用于提供额外信息

这是成功提醒块，用于正面反馈

这是警告提醒块，请注意

这是危险提醒块，务必谨慎

这是没有图标的信息块

折叠块 (Collapse)

+++primary 点击展开详细内容
这里是折叠的内容，点击标题可以展开或收起。

支持 **Markdown** 格式化。

- 列表项 1
- 列表项 2
+++

+++warning 注意事项
这里列出一些需要注意的问题：

1. 注意事项一
2. 注意事项二
+++

+++danger 危险操作
请确保你知道自己在做什么！

```bash
rm -rf /  # 请勿执行此命令
```
+++

点击展开详细内容

这里是折叠的内容，点击标题可以展开或收起。

支持 Markdown 格式化。

列表项 1
列表项 2

注意事项

这里列出一些需要注意的问题：

注意事项一
注意事项二

危险操作

请确保你知道自己在做什么！

rm -rf /  # 请勿执行此命令

标签卡 (Tabs)

;;;tab1 JavaScript
```js
console.log('Hello, World!');
```
;;;

;;;tab1 Python
```python
print('Hello, World!')
```
;;;

;;;tab1 Rust
```rust
fn main() {
    println!("Hello, World!");
}
```
;;;

JavaScript Python Rust

console.log('Hello, World!');

print('Hello, World!')

fn main() {
    println!("Hello, World!");
}

注音

{取り返す^とりかえす}是日语中"取回"的意思。

{漢字^かんじ}的注音示例。

取り返す(とりかえす)是日语中"取回"的意思。

漢字(かんじ)的注音示例。

代码块增强

```js title="hello.js" url="https://example.com" linkText="查看源码" mark:1,3
const greeting = 'Hello';
const name = 'World';
console.log(`${greeting}, ${name}!`);
```

```bash command:("$":1-3)
npm install astro
npm run dev
npm run build
```

const greeting = 'Hello';
const name = 'World';
console.log(`${greeting}, ${name}!`);

npm install astro
npm run dev
npm run build

数学公式

行内公式：$E = mc^2$

块级公式：

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

行内公式：E=mc2E = mc^2E=mc2

块级公式：

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞e−x2dx=π ∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞n21=6π2

友链卡

{% links %}
- site: 余弦の博客
  url: https://blog.cosine.ren
  owner: cos
  desc: FE / ACG / 手工
  image: https://blog.cosine.ren/img/avatar.webp
  color: '#ed788b'
- site: 示例博客
  url: https://example.com
  owner: Alice
  desc: 一个热爱技术的博客
  image: https://api.dicebear.com/7.x/avataaars/svg?seed=Alice
  color: '#BEDCFF'
{% endlinks %}

多媒体

音频

{% media audio %}
- name: 示例音频
  url: https://music.163.com/#/song?id=3339210292
{% endmedia %}

音频歌单

{% media audio %}
- title: 诗岸歌单 山山～全是山山～
  list:
    - https://music.163.com/#/playlist?id=8676645748
- title: 『诗岸』全是山山！
  list:
    - https://music.163.com/#/playlist?id=17606384886
{% endmedia %}

视频

{% media video %}
- name: "测试 1"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
- name: "测试 2"
  url: https://cdn.kastatic.org/ka-youtube-converted/O_nY1TM2RZM.mp4/O_nY1TM2RZM.mp4#t=0
{% endmedia %}

练习题

支持四种题型：单选题、多选题、判断题、填空题。

单选题

- 下列哪个是 JavaScript 的基本数据类型？{.quiz}
  - Object{.options}
  - Array{.options}
  - Symbol{.correct}
  - Function{.options}

> 解析：Symbol 是 ES6 引入的基本数据类型，而 Object、Array、Function 都是引用类型。

下列哪个是 JavaScript 的基本数据类型？
- Object
- Array
- Symbol
- Function

解析：Symbol 是 ES6 引入的基本数据类型，而 Object、Array、Function 都是引用类型。

多选题

- 以下哪些是 CSS 布局方式？{.quiz .multi}
  - Flexbox{.correct}
  - jQuery{.options}
  - Grid{.correct}
  - Float{.correct}

> 解析：Flexbox、Grid 和 Float 都是 CSS 布局方式。jQuery 是一个 JavaScript 库，不属于 CSS 布局。

以下哪些是 CSS 布局方式？
- Flexbox
- jQuery
- Grid
- Float

解析：Flexbox、Grid 和 Float 都是 CSS 布局方式。jQuery 是一个 JavaScript 库，不属于 CSS 布局。

判断题

- `const` 声明的变量不能重新赋值，但可以修改其属性。{.quiz .true}

> 解析：`const` 只保证变量绑定不可变，如果变量指向一个对象，其属性仍然可以修改。

- HTML 是一种编程语言。{.quiz}

> 解析：HTML（超文本标记语言）是一种标记语言，不是编程语言。它没有逻辑控制能力。

const 声明的变量不能重新赋值，但可以修改其属性。

解析：const 只保证变量绑定不可变，如果变量指向一个对象，其属性仍然可以修改。

HTML 是一种编程语言。

解析：HTML（超文本标记语言）是一种标记语言，不是编程语言。它没有逻辑控制能力。

填空题

- 在 JavaScript 中，`typeof null` 的结果是 [object]{.gap}。{.quiz .fill}

> 解析：这是一个历史遗留 bug。`null` 的类型标签与 object 相同，因此 `typeof null` 返回 `"object"`。常见错误答案是 [null]{.mistake}。

在 JavaScript 中，typeof null 的结果是 object。

解析：这是一个历史遗留 bug。null 的类型标签与 object 相同，因此 typeof null 返回 "object"。常见错误答案是 null。

CSS 中，Flexbox 适合一维布局，Grid 适合二维布局，而 Float 是传统的布局方式。

解析：Flexbox 是一维布局模型（行或列），Grid 是二维布局模型（行和列同时控制），Float 是 CSS2 时代的传统布局方式。

加密内容块 (Encrypted Block)

使用 :::encrypted{password="密码"} 语法可以创建加密区块。区块内的内容在构建时使用 AES-256-GCM 进行真正加密，密码不会出现在最终的 HTML 中。读者需要输入正确密码才能解密查看。

适用场景：防止搜索引擎/爬虫收录敏感内容（如私人资源链接、付费内容片段等）。

前端无法实现真正意义上的加密：密码总需要在客户端输入，密文和算法都对用户可见，安全性完全取决于密码强度。本功能的目的不是对抗有针对性的破解，而是防止搜索引擎和爬虫直接收录明文内容。对于这个场景，AES-256-GCM 已经足够：构建产物中只有密文，不含密码和明文，搜索引擎无法索引加密区块的内容。


:::encrypted{password="test"}
这里是加密的内容，支持完整的 Markdown 语法：

- **粗体**、*斜体*、~~删除线~~
- `行内代码`
- [链接](https://example.com)

```js
console.log('加密内容中的代码也有语法高亮！');
```

行内公式 $E = mc^2$ 也可以正常渲染。
:::

:::encrypted{password="another"}
每个加密块可以设置独立的密码。
:::

Infographic 信息图指南

Sat, 03 Jan 2026 04:00:00 GMT

本文将详细介绍如何在 Markdown 中使用 @antv/infographic 创建各种精美的信息图表。

什么是 Infographic

Infographic（信息图）是一种将数据、信息和知识以视觉化方式呈现的图表形式。相比传统的文字描述，信息图能够更直观、更有吸引力地传达信息。

在本博客中，你可以直接在 Markdown 代码块中使用 infographic 标记来创建各种类型的信息图，支持：

列表展示
流程说明
数据对比
层级结构
统计图表
象限分析
关系展示

基本语法

在代码块中使用 infographic 标记，第一行指定模板名称，然后使用类似 YAML 的语法定义数据：

```infographic
infographic <template-name>
data
  title 标题
  desc 描述
  items
    - label 条目名称
      desc 条目描述
      icon mdi/icon-name
```

列表类模板 (list-*)

适合展示信息列表、特性清单、技术栈等。

网格卡片布局

使用 list-grid-badge-card 模板展示卡片式列表：

infographic list-grid-badge-card
data
  title 前端技术栈
  desc 现代化前端开发常用技术
  items
    - label TypeScript
      desc 类型安全的 JavaScript 超集
      icon mdi/language-typescript
    - label React
      desc 用于构建用户界面的 JavaScript 库
      icon mdi/react
    - label Astro
      desc 现代化静态站点生成器
      icon mdi/rocket-launch
    - label Tailwind CSS
      desc 实用优先的 CSS 框架
      icon mdi/tailwind
    - label Vite
      desc 下一代前端构建工具
      icon mdi/lightning-bolt
    - label Biome
      desc 一体化的 Web 工具链
      icon mdi/cog

糖果风格卡片

使用 list-grid-candy-card-lite 创建更有趣的卡片样式：

infographic list-grid-candy-card-lite
data
  title 博客特色功能
  items
    - label 深色模式
      desc 优雅的主题切换
      icon mdi/theme-light-dark
    - label 全站搜索
      desc 基于 Pagefind 的无后端搜索
      icon mdi/magnify
    - label Markdown 增强
      desc 支持 GFM、Mermaid、Infographic
      icon mdi/markdown
    - label 智能推荐
      desc 基于语义相似度的文章推荐
      icon mdi/brain

水平箭头列表

使用 list-row-horizontal-icon-arrow 展示线性列表：

infographic list-row-horizontal-icon-arrow
data
  title 开发流程
  items
    - label 需求分析
      icon mdi/clipboard-text
    - label 设计方案
      icon mdi/palette
    - label 编码实现
      icon mdi/code-tags
    - label 测试部署
      icon mdi/rocket-launch

流程/顺序类模板 (sequence-*)

适合展示步骤、流程、时间线等有顺序关系的信息。

之字形步骤

使用 sequence-zigzag-steps-underline-text 展示流程步骤：

infographic sequence-zigzag-steps-underline-text
data
  title 博客搭建流程
  items
    - label 选择框架
      desc 选择 Astro 作为静态站点生成器
    - label 设计主题
      desc 参考 Shoka 主题进行设计
    - label 开发功能
      desc 实现文章系统、搜索、评论等功能
    - label 部署上线
      desc 使用 Vercel 进行自动化部署

圆形流程

使用 sequence-circular-simple 展示循环流程：

infographic sequence-circular-simple
data
  title PDCA 循环
  items
    - label Plan
      desc 制定计划
    - label Do
      desc 执行实施
    - label Check
      desc 检查验证
    - label Act
      desc 改进优化

垂直路线图

使用 sequence-roadmap-vertical-simple 展示时间线或路线图：

infographic sequence-roadmap-vertical-simple
data
  title 项目里程碑
  items
    - label 2024 Q1
      desc 项目启动，完成基础架构
    - label 2024 Q2
      desc 实现核心功能，开始内容迁移
    - label 2024 Q3
      desc 优化性能，添加高级功能
    - label 2024 Q4
      desc 正式发布，持续优化

金字塔结构

使用 sequence-pyramid-simple 展示层级递进关系：

infographic sequence-pyramid-simple
data
  title 马斯洛需求层次
  items
    - label 自我实现
    - label 尊重需求
    - label 社交需求
    - label 安全需求
    - label 生理需求
theme
  palette
    - #8b5cf6
    - #3b82f6
    - #06b6d4
    - #10b981
    - #f59e0b

对比类模板 (compare-*)

适合展示二元对比、优缺点分析等。

水平二元对比

使用 compare-binary-horizontal-simple-fold 进行对比：

infographic compare-binary-horizontal-simple-fold
data
  title SSR vs SSG
  items
    - label 服务端渲染 (SSR)
      children
        - label 实时生成
          desc 每次请求时渲染页面
        - label 动态内容
          desc 适合频繁更新的内容
        - label 服务器负载
          desc 需要服务器资源
    - label 静态生成 (SSG)
      children
        - label 构建时生成
          desc 提前生成所有页面
        - label 静态内容
          desc 适合内容相对稳定的场景
        - label CDN 友好
          desc 可以部署到 CDN 边缘节点

SWOT 分析

使用 compare-swot 进行 SWOT 分析：

infographic compare-swot
data
  title 技术博客 SWOT 分析
  items
    - label 优势 (Strengths)
      children
        - label 技术积累
        - label 个人品牌
        - label 知识沉淀
    - label 劣势 (Weaknesses)
      children
        - label 时间投入
        - label 持续更新压力
        - label 初期流量低
    - label 机会 (Opportunities)
      children
        - label 技术社区活跃
        - label 开源生态发展
        - label 个人成长空间
    - label 威胁 (Threats)
      children
        - label 内容同质化
        - label 平台竞争
        - label 技术快速迭代

层级类模板 (hierarchy-*)

适合展示组织结构、分类体系等树形关系。

系统分层结构

使用 hierarchy-structure 展示多层架构，非常适合展示系统架构、模块分层：

infographic hierarchy-structure
data
  title 系统分层结构
  desc 展示不同层级的模块与功能分组
  items
    - label 展现层
      children
        - label 小程序
        - label APP
        - label PAD
        - label 客户端
        - label WEB
    - label 应用层
      children
        - label 核心模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
        - label 基础模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
        - label 其他模块
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
            - label 功能5
            - label 功能6
    - label 平台层
      children
        - label 模块1
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
        - label 模块2
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4
        - label 模块3
          children
            - label 功能1
            - label 功能2
            - label 功能3
            - label 功能4

科技风格树形图

使用 hierarchy-tree-tech-style-capsule-item 展示层级结构：

infographic hierarchy-tree-tech-style-capsule-item
data
  title 前端技术体系
  items
    - label 前端开发
      children
        - label 基础技术
          children
            - label HTML
            - label CSS
            - label JavaScript
        - label 框架/库
          children
            - label React
            - label Vue
            - label Astro
        - label 工程化
          children
            - label Vite
            - label Webpack
            - label Rollup

圆角矩形树形图

使用 hierarchy-tree-curved-line-rounded-rect-node 展示层级：

infographic hierarchy-tree-curved-line-rounded-rect-node
data
  title 博客内容分类
  items
    - label 技术文章
      children
        - label 前端
          children
            - label React
            - label TypeScript
        - label 后端
          children
            - label Node.js
            - label 数据库
    - label 生活随笔
      children
        - label 年度总结
        - label 读书笔记

图表类模板 (chart-*)

适合展示统计数据、数值对比等。

柱状图

使用 chart-column-simple 展示数据对比：

infographic chart-column-simple
data
  title 月度文章发布统计
  items
    - label 1月
      value 5
    - label 2月
      value 8
    - label 3月
      value 12
    - label 4月
      value 6
    - label 5月
      value 10
    - label 6月
      value 15

条形图

使用 chart-bar-plain-text 展示横向对比：

infographic chart-bar-plain-text
data
  title 编程语言使用占比
  items
    - label TypeScript
      value 45
    - label JavaScript
      value 25
    - label Python
      value 15
    - label Go
      value 10
    - label Others
      value 5

饼图

使用 chart-pie-plain-text 展示占比分布：

infographic chart-pie-plain-text
data
  title 访问来源分布
  items
    - label 搜索引擎
      value 45
    - label 社交媒体
      value 30
    - label 直接访问
      value 15
    - label 外部链接
      value 10

环形图

使用 chart-pie-donut-pill-badge 创建环形图：

infographic chart-pie-donut-pill-badge
data
  title 技术栈占比
  items
    - label 前端
      value 50
    - label 后端
      value 30
    - label DevOps
      value 20

折线图

使用 chart-line-plain-text 展示趋势：

infographic chart-line-plain-text
data
  title 博客访问量趋势
  items
    - label 第1周
      value 100
    - label 第2周
      value 150
    - label 第3周
      value 200
    - label 第4周
      value 280
    - label 第5周
      value 350
    - label 第6周
      value 420

象限分析 (quadrant-*)

适合展示四象限分析、优先级矩阵等。

简单卡片象限

使用 quadrant-quarter-simple-card 进行象限分析：

infographic quadrant-quarter-simple-card
data
  title 四象限分析
  items
    - label 重要且紧急
      desc 直接规避风险
      illus notify
    - label 重要不紧急
      desc 采取风险控制措施
      illus coffee
    - label 不重要但紧急
      desc 通过保险转移风险
      illus diary
    - label 不重要不紧急
      desc 选择接受风险
      illus invest

关系图 (relation-*)

适合展示元素间的关联关系。

圆形图标关系

使用 relation-circle-icon-badge 展示关系网络：

infographic relation-circle-circular-progress
data
  title 子公司盈利分析
  desc 各子公司财务表现，盈利同比增长
  items
    - label 云计算子公司
      value 25
      desc 年度净利润率达25%，成为集团核心增长引擎
      icon mingcute/cardano-ada-fill
    - label 人工智能子公司
      value 40
      desc AI业务快速扩张，盈利同比增长40%
      icon mingcute/openai-fill
    - label 物联网子公司
      value 1000
      desc IoT设备出货量突破千万，盈利稳步提升
      icon mingcute/medium-fill
    - label 金融科技子公司
      value 18
      desc 数字支付业务增长迅猛，净利润率18%
      icon mingcute/paypal-fill
    - label 新能源子公司
      value 50
      desc 绿色能源项目实现规模化盈利，增长潜力巨大
      icon mingcute/drone-fill

主题定制

可以通过 theme 块自定义颜色方案：

infographic list-grid-badge-card
data
  title 自定义配色示例
  items
    - label 主色调
      desc 品牌主色
    - label 辅助色
      desc 强调色彩
    - label 中性色
      desc 背景文字
theme
  palette
    - #3b82f6
    - #8b5cf6
    - #f97316
    - #06b6d4
    - #10b981

实用技巧

1. 选择合适的模板

根据要展示的信息类型选择对应的模板：

列表信息 → list-*
流程步骤 → sequence-*
数据对比 → compare-* 或 chart-*
层级关系 → hierarchy-*
优先级分析 → quadrant-*
关联关系 → relation-*

2. 合理使用图标

使用 Material Design Icons 让信息图更生动：

icon mdi/rocket-launch
icon mdi/heart
icon mdi/lightbulb
icon mdi/chart-line

3. 控制信息密度

每个信息图不要包含过多条目（建议 3-8 个）
使用简洁的标签和描述
复杂信息可以拆分成多个信息图

4. 注意主题适配

信息图会自动跟随博客的深色/浅色主题切换，无需额外配置。

总结

Infographic 为 Markdown 文档提供了强大的可视化能力，能够让技术博客、文档、笔记更加生动易读。合理使用各种模板，可以显著提升内容的表现力和可读性。

更多模板和详细文档，请访问 Infographic 官方网站。

目次の自動番号を無効にする例

Sat, 06 Jan 2024 16:00:00 GMT

この投稿では、目次の自動番号を無効にする方法を紹介します。

目次番号機能

デフォルトでは、astro-koharu は CSS カウンターを使って目次に階層的な番号を自動付与します：

1. 第一章
- 1.1. セクション 1
- 1.2. セクション 2
1. 第二章

番号を無効にする

特定の投稿で番号を無効にするには、tocNumbering: false を設定します：

---
title: 私の投稿
tocNumbering: false
---

比較

番号あり（デフォルト）

目次の項目に 1.、1.1.、1.1.1. のような番号が表示されます。

番号なし

目次の項目は見出しテキストのみで、番号プレフィックスはありません。

この投稿の効果

この投稿では tocNumbering: false が設定されています。サイドバーの目次（デスクトップ）を確認するか、目次を展開（モバイル）して結果をご覧ください。

技術的な実装

番号付けは純粋な CSS カウンターで実装されており、ランタイムオーバーヘッドはゼロです：

.toc-numbering {
  counter-reset: h2;
}

.toc-numbering h2::before {
  counter-increment: h2;
  content: counter(h2) ". ";
}

無効にするタイミング

以下のような場合に番号を無効にすることを検討してください：

エッセイ風の投稿
すでに番号がある見出し
構造がゆるい投稿
個人的な好み

まとめ

目次の番号付けはオプション機能です — コンテンツの種類に合わせて柔軟に使い分けましょう。

Hello World

Thu, 04 Jan 2024 16:00:00 GMT

こんにちは、世界！これは初めてのエッセイです。

この投稿について

この投稿では意図的に description フィールドを設定していません。以下の機能をテストするためです：

自動説明抽出 - システムが自動的に最初の 150 文字を説明として抽出します
AI 要約 - pnpm generate:summaries を実行済みの場合、AI が生成した要約が使用されます

エッセイカテゴリー

エッセイカテゴリーは以下のような投稿に最適です：

日常の振り返り
年末まとめ
ふとした考え
自己成長の記録

書くためのヒント

ブログを書くのは楽しい活動です。いくつかのヒントを紹介します：

継続すること

定期的な更新がブログを生き生きとさせます。短い記事でも、沈黙よりはるかに良いです。

素直であること

素直な記録は、磨き上げた文章よりも価値があります。すべての投稿で完璧を目指す必要はありません。

プロセスを楽しむこと

書くこと自体が考えを整理するプロセスです — それを楽しみましょう。

まとめ

これはシンプルなエッセイのサンプルです。あなたもここで自分の物語を記録してみてくださいね。

楽しいブログライフを！

週間ダイジェスト Vol.1

Wed, 03 Jan 2024 16:00:00 GMT

これは週間/シリーズ機能の動作を紹介するサンプルです。

週間機能について

週間機能は astro-koharu の特色ある機能のひとつで、定期的に更新される連載コンテンツの公開に最適です：

テックニュースレター
読書ノートシリーズ
学習ジャーナル
プロジェクトの進捗報告

週間の設定

config/site.yaml で設定：

featuredSeries:
  categoryName: 周刊       # カテゴリー名
  label: 週間ダイジェスト    # 表示ラベル
  fullName: テック週間ダイジェスト
  description: 週間の説明...
  cover: /img/weekly_header.webp
  enabled: true            # false で無効化

週間の特徴

専用ページ - 各シリーズは /weekly に専用ページがあります
ホームページ表示 - 最新号がホームページにピン留めされます
分離されたリスト - 週間投稿は通常の投稿リストには表示されません
シリーズナビゲーション - 前号/次号のナビゲーション

今週のコンテンツ

ツール紹介

ツール	用途	リンク
Biome	コードリンティング	biome.dev
Motion	アニメーション	motion.dev

今週の学び

今週学んだこと：

Astro Content Collections
Tailwind テーマ設定
Motion の高度なアニメーション

次号の予告

次号ではさらに高度な機能を取り上げます — お楽しみに！

今週のニュースレターをお読みいただきありがとうございました！

主题定制指南

Tue, 02 Jan 2024 16:00:00 GMT

本文介绍如何定制 astro-koharu 的外观和样式。

嵌套分类说明

本文使用了嵌套分类 [笔记, 前端]，这会创建层级关系：

URL: /categories/note/front-end
面包屑: 笔记 → 前端

在 frontmatter 中这样配置：

categories:
  - [笔记, 前端]

配色定制

CSS 变量

主题颜色通过 CSS 变量定义，位于 src/styles/index.css：

:root {
  --primary-color: #ff6b9d;
  --secondary-color: #7dd3fc;
  /* ...更多变量 */
}

.dark {
  --primary-color: #f472b6;
  --secondary-color: #38bdf8;
}

Tailwind 配置

编辑 tailwind.config.ts 自定义主题：

export default {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary-color)',
        secondary: 'var(--secondary-color)',
      },
    },
  },
};

布局调整

内容宽度

在 src/constants/layout.ts 中调整布局常量：

export const LAYOUT = {
  maxWidth: '1200px',
  sidebarWidth: '300px',
  contentPadding: '1.5rem',
};

响应式断点

主题使用 Tailwind 的默认断点：

断点	宽度	用途
sm	640px	小型手机
md	768px	平板
lg	1024px	桌面
xl	1280px	大屏幕

动画效果

Motion 配置

动画使用 Motion 库，配置位于 src/constants/anim/：

// spring.ts - 弹簧动画
export const springConfig = {
  stiffness: 100,
  damping: 10,
};

// variants.ts - 动画变体
export const fadeIn = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

禁用动画

对于偏好减少动画的用户，主题会自动响应 prefers-reduced-motion 媒体查询。

圣诞特效

主题内置可选的圣诞特效，在 site-config.ts 中配置：

export const christmasConfig = {
  enabled: false,  // 设为 true 启用
  features: {
    snowfall: true,        // 雪花飘落
    christmasColorScheme: true,  // 圣诞配色
    christmasHat: true,    // 圣诞帽
  },
};

总结

通过修改以上配置，你可以轻松打造属于自己风格的博客。如有问题，欢迎在 GitHub 提 Issue。

Markdown 增强功能演示

Mon, 01 Jan 2024 16:00:00 GMT

本文展示 astro-koharu 支持的所有 Markdown 增强功能。

链接嵌入功能

astro-koharu 支持自动嵌入独行链接，包括 Tweet 和通用链接预览。

Tweet 嵌入测试

下面是一条独行的 Twitter 链接，应该自动转换为 Tweet 组件：

这是普通段落中的链接 Vercel Tweet，不应该被嵌入。

使用新域名 x.com 的 Tweet：

通用链接预览测试

这是段落中的链接 react-tweet，不应该被嵌入。

下面是一个独行的普通链接，应该显示 OG 预览卡片：

github.com

GitHub - vercel/react-tweet: Embed tweets in your React application.

Embed tweets in your React application. Contribute to vercel/react-tweet development by creating an account on GitHub.

https://github.com/vercel/react-tweet

这是没有 OG 图的链接

react-tweet.vercel.app

Introduction – react-tweet

Embed tweets in your React application.

https://react-tweet.vercel.app/

这是获取不到 OG 信息的链接

https://zhuanlan.zhihu.com/p/1900483903984243480

zhuanlan.zhihu.com

Codepen 链接嵌入

See the Pen YPKBrJX by botteu (@botteu) on CodePen.

链接嵌入规则

独行的 Twitter/X 链接自动转换为 Tweet 组件
独行的其他链接显示 OG 预览卡片
段落内的链接保持原样
支持深色/浅色主题切换

代码高亮

支持多种编程语言的语法高亮，并自动跟随主题切换。

JavaScript

function greet(name) {
  console.log(`Hello, ${name}!`);
  return {
    message: "Welcome to astro-koharu",
    timestamp: Date.now(),
  };
}

greet("World");

TypeScript

interface BlogPost {
  title: string;
  date: Date;
  tags: string[];
  content: string;
}

const post: BlogPost = {
  title: "My First Post",
  date: new Date(),
  tags: ["astro", "blog"],
  content: "Hello World!",
};

Python

def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence"""
    if n <= 0:
        return []
    elif n == 1:
        return [0]

    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib

print(fibonacci(10))

Bash

#!/bin/bash
# Start development server
pnpm install
pnpm dev

echo "Server is running at http://localhost:4321"

GFM 表格

功能	支持状态	说明
表格	✅	支持对齐
任务列表	✅	复选框
删除线	✅	删除文本
自动链接	✅	自动识别 URL

任务列表

安装 astro-koharu
配置站点信息
写第一篇文章
部署到 Vercel

Mermaid 图表

流程图

flowchart LR
    A[编写文章] --> B[本地预览]
    B --> C{满意吗?}
    C -->|是| D[推送代码]
    C -->|否| A
    D --> E[自动部署]
    E --> F[上线成功]

时序图

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务器

    U->>B: 访问博客
    B->>S: 请求页面
    S-->>B: 返回 HTML
    B-->>U: 渲染页面

饼图

pie title 博客内容分布
    "技术笔记" : 45
    "生活随笔" : 25
    "项目分享" : 20
    "其他" : 10

文本样式

粗体文本
斜体文本
删除线
行内代码
链接文本

引用

这是一段引用文本。

astro-koharu 让博客搭建变得简单而优雅。

标题层级

本文展示了 h2-h6 各级标题，它们都会自动生成锚点链接，方便分享和引用。

三级标题

四级标题

五级标题

六级标题

分割线

列表

无序列表

项目一
- 子项目 A
- 子项目 B
项目二
项目三

有序列表

第一步
第二步
1. 子步骤 A
2. 子步骤 B
  1. 子步骤 C
第三步

图片

图片会自动应用 LQIP（低质量图片占位符）效果：

示例图片

Shoka 兼容 Markdown 语法

除了上述标准 Markdown 增强外，astro-koharu 还支持从 Hexo Shoka 主题迁移的丰富扩展语法，包括：

文字特效 — 下划线 ins、高亮 mark、上下标 _sub / ^sup、颜色文字
隐藏文字 — Spoiler 粒子动画隐藏文字和模糊效果
注音标注 — Ruby 漢字(かんじ)
容器块 — 提醒块 :::info、折叠块 +++primary 标题、标签卡 ;;;tab
友链卡片 — YAML 数据渲染为交互卡片
音视频播放器 — 支持网易云/QQ 音乐歌单
数学公式 — KaTeX 行内 E=mc2E=mc^2E=mc2 和块级 $$...$$
代码块增强 — title、mark 行高亮、command 提示符
练习题系统 — 单选、多选、判断、填空四种题型
加密内容块 — :::encrypted AES-256-GCM 加密，防止爬虫收录

所有功能均可在 config/site.yaml 中独立开关。完整语法演示和用法请参阅 Shoka 主题 Markdown 语法演示。

加密内容块

使用 :::encrypted{password="密码"} 语法创建加密区块。内容在构建时使用 AES-256-GCM 真正加密，密码不会出现在最终 HTML 中，有效防止搜索引擎和爬虫收录敏感内容。

加密块内的 Markdown 会获得与普通内容完全相同的渲染处理（Shiki 代码高亮、KaTeX 公式等），解密后直接展示。

前端无法实现真正意义上的加密，因为密码需在客户端输入，密文和算法对用户可见，安全性完全取决于密码强度。本功能的目的是防止搜索引擎和爬虫直接收录明文内容，而非对抗有针对性的破解。

:::encrypted{password="demo"}
这段内容已加密，输入密码 `demo` 即可查看。

支持 **完整 Markdown 语法**，包括代码块：

```python
print("Hello from encrypted block!")
```

:::

总结

以上展示了 astro-koharu 支持的主要 Markdown 功能。更多功能请参考使用指南。

astro-koharu へようこそ

Sun, 31 Dec 2023 16:00:00 GMT

astro-koharu ブログテーマへようこそ！

このテーマについて

astro-koharu は Astro 5.x をベースにしたモダンなブログシステムで、Hexo の Shoka テーマにインスピレーションを受けています。主な特徴：

高パフォーマンス - Astro による静的サイト生成で、超高速な読み込みを実現
エレガントなデザイン - アニメ風の美学とピンク＆ブルーの配色
豊富な機能 - マルチレベルカテゴリー、タグ、目次、検索など
レスポンシブ - デスクトップとモバイルに完璧に対応

クイックスタート

1. ブログを設定

config/site.yaml ファイルを編集：

site:
  title: あなたのブログ名
  author: あなたの名前
  description: ブログの説明
  # ...その他のオプション

2. 最初の投稿を書く

src/content/blog/ ディレクトリに Markdown ファイルを作成：

---
title: 初めての投稿
date: 2024-01-01
tags:
  - タグ1
categories:
  - カテゴリー名
---

投稿の内容...

3. デプロイ

Vercel で簡単にデプロイ：

さらに詳しく

Markdown 機能デモですべての Markdown 拡張機能をチェック
使い方ガイドで詳細な設定方法を確認

ブログをお楽しみください！