第 2 節

Environment Setup

0瀏覽次數0訪問次數--跳出率--平均停留

Install

First, you can install a VScode plugin called Markdown All in One, and then there's also Markdown Preview Enhanced.

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

Paste the configuration image directly.

规划文件夹与图片等命名(老方法,新手推荐)

The image name format is the creation date of the current image: timestamp.extension, for example 20251225153422.webp.

Create .vscode/settings.json in the project root directory.

{
  "markdown.editor.filePaste.enabled": "always",
  "markdown.copyFiles.destination": {
    "**/content/posts/*.md": "/public/images/${documentBaseName}/${unixTime}.${fileExtName}",
    "**/content/pages/*.md": "/public/images/pages/${unixTime}.${fileExtName}"
  },
  "markdown.copyFiles.overwriteBehavior": "nameIncrementally"
}

使用 MD Image Uploader（推荐）

MD Image Uploader 可以在 Markdown 中直接粘贴图片，将图片转换为 WebP 后上传到兼容 S3 的对象存储，并自动插入 CDN 图片链接。

插件下载地址：

https://marketplace.visualstudio.com/items?itemName=tungchiahui.md-image-uploader

也可以在 VS Code 扩展面板中搜索 tungchiahui.md-image-uploader，然后点击“安装”。

访问密钥属于敏感信息，请打开 VS Code 的首选项：打开用户设置(JSON)，将下面两项写入个人设置。不要将它们放进项目的 .vscode/settings.json，也不要提交到 Git：

// 请放到个人设置，不要放到项目的 .vscode/settings.json
"mdImageUploader.s3.accessKeyId": "xxxxxxxxxxxxxxxxxxxx",
"mdImageUploader.s3.secretAccessKey": "xxxxxxxxxxxxxxxxxxxx"

以下配置可以放到项目的 .vscode/settings.json。这是腾讯云 COS 的配置示例，请根据自己的存储桶和 CDN 地址进行修改：

{
  // 可以放到 settings.json 的部分，以下是例子
  "mdImageUploader.s3.endpoint": "https://cos.ap-beijing.myqcloud.com",
  "mdImageUploader.s3.region": "ap-beijing",
  "mdImageUploader.s3.bucket": "cdn-tungchiahui-cn-1377333392",
  "mdImageUploader.cdnUrl": "https://cdn.tungchiahui.cn",
  "mdImageUploader.datedUploadPath": "/tungwebsite/assets/images",
  "mdImageUploader.undatedUploadPath": "/tungwebsite/assets/images/undate"
}

配置完成后，打开一个 Markdown 文件，复制截图或本地图片，然后按 Ctrl+V 粘贴。插件会依次转换图片、计算上传路径、上传到对象存储，并将最终的 Markdown 图片链接插入当前位置。可以在 VS Code 的“输出”面板中选择 MD Image Uploader 查看实时日志。

上传路径使用以下日期优先级：

  1. 优先读取距离当前 Markdown 最近的、包含合法 YYYY-MM-DD 日期的父目录；
  1. 父目录没有合法日期时，读取 Markdown 文件名中的YYYY-MM-DD格式日期；
  1. 两处都没有日期时，使用粘贴当天的本地日期和 undatedUploadPath。

例如当前文件位于 content/wiki/2025-12-25-MarkDown教程/0200-环境搭建.md，图片会使用目录日期 2025-12-25，上传到 datedUploadPath 对应的年月日目录。

创建第一个md文件

Open VScode

创建一个.md为扩展名的文件

将文件保存为 TEST.md（注意扩展名是 .md）

里面内容改为:

# 我的第一个 Markdown 文档

这是我学习 Markdown 的开始。

## 学习目标

- 掌握基本语法
- 了解应用场景
- 能够独立创作文档

## 今天的感受

学习 Markdown 比我想象的**简单**，我对接下来的学习充满*期待*！

---

> 学习是一个持续的过程，每一小步都是进步。

点击下方这个图标可以预览.

预览如下图:

音乐页