前言
印記中文（以下簡稱印記）作為國内領先的前端技術傳播社群，經過一段時間的發展，已經擁有了 React、Webpack、Babel 等優質中文文檔站點，并且還開拓了周刊類業務。為了提高印記技術傳播和翻譯的效率，以及建設印記的品牌一緻性，印記開始研發自己的一系列平台和工具。而 Mdpress，就是其中之一，它是一個網站生成器。詳見>>
CloudBase CMS 是雲開發推出的，基于 Node.js 的 Headless 内容管理平台，提供了豐富的内容管理功能。支援動态生成内容管理界面，無須編寫代碼即可使用，快速管理雲開發中的業務資料。支援字元串、數字、多媒體、圖檔、檔案、富文本、Markdown、關聯類型等數十種内容類型的可視化編輯。
已在雲開發擴充應用、小程式開發者工具中上線，支援一鍵安裝到已有的環境中，管理小程式 / Web 等多端産生的内容資料。同時，CloudBase CMS 已經在 GitHub 開源，可以直接在 CloudBase CMS 上進行二次開發，滿足業務的多樣化需求。
印記中文社群就運用 Mdpress + 雲開發内容管理 CMS 打造了動态内容站點（代号 jsweekly 項目），下文将詳細介紹實作流程：
項目結構
- 首頁 直接使用 readme 檔案來作為網站的首頁，這個頁面是靜态的。文檔
- 配置
- 配置檔案 使用 .mdpress/config 檔案來進行配置。
- 靜态資源 使用 .mdpress/public 檔案夾來存放你的靜态資源。
- 插件 通過安裝一個插件，拉取雲開發 CMS 上的動态資料，實作動态建站。
安裝插件
npm install @mdpress/tencent-cloud-cms --save
打開雲開發控制台
點選雲開發：
進入一個環境：
進入 cms
如果還沒有 CMS 應用的話，可以參考雲開發的這篇文檔建立一個
建表
我們需要一個 document（文檔）表和一個 sidebar（側邊欄）表：
資料結構示例：document：
"fields": [
{
"displayName": "名稱",
"id": "wid07nOCkgB7l8-3QD3oLqFueziDAIY2",
"isHidden": false,
"name": "name",
"order": 0,
"type": "Number"
},
{
"description": "值越大在 CMS 清單中越靠前",
"displayName": "排序",
"id": "rmg15_TLU9Tmxx77SNav5C9QuqMNobrY",
"isHidden": false,
"isOrderField": true,
"name": "order",
"order": 1,
"orderDirection": "desc",
"type": "Number"
},
{
"description": "留白時會在服務端自動寫入修改時間",
"displayName": "内容",
"id": "nyKjwWVm8Zj259YCd38IvjVWZVW1oiKv",
"isHidden": false,
"name": "content",
"order": 4,
"type": "Markdown"
},
{
"displayName": "通路路徑",
"id": "pB-9QEglnABKpF7FCZGD9QObWz4YABpm",
"isHidden": false,
"isRequired": true,
"name": "path",
"order": 5,
"type": "String"
}
]
sidebar：
"fields": [
{
"displayName": "名稱",
"id": "IVALl1u3eDtWFNYN3e3WFJuyW2LJEXF9",
"isHidden": false,
"name": "name",
"order": 0,
"type": "String"
},
{
"defaultValue": [],
"description": "側邊欄的值",
"displayName": "值",
"id": "2p0dqdvyxruxijov4ma30dzqrc3ffvpk",
"isRequired": true,
"name": "value",
"order": 2,
"type": "Object"
},
{
"connectField": "path",
"connectMany": true,
"connectResource": "4d5a19345ede173a005376bf3bbe1977",
"displayName": "關聯文檔",
"id": "udqilz1aj38mieisc17y7gvas0rv6s1t",
"name": "pages",
"order": 3,
"type": "Connect"
}
]
CMS 的具體操作參考這裡
權限配置
因為雲開發的 js sdk 帶有鑒權機制，是以還需要回到控制台配置權限。
- 使用者 首先開啟使用者的鑒權設定，比如匿名登入：
使用者鑒權設定具體可參考這裡
- 域名 然後是域名（包括端口）的鑒權：
域名鑒權設定具體可參考這裡
- 資料庫 最後是資料庫的鑒權：
比如點選 js_weekly_document ：
資料庫鑒權設定具體可參考這裡
錄入資料
- document 示例
可以一條條建立，也可以批量導入。
- sidebar 示例
sidebar 是一個對象數組。
使用插件
打開 .mdpress/config.js 檔案，在插件項中填入參數：
tencentCloudEnv 指的是雲開發控制台中的環境，tencentCloudModel 指的是 document 和 sidebar 兩個資料庫名稱。
插件源碼介紹
其實插件主要就幹了這幾件事：
- 從雲開發 CMS 擷取資料源；
- 覆寫 mdpress 預設布局，使用動态資料源，并且将動态資料源中的标題抽取出來作為錨點目錄；
- 新增
/docs/*
總結
印記中文目前翻譯了很多文檔，但最大的一個問題就是内容過于分散，讀者在尋找自己想要的内容的時候并不是很友善（比如像要中英文文檔對照、某個技術文檔和相關的技術部落格對照等），是以我們想做一個友善能将所有文檔聚合起來的站點。
而用靜态建站器（如 Hexo、Vuepress）搭建網站的話雖然很友善，但卻要求文檔必須是本地文檔的形式。動态建站器（如 Nuxt 等）雖然支援線上文檔資料，但它封裝的内容更多是為了一個通用的前端應用而準備的，你需要學習很多相關的知識，搭建起一個文檔站并不容易。
| 工具/能力 | 本地 Markdown | 線上 Markdown | 支援的元件類型 | 上手難度 |
|---|---|---|---|---|
| Vuepress | ✅ | ❌ | Vue | 易 |
| Nuxt | React | 難 | ||
| Mdpress |
産品介紹
雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平台，為開發者提供高可用、自動彈性擴縮的後端雲服務，包含計算、存儲、托管等serverless化能力，可用于雲端一體化開發多種端應用（小程式，公衆号，Web 應用，Flutter 用戶端等），幫助開發者統一建構和管理後端服務和雲資源，避免了應用開發過程中繁瑣的伺服器搭建及運維，開發者可以專注于業務邏輯的實作，開發門檻更低，效率更高。
開通雲開發：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
産品文檔：https://cloud.tencent.com/product/tcb?from=12763
技術文檔：https://cloudbase.net?from=10004
技術交流群、最新資訊關注微信公衆号【騰訊雲雲開發】