4

私は、すぐに入手できるドキュメントでカバーされていないように見える金属細工師の非常に単純な使用例を持っています。

私の index.html には、複数のコンテンツ領域が必要です。

<!-- in my index html -- a single page landing site -->
<body>
  <section id="about">
     {{{about}}}
  </section>
  <section id="faq">
     {{{faq}}}
  </section>
...

そして、 aboutとfaqの内容をマークダウン ファイルから取得したいと考えています。ファイルの編成方法やマークアップ方法を変更できることをうれしく思います。

それを機能させるためにどのプラグインを使用すればよいかわかりません。すべてが、ソース ファイルごとに 1 つの出力ファイルを生成するように調整されているようです。

機能するように見えるプラグイン ( metalsmith-in-placeおよびmetalsmith-layouts ) は、より複雑な例について SO に来るように指示しているので、ここにいます!

4

3 に答える 3

2

テンプレートの継承をサポートする言語 (swig など) と metalsmith-in-place を組み合わせて、複数のコンテンツ エリアを作成できます。

マークダウンを使用しない場合は、次のようにできます。

src/index.swig

{% extends 'templates/default.swig' %}

{% block about %}
  Content for about
{% endblock %}

{% block faq %}
  Content for faq
{% endblock %}

テンプレート/default.swig

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <section id="about">
    {% block about %}{% endblock %}
  </section>
  <section id="faq">
    {% block faq %}{% endblock %}
  </section>
</body>
</html>

build.js

/**
 * Dependencies
 */
var filenames = require('metalsmith-filenames');
var inPlace = require('metalsmith-in-place');
var metalsmith = require('metalsmith');

/**
 * Build
 */
metalsmith(__dirname)

  // Process templates
  .use(filenames())
  .use(inPlace('swig'))

  // Build site
  .build(function(err){
    if (err) throw err;
  });

次に実行しnode build.jsます。マークダウンも使用したい場合、これは実際には不可能です。metalsmith-markdown のレンダラーである Marked は、コンテンツを<p>s で囲んだり、特定の文字をエスケープしたりします。これにより、metalsmith-markdown が swig タグを壊す可能性があるため、テンプレートの維持が面倒になります。それでもうまくいくかもしれませんが、私は絶対にお勧めしません。

というわけで、上記の設定がおすすめです。マークダウンを使用する利点は失われますが、いくつかの追加の編成オプションが得られます。どちらを好むかはあなた次第です。

于 2016-03-10T11:56:34.367 に答える
1

他のコメントと回答が言及しているように、data-markdown、インプレース、および継承のあるテンプレート エンジンを使用すると、これが可能になります。上記から唯一欠けている部分は、すべてを正しい順序でまとめることです (Metalsmith ではよくあることです)。

最初にインプレースを使用し、次に data-markdown を使用します。

metalsmith(__dirname)
  .use(inplace({
    engine: 'swig',
    pattern: '**/*.html',
    autoescape: false,
  }))
  .use(markdown({
  }))
  .build(function(err) {
    if (err) {
        console.log(err);
    }
    else {
        console.info('✫ Built it. ✫');
    }
  });

data-markdownタグでマークダウンをラップします。

<div data-markdown>

## About

This is about me. I like lists:

* They
* Make
* Me
* So
* Happy!

</div>

どこかに含めてください：

<!DOCTYPE html>
<html>
<head><title>A page</title></head>
<body>

  {% include "./markdown/about.md" %}

  {% include "./markdown/faq.md" %}

</body>

ここでの動作デモ: https://github.com/hoosteeno/metalsmith-markdown-swig/

于 2016-06-02T16:01:01.510 に答える