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

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

在竖琴、早午餐或铁匠店里，我似乎找不到解决这个问题的办法。我一直在玩这些游戏，感觉我走错了方向

结构将类似于：

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

现在，我需要home将每个partial包含在传递给partial的数据中

//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>

为什么要这样做？我想：

• 将标记与数据分开
• 让文件像CMS一样工作
• 加快开发速度，因为如果我重用部分，就不会复制它们。（例如，harp支持文件的唯一值，但不重用具有唯一值的文件）

---

任何提示都会很好！我认为jade或Ejs可能是解决方案，但数据可能必须由一些自定义代码进行操作。然而，这感觉就像以前有人做过一样。

在@MikeC将我指向杰基尔的方向后，我继续探索它

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

使用标准的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 %}

然后添加一个要测试的部分，如_includes/hello-text.html

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

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

和_data/about-1.json

{
    "content": "helloworld"
}

---

您可以为第二部分添加about-2.json，以此类推。如果有人对这个问题有任何建议，我仍将非常感激。您可以查看以进行抨击。

这是一个非常重要的话题。你考虑过使用吗？听起来和你要找的几乎一模一样。嗨@MikeC，我想你这次可能一针见血。我必须看看他们的起步情况，然后再回到这一点上。谢谢

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

{
    "content": "helloworld"
}