Джекилл и модульный / атомный дизайн

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>

тогда мои организмы / 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>

наконец мои атомы / button.html:

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

У меня есть несколько файлов JSON под _data, которые в основном содержат тексты. Примером кнопки может служить _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/).

Хотите изменить текст кнопки с "НАЧАТЬ НАЧАТЬ" на "НАЧАТЬ НАЧАТЬ"? Перейдите в data/generic/buttons.json и измените его там. Весь сайт теперь имеет измененный текст.

Недостатком является тот факт, что все данные должны перетекать с верхнего уровня. Читаемость может быть плохой.

Сначала используйте Jekyll для меня, и я хотел узнать ваше мнение по этому поводу. Что такое хорошая практика для статического разработчика сайтов, как это? Проще ли иметь 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

Отказ от ответственности: так как этот вопрос в основном основан на мнении ( см. Справку по этому вопросу), я проголосовал за его закрытие.

Тем не менее, я могу дать свои два цента. Цитата из методологии атомного дизайна.

Атом

[...] элементы, которые нельзя сломать дальше, не переставая функционировать

атом /buttons.html

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

молекула

[...] молекулы - это относительно простые группы элементов пользовательского интерфейса, функционирующие вместе как единое целое.

Здесь возникает вопрос: "Нужны ли нам данные из организма / страницы для нашей молекулы?"

Да: данные будут переданы родительским организмом. молекула /buttonGetStarded.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 %}

Обратите внимание, что эта логика может быть даже разложена.