Question

我有一个非常简单的metalmith用例，似乎没有任何现成的文档可以覆盖。

在我的index.html中，我想要多个内容区域：

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

我希望关于和常见问题的内容来自降价文件。我很乐意改变文件的组织/标记方式。

我无法弄清楚要使用哪些插件才能使其正常工作，所有内容似乎都适用于为每个源文件生成一个输出文件。

看起来可行的插件（metalsmith-in-place和metalsmith-layouts）告诉您来SO以获取更详细的示例，所以我们来了！

Answer 1

我为metalsmith-markdown创建了一个fork：

https://github.com/DKhalil/metalsmith-markdown

您可以在降价文件中添加以下内容：

Markdown text here
---
section: SECTION_NAME
---
Markdown text here

第二个降价部分将在模板文件中的变量SECTION_NAME下提供，第一个仍在{{contents}}下

Answer 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的渲染器，用<p> s围绕您的内容，逃避某些角色等等。这将使维护模板变得麻烦，因为metalsmith-markdown可能会破坏swig标签。它可能仍然有效，但我绝对不会推荐它。

所以我推荐的是上面的设置。您将失去使用降价的优势，但获得一些额外的组织选项。由你决定你喜欢哪个。

Answer 3

正如其他评论和答案所提到的，使用数据降价，就地和具有继承的模板引擎将使这成为可能。上面唯一缺失的部分是按照正确的顺序将它们组合在一起（我发现Metalsmith就是这种情况）。

首先使用就地，然后使用数据降价：

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/

如何在metalsmith中设置多个内容区域？

3 个答案: