html - Jekyll 和模块化/原子设计

Question

我目前正在考虑开发一个“静态”网站，只有几页。然而，根据设计，我可以看出将会有重复的布局/模式。我正在考虑采用一种面向数据的方法，使我的 HTML 尽可能可重用。这是一个例子:

index.html:

<div>
{% include organisms/topBanner.html
    tp-title=site.data.home.topbanner.title
    tp-select-blurb=site.data.home.topbanner.select.blurb
    button-text=site.data.generic.buttons.getstarted
    button-link=site.data.generic.links.gosomewhere
%}
</div>

然后是我的organisms/topBanner.html:

<div class="tb">
    <h1>
        {{ include.tp-title }}
    </h1>

    <div>
        <h2>{{ include.tp-select-blurb }}</h2>
        <div>
            {% include atoms/button.html
            %}
        </div>
    </div>
</div>

最后是我的atoms/button.html:

<a class="button" href="{{ include.button-link }}">{{ include.button-text }}</a>

我在 _data 下有多个 JSON 文件，基本上包含文本。按钮的示例是 _data/generic/buttons.json:

{
    "getstarted": "GET STARTED",
    "completesurvey": "COMPLETE THE SURVEY"
}

或links.json:

{
    "gosomewhere": "/go-somwhere",
    "surveypage": "/survey"
}

因此，这意味着您需要从有机体的顶层传递所有数据，以便其中的每个位都有其数据。这样，该按钮的示例就是 HTML 仅定义一次并且数据绑定(bind)到它。对于位于 topBanner 中的第二个按钮，您可以执行以下操作:

index.html:

<div>
{% include organisms/topBanner.html
    tp-title=site.data.home.topbanner.title
    tp-select-blurb=site.data.home.topbanner.select.blurb
    b-getstarted-text=site.data.generic.buttons.getstarted
    b-getstarted-link=site.data.generic.links.gosomewhere
    b-survey-text=site.data.generic.buttons.completesurvey
    b-survey-link=site.data.generic.links.surveypage

%}
</div>

并在topBanner.html中，将数据重新绑定(bind)到专用按钮:

<div class="tb">
    <h1>
        {{ include.tp-title }}
    </h1>

    <div>
        <h2>{{ include.tp-select-blurb }}</h2>
        <div id="getstarted">
            {% include atoms/button.html
               button-text=include.b-getstarted-text
               button-link=include.b-getstarted-link
            %}
        </div>
        <div id="survey">
            {% include atoms/button.html
               button-text=include.b-survey-text
               button-link=include.b-survey-link
            %}
        </div>
    </div>
</div>

这种方法意味着一切都是数据驱动的，没有 HTML 的重复/“复制/粘贴”，这一切都通过包含起作用，并且您可以应用原子设计模式(http://patternlab.io/)。

想要将按钮的文本从“开始”更改为“让我们开始”吗？转到 data/generic/buttons.json 并在那里进行更改。现在整个网站的文本都已更改。

缺点是所有数据都必须从顶层向下渗透。可读性可能很差。

我第一次使用 Jekyll，想听听您对此的看法。对于这样的静态网站开发来说，什么是好的做法？拥有一个包含更通用的 button.html 的 buttonGetStarted.html 并将数据从 button.html 传递到 button.html 是否更容易？ >buttonGetStarted.html？喜欢:

buttonGetStarted.html:

{% include atoms/button.html
    button.text=site.data.generic.buttons.getstarted
    button.text=site.data.generic.links.gosomewhere
%}

然后每次我需要在页面上添加buttonGetStarted？但是，如果我需要一个新的调查按钮，我需要创建另一个 html buttonSurvey.html 等等...当然，在代码中您会看到 {% include buttonSurvey.html %} 很容易阅读并且可以立即理解这个按钮的含义。所以这个:

{% include button.html button.text=site.data.generic.buttons.getstarted %}

只有一个文件按钮可用于所有按钮，或者

{% include buttonGetStarted.html %}

每次我需要新按钮时都会创建一个新的 HTML 文件？

谢谢

F。

Answer 1

免责声明:由于此问题主要基于意见 ( see SO help on this )，因此我投票决定关闭它。

但是，我可以给我两分钱。报价来自Atomic Design Methodology .

原子

[...] elements that can’t be broken down any further without ceasing to be functional

atom/buttons.html

<a class="button" href="{{ include.datas.button-link }}">
  {{ include.dats.button-text }}
</a>

分子

[...] molecules are relatively simple groups of UI elements functioning together as a unit.

这里的问题是:“我们的分子工作需要来自生物体/页面的数据吗？”

是:数据将由父生物体传递。 molecule/buttonGetStarded.html 看起来像(注意:这个分子是 Homonuclear ，但是有功能。)

{% include button.html datas=include.buttonDatas %}

否:数据将从分子内部设置(想象的数据结构)

{% include button.html datas=site.data.buttonDatas.getStarted %}

因此，就您而言，我认为 organism/topBanner.html 可以这样组成(为了便于阅读而简化):

{{ include.tp-title }}

<h2>{{ include.tp-select-blurb }}</h2>
<div id="getstarted"> {% include molecules/buttonGetStarted.html %}</div>

<div id="survey"> {% include molecules/buttonSurvey.html %}</div>

我猜测您的数据文件可用于国际化(I18n)目的。分子语言不需要一直向下传递。可以通过分子本身来猜测。

{% if page.language == nil %} 
  // if no language variable in page's front matter
  // we default to site language set in _config.yml
  {% assign language = site.language %}
{% else %}
  // language variable present in front matter
  {% assign language = page.language %}
{% endif %}

// get datas depending on guessed language
{% assign datas = site.data[language] %}

// this can even be more atomic with
{% assign datas = site.data[language]['buttonSurvey'] %}

// include the atom with correct language datas
{% include atom/button.html datas=datas %}

请注意，该逻辑甚至可以因式分解。