前言最近完成了最新的TypeScript官方文档Hanbook的翻译，共14篇，可以算是最好的TypeScript4入门教程之一在中国。为了方便大家阅读，我用VuePress+GithubPages搭建了一个博客。博客效果如下：博客地址如下：Githubhttps://mqyqingfeng.github.io/learn-typescript/Giteehttp://mqyqingfeng.gitee.io/learn-typescript/0。VuePressVuePress不用多说，基于Vue的静态网站生成器，风格简洁，配置也比较简单。我之所以不使用VitePress，是因为我想使用现有的主题，而VitePress与当前的VuePress生态不兼容。至于为什么不选择VuePress@next，考虑到它还在Beta阶段，待稳定后我会开始迁移。1.本地构建快速入门同VuePress官网：新建并进入新目录//自定义文件名mkdirvuepress-starter&&cdvuepress-starter用你喜欢的包管理器初始化yarninit#npminit在本地安装VuePress依赖yarnadd-Dvuepress#npminstall-Dvuepress创建你的第一个文档，VuePress会使用docs作为文档根目录，所以这个README.md相当于首页：mkdirdocs&&echo'#HelloVuePress'>docs/README.md在package.json中添加一些脚本{"scripts":{"docs:dev":"vuepressdevdocs","docs:build":"vuepressbuilddocs"}}在本地启动服务器yarndocs:dev#npmrundocs:devVuePress将在http://localhost:8080（打开新窗口）启动一个热重载的开发服务器。2.基本配置在document目录下创建一个.vuepress目录，所有VuePress相关的文件都会放在这里。此时你的项目结构可能是这样的：.├─docs│├─README.md│└─.vuepress│└─config.js└─package.json在.vuepress文件夹下添加config.js来配置网站标题和描述，方便SEO：module.exports={title:'TypeScript4文档',description:'TypeScript4最新官方文档翻译'}此时界面类似：3.添加导航栏我们现在添加导航在页眉栏右上角，修改config.js:module.exports={title:'...',description:'...',themeConfig:{nav:[{text:'Home',link:'/'},{text:'SaeYu的JavaScript博客',items:[{text:'Github',link:'https://github.com/mqyqingfeng'},{text:'掘金',link:'https://juejin.cn/user/712139234359182/posts'}]}]}}效果如下：更多配置参考VuePress导航栏。4.添加侧边栏现在我们添加一些md文档，当前文档目录如下：.├─docs│├─README.md│└─.vuepress│└─config.js|└─手册|└─ConditionalTypes.md|└─Generics.md└─package.json我们在config.js中配置如下：module.exports={themeConfig:{nav:[...],sidebar:[{title:'欢迎学习',path:'/',collapsable:false,//不折叠children:[{title:"学前必读",path:"/"}]},{title:"基础学习",path:'/handbook/ConditionalTypes',collapsable:false,//不要折叠children:[{title:"ConditionalTypes",path:"/handbook/ConditionalTypes"},{title:"Generic",path:"/handbook/Generics"}],}]}}对应的效果如下：5.换主题现在基本的目录和导航功能已经实现了，但是如果我要加载加载，切换动画，模式切换（深色模式），返回顶部，评论等功能，为了简化开发成本，我们可以直接使用主题，这里使用的主题是vuepress-theme-rec：现在我们安装vuepress-theme-reco:npminstallvuepress-theme-reco--save-dev#oryarnaddvuepress-theme-reco然后在config.js中引用主题：module.exports={//...theme:'reco'//...}刷新页面，我们会发现一些细节上的变化，比如加载时的加载动画，支持切换深色模式：6.添加文章信息但是我们也会发现，像条件类型的文章，条件类型(ConditionalTypes)出现了两次，这是因为本主题自动提取了第一个大标题作为本文的标题，我们可以在每篇文章的md文件中添加一些信息进行修改：---title:conditionaltypeauthor:Saebadate:'2021-12-12'---此时文章的效果如下：但是如果你不想要标题、作者、时间等信息，我们可以在样式中隐藏，这样后面会提到7.设置语言注意上图中文章的时间，我们写的格式是2021-12-12，但是显示的是12/12/2021，这是因为VuePress默认的lang是en-US，我们修改一下config.js:module.exports={//...locales:{'/':{lang:'zh-CN'}},//...}可以发现时间已经有不同的展示方式：8.打开目录结构在原来的主题中，我们发现左边出现了每篇文章的目录结构：而vuepress-theme-reco去掉了原来侧边栏中的多级标题，生成子侧边栏，并放置在页面右侧，如果你想全局启用，可以在页面config.js中启用：module.exports={//...themeConfig:{subSidebar:'auto'}//...}此时的效果如下：9.修改主题色VuePress是基于Vue的，所以主题色是Vue的绿色，但是TypeScript的官方颜色是蓝色，那么怎么修改呢VuePre的主题色SS？可以新建一个.vuepress/styles/palette.styl文件，文件代码如下：$accentColor=#3178c6此时可以发现主题颜色发生了变化：更多颜色修改参考palette.stylVuePress的。10、自定义和修改样式如果你想自定义和修改一些DOM元素的样式怎么办？比如在深色模式下：我们发现用于强调的文字颜色比较暗淡，在深色模式下看不清楚。我想改变文字的颜色和背景颜色？VuePress提供了一种添加额外样式的简单方法。你可以创建一个.vuepress/styles/index.styl文件。这是一个Stylus文件，但您也可以使用普通的CSS语法。我们在.vupress文件夹下创建这个目录，然后创建index.styl文件，代码如下：//查看元素样式声明.dark.content__defaultcode{background-color:rgba(58,58,92,0.7);color:#fff;}这时候文字就清晰多了：我们之前说的隐藏每篇文章的标题、作者、时间其实也是类似的方法：.page.page-title{display:none;}最终效果如下：11.正式部署我们的博客，接下来我们将其部署到免费的GithubPages。我们在Github上新建一个仓库，这里我取仓库名：learn-typescript。相应的，我们需要在config.js中添加一个基本路径配置：module.exports={//路径名为"/
