template-engine - 预处理 HTML 文件

转载作者：行者123 更新时间：2023-12-04 07:14:47

27

4

我正在根据自己的需要评估早午餐构建系统。我需要进行简单的 HTML 预处理。所以基本上我需要生成几个具有通用页眉和页脚的文件:

文件1.html:

<html>
<head>
<title>Title1</title>
</head>
<body>
<div id="content">
  <div id="header">...</div>
  Page1
  <div id="footer">...</div>
</div>
</body>
</html>

文件2.html:

<html>
<head>
<title>Title2</title>
</head>
<body>
<div id="content">
  <div id="header">...</div>
  Page2
  <div id="footer">...</div>
</div>
</body>
</html>

因此，要么简单的包含功能，要么(最好)某种扩展功能。理想情况下，语法应该隐藏在注释中，这样我的 IDE 就不会提示非 HTML 字符。我喜欢预处理 javascript 库，但这当然不是必需的。

不幸的是，我没有在早午餐中找到适合这项任务的任何东西。支持许多 HTML 模板引擎，但它们似乎生成 JS 函数。因此，我需要简单的静态 HTML，而不是 JavaScript SPA。

最佳答案

我不确定是否有任何内置解决方案，但如果我要朝 HTML 模板/部分方向发展，我会研究“after-brunch”和“before-brunch” NPM 上的插件。

我不知道您为文件系统操作(读取、合并、写入等)选择的程序语言是什么，但理论上您可以使用“早午餐前”之类的东西来执行批处理/shellscript/或在 Brunch 编译并将其复制到 public/ 文件夹。

如果您熟悉 Haxe，这里有一个我刚才分享的要点。这是一个后处理脚本，用于合并特定文档行上的其他文件。

https://gist.github.com/bigp/90e38deeccc94145b033

HTML 文档可能如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <link rel="icon" href="data:;base64,=">
    <style id="css" type="text/css" rel="stylesheet">
        /* @MacroMerge: public/app.css */ //<--- Merges All CSS here..
    </style>
</head>
<body>
    <script type="text/javascript">
        /* @MacroMerge: public/vendor.js, public/app.js */ //<--- And all JS here..
    </script>
</body>
</html>

编辑:

差点忘了，下面是 brunch-config.coffee 脚本如何将 Haxe 脚本与 after-brunch 插件一起使用:

plugins:
    afterBrunch: [
        "haxe -cp . --macro MacroMerge.html('app/index.template.html','public/index.html')"
    ]

想想看……没有什么能阻止您在任何需要的地方采用这个示例并指定 HTML 部分(或任何文件扩展名，例如:*.txt、*.xml)。同样，如果您熟悉 Haxe，可能只对您有用。如果没有，它是开源的并且可以免费下载 ( http://haxe.org/download/ )。

关于template-engine - 预处理 HTML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31454887/

27

4

0

文章推荐： ruby-on-rails-3 - 混合 has_one 和 has_and_belongs_to_many 关联

文章推荐： .net - 追踪未处理的一次性元素

首页

博学

6Ren·AI

商城

template-engine - 预处理 HTML 文件

编辑: