使用预编译模板创建页面答案

【问题标题】：Create pages with pre-compiling the templates使用预编译模板创建页面
【发布时间】：2015-07-11 09:45:53
【问题描述】：

在我当前的项目中，我的工作只涉及 html 和 css（HTML 皮肤）。有很多页面有重复的部分，如页眉、页脚、共享链接等。

我不想在每一页中一次又一次地重复这些常见的部分。我希望使用 gulp 或任何其他任务运行程序以某种方式调用这些重复的部分。

例如这样的事情（使用 lodash）

索引.html

<!Doctype html>
<html>
    <%= _.template(templates['head'])() %>
    <body>
        <%= _.template(templates['header'])() %>

        <!-- some unique content here -->

        <%= _.template(templates['footer'])() %>
    </body>
</html>

然后使用gulp-template 在每个页面中呈现它。我更喜欢 lodash，因为我已经使用过它。

如您所见，我假设如果我以某种方式将重复部分保留在 javascript 对象中（名称为 templates），我可以在一行代码中调用它。然后，如果我在该重复部分中更改某些内容，则更改将发生在所有页面中。

为了使这成为可能，首先我需要生成 javascript 对象，其中包含重复的 html 作为字符串。

有人能告诉我怎么做吗？还是有更好的方法来做到这一点？

【问题讨论】：

标签： javascript html css templates

【解决方案1】：

你可以使用Jade - 节点模板引擎

它提供了include外部jade文件的选项，其中允许您将一个jade文件的内容插入到另一个文件中

index.jade:

doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

head.jade

//- includes/head.jade
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

脚.玉

//- includes/foot.jade
#footer
  p Copyright (c) foobar

编译为：

index.html

<!doctype html>
<html>
  <head>
    <title>My Site</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

说明：

每当我在 google 上搜索“预编译模板”时，我最终都会遇到将所有 HTML 模板文件合并为一个 js 文件的网站。但就我而言，我正在寻找一种在系统本身上完全编译模板的方法，不支持“所有模板编译的 js 文件”。（所以，我一直在寻找一种预渲染 HTML的解决方案

解决办法：

我发现了这个很棒的模板引擎Nunjucks，它可以让我在与 gulp 一起使用时将 HTML 模板编译为独立的 HTML 页面。

检查这个，gulp-nunjucks-render。通过将它与 gulp 一起使用，我可以将 .html 文件的部分包含到其他 .html 文件中。下面是代码（假设你安装了 nodejs 和 gulp）：

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');

gulp.task('default', function () {
    nunjucksRender.nunjucks.configure(['templates/'], { watch: false });
    return gulp.src('templates/!(_)*.html')
        .pipe(nunjucksRender({
            css_path: "../assets/css/",
            js_path: "../assets/js/",
            img_path: "../assets/images/"
        }))
        .pipe(gulp.dest('html'));
});
gulp.task('watch', function () {
    gulp.watch(['templates/*.html'], ['default']);
});

在上面的代码中，我将 HTML 模板保存在 templates 文件夹中，使用上面的 gulp 代码，我在 html 文件夹中生成新的 HTML。上面的代码不会生成前缀为_的文件。（类似于 sass 的东西）

以及稍后在命令提示符中：

gulp watch  // Watches the files for changes continuously --> OWNING :D

这是一个例子：

<!-- // Index.html -->
<!DOCTYPE html>
<html>
    {% include "_head.html" %}
    <body>
        {% include "_content.html" %}
        {% include "_footer.html" %}
    </body>
</html>

渲染到：

<!DOCTYPE html>
<html>
    <head>
        <title>Website title</title>
        <link rel="Stylesheet" href="../assets/jcss/main.css" type="text/css"/>
    </head>
    <body>
        <div class="page">
            <!-- content here -->
        </div>
        <div class="footer">
            <!-- footer content here -->
        </div>
    </body>
</html>

优点：

无需服务器支持即可编译模板。
无需在 index.html 中包含任何预编译的 js 文件。
每当我们对公共部分进行一些更改时，无需在每个页面中再次包含该部分。

缺点：

到目前为止，我没有找到任何:)。

【讨论】：