第 2 節

環境搭建

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

安裝

首先可以安裝一個VScode插件叫做Markdown All in One,然後還有Markdown Preview Enhanced.

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

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

配置圖片直接粘貼

規劃文件夾與圖片等命名(老方法,新手推薦)

圖片名字格式為當前圖片創建的日期:時間戳.擴展名,例如20251225153422.webp

在工程根目錄創建.vscode/settings.json

{
  "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 日期的父目錄；
  2. 父目錄沒有合法日期時，讀取 Markdown 文件名中的YYYY-MM-DD格式日期；
  3. 兩處都沒有日期時，使用粘貼當天的本地日期和 undatedUploadPath。

例如當前文件位於 content/wiki/2025-12-25-MarkDown教程/0200-环境搭建.md，圖片會使用目錄日期 2025-12-25，上傳到 datedUploadPath 對應的年月日目錄。

創建第一個md文件

打開VScode

創建一個.md為擴展名的文件

將文件保存為 TEST.md（注意擴展名是 .md）

裏面內容改為:

# 我的第一个 Markdown 文档

这是我学习 Markdown 的开始。

## 学习目标

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

## 今天的感受

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

---

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

點擊下方這個圖標可以預覽.

預覽如下圖:

音乐页