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的内容来自降价文件。我很高兴改变我的文件的组织/标记方式。

我只是不知道要使用哪些插件来使它工作，一切似乎都是为了为每个源文件生成一个输出文件。

看起来它们可以工作的插件（metalsmith-in-place和metalsmith-layouts）告诉你来 SO 以获得更详细的示例，所以我们来了！

4

3 回答 3

4

我为 metalsmith-markdown 创建了一个分支：

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

您可以像这样在降价文件中添加部分：

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

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

于 2016-10-10T14:11:53.937 回答
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>

构建.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。现在，如果您也想使用降价，这实际上是不可能的。Marked，metalsmith-markdown 的渲染器，会用<p>s 包围你的内容，转义某些字符等等。这会使维护模板变得很麻烦，因为 metalsmith-markdown 可能会破坏 swig 标签。它可能仍然有效，但我绝对不会推荐它。

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

于 2016-03-10T11:56:34.367 回答
1

正如其他评论和答案所提到的，使用数据降价、就地和具有继承的模板引擎将使这成为可能。上面唯一缺少的部分是以正确的顺序将它们放在一起（我发现 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/

于 2016-06-02T16:01:01.510 回答