Question

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

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

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 demo

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

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

Answer 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文件。像玉。 - Sajad Abedi

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

Answer 3

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

Answer 4

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

但 erb 是一个模板系统，可以处理。请参阅有关＆＃34; Including one erb file into another＆＃34;。

的此Stack Overflow答案

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

4 个答案: