一篇带你用 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":{}}]}]}