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

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

Metalsmith-layouts对于那些本身不支持它的语言（如把手）来说是template inheritance的垫片。为了实现这一点，它会解析传递给它的文件，在这种情况下为somePost.html，并在前端查找layout密钥。之后，它将threeColumns.html作为变量somePost.html传递给threeColumns.html来处理所选的布局contents。

此时，文件将使用您选择的引擎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>

<强>布局/ 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 %}

<强>布局/ base.swig

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

<强>布局/ nav.swig

<nav>Navigation</nav>

<强>布局/ aside.swig

<aside>Aside content</aside>

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

Answer 2

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

喜欢的东西：

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

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

金属模板的模板

2 个答案: