首页 文章

Jekyll和模块化/原子设计

提问于
浏览 次
2

我目前正在寻找开发一个“静态”网站，仅限几页 . 但是，通过设计，我可以看出将会有重复的布局/模式 . 我正在考虑采用面向数据的方法，我的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 ，并将数据从 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 .

html jekyll reusability atomic-design

1 回答

  • 2

    免责声明：由于这个问题主要是基于意见的（see SO help on this），我已经投票决定关闭它 .

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

    原子

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

    atom/buttons.html

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

    分子

    [...]分子是相对简单的UI元素组，作为一个单元一起运作 .

    Here the question is ："do we need datas from organism / page for our molecule to work ?"

    Yes ：数据将由父组织传递 . molecule/buttonGetStarded.html 看起来像（注意：这个分子是Homonuclear，但是是功能性的 . ）

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

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

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

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

    回复于

相关问题