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

我是一名前端开发人员.当我编写html代码时,我通过复制和粘贴(标题部分,页脚部分等)重复我自己.

我怎么写模块化我的html文件？像独立的header.html和footer.html,都在通话后index.html...一样erb的Ruby on rails？(我不喜欢jade郎)

在PHP中我们会这样做:

的index.php

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


    //Your unique page-specific divs can go here

因此,在您的head.inc.php文件中,您只有通常的DOCTYPE和页面文件的一部分.

在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

JS/jQuery的:

请注意,您需要加载jQuery才能使用上面的代码.简单如下:

jsFiddle demo

最后的注意事项:脚本标记可以作为外部文件包含在您的文件中,也可以将其与html的其余部分一起放在文档的任何位置.无论什么有效.但是作为外部文件,或者正文中的最后一个元素(也作为外部文件)是首选.

最后的最后一点:".inc." 命名约定不是必需的,这只是我自己的做法.包含文件可以被命名为head.html或head.php或等.