theme.liquid

Baklib

发布于：2024-07-07

文件内容

<!doctype html>
<html lang="{{ site.language }}" class="scroll-smooth">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Baklib">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% meta_tags %}
    {{ 'editor.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
    {{ 'javascripts/main.js' | asset_url | script_tag: defer: true, data-turbo-track: 'reload' }}
    {{ 'css/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
    {%# 引用外部资源 %}
     <link href="https://unpkg.com/daisyui@latest/dist/full.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
    {%# 引用site全局变量 %}
    {{ site.settings.head_html }}
  </head>
  <body>
    <div class="drawer lg:drawer-open">
      <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content flex flex-col">
        <!-- Header Section -->
        {% render 'header', settings: site.settings, page: page %}
        <!-- Main Content Section -->
        <div class="relative">{{ content_for_layout }}</div>
      </div>
      <!-- Sidebar Section -->
      {% render 'sidebar', settings: site.settings, page: page %}
    </div>
    <!-- Footer Section -->
    {% render 'footer', settings: site.settings %}
  </body>
</html>

文件说明

layout 布局文件是一个标准的 HTML 文件，即包括 <html>、<head>、<body>标签。其中在<head>下引用全局资源文件、定义meta元数据、设置SEO数据、指定站点语言等。

content_for_layout

{{ content_for_layout }} 方法用于替换 templates 下的文件内容。您需要在 <body> 和 </body> HTML 标记之间添加对此方法的引用。

render

render 方法用于引用 snippets 下的文件内容。比如：

{% render 'header', settings: site.settings, page: page %}

表示引用文件: snippets/_header.liquid

提交反馈