我如何模块化静态HTML文件？

Question

我是一名前端开发人员。 当我写一个html代码时，我通过复制和粘贴 （标题部分，页脚部分等）重复我的自我。

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

Answer 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演示

最后的注意事项：脚本标记可以作为外部文件包含在<head>中，也可以使用html的其余部分填充到文档的任何位置。 无论什么有效。 但是<head>作为外部文件，或者正文中的最后一个元素（也作为外部文件）是首选。

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

Answer 2

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

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

要将HTML分离为要重用的文件，可以查看模板继承。 您还可以查看文件包含和文件导入。

这是一个小例子：

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

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

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

我使用gulp，我想要工具编译文件到标准的html文件。 像玉。 - Sajad Abedi

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

Answer 3

我用了EJS ，这很方便。 你可以尝试一下。

Answer 4

对于HTML文件，没有重用HTML部件的标准方法。 你必须使用模板系统。

但是erb是一个模板系统，可以处理它。 请参阅此Stack Overflow关于“将一个erb文件包含到另一个中 ”的答案。

我如何模块化静态HTML文件？

问题描述

4 个解决方案

解决方案1
7 2016-01-03 15:00:43

解决方案2
2

解决方案3
0 2016-01-03 16:16:10

解决方案4
0 2016-01-03 16:51:24

我如何模块化静态HTML文件？

问题描述

4 个解决方案

解决方案1 7 2016-01-03 15:00:43

解决方案2 2

解决方案3 0 2016-01-03 16:16:10

解决方案4 0 2016-01-03 16:51:24

解决方案1
7 2016-01-03 15:00:43

解决方案2
2

解决方案3
0 2016-01-03 16:16:10

解决方案4
0 2016-01-03 16:51:24