tag.liquid

标签页模板，位于： templaes/tag.liquid

通常标签页模板主要是将指定的某个标签下的所有页面展示出来，该页面会传人一个变量： tag ，通过遍历 tag.pages 获得标签下所有页面。

通用代码如下：

<div class="overflow-visible h-auto pb-[50px] min-h-screen">
  <div class="max-w-7xl p-4 mx-auto relative pt-[140px] md:pt-[180px] flex space-x-2">
    <div class="space-y-2 lg:space-y-4 -mt-[60px] w-0 flex-grow">
      <div class="flex pb-2 pl-2">
        <a class="flex text-sm font-semibold leading-6 group text-slate-700 hover:text-slate-900 dark:text-slate-200 dark:hover:text-white" href="/">
          <svg viewBox="0 -9 3 24" class="w-auto h-6 mr-3 overflow-visible text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300">
            <path d="M3 0L0 3L3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>{{ "generic.back" | t }}
        </a>
      </div>
      <!-- tag name -->
      <div class="rounded shadow-md">
        <div class="h-5 rounded-t" style="background-color: {{ tag.color }}"></div>
        <div class="px-3 py-6 text-xl font-black bg-white rounded-b dark:bg-slate-500">
          <span class="w-2 h-2 rounded-full shrink-0" style="background-color: {{ tag.color }}"></span>
          <span class="flex-grow w-0 break-words" style="color: {{ tag.color }}"> # {{ tag.name }}</span>
        </div>
      </div>
      <!-- filters by tag name -->
      <ul role="list" class="space-y-3 lg:space-y-5">
        {% paginate_tag tag.pages, as: 'pages' %}
          {% render "collapse_pages", pages: pages, tag_name: tag.name %}

          {% render 'paginate', paginate: paginate %}
        {% endpaginate_tag %}
      </ul>
    </div>

    <!-- Sidebar Section -->
    {% render 'sidebar', site: site %}
  </div>
</div>