第四章：内容创作 —— 图床集成与 Markdown 进阶

第四章：内容创作 —— 图床集成与 Markdown 进阶

在这一章，我们将搭建一套高效的写作流水线。不同于传统的“把图片塞进文件夹”，我们将使用 PicGo 配合 图床，实现“截图 -> 粘贴 -> 自动上传 -> 生成链接”的无感写作体验。

4.1 图床环境搭建

为什么不用本地图片？因为 GitHub 仓库容量有限，且国内访问 GitHub Raw 图片经常裂图。独立的图床配合 CDN 才是全球化博客的标配。

4.1.1 准备图床服务 (以 7bu/Lsky 为例)

这里我们以 7bu (去不图床) 为例，它基于 Lsky Pro 架构，稳定且不仅限于单一存储后端。当然你也可以使用阿里 OSS、腾讯 COS 或 Cloudflare R2，原理是通用的。

  1. 注册账号：访问图床官网注册。
  2. 获取 Token：
    • 登录后进入“接口管理”或“API 设置”。
    • 复制你的 API Token（通常是一串长字符）。
    • 记录下 上传 URL（例如 https://7bu.top/api/v1/upload）。

参考：去不图床容量兑换 - 杜老师说

4.1.2 配置 PicGo 上传工具

PicGo 是目前最强的前端上传工具，它能接管你的剪贴板，自动把图片变成 Markdown 链接。

  1. 下载 PicGo：PicGo GitHub 下载 (Windows/Mac 均支持)。
  2. 安装插件：
    • 打开 PicGo 设置 -> 插件设置。
    • 搜索并安装 web-uploader 插件
    • 注：如果是 S3/OSS，直接在图床设置里配置即可，无需额外插件。
  3. 配置参数：
    • API地址：https://7bu.top/api/v1/upload
    • POST参数名：file
    • JSON路径：data.links.url
    • 自定义请求头：{“Authorization”: “Bearer 替换刚刚创建的 token”}
    • 自定义Body：留空即可
  4. 验证：
    • 随便截个图，在 PicGo 主界面点击上传，看是否成功返回链接

但一个一个上传再一个一个把外链粘贴到 Typora 也太复杂了，所以需要设置一下 Typora，方便批量上传

image-20251209153229295

4.2 写作元数据：Frontmatter 规范

在 Fuwari/Mizuki 主题中，文章的头部配置（Frontmatter）决定了文章的展现形式。使用图床后，你的 image 字段将直接填写网络 URL2。

4.2.1 基础配置模板

新建文章时，请严格参考以下 YAML 格式：

fuwari 提供了快捷的创建文章指令

1
pnpm new-post "你的文章标题"

他会在/src/content/posts 下新增一篇 md 格式结尾的文章，其中包含如下的 formatter

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 你的文章标题
published: 2025-12-09 # 发布日期
description: '' # 文章描述
image: '' # 文章封面图
tags: [] # 文章标签
category: '' # 文章分类
draft: false  # 是否为草稿（若为草稿即只能在本地预览）
lang: '' # 语言
# === 额外补充的内容 == =
pinned: true #置顶文章
---

4.3 核心组件：Fuwari 特有渲染

本主题内置了 remark-directive 插件，允许我们使用特殊的语法来渲染漂亮的 UI 组件，而不需要写复杂的 HTML。

4.3.1 提示块

用于区分不同级别的信息，比纯文字更醒目。

5.3.2 剧透与隐藏

如果你想隐藏部分文字（例如答案、剧透或彩蛋），可以使用行内剧透组件。文字默认会被模糊处理，鼠标悬停或点击后显示。

语法演示：

1
凶手其实是 : spoiler [隔壁的老王] ！

5.3.3 GitHub 仓库卡片

如果你要介绍一个开源项目，不要只贴链接。使用以下语法，主题会自动去 GitHub API 拉取该项目的 Star 数、Fork 数和简介，生成一张动态卡片。

语法演示：

1
:: github{repo = "saicaca/fuwari"}

5.4 极速写作工作流

配置好上述环境后，你将获得如下的“心流”级写作体验：

  1. 新建文件：在 src/content/posts/ 下新建 my-post.md。
  2. 填写头部：复制 5.2 节的配置，修改标题和图床封面链接。
  3. 正文写作：
    • 遇到需要配图的地方，使用截图工具（微信/Snipaste）截图。
    • 按下快捷键（PicGo 默认是 Cmd+Shift+P 或 Ctrl+Shift+P）上传。
    • 直接粘贴：PicGo 会自动将剪贴板里的图片上传到 7bu，并把 Markdown 格式的链接 ![](https://...) 粘贴到你的编辑器里。
  4. 组件点缀：在关键位置插入 :::tip 或 :::warning 增强可读性。
  5. 发布：
    1
    2
    3
    git add .
    git commit -m "feat: new post"
    git push

整个过程你的双手不需要离开键盘，也不需要手动管理任何本地图片文件。这才是现代化的内容生产方式。