md 文件使用html阅读,使用markdow-it渲染md文件为html页面

前言：最近在写一些新闻资讯详情的页面，header组件、footer组件、目录组件都是固定的，只有新闻的内容是变化的。为了不去写重复的代码(有句话怎么说来着：战略上偷懒，战术上勤奋，就是这个意思)，准备采用md文件渲染为html文件这个思路，如果后续追加新的新闻资讯页面，只需新增对应得md文件即可。

整体思路：把每个新闻资讯页面共有的的部分固定写好作为模板，变化的内容部分写在md文件里面，利用NodeJS读取md文件，转换成html之后，替换模板中变化的内容。

相关技术栈：React Next.js NodeJS markdown-it

其他解决方案：这个问题是很久之前就在摸索的了，试了很多方法。有些可以读可以渲染，但是不是最终想要的，不过还是顺便总结一下。

1.使用react-markdown处理

介绍：Renders Markdown as pure React components. —— 将Markdown渲染为纯React组件。

使用参考：

思路：这个之前尝试过一次，确实能读取md文件的内容，也能把内容作为组件的属性，但是这样做并不符合我的思路，只是把变化的内容放到了md文件里，再读出来放到了组件属性里面操作。不过可以通过这个方法，传递到高阶组件里面处理。

2.使用loader处理

markdown-loader

React Markdown

...

都是利用webpack在打包的时候去解析md文件，这个我没有采用，因为我的项目是基于Next.js的，配置文件不知道如何去写比较好。

NodeJS文件处理操作

fs文件模块

1.使用fs模块需手动导入

const fs = require('fs')

复制代码

2.查看文件状态

fs.stat(path[, options], callback) 异步方法

fs.statSync(path[, options]) 同步方法

callback的函数里的err，在文件路径出错的时候会打印错误，文件路径不出错则err打印null；

stats打印当前文件的一些状态。

birthtime: 文件的创建时间

mtime: 文件中内容发生变化，文件的修改时间

给fs.stat()的path传递__filename时可用.isFile()判断当前路径对应的是否是一个文件。

给fs.stat()的path传递__dirname时可用.isDirectory()判断当前路径对应的是否是一个文件夹。

fs.stat(filedir, function (eror, stats) {

if (eror) {

console.warn('获取文件stats失败')

} else {

var isFile = stats.isFile() //是文件

var isDir = stats.isDirectory() //是文件夹

if (isFile) {

//是文件将如何操作

}

if (isDir) {

//是文件夹将如何操作