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

【问题标题】：Simple template system for static web development用于静态 Web 开发的简单模板系统
【发布时间】：2016-09-21 10:15:31
【问题描述】：

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

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

附：我不是在寻找 Javascript 模板引擎。创建应该发生一次并生成一个普通的 html 文件。

【问题讨论】：

标签： templates template-engine

【解决方案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，则有包含插件：

【讨论】：

感谢您的回答。不幸的是，我没有提出非常详细的问题。我不使用任何形式的构建步骤（如 gulp 和 grunt），而是使用 CodeKit。我决定使用 KIT 语言（基本上是 HTML cmets，包括 import 语句并且仅适用于 CodeKit）。但既然你的回答能解决问题，我会标记它。

【解决方案2】：

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

以哈巴狗为例：

第一步：安装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

第三步：运行 pug-cli 自动转换 html 代码

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

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

【讨论】：

【解决方案3】：

最好的解决方案是使用服务器端渲染，如前面的回答所说。

但请查看由w3schools 提供支持的attaribute，它可能会对您有所帮助。

我知道这个答案来晚了。但它可能会帮助其他人。

谢谢。

【讨论】：