本文仅做开发过程记录。具体配置请到VuePress官网和@vuepress/theme-blog官网点击静态博客查看在线效果。将项目克隆到本地注意：创建项目时选择.gitignore作为Node，这样在项目初始化的时候，会自动生成.gitignore文件，并自动在其中添加node_modules等文件，防止IDE监控node_modules中大量文件导致IDEStuck问题gitclonegit@github.com:zhb333/readme-blog.git#clone到本地使用npm初始化项目cdreadme-blog#进入项目目录npminit#进入项目目录#初始化过程，根据实际情况填写配置#...installyarnaddvuepress@vuepress/theme-blog-D#安装依赖项#ORnpminstallvuepress@vuepress/theme-blog-Ddependencyversion"@vuepress/theme-blog":"^2.2.0","vuepress":"^1.4.0"2.开发阶段目录结构├──_posts（存放文章）│└──2020-03-21-VuePress开发静态blog.md│└──...├──.vuepress(relatedtovuepress)│├──public││└──favicon.ico(ico图标)│├──styles(样式)│├──index.styl(自定义样式)││└──palette.styl(stylusdefault)│├──theme（主题）│├──layouts（布局）│││├──clock.js（用于主页效果）│││└──IndexHome.vue（主页布局）││└──index.js（主题入口）│└──config.js（Vuepress配置）│└──package.jsontheme官博主题@vuepress/theme-blog，没有首页功能，为了使博客有一个炫酷的主页，所以继承@vuepress/theme-blog，自定义theme.vuepress/theme/index.jsmodule.exports={extend:'@vuepress/theme-blog'//继承`@vuepress/theme-blog}编写基础配置.vuepress/config.jsmodule.exports={title:'forapi.cn',//站名description:'学习记录代码分享经验总结开发教程',//descriptionlange:'zh-CN',//Languagetheme:require.resolve('./theme/'),//使用自定义主题markdown:{//markdown配置lineNumbers:true},themeConfig:{//@vuepress/theme-blog配置dateFormat:'YYYY-MM-DD',nav:[//导航{text:'Blog',link:'/posts/',},{text:'Tags',link:'/tag/',},],目录:[//目录分类器{id:'post',dirname:'_posts',path:'/posts/',itemPermalink:'/posts/:year/:month/:day/:slug'},],footer:{//页脚联系人:[{type:'github',link:'https://github.com/zhb333/readme-blog',}],copyright:[{text:'粤ICP备20016112号',link:'http://beian.miit.gov.cn',},{文本：'麻省理工学院许可|Copyright?2020-presentforapi.cn',link:'https://github.com/zhb333/readme-blog',},]}}}编写npm运行脚本包。json"scripts":{"dev":"vuepressdev.","build":"vuepressbuild."},启动开发环境yarndev默认端口为8080如果8080端口已经被占用，其他空闲端口将被占用自动分配，请注意！不出所料，你可以在浏览器中看到项目已经启动。由于themeConfig.directories中没有定义目录类别/路径，所以首页目前是404页面。点击导航栏的Blog可以看到_posts目录下的文章列表，特别强调-重启服务在开发环境中，修改配置，添加任何文件，必须重启服务，否则，Vuepress无法默认监听这些变化，写入或修改已有的markdown文件，页面会热更新，但是要修改markdown文件中FrontMatter的内容，还是要重启服务才能生效！首页配置@vuepress/theme-blog认为一个URL路径对应一个文章目录，比如我们存放文章的_posts目录。但是，我们的主页只是为了炫酷的效果，所以我们可以用一个比较hacky的方法来解决这个问题'_posts'，路径：'/'，layout:'IndexHome'//自定义主页布局组件},{id:'post',dirname:'_posts',path:'/posts/',itemPermalink:'/posts/:year/:month/:day/:slug'},]，写一个很酷的主页就像开发一个Vue组件。你想达到什么样的效果取决于你的个人喜好。你可以参考我自己的，但我希望你能自己写！编写.vuepress/theme/layouts/IndexHome.vue点击首页布局组件查看相关代码温馨提示：修改配置或添加文件时，不要忘记随时重启服务。样式调整相信@vuepress/theme-blog的紫色主题，不是每个人都喜欢，所以可以通过.vuepress/styles/palette.styl修改主题配色，通过.vuepress/styles调整全局样式/index.styl。以下是我研究和修改的样式。.vuepress/styles/palette.styl$accentColor=#42A5F5$footerBgColor=lighten($accentColor,10%)$footerColor=#fff$headerHeight=60px.vuepress/styles/index.styl#header{padding032pxpadding-top10px}.header-wrapper.titlea{text-transformnonecolor$accentColorfont-size24px}#mobile-header.mobile-header-title.mobile-home-link{text-transformnonecolor$accentColor}#vuepress-theme-blog__post-layout.vuepress-blog-theme-content{padding0box-shadownone}#vuepress-theme-blog__post-layout.vuepress-blog-theme-content.post-title{margin-top0font-size26px}.content-wrapper{padding-top90pxpadding-bottom20pxmin-height:calc(100vh-80px-90px);}3.功能增强评论功能使用@vuepress/theme-blog内置的@vssue/vuepress-plugin-vssue插件代码托管平台，符合OAuth2规范，提供OAuthAPI。Vssue使用平台提供的OAuthAPI允许用户登录和发表评论。在使用它之前，您需要创建一个OAuth应用程序。点击GitHubOAuthApp查看创建步骤。创建GitHubOAuthApp后，会得到ClientID和ClientSecretthemeConfig.comment//Vssue{service:'vssue',owner:'You',//githubusernamerepo:'Yourrepo',//仓库名clientId:'YourclientId',clientSecret:'YourclientSecret',}订阅功能使用@vuepress/theme-blog内置的vuepress-plugin-mailchimp插件使用订阅功能前，需要先注册一个账号mailchimp注册成功后，点击方法获取端点themeConfig.newsletter{title:'邮箱订阅',content:'请输入您的邮箱...',submitText:'订阅',端点:'https://billyyyyy3320.us4.list-manage.com/subscribe/post?u=4905113ee00d8210c2004e038&id=bd18d40138'}网站增强themeConfig:{sitemap:{//vuepress.hostname的站点地图生成器插件:'http://forapi.cn'},feed:{//VuePress1.x的RSS、Atom和JSON提要生成器插件canonical_base:'http://forapi.cn',},smoothScroll:true//允许你启用平滑滚动}点击部署Deployment进入官网查看具体部署步骤（完成！）
