用于静态 Web 开发的简单模板系统

Question

我目前正在设计和完善着陆页。随着时间的推移，添加了很多东西，处理部分和模态的数量不像以前那么容易了。

直奔我的问题：是否有一种简单的解决方案可以在您的正常网页设计流程中使用模板来创建静态网站。我不需要静态站点生成器的优势，比如编译我的 sass 或缩小我的 js 文件。插值和配置文件也不需要也不想要。你知道有什么系统只允许我将我的 html 文件拆分成多个组件，然后将它们保存在不同的 html 文件中吗？

P.S。我不是在寻找 Javascript 模板引擎。创建应该发生一次并生成一个正常的 html 文件。

Answer 1

不使用 PHP 包含，我不确定如果不使用某种形式的 JS 模板引擎是否可以完成此操作：

The majority of the web's content has a simple and declarative way to load itself. Not so for HTML

你应该看看：

Metalsmith
- 一个极其简单的可插入静态站点生成器。
Handlebars
- Handlebars 提供了必要的功能，让您可以毫无挫折地有效构建语义模板。

如果您在您的工作流程中使用 GULP/GRUNT，无论如何都有包含插件：

Answer 2

最好的解决方案是使用服务器端呈现，如前一个答案所述。

但是看看这个 attaribute powered by w3schools 它可能对你有帮助。

I know this answare is to late. but it might help others.

谢谢。

Answer 3

您可以将 pug 之类的模板引擎与客户端工具一起使用。

哈巴狗示例：

第 1 步：安装 pug-cli

npm install -g pug-cli
第 2 步：使用 pug 语法编写 html 代码（非常容易学习）。例如：将主页文件拆分为多个组件（文件夹 template_parts 中的页眉、页脚）：

  <!DOCTYPE html>
  html(lang="en")
      head
          meta(charset="UTF-8")
          title Document

      body
          include template-parts/header.pug

          h1 Home page

          include template-parts/footer.pug

步骤 3：运行 pug-cli 自动转换 html 代码

$ pug -w ./ -o ./html -P

在 -w 之后按 pug 文件的位置更改 ./，在 -o 之后按转换后 html 个文件的位置更改 ./html。

用于静态 Web 开发的简单模板系统

Simple template system for static web development

templates

template-engine