如何使用基于npm的静态站点生成器在页面中呈现具有动态内容的组件？

Question

目标是使用基于npm的静态站点生成器在页面中呈现具有动态内容的组件：

在Harp，Brunch或Metalsmith，我似乎找不到解决这个问题的办法。我一直在玩这些游戏，我觉得我做得不对。

其结构如下：

/pages
 |_ home.??
 |_ about.??
/partial
 |_ header.??
 |_ body.??
 |_ portfolio-item.??
/data
 /home
  partial-1.??
  partial-2.??
  partial-3.??
  partial-4.??

现在，我需要将每个部分都包含在家里，并将数据传递给分部。

//home.??
include header with partial-1
include body with partial-2
include portfolio-item with partial-3
include portfolio-item with partial-4

每个部分都需要标记：

//portfolio-item.??
<p>
  {{project-description}}
</p>

而且每个数据项都需要有数据的相关id：

//sort of like json
{
  project-description: whatever i need
}

为什么要这么做？我想：

• 将标记与数据分离
• 让文件表现得像CMS
• 加快开发，因为如果我要重用它们，就不会复制部分。(例如，harp支持文件的唯一值，但不支持重用具有唯一值的文件)

任何小费都会很棒的！我认为翡翠或Ejs可能是解决方案，但数据可能需要一些自定义代码的操作。然而，这感觉就像以前有人做过这样的事。

Answer 1

@MikeC把我指向Jekyll的方向后，我继续探索它。

通过使用文档，我想出了以下问题的解决方案：

使用了标准的Jekyll结构。

我们必须使构建器部分添加数据文件中的组件。

{% assign page_data = site.data.[page.context] %}
{% assign counter = 0 %}

{% for partial_name in page_data.partials %}
    {% assign counter = counter | plus:1 %} 
    {% include {{ partial_name }}.html %}
{% endfor %}

在about.md中添加以下内容

---
layout: page
title: About
context: about
permalink: /about/
---
{% include builder.html %}

然后添加要在like _include/hello-text.html上测试的部分。

{% capture data_file %}{{ page.context }}-{{ counter }}{% endcapture %}

{% assign context = site.data.[data_file] %}
<p>
    {{ context.content }}
</p>

最后，添加数据文件_ data /约. your

{
    "partials": ["foobar", "foobar", "foobar"],
}

和数据/大约-1.json

{
    "content": "helloworld"
}

您可以为第二个部分添加约-2.json，以此类推。我仍然希望在这个问题上有任何改进，如果有人有任何建议，您可以查看github上的回购，以打击它。