对于金匠,我有一个非常简单的用例,似乎没有任何现成的文档涵盖。
在我的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以获得更详细的示例,所以我们来了!
最佳答案
您可以使用支持模板继承的语言(例如swig)和就地金属匠结合来处理多个内容区域。
如果不使用markdown,您可以这样做:
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
。现在,如果您也想使用markdown,那实际上是不可能的。标记为metalsmith-markdown的渲染器,将用<p>
包围您的内容,转义某些字符,依此类推。这将使维护模板成为麻烦,因为metalsmith-markdown可能会破坏swig标签。它可能仍然可以工作,但是我绝对不会推荐它。因此,我建议您使用上述设置。您将失去使用markdown的优势,但会获得一些额外的组织选项。由您决定要选择哪个。