1

相互に拡張するテンプレートを使用することはできますか?

たとえば、次のファイルがあります。

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を使用しています。

4

2 に答える 2

2

それはありますが、あなたが望む方法ではありません。

Metalsmith-layouts は、ハンドルバーなど、それをネイティブにサポートしていない言語のテンプレート継承用のシムとして意図されています。これを可能にするためにsomePost.html、この場合、渡されたファイルを解析layoutし、前付でキーを探します。その後、変数 としてthreeColumns.htmlを渡すsomePost.htmlことにより、選択したレイアウト を処理します。threeColumns.htmlcontents

その時点で、ファイルはconsolidateによって選択したエンジンでレンダリングされます。そのため、metalsmith-layouts が処理しないため、layout固有のキーはmetalsmith-layouts機能しなくなります。threeColumns.htmlこの時点で、ファイルは 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>

レイアウト/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>

レイアウト/脇.swig

<aside>Aside content</aside>

コマンドラインから実行node build.jsすると、単一のページにビルドされます。

于 2016-03-10T09:58:06.830 に答える
0

ハンドルバーを金属細工のテンプレート エンジンとして使用しているようです。つまり、パーシャルを登録する必要があります。

何かのようなもの：

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

おそらく複数のパーシャルを使用fs.readdirSync('templates/partials');するため、すべてのファイルを取得してから、これを各ファイルのループにラップできます。

于 2016-03-10T00:04:19.733 に答える