Wiki

環境搭建

更新於 2025-12-25約 4 分鐘閱讀

本文由簡體中文內容確定性轉換，並受版本化術語表保護。

1.安裝

首先可以安裝一個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

2.配置圖片直接貼上

2.1.規劃資料夾與圖片等命名(老方法,新手推薦)

圖片名字格式為當前圖片建立的日期:時間戳.副檔名,例如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"
}

2.2.使用 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 檢視即時日誌。

上傳路徑使用以下日期優先順序：

優先讀取距離當前 Markdown 最近的、包含合法 YYYY-MM-DD 日期的父目錄；
父目錄沒有合法日期時，讀取 Markdown 檔名中的YYYY-MM-DD格式日期；
兩處都沒有日期時，使用貼上當天的本地日期和 undatedUploadPath。

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

3.建立第一個md檔案

開啟VScode

建立一個.md為副檔名的檔案

將檔案儲存為 TEST.md（注意副檔名是 .md）

裡面內容改為:

# 我的第一个 Markdown 文档

这是我学习 Markdown 的开始。

## 学习目标

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

## 今天的感受

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

---

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

點選下方這個圖示可以預覽.

預覽如下圖: