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仅定义一次并且数据绑定到它。对于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 中，您将数据重新绑定到专用按钮：

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

想要将按钮的文字从'GET STARTED'改为'LET'S START'吗？转到data / generic / buttons.json并在那里更改它。现在整个网站都改变了文字。

缺点是所有数据都必须从顶层流下来。可读性可能不好。

首先使用Jekyll给我，并且对此有所了解。这样的静态网站开发的好习惯是什么？是否更容易拥有包含更通用的 button.html 的 buttonGetStarted.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。

原子

[...]在不停止运作的情况下无法进一步细分的元素

<强>原子/ buttons.html

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

分子

[...]分子是相对简单的UI元素组合作为一个整体。

这里的问题是：＆＃34;我们是否需要来自有机体/页面的数据才能使我们的分子发挥作用？＆＃34;

是：数据将由父组织传递。 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 %}

请注意，这个逻辑甚至可以分解。

杰基尔和模块化/原子设计

1 个答案:

原子

分子