如何模块化静态 HTML 文件？答案

【问题标题】：How I can modularize static HTML file?如何模块化静态 HTML 文件？
【发布时间】：2016-01-03 14:25:10
【问题描述】：

我是一名前端开发人员。当我编写html 代码时，我会通过复制和粘贴（页眉部分、页脚部分等）重复我自己。

如何编写模块化我的html 文件？就像单独的header.html 和footer.html 一样，然后在index.html 中都调用... 与Ruby on rails 中的erb 相同？（我不喜欢jadelang）

【问题讨论】：

你可以使用 ajax，但它需要一个 http 服务器来进行 ajax 调用。所以你可以安装一个简单的http服务器。
@st.我使用 gulp，我想要将文件编译为标准 html 文件的工具。像玉一样。
我知道你说的是前端开发。但是您的问题最好使用 PHP 等服务器端语言（例如 Include 和 Require 函数）解决，这将允许您在 html 文档（生成通过 PHP）。

标签： javascript html ruby-on-rails gulp erb

【解决方案1】：

在 PHP 中我们会这样做：

index.php

<?php
    include 'inc/head.inc.php'; //DOCTYPE and <head> stuff
    include 'inc/header.inc.php'; //NAV or other top-of-page boilerplate
?>

<div id="uniqueDIV">
    //Your unique page-specific divs can go here
</div>

<?php include 'inc/footer.inc.php'; ?>

因此，在您的 head.inc.php 文件中，您只有页面文件的常用 DOCTYPE 和 <head> 部分。

在 Ruby 中，等效指令似乎是这样的：

load "inc/head_inc.rb"  -- OR --
require_relative "inc/head_inc.rb"

https://practicingruby.com/articles/ways-to-load-code

另一种选择是使用一些 js/jQuery 来填充文档的某些部分。如果您没有 PHP，这是第二个最佳选择。 它不如 PHP 优化，因为 js/jQ 代码将在页面完全呈现后运行，这可能会导致代码出现之前的微小（但明显）延迟。

例如：

html

<div id="navbarDIV"></div>

js/jQuery:

<script type="text/javascript">
    $(function(){
        $('#navbarDIV').load( 'inc/navbar.inc.html' );
    });
</script>

请注意，您需要加载 jQuery 才能使用上述代码。就像<head> 中的这一行一样简单：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

jsFiddle demo

最后说明：脚本标签可以作为外部文件包含在您的<head> 中，也可以与其余html 一起放在文档中的任何位置。什么都行。但是<head> 作为外部文件，或者正文中的最后一个元素（也作为外部文件）是首选。

最后的注解：“.inc.”不需要命名约定，这只是我自己的做法。包含文件可以命名为head.html 或head.php 等。

【讨论】：

我 100% 同意使用 PHP 包含 - 模块化页眉、页脚等正是它们的用途。
问题是用ruby-on-rails标记的，所以我不认为他也在使用PHP。不过，您的 jQuery 答案很好。
静态HTML页面唯一可行的解决方案，非常感谢！

【解决方案2】：

您可以考虑使用 Swig 之类的东西，它不需要服务器（您可以在本地编译模板）。

Swig 的语法很像 Mustache 或 Handlebars，它使用大括号并在普通 HTML 中工作，因此您可以保留所需的 HTML 语法（不像 Jade）。

要将 HTML 分离成文件以供重复使用，您可以查看Template Inheritance。你也可以看到File Inclusion和File Imports。

这是一个小例子：

{% include "./header.html" %}

<div id="body">Hello world</div>

{% include "./footer.html" %}

我使用 gulp，我想要将文件编译为标准 html 文件的工具。像玉。 ——萨贾德·阿贝迪

为此，您可以使用gulp-swig 并在本地任务中构建模板。

【讨论】：

【解决方案3】：

我用过EJS，很方便。你可以试一试。

【讨论】：

【解决方案4】：

对于HTML 文件，没有标准方法可以重用HTML 部分。您必须使用模板系统。

但是 erb 是一个模板系统并且可以处理它。请参阅有关“Including one erb file into another”的 Stack Overflow 答案。

【讨论】：