一篇帶你用 VuePress + Github Pages 搭建博客

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最近完成了 TypeScript 最新官方文檔 Hanbook 的翻譯，一共十四篇，堪稱國內的最好 TypeScript4 入門教程之一","attrs":{}},{"type":"link","attrs":{"href":"https://cdn.jsdelivr.net/gh/mqyqingfeng/picture/%E6%88%AA%E5%B1%8F2021-12-12%20%E4%B8%8B%E5%8D%883.12.02.png","title":"","type":null},"content":[{"type":"text","text":"。","attrs":{}}]},{"type":"text","text":"爲了方便大家閱讀，我用 VuePress + Github Pages 搭建了博客，博客效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c7/c77c1bbbaf196fda6fb08d7eef2d246e.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1c/1cc08ff95cd7f18ac5c539bb07da0134.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"博客地址如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Github ","attrs":{}},{"type":"link","attrs":{"href":"https://mqyqingfeng.github.io/learn-typescript/","title":"","type":null},"content":[{"type":"text","text":"https://mqyqingfeng.github.io/learn-typescript/","attrs":{}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Gitee ","attrs":{}},{"type":"link","attrs":{"href":"http://mqyqingfeng.gitee.io/learn-typescript/","title":"","type":null},"content":[{"type":"text","text":"http://mqyqingfeng.gitee.io/learn-typescript/","attrs":{}}]}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"0. VuePress","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VuePress 自然不用多說，基於 Vue 的靜態網站生成器，風格簡約，配置也比較簡單。之所以不使用 ","attrs":{}},{"type":"link","attrs":{"href":"https://vitepress.vuejs.org/","title":"","type":null},"content":[{"type":"text","text":"VitePress","attrs":{}}]},{"type":"text","text":"，是因爲想使用現有的主題， 而 VitePress 不兼容當前 VuePress 的生態系統，至於爲什麼不選擇 ","attrs":{}},{"type":"link","attrs":{"href":"https://v2.vuepress.vuejs.org/zh/","title":"","type":null},"content":[{"type":"text","text":"VuePress@next","attrs":{}}]},{"type":"text","text":"，考慮到還處於 Beta 階段，等穩定後再開始遷移。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1. 本地搭建","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"快速開始","attrs":{}},{"type":"link","attrs":{"href":"https://vuepress.vuejs.org/zh/guide/getting-started.html","title":"","type":null},"content":[{"type":"text","text":"同 VuePress 官網","attrs":{}}]},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"創建並進入一個新目錄","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"// 文件名自定義\nmkdir vuepress-starter && cd vuepress-starter\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":2,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"使用你喜歡的包管理器進行初始化","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn init # npm init\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":3,"normalizeStart":3},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"將 VuePress 安裝爲本地依賴","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn add -D vuepress # npm install -D vuepress\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":4,"normalizeStart":4},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"創建你的第一篇文檔，VuePress 會以 docs 爲文檔根目錄，所以這個 README.md 相當於主頁：","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"mkdir docs && echo '# Hello VuePress' > docs/README.md\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":5,"normalizeStart":5},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":"在 package.json 中添加一些 scripts","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"json"},"content":[{"type":"text","text":"{\n \"scripts\": {\n \"docs:dev\": \"vuepress dev docs\",\n \"docs:build\": \"vuepress build docs\"\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":6,"normalizeStart":6},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":6,"align":null,"origin":null},"content":[{"type":"text","text":"在本地啓動服務器","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yarn docs:dev # npm run docs:dev\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VuePress 會在 ","attrs":{}},{"type":"link","attrs":{"href":"http://localhost:8080","title":"","type":null},"content":[{"type":"text","text":"http://localhost:8080","attrs":{}}]},{"type":"text","text":" (opens new window) 啓動一個熱重載的開發服務器。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2. 基礎配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在文檔目錄下創建一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".vuepress","attrs":{}}],"attrs":{}},{"type":"text","text":" 目錄，所有 VuePress 相關的文件都會被放在這裏。此時你的項目結構可能是這樣：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":".\n├─ docs\n│ ├─ README.md\n│ └─ .vuepress\n│ └─ config.js\n└─ package.json\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".vuepress","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件夾下添加 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"config.js","attrs":{}}],"attrs":{}},{"type":"text","text":"，配置網站的標題和描述，方便 SEO：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n title: 'TypeScript4 文檔',\n description: 'TypeScript4 最新官方文檔翻譯'\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此時界面類似於：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/01/01235a667ab282ad089a9b231ce42c5e.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3. 添加導航欄","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們現在在頁首的右上角添加導航欄，修改 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"config.js","attrs":{}}],"attrs":{}},{"type":"text","text":":","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n title: '...',\n description: '...',\n themeConfig: {\n nav: [\n { text: '首頁', link: '/' },\n { \n text: '冴羽的 JavaScript 博客', \n items: [\n { text: 'Github', link: 'https://github.com/mqyqingfeng' },\n { text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }\n ]\n }\n ]\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/52/52b93c36c64af3e0cba99cacc34f8eb0.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多的配置參考 ","attrs":{}},{"type":"link","attrs":{"href":"https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F","title":"","type":null},"content":[{"type":"text","text":"VuePress 導航欄","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"4. 添加側邊欄","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在我們添加一些 md 文檔，目前文檔的目錄如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":".\n├─ docs\n│ ├─ README.md\n│ └─ .vuepress\n│ └─ config.js\n| └─ handbook\n| └─ ConditionalTypes.md\n| └─ Generics.md\n└─ package.json\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"config.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 配置如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n themeConfig: {\n nav: [...],\n sidebar: [\n {\n title: '歡迎學習',\n path: '/',\n collapsable: false, // 不折疊\n children: [\n { title: \"學前必讀\", path: \"/\" }\n ]\n },\n {\n title: \"基礎學習\",\n path: '/handbook/ConditionalTypes',\n collapsable: false, // 不折疊\n children: [\n { title: \"條件類型\", path: \"/handbook/ConditionalTypes\" },\n { title: \"泛型\", path: \"/handbook/Generics\" }\n ],\n }\n ]\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對應的效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0c/0cd5dc7a75f5a6e615d2a375c2accff8.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"5. 更換主題","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在基本的目錄和導航功能已經實現，但如果我還想要加載 loading、切換動畫、模式切換（暗黑模式）、返回頂部、評論等功能呢，爲了簡化開發成本，我們可以直接使用主題，這裏使用的主題是 ","attrs":{}},{"type":"link","attrs":{"href":"https://vuepress-theme-reco.recoluan.com/","title":"","type":null},"content":[{"type":"text","text":"vuepress-theme-rec","attrs":{}}]},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在我們安裝 vuepress-theme-reco：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"npm install vuepress-theme-reco --save-dev\n# or\nyarn add vuepress-theme-reco\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"config.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 裏引用該主題：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n // ...\n theme: 'reco'\n // ...\n} \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"刷新一下頁面，我們會發現一些細節的改變，比如加載時的 loading 動畫、以及支持切換暗黑模式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/36/36bfb1283f3f9b9a94933eee515b7666.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"6. 添加文章信息","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但我們也會發現，像條件類型這一篇文章，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"條件類型（Conditional Types）","attrs":{}}],"attrs":{}},{"type":"text","text":" 竟然出現了兩遍，這是因爲這個主題自動提取了第一個大標題作爲本文的標題，我們可以在每篇文章的 md 文件中添加一些信息修改：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"---\ntitle: 條件類型\nauthor: 冴羽\ndate: '2021-12-12'\n---\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此時文章的效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ec/ec9664cc344a0cfaba5c12d465505a39.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但如果你不想要標題、作者、時間這些信息呢，我們可以在樣式裏隱藏，這個稍後會講到。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"7. 設置語言","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意，上圖的文章時間，我們寫入的格式爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"2021-12-12","attrs":{}}],"attrs":{}},{"type":"text","text":" ，但是顯示的是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"12/12/2021","attrs":{}}],"attrs":{}},{"type":"text","text":"，這是因爲 VuePress 默認的 lang 爲 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"en-US","attrs":{}}],"attrs":{}},{"type":"text","text":"，我們修改一下 config.js：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n // ...\n locales: {\n '/': {\n lang: 'zh-CN'\n }\n },\n // ...\n} \n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以發現時間換了一種展示方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/96/96501803ff368bb62fa4a40639b098ec.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"8. 開啓目錄結構","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在原本的主題裏，我們發現每篇文章的目錄結構出現在左側：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/21/21cb3d9b9f1227ac494370a571393cb0.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而 vuepress-theme-reco 將原有的側邊欄的中的多級標題移出，生成子側邊欄，放在了頁面的右側，如果你要全局開啓，可在頁面 config.js 裏設置開啓：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n //...\n themeConfig: {\n subSidebar: 'auto'\n }\n //...\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此時效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/28/2880bd6ca8ecf7fdc15ad65d2c8b59e8.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"9. 修改主題顏色","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"VuePress 基於 Vue，所以主題色用的是 Vue 的綠色，然而 TypeScript 的官方色則是藍色，那如何修改 VuePress 的主題色呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你可以創建一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".vuepress/styles/palette.styl","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件，文件代碼如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"$accentColor = #3178c6\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此時可以發現主題顏色變了：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2b/2b2ba64e887590e0a757416de059e79a.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多的顏色修改參考 VuePress 的 ","attrs":{}},{"type":"link","attrs":{"href":"https://vuepress.vuejs.org/zh/config/#palette-styl","title":"","type":null},"content":[{"type":"text","text":"palette.styl","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"10. 自定義修改樣式","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你想自定義修改一些 DOM 元素的樣式呢？就比如在暗黑模式下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/dc/dcc8fd0a250cea4f58ebb7cf81e8db9a.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們發現用作強調的文字顏色比較暗淡，在暗黑模式下看不清楚，我想改下這個文字的顏色和背景色呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而 VuePress 提供了一種添加額外樣式的簡便方法。你可以創建一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".vuepress/styles/index.styl","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件。這是一個 Stylus 文件，但你也可以使用正常的 CSS 語法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們在 .vupress 文件夾下創建這個目錄，然後創建 index.styl 文件，代碼如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":"// 通過檢查，查看元素樣式聲明\n.dark .content__default code {\n background-color: rgba(58,58,92,0.7);\n color: #fff;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此時文字就清晰了很多：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ef/ef618bcd6fe049293865a8f89fa87480.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那之前我們提到的隱藏每篇文章的標題、作者、時間呢，其實也是類似的方式：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"css"},"content":[{"type":"text","text":".page .page-title {\n display: none;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後的效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c7/c74a7a3a8c2f4bc5b87dd7e289f9999b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"11. 部署","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們的博客就算是正式的做好了，接下來我們部署到免費的 Github Pages 上。我們在 Github 上新建一個倉庫，這裏我取得倉庫名爲：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"learn-typescript","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cf/cf055ea295532744f5ce748421f7e679.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對應，我們需要在 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"config.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 添加一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"base","attrs":{}}],"attrs":{}},{"type":"text","text":" 路徑配置：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n // 路徑名爲 \"//\"\n base: '/learn-typescript/',\n //...\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最終的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"config.js","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件內容爲：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"module.exports = {\n title: 'TypeScript4 文檔',\n description: 'TypeScript4 最新官方文檔翻譯',\n base: '/learn-typescript/',\n theme: 'reco',\n locales: {\n '/': {\n lang: 'zh-CN'\n }\n },\n themeConfig: {\n // lastUpdated: '上次更新',\n subSidebar: 'auto',\n nav: [\n { text: '首頁', link: '/' },\n { \n text: '冴羽的 JavaScript 博客', \n items: [\n { text: 'Github', link: 'https://github.com/mqyqingfeng' },\n { text: '掘金', link: 'https://juejin.cn/user/712139234359182/posts' }\n ]\n }\n ],\n sidebar: [\n {\n title: '歡迎學習',\n path: '/',\n collapsable: false,\n children: [\n { title: \"學前必讀\", path: \"/\" }\n ]\n },\n {\n title: \"基礎學習\",\n path: '/handbook/ConditionalTypes',\n collapsable: false,\n children: [\n { title: \"條件類型\", path: \"/handbook/ConditionalTypes\" },\n { title: \"泛型\", path: \"/handbook/Generics\" }\n ],\n }\n ]\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後我們在項目 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vuepress-starter","attrs":{}}],"attrs":{}},{"type":"text","text":" 目錄下建立一個腳本文件：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"deploy.sh","attrs":{}}],"attrs":{}},{"type":"text","text":"，注意修改一下對應的用戶名和倉庫名：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"#!/usr/bin/env sh\n\n# 確保腳本拋出遇到的錯誤\nset -e\n\n# 生成靜態文件\nnpm run docs:build\n\n# 進入生成的文件夾\ncd docs/.vuepress/dist\n\ngit init\ngit add -A\ngit commit -m 'deploy'\n\n# 如果發佈到 https://.github.io/\ngit push -f [email protected]:mqyqingfeng/learn-typescript.git master:gh-pages\n\ncd -\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後命令行切換到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vuepress-starter","attrs":{}}],"attrs":{}},{"type":"text","text":" 目錄下，執行 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sh deploy.sh","attrs":{}}],"attrs":{}},{"type":"text","text":"，就會開始構建，然後提交到遠程倉庫，注意這裏提交到了 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"gh-pages","attrs":{}}],"attrs":{}},{"type":"text","text":" 分支，我們查看下對應倉庫分支的代碼：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/91/9113e2b7aad4260c76188996443c1d82.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以在倉庫的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Settings -> Pages","attrs":{}}],"attrs":{}},{"type":"text","text":" 中看到最後的地址：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/10/10b9f455685fe1c1192c0f0d1d63daf8.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像我最後生成的地址就是 ","attrs":{}},{"type":"link","attrs":{"href":"https://mqyqingfeng.github.io/learn-typescript/","title":"","type":null},"content":[{"type":"text","text":"https://mqyqingfeng.github.io/learn-typescript/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至此，我們完成了 VuePress 和 Github Pages 的部署。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"系列文章","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"系列文章目錄地址：","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/mqyqingfeng/Blog","title":"","type":null},"content":[{"type":"text","text":"https://github.com/mqyqingfeng/Blog","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"微信：「mqyqingfeng」，加我進冴羽唯一的讀者羣。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者 有所啓發，歡迎 star，對作者也是一種鼓勵。","attrs":{}}]}]}