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结构。

我们必须使构建器局部化，以便从数据文件中添加组件

def change 
     create_table :contacts do |t| 
             t.string :name 
             t.string :email 
             t.text :commments

             t.timestamps
end

在about.md中添加以下内容

{% 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 %}

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

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

最后添加你的数据文件_data / about.json

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

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

和_data / about-1.json

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

您可以为第二个部分添加约2.json，依此类推。如果有人有任何建议你可以查看repo on github以抨击它，我仍然会对此问题有所改进。

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

1 个答案: