Html 杰基尔与模块化/原子化设计

我目前正在开发一个“静态”网站，只有几页。然而，通过设计，我可以看出会有重复的布局/模式。我正在考虑采用面向数据的方法，尽可能地重用我的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>

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

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

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

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

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

<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>

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

或links.json：

<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>

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

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

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

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

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

<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>

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

所以这意味着你需要从生物体的顶层传递你的所有数据，这样它的每一位都会有它的数据。这样，该按钮的示例是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
    button-text=site.data.generic.buttons.getstarted
    button-link=site.data.generic.links.gosomewhere
%}
</div>

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

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

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

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

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

<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>

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

然后在每次需要时在页面上包含按钮启动？但是如果我需要一个新的按钮来进行调查，我需要创建另一个htmlbuttonSurvey.html等等。。。当然，在代码中你会看到一个

{%include buttonSurvey.html%}

，它很容易阅读，并且可以直接理解这个按钮是关于什么的。因此：

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

所有按钮只有一个文件按钮，或

{% include buttonGetStarted.html %}

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

谢谢

---

F.

免责声明：由于这个问题主要是基于意见的（），我投票决定结束它

不过，我可以给我的两分钱。引用自

原子 […]如果不停止发挥作用，就无法进一步分解的元素

atom/buttons.html

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

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

因此，在您的例子中，我认为有机体/topBanner.html可以这样组成（为了可读性而简化）：

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