如何在Metalsmith中設置多個內容區域？

我有一個非常簡單的用例，它似乎沒有被任何現成的文檔所覆蓋。如何在Metalsmith中設置多個內容區域？

在我的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來更詳細的例子，所以我們來了！

來源

2016-02-29 andyhasit

您可以使用支持模板繼承的語言來執行多個內容區域，例如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標籤，這會使維護模板變得麻煩。它可能仍然有效，但我絕對不會推薦它。

所以我推薦的是上面的設置。您將失去使用降價的優勢，但可以獲得一些額外的組織選項。這取決於你決定你更喜歡哪一個。

來源

2016-03-10 11:56:34 vsjn3290ckjnaoij2jikndckjb

我最終使用了metalsmith-data-markdown直接在html中放置多個標記區域。不理想，但它符合我的需求。接受答案，因爲這是一個很好的答案。 – andyhasit

正如其他評論和答案所述，使用data-markdown，in-place和帶有繼承的模板引擎將使這成爲可能。上面唯一缺失的部分是把它們放在正確的順序中（我發現Metalsmith通常是這種情況）。

首先使用就地，然後使用數據降價：

<div data-markdown> 

## About 

This is about me. I like lists: 

* They 
* Make 
* Me 
* So 
* Happy! 

</div>

包括它的地方：

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標籤包裝你降價

<!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-02 16:01:01 hoosteeno

我創建了metalsmith-降價叉：

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

您可以在降價的文件添加部分是這樣的：

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

第二降價部分將是可變SECTION_NAME下可用在模板文件中，第一個仍在{{contents}}

來源

2016-10-10 14:11:53 Dask

如何在Metalsmith中設置多個內容區域？

回答

相關問題