redamoon
12/9/2017 - 7:10 AM

Nunjucks + MTML SaCSS vol91

Nunjucks + MTML SaCSS vol91

<mt:Ignore>記事のコンポーネント</mt:Ignore>
<mt:SetVarTemplate name="_base_entries" key="entries" note="記事のコンポーネント">
  <mt:Loop name="entries">
    <mt:If name="__first__">
    <ul>
    </mt:If>
      <a href="<mt:Var name="_link" /><mt:Var name="_date" />:<mt:Var name="_title" /></a>
    <mt:If name="__last__">
    <ul>
    </mt:If>
  </mt:Loop>
</mt:SetVarTemplate>

<mt:Ignore>見出しのコンポーネント</mt:Ignore>
<mt:SetVarTemplate name="_base_heading" key="heading" note="見出し">
  <h1 class="heading"><mt:Var name="_text" /></h1>
</mt:SetVarTemplate>

<mt:Ignore>ボタンのコンポーネント</mt:Ignore>
<mt:SetVarTemplate name="_base_button" key="button" note="ボタン">
<div class="button">
  <a class="button__link" href="<mt:Var name="_button_link" />">
    <mt:Var name="_button_name" />
  </a>
</div>
</mt:SetVarTemplate>
{# 記事のコンポーネント #}
{% macro EntriesTemplate(date,link,title,entries) %}
  {% for title,link,date in entries %}
  {% if loop.first %}<ul>{% endif %}
  <li><a href="{{ link }}">{{ date }}:{{ title }}</a></li>
  {% if loop.last %}</ul>{% endif %}
  {% endfor %}
{% endmacro %}

{# 見出しのコンポーネント #}
{% macro HeadingTemplate(text) %}
  <h1 class="heading">{{ text }}</h1>
{% endmacro %}

{# ボタンのコンポーネント #}
{% macro BtnTemplate(class,text,link) %}
  <div class="btn {{ class }}">
    <a href="{{ link }}">{{ text }}</a>
  </div>
{% endmacro %}
{# 見出しのコンポーネント #}
{{ component.HeadingTemplate(config.site_label_company) }}
{# 記事のループ #}
{{ component.EntriesTemplate(date,link,title,config.entries) }}
{# ボタン #}
{{ component.BtnTemplate('btn--blue', config.site_label_information + 'の詳細へ', '/hoge/') }}
<mt:ignore>** 記事をセットする **</mt:ignore>
<mt:Entries lastn="0">
  <mt:SetHashVar name="entry">
    <mt:EntryTitle setvar="title" />
    <mt:EntryPermalink setvar="link" />
    <mt:EntryDate setvar="date" />
  </mt:SetHashVar>
  <mt:Var name="push(entries)" value="$entry" />
</mt:Entries>

<mt:Ignore>見出しの出力</mt:Ignore>
<mt:Var name="_base_heading" key="entries" _text="見出しが入ります。" note="見出しの実行" />
<mt:Ignore>記事の出力</mt:Ignore>
<mt:Var name="_base_entries" key="entries" _link="$permalink" _title="$title" _date="$date" note="記事のループ" />
<mt:Ignore>ボタンの出力</mt:Ignore>
<mt:Var name="_base_button" key="button" _button_link="/path/" _button_name="ボタンの名前" note="ボタンの実行" />