如何使用基于 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 支持文件的唯一值，但不支持重复使用具有唯一值的文件）

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

Answer 1

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

通过使用 documentation 我想出了以下解决问题的方法：

使用了标准的 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.json

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

和_data/about-1.json

{
    "content": "helloworld"
}

您可以为第二部分添加 about-2.json 等等。如果有人有任何建议，我仍然会感谢您对此问题的任何改进，您可以查看 repo on github 到 bash。

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

How to render a component with dynamic content in a page using an npm-based static site generator?

javascript

static-site

node.js