时间：2023-07-21 11:06:01 | 来源：网站运营
时间：2023-07-21 11:06:01 来源：网站运营
静态网站生成器是如何工作的：在过去的几年里，开源静态网站生成器的数量增长迅速，StaticGen 上几乎找得到每一种语言实现的版本。静态网站相比动态网站具备无需依赖应用服务器，性能优越，部署简单等特点。特别适合生成静态文档，个人博客，饱受开发者的青睐。相比学会使用，掌握工作原理也尤为重要。
在线咨询
// 读取 markdown 内容readFile(source, (err, data) => { console.log(data);})// 读取配置内容console.log(require(config))---title: Hello World---Awesome static site generator解析成：const result = { 'path/to/hello-world.md': { title: 'Hello World', content: new Buffer('Awesome static site generator.') }}通常的做法是扫描文件，匹配分隔符`---`，分割内容，对头部用相应格式的引擎解析（e.g. YAML 格式用 yaml-parser，JSON 格式用 JSON.parse），对主体内容，需要把 markdown 内容转换成带有标签的 HTML 片段，用于排版与应用样式，推荐比较流行的解析器 marked 。const markedResult = { 'path/to/hello-world.md': { title: 'Hello World', content: new Buffer('Awesome static site generator.'), html: '<p>Awesome static site generator.</p>' }}对其它一些静态资源（e.g. css, js, png），可以引入一系列工具链，CSS 预处理器，编译器，打包器，流程构建工具，将全部资源相整合。由此，可以提供一套主题配置，甚至可以开放主题插件，丰富内容。所有的设计出发点都基于更好的内容写作，而不必折腾繁琐重复性的页面开发工作。<html><head><%= title %></head><body> <% include partials/navbar %> <%- html %></body></html>// EJS 渲染const ejsResult = ejs.render(str, { ...markedResult['path/to/hello-world.md']});我们甚至可以抛弃以往模板引擎渲染这种比较传统的方式，改用 MV* 框架（e.g. React, Vue, Angular），并结合服务端渲染技术，热替换技术及其它工具链，打造一个更现代化的静态网站生成器。// 生成目标文件writeFile(destination, ejsResult, err => { if (err) return console.error(err)}))关键词：工作,成器,静态
