snippets/

snippets 目录中包含自定义的可重用模板片段,比如页头、页脚、面包屑、导航、广告等页面片段。

定义

创建一个文件: snippets/_footer.liquid

<footer class="border-t border-accent-200 print:hidden">
  {% # 自定义导航菜单 %}
  {% if site.settings.footer_menu_html %}
    <div class="mx-auto max-w-screen-xl py-2 md:py-4 space-x-2">
      {{ site.settings.footer_menu_html }}
    </div>
  {% endif %}
  {% # 底部备案和链接 %}
  <div class="mx-auto max-w-screen-xl py-2 md:py-4">
    <div class="sm:flex sm:items-center sm:justify-between">
      <div class="flex space-x-2 text-sm">
        <a href="/" class="flex items-center">
          {% assign logo = 'images/logo.png' | asset_url %}
          <img src="{{ site.favicon_url | default: logo  }}" class="h-8 mr-3" alt="{{ site.name }} Logo">
          <span class="self-center text-xl font-semibold whitespace-nowrap">{{ site.name }}</span>
        </a>
      </div>
      <div class="hidden mt-4 space-x-6 sm:flex sm:justify-center sm:mt-0">
        <div>©  {{ site.settings.company_name }}</div>
      </div>
    </div>
  </div>
</footer>

调用

render 方法在 layouts/templates/的模板文件中引用文件:

{% render 'footer' %}

下面是一些常见的页面片段: