自从转前端以来，一直想实现一个愿望：“自己搭建一个可以自动解析Markdown文档的个人网站”。今天终于实现了，先贴出我的博客地址确认一下需求其实最简单的个人网站就是一大堆HTML页面，只要你会用HTML写，然后挂在Github页面上就可以了。但这不是我想要的。也有很多人选择使用Vuepress、Hexo、Wordpress、Jekyll等博客框架来搭建自己的博客。我都试过了。有许多主题供您选择。您甚至可以自己编写或修改主题。其他人的主题使您的博客与众不同，但这也不是我想要的。那么，我想要什么？使用Markdown语法写博客，支持代码高亮。所有博客页面都是自定义样式。Markdown中YAML开头支持自定义字段，方便页面显示。支持边写边更新页面，实时查看效果。其他基本博客功能。其实上面的很多博客系统，或者说静态博客生成器，都可以满足上面的大部分条件。我不使用它们的主要原因如下：我很难控制整个过程。如果我想添加一些功能是非常困难的。博客的配置会有意想不到的效果。有些主题并不完善，总是缺少自己需要的功能，对Markdown的一些基础功能的支持也参差不齐。页面的结构和样式的调整没有足够的自由度。分析需求看到这些需求，重点不在于你要用什么框架来写。vue或react甚至Jquery或原生JS都可以。重点是你如何处理Markdown文件，将其转换成你需要的对象，在你的页面中，你可以通过路由来控制页面内容的切换。简而言之有两点：博客数据页面路由当你能解决这两个问题，那么所有的问题就迎刃而解了，因为剩下的就是滚动页面了，让你飞上天，与你并肩太阳。数据的获取也可以更改为字幕。如何获取Markdown中的数据并读取页面上的数据？这个数据是需要的，因为你可能需要在首页显示所有的页面分类，所有的Tags，甚至所有文章的标题和内容，因为你需要做一个博客搜索？我查看了上面提到的所有博客框架的源代码，看看他们是如何处理这个问题的。然后我首先在React-static的metaam中找到了这个：Jdown这是一个解析Markdown的包，甚至一开始我就是用这个来解析我Markdown文件中YAML标签的内容，我也聊了很多包的作者DanWebb，关??于建立个人网站。直到我的项目结束，我才发现这个包在使用的时候有一些问题。对于一些过长的中文，可能会解析不出来，找不到规律。对我来说，我必须阅读他的源代码才能找到它。问题，太花时间了，那我想找一个替代包，来实现同样的功能。然后我找到了灰质，我使用这个包成功地将Markdown文件的YAML头解析为JSON对象。我该怎么做？在项目的JS中（打包/编译）：遍历一个固定的目录（也就是我所有的md文件存放的目录），得到所有以md结尾的文件对象。将每个文件的YAML头信息转换成一个JSON对象。解析JSON对象的内容，比如把所有的标签都取出来存到同一个数组中（页面上也可以这样做）把页面的所有JSON对象放在一个数组中，使用的fs模块nodeJS写入一个data.js文件（可以自己定义目录）。至此，所有页面获取数据的过程就结束了。在页面使用的时候，只需要导入data.js文件就可以获取页面数据了~页面路由页面路由是我们博客系统的关键，因为在上一步中，我们只是获取了YAML信息，但我们没有得到这份文件的内容。即使我们得到了内容，我们仍然需要在显示之前将其解析为HTML。那我们现在该怎么办呢？其实用过webpack的都知道，webpack是有loader的。我们使用markdownloader来做这样的事情。加载程序就像一个翻译工具。对源文件的内容进行处理后，返回一个新的结果，甚至有可能经过多次翻译后返回。那么我们就需要用到Markdown的loader了。然后我们可以在路由中设置，将组件设置到对应的md文件中。这个时候Webpack会使用loader来解析md文件，变成我们需要的HTML页面。同时，我们也可以在解析的过程中，加入自定义语法来增强和定制我们的markdown。路由文件中的设置类似如下{path:"/post/2018-05-20-first",component:()=>import('../posts/2018-05-20-first.md')}你以为这么容易就结束了吗？太幼稚了，因为webpack不支持import的动态参数，也就是说页面运行后，通过YAML信息拼接出router的值是不可行的，即使你能拿到文件名。我们不能写一篇文章，就给这个路由器加个记录吧？这一步也困扰了我很久。通过资料收集和查看别人的源码，我在Vuepress的源码中找到了答案。裕达是怎么做到的？有兴趣的朋友可以阅读Vuepress的源码。关键文件的路径是~/lib/prepare/codegen.js贴出的代码（关键信息我已经标注）：exports.genRoutesFile=asyncfunction({siteData:{pages},sourceDir,pageFiles}){functiongenRoute({path:pagePath,key:componentName},index){constfile=pageFiles[index]constfilePath=path.resolve(sourceDir,file)//这一段其实是你的路由信息??letcode=`{name:${JSON.stringify(componentName)},路径:${JSON.stringify(pagePath)},组件:ThemeLayout,beforeEnter:(to,from,next)=>{import(${JSON.stringify(filePath)}).then(comp=>{Vue.component(${JSON.stringify(componentName)},comp.default)next()})}}`constdncodedPath=decodeURIComponent(pagePath)if(dncodedPath!==pagePath){code+=`,{路径:${JSON.stringify(dncodedPath)},重定向:${JSON.stringify(pagePath)}}`}if(/\/$/.test(pagePath)){代码+=`,{路径:${JSON.stringify(页面路径+'index.html')},redirect:${JSON.stringify(pagePath)}}`}返回代码}constnotFoundRoute=`,{path:'*',component:ThemeNotFound}`return(//这里你可以在路由文件中放入很多其他需要引入的信息`importThemeLayoutfrom'@themeLayout'\n`+`importThemeNotFoundfrom'@themeNotFound'\n`+`import{injectMixins}from'@app/util'\n`+`从'@app/root-mixins'导入rootMixins\n\n`+`injectMixins(ThemeLayout,rootMixins)\n`+`injectMixins(ThemeNotFound,rootMixins)\n\n`+`exportconstroutes=[${pages.map(genRoute).j??oin(',')}${notFoundRoute}\n]`)}这个文件在做什么？既然import不支持动态参数，那我们是不是直接生成一个router文件，然后用这个router来配置我们的路由呢？在我自己的代码中，我在解析markdown的YAML信息的步骤中加入了这个步骤，这样在获取页面基本信息的同时，也配置了路由。经过一些页面设计，终于完成了。这里也贴出博客的源码，欢迎大家star和发一波图片：首页：联系方式页面：标签页面：发帖页面：上个博客系统写的，零零碎碎的花了将近一个月的时间，终于告一段落了当然这篇文章会有很多部分我没有提到，比如如何部署到域名，如何打包编译发布到githubpages，如何实现一些页面的效果。为什么我没有写这些？因为这些都有很多现成的答案。最后，新人求一波关注~关于本博客系统，有不明白的地方可以留言，或者联系我~转载请注明出处。
