ブログをtwigに直してみた💻

さいしょに

お久しぶりにブログを更新しようと思います。
今日はブログをtiwgに直してみたので変更した部分をまとめました。
使っているモジュールが各ページごとに多かったのでいくつかに分けてブログで更新していきます。

twigに直す（トップページ）

で実装していた部分をtwigに直してみました。

<!-- トップページ -->

<!-- パンクズリスト -->
<!-- BEGIN_MODULE Topicpath -->
<nav class="w-full overflow-x-auto mb-4 not-prose" id="topicpath">
    <ol class="inline-flex text-sm whitespace-nowrap gap-2 p-0">
        <li><a href="./index.html" class="no-underline hover:text-sky-600 hover:underline">HOME</a>
            /
        </li>
        <!-- BEGIN_MODULE Touch_Category -->
        <li><a href="{url}"
                class="no-underline hover:text-sky-600 hover:underline">%{CATEGORY_NAME}</a>
        </li>
        <!-- END_MODULE Touch_Category -->

        <!-- BEGIN_MODULE Touch_Tag -->
        <li><a href="{url}" class="no-underline hover:text-sky-600 hover:underline">%{TAG}</a>
        </li>
        <!-- END_MODULE Touch_Tag -->
    </ol>
</nav>
<!-- END_MODULE Topicpath -->
↓
{% set topicpath = module('V2_Topicpath','topicpath') %}
{{ include('/admin/module/setting.twig',{ moduleInfo: topicpath.moduleInfo }) }}
{% if topicpath.items is not empty %}
    <nav class="w-full overflow-x-auto mb-4 not-prose"
        id="topicpath">
        <ol class="inline-flex text-sm whitespace-nowrap gap-2 p-0">
            {% for item in topicpath.items %}
                <li>
                    <a href="/"
                    class="no-underline hover:text-sky-600 hover:underline">
                    HOME
                    </a>
                    /
                </li>

                {% if touch('Touch_Category') %}
                    <li>
                        <a href="{{ item.url }}"
                        class="no-underline hover:text-sky-600 hover:underline">
                        {{ item.title }}
                        </a>
                    </li>
                {% endif %}


                {% if touch('Touch_Tag') %}
                <li>
                    <a href="{{ item.url }}"
                    class="no-underline hover:text-sky-600 hover:underline">
                    {{ item.title }}
                    </a>
                </li>
                {% endif %}
            {% endfor %}
        </ol>
    </nav>
{% endif %}

<!-- タグクラウド -->
<div class="mb-4 w-full">
  <div class="prose">
    <h1 class="flex items-center mb-4">
      <a href="sample.html"
         class="no-underline hover:text-sky-600 hover:underline">
         #ablogcms
      </a>
      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-200 text-gray-800 ml-2">
        8件
      </span>
    </h1>
  </div>

  <!-- BEGIN_MODULE Tag_Cloud -->
  <p>
    <span class="font-bold mr-1">
      絞り込み検索
    </span>
    :
    @include("/admin/module/setting.html")

    <!-- BEGIN tag:loop -->
    <a href="{url}"
       class="inline-block no-underline hover:text-sky-600 hover:underline">
       #{name}
    </a>
    ,
    <!-- END tag:loop -->
  </p>
  <!-- END_MODULE Tag_Cloud -->
</div>
↓
{% set tagCloud = module('V2_Tag_Cloud','news_tag') %}
{{ include('/admin/module/setting.twig',{ moduleInfo: tagCloud.moduleInfo }) }}
<div class="mb-4 w-full">
    <div class="prose">
        <h2 class="flex items-center mb-4">
        絞り込み検索：
        </h2>
    </div>

    {% if tagCloud.items is not empty %}
        <ul class="flex items-center gap-4">
            {% for tag in tagCloud.items %}
                <li>
                    <a href="{{ tag.url }}"
                    class="inline-block no-underline hover:text-sky-600 hover:underline">
                    #{{ tag.name }}
                    </a>
                    {% if not loop.last %}
                        ,
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
</div>

<!-- エントリーサマリー -->
<div class="grid grid-cols-2 gap-4">

    <!-- BEGIN_MODULE Entry_Summary id="news_top" -->
    @include("/admin/module/setting.html")
    <!-- BEGIN notFound -->
    <p>ただいまページを準備しております。もうしばらくお待ちください。</p>
    <!-- END notFound -->

    <!-- BEGIN unit:loop -->
    <!-- BEGIN entry:loop -->
    <article class="group relative rounded overflow-hidden mb-4">
        <a href="{url}" class="absolute inset-0 z-10" aria-label="記事詳細へ"></a>
        <div class="relative overflow-hidden aspect-[4/3] rounded">
            <!-- BEGIN_IF [{path}/nem] -->
            <img src="%{ROOT_DIR}{path}[resizeImg({x},{y})]" alt="{alt}"
                class="acms-img-responsive absolute inset-0 w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
                loading="lazy" width="{x}" height="{y}" decoding="async">
            <!-- ELSE -->
            <!-- BEGIN noimage -->
            <img src="/images/default/noimage.gif" alt="" class="acms-img-responsive"
                width="{noImgX}" height="{noImgY}" loading="lazy" decoding="async">
            <!-- END noimage -->
            <!-- END_IF -->
        </div>

        <div class="mt-4">
            <p class="text-sm text-gray-500 mb-1">{categoryName}</p>
            <h3
                class="text-lg font-bold mb-1 line-clamp-2 group-hover:text-sky-600 group-hover:underline">
                {title}</h3>
            <p class="text-sm text-gray-700 mb-1 line-clamp-2">
                {summary}
            </p>
            <p class="text-sm text-gray-700">
                <time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#n}月{date#d}日</time>
            </p>
        </div>
    </article>
    <!-- END entry:loop -->
    <!-- END unit:loop -->


    <!-- BEGIN pager:veil -->
    <div class="mt-6 flex justify-center" id="more-button">
        <!-- BEGIN forwardLink -->
        <a href="{url}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded
                border border-gray-300 bg-white text-gray-900 shadow-sm
                no-underline hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-sky-100">
            もっと見る
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
        </a>
        <!-- END forwardLink -->
    </div>
    <!-- END pager:veil -->
</div>

<!-- END_MODULE Entry_Summary -->
↓
<div class="grid grid-cols-2 gap-4">
    {% set entrySummary = module('V2_Entry_Summary','news_top') %}
    {{ include('/admin/module/setting.twig',{ moduleInfo: entrySummary.moduleInfo }) }}

    {% if entrySummary.items is empty %}
        <p>
            ただいまページを準備しております。もうしばらくお待ちください。
        </p>
    {% endif %}

    {% for entry in entrySummary.items %}
        <article class="group relative rounded overflow-hidden mb-4">
            <a href="{{ entry.url }}"
            class="absolute inset-0 z-10"
            aria-label="記事詳細へ">
            </a>

            <div class="relative overflow-hidden aspect-[4/3] rounded">
                {% if entry.mainImage.path %}
                <img src="{{ entry.mainImage.path|resizeImg(360) }}"
                    alt="{{ entry.mainImage.alt }}"
                    class="acms-img-responsive absolute inset-0 w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
                    loading="lazy"
                    width="{{ entry.mainImage.width }}"
                    height="{{ entry.mainImage.height }}"
                    decoding="async"
                >
                {% else %}
                <img src="/images/default/noimage.gif"
                    alt="noimage"
                    class="acms-img-responsive"
                    width="360"
                    height="270"
                    loading="lazy"
                    decoding="async">
                {% endif %}
            </div>

            <div class="mt-4">
                <p class="text-sm text-gray-500 mb-1">
                    {{ entry.category }}
                </p>

                <h3 class="text-lg font-bold mb-1 line-clamp-2 group-hover:text-sky-600 group-hover:underline">
                    {{ entry.title }}
                </h3>

                <p class="text-sm text-gray-700 mb-1 line-clamp-2">
                    {{ entry.summary }}
                </p>

                <p class="text-sm text-gray-700">
                    <time datetime="{ entry.datetime|date('Y-m-d') }}">
                        {{ entry.datetime|date('Y年m月d日') }}
                    </time>
                </p>
            </div>
        </article>
    {% endfor %}
</div>

※ページネーションは表示されなかったので後日修正したいと思います。

さいごに

今回はトップページをtwigに直していきました。途中でエラーが出てしまったりなどがありましたがtwigに直せたのでよかったです。エントリー本文も少しずつ直していこうとおもいます。