15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 静态网站生成器是如何工作的

静态网站生成器是如何工作的

时间:2023-07-21 11:06:01 | 来源:网站运营

时间:2023-07-21 11:06:01 来源:网站运营

静态网站生成器是如何工作的:在过去的几年里,开源静态网站生成器的数量增长迅速,StaticGen 上几乎找得到每一种语言实现的版本。静态网站相比动态网站具备无需依赖应用服务器,性能优越,部署简单等特点。特别适合生成静态文档,个人博客,饱受开发者的青睐。相比学会使用,掌握工作原理也尤为重要。

一个静态网站生成器的工作流程通常有以下几个步骤:

  1. 读取源文件(e.g. 约定 markdown 格式)
  2. 资源预处理
  3. 模板引擎渲染
  4. 生成目标文件

第一步 读取源文件

从使用者的角度,我们希望以 markdown 的形式进行写作,相比纯文本更容易控制格式,并且可以灵活地自定义配置(源目录路径、目标目录路径、页面标题等等),覆盖工具的默认配置,这一步很简单。

以 Node.js 为例:

// 读取 markdown 内容readFile(source, (err, data) => { console.log(data);})// 读取配置内容console.log(require(config))

第二步 资源预处理

也是静态网站生成器的核心工作部分。首先解析 markdown 内容,分离头部元数据(通常采用 YAML 格式,用于单页信息配置)与主体内容。

形似:

---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 预处理器,编译器,打包器,流程构建工具,将全部资源相整合。由此,可以提供一套主题配置,甚至可以开放主题插件,丰富内容。所有的设计出发点都基于更好的内容写作,而不必折腾繁琐重复性的页面开发工作。

第三步 模板引擎渲染

在上一步,我们得到了 markdown 解析后的 HTML 片段,接下来要做得就是将 HTML 片段嵌入预先定义的模板,复用页面中公共部分(e.g. 导航栏、侧边栏、底部),还可以嵌入变量(默认配置及自定义配置)和静态资源。

以模板引擎 EJS 为例:

<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)}))

你可能还需要

小结

本文从宏观角度解释了静态网站生成器的工作流程(输入 => 预处理 => 渲染 => 输出)。当然这个过程还涉及命令行的解析,合法性校验,错误捕获,解析器原理,编译器原理,模板引擎原理,插件设计等等。See you next time ~

关键词:工作,成器,静态

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭