时间：2023-07-26 01:36:02 | 来源：网站运营
时间：2023-07-26 01:36:02 来源：网站运营
手摸手教你撸一个静态网站生成器：
在线咨询
fs.readFileSync(path, 'utf-8')fs.writeFileSync('blog1.html', rawHtml, 'utf8');生成html文件// 遍历一个文件夹下所有文件 ，生产的时候，不用排序function readFolder(filePath){ var files = fs.readdirSync(filePath); files.forEach(function(filename){ if(filename.indexOf('.md') === -1) return; // 无后缀文件名 let targetFileName = filename.replace('.md',''); let markdownContent = readFileAndParse(filePath + '/' + filename); writeHtml(targetFileName, markdownContent); });}// 读取一个文件内容function readFileAndParse(path){ text = fs.readFileSync(path, 'utf-8') try { var result = marked(text).replace(/buildAssetPath/g,'./assets'); return result; } catch (err) { console.error('解析文件出错：'+path); }}// 文章详情页把内容写入模板htmlfunction writeHtml(fileName,content) { let rawHtml = readFileAndParse('./src/index.html'); let headDOM = fs.readFileSync('./src/components/TopNav/nav.html', 'utf-8'); let headCSS = readCssFile('./src/components/TopNav/nav.css'); let headJS = fs.readFileSync('./src/components/TopNav/nav.js', 'utf-8'); let dryTitle = /<!--<title>(.*)<//title>-->/.exec(content); let dryIntro = /<!--<intro>(.*)<//intro>-->/.exec(content); // 读取模板 ，把markdown内容注入 let html = rawHtml .replace('<!-- content -->', blogTopBanner(dryTitle && dryTitle[1] ||fileName)+' <div class="markdown-body">' + content + '</div>') .replace('<!-- title -->', dryTitle && dryTitle[1] ) .replace('mdblog描述', dryIntro && dryIntro[1]) .replace('<!-- header DOM -->', headDOM) .replace('<!-- header CSS -->', '<style>' + headCSS + '</style>') .replace('<!-- header JS -->', '<script>' + headJS + '</script>') ; fs.writeFileSync('./'+ outputFold +'/' + fileName + '.html', html, 'utf8'); console.log('文章网页生成成功：' + fileName + '.html');}总共三个函数：一个遍历文件，一个读文件，一个写文件。其中writeHtml()函数那些花里胡哨的代码就是把动态把内容（Html DOM,js,css）注入到下面的html模板里，然后产出html。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="description" content="mdblog描述"> <title> <!-- title --> </title> <!-- header CSS --> <!-- homepage CSS --> <!-- postsPageCSS CSS --></head><body> <!-- header DOM --> <!-- homepage DOM --> <!-- content --> <!-- header JS --> <!-- homepage JS --> <!-- posts JS --></body></html>上面有一个feature是支持组件的本地开发模式，三个支持可自定义的组件为如图所示的结构components目录import './components/HomePage/homepage.css';import './components/TopNav/nav.css';import './components/Posts/posts.css';import homePageDom from './components/HomePage/homepage.html';import topNavDom from './components/TopNav/nav.html';import postsDom from './components/Posts/posts.html';document.write(topNavDom);document.write('<h1 ><div>FBI WARNING</div>温馨提示：本页把src/components 目录下的三个组件导入在一个页面，如果你也了解一些前端知识，可用它来进行页面DRY，进行本地调试。</h1>');document.write('<div>homePageDom 组件样式 start</div>');document.write(homePageDom);document.write('<div>homePageDom 组件样式 end</div>');document.write('<div>postsDom 组件样式 start</div>');document.write(postsDom);document.write('<div>postsDom 组件样式 start</div>');import './components/TopNav/nav.js';import './components/HomePage/homepage.js';博客列表页博文列表信息展现支持自定义（包括文章配图，标题，介绍，标签，日期），在markdown头部采用html注释的方式标识，构建的时候正则匹配取值<!--<img-url>./assets/default.jpeg</img-url>--> <!--<title> mdblog 说明文档 </title>--> <!--<intro> 介绍mdblog </intro>--> <!--<tag>README</tag>--><!--<date>2018-08-20</date>-->所以大致比较关键的就以上几点，如果你对源码感兴趣，可以访问github mdblog源码地址,欢迎各位在评论区多多交流。关键词：成器,静态
