模板的金属匠模板答案

【问题标题】：Metalsmith template of template模板的金属匠模板
【发布时间】：2016-06-23 20:20:56
【问题描述】：

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

说，我有这些文件：

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

【解决方案1】：

确实如此，但并不完全按照您想要的方式。

Metalsmith-layouts 旨在成为 template inheritance 的垫片，适用于本身不支持它的语言，例如车把。为了使这成为可能，它会解析您传递给它的文件，在这种情况下为somePost.html，并在front-matter 中查找layout 键。之后，它通过将somePost.html 作为变量contents 传递给threeColumns.html 来处理选定的布局threeColumns.html。

此时文件由consolidate 使用您选择的引擎呈现。因此，layout 特定于 metalsmith-layouts 的密钥在 threeColumns.html 中不再有效，因为 metalsmith-layouts 不处理它。此时，consolidate 正在处理该文件。

你可以做的是使用原生支持模板继承的语言，比如 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，它会将其构建到一个页面中。

【讨论】：

好吧，我决定反对 SWIG，但我会接受这个答案作为其他人的参考。
@AliOk 我明白了。顺便说一句，您不必使用 swig。任何原生支持模板继承的语言都可以。

【解决方案2】：

您似乎正在使用 Handlebars 作为您的金属匠模板引擎。这意味着您需要注册您的部分。

类似的东西：

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

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

【讨论】：