模板的金属匠模板

Question

是否可以使用相互扩展的模板？

说，我有这些文件：

base.html:

<html><head>...<head><body>{{{ contents }}}</body></html>

threeColumns.html:

---
layout: base.html
---
<div class="three-cols-row">
   <div class="first col">
      {{> nav}}
   </div>
   <div class="second col">
       {{{ contents }}}
   </div>
   <div class="third col">
      {{> aside}}
   </div>
</div>

somePost.html:

---
layout: threeColumns.html
---

My awesome blogbost

期望输出:

<html><head>...<head>
    <body>
        <div class="three-cols-row">
           <div class="first col">
              NAV CONTENT
           </div>
            <div class="second col">
               My awesome blogbost
           </div>
           <div class="third col">
              ASIDE CONTENT
           </div>
        </div>
    </body>
</html>

我正在使用 metalsmith-layouts。

Answer 1

看起来您正在使用 Handlebars 作为您的 metalsmith 模板引擎。这意味着您需要注册您的部分。

类似于：

var contents = fs.readFileSync(__dirname + "/templates/partials/" + fileName).toString();
Handlebars.registerPartial(partialTemplateName, contents);

您可能会有多个部分，因此您可以使用 fs.readdirSync('templates/partials'); 获取所有文件，然后将其包装在每个文件的循环中。

Answer 2

是的，但不完全是您想要的方式。

Metalsmith-layouts 旨在作为 template inheritance 的垫片，适用于本身不支持它的语言，例如车把。为了使这成为可能，它会解析您传递给它的文件，在本例中为 somePost.html，并在前面的内容中查找 layout 键。之后，它通过将 somePost.html 作为变量 contents.

传递给 threeColumns.html 来处理所选布局 threeColumns.html

此时文件由 consolidate 使用您选择的引擎渲染。因此 layout 键，它特定于 metalsmith-layouts 不再适用于 threeColumns.html 因为 metalsmith-layouts 不处理它。此时文件正在被合并处理。

您可以做的是使用一种本机支持模板继承的语言，例如 swig。那么你可以这样做：

build.js

/**
 * Dependencies
 */
var filenames = require('metalsmith-filenames');
var layouts = require('metalsmith-layouts');
var metalsmith = require('metalsmith');

/**
 * Build
 */
metalsmith(__dirname)
  .use(filenames()) // Necessary for extends and includes
  .use(layouts('swig'))

  .build(function(err){
    if (err) throw err;
  });

src/somePost.swig

---
layout: threeColumns.swig
---
<p>My awesome blogpost</p>

layouts/threeColumns.swig

{% extends "base.swig" %}

{% block body %}
<div class="three-cols-row">
   <div class="first col">
      {% include "nav.swig" %}
   </div>
   <div class="second col">
       {{ contents | safe }}
   </div>
   <div class="third col">
      {% include "aside.swig" %}
   </div>
</div>
{% endblock %}

layouts/base.swig

<html>
  <head><head>
  <body>
    {% block body %}{% endblock %}
  </body>
</html>

layouts/nav.swig

<nav>Navigation</nav>

layouts/aside.swig

<aside>Aside content</aside>

如果您随后从命令行运行 node build.js，它会将其构建到一个页面中。

模板的金属匠模板

Metalsmith template of template

metalsmith