前言:最近在写一些新闻资讯详情的页面,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) {
//是文件夹将如何操作