2

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

索引.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>

然后是我的有机体/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>

最后是我的atom/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您可以执行以下操作：

索引.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/ )。

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

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

我第一次使用 Jekyll，想听听你的意见。像这样的静态网站开发人员有什么好的做法？拥有一个包含更通用button.html的buttonGetStarted.html并将数据从buttonGetStarted.html传递给button.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。

4

1 回答 1

2

免责声明：由于这个问题主要是基于意见的（请参阅关于此的 SO 帮助），我已投票关闭它。

但是，我可以给我的两分钱。引用来自Atomic Design Methodology。

原子

[...] 在不停止功能的情况下无法进一步分解的元素

原子/buttons.html

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

分子

[...] 分子是相对简单的 UI 元素组，它们作为一个单元一起发挥作用。

这里的问题是：“我们是否需要来自生物体/页面的数据才能使我们的分子起作用？”

是：数据将由父生物传递。分子/按钮GetStarded.html看起来像（注意：这个分子是同核的，但是是功能性的。）

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

否：将从分子内部设置数据（虚构数据结构）

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

所以在你的情况下，我认为有机体/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 %}

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

于 2016-05-25T13:59:07.133 回答