时间: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)}))
关键词:工作,成器,静态