如何模块化静态HTML文件

How I can modularize static HTML file?

本文关键字：HTML 文件 静态 模块化      更新时间：2023-09-26

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

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

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

最后注意：script标记可以作为外部文件包含在<head>中，也可以与html的其余部分一起放置在文档中的任何位置。只要管用。但是<head>作为外部文件，或者主体中的最后一个元素（也作为外部文件）是优选的。

最后一点：股份有限公司的命名惯例是不需要的，这只是我自己的实践。包含文件可以命名为head.html或head.php等。

您可以考虑使用类似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并在任务中本地构建模板。

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

对于HTML文件，没有重用HTML零件的标准方法。您必须在模板系统中使用。

但是erb是一个模板系统，可以处理它。请参阅关于"将一个erb文件包含到另一个"的堆栈溢出回答。

相关文章：