theme.liquid

巴克励步

发布于：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

公共资源

文件路径

是否必须

类型

说明

使用方式

baklib/shared/editor.css

⚙️ 可选（如模版中需要使用富文本编辑器）

样式 (CSS)

富文本编辑器输出样式文件，使用 TailwindCSS 构建，控制编辑器基础样式（如段落、标题、列表、代码块等）。

baklib/shared/main.css

✅ 必须

样式 (CSS)

全局共享样式文件，提供 bkt- 前缀的 TailwindCSS 公共组件与颜色系统，避免污染外部 CSS 命名空间。

在模板主布局中加载：{{ 'baklib/shared/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}

baklib/shared/editor.js

⚙️ 可选（如模版中需要使用富文本编辑器）

脚本 (JS)

编辑器核心逻辑脚本，包含富文本编辑、组件注册、事件绑定等。

baklib/shared/main.js

✅ 必须

脚本 (JS)

全局前端逻辑js入口文件，自动导入全站通用模块：
• turbo — 启用 Turbo Drive/Frame 支持
• stimulus — 初始化 Stimulus 控制器
• ai_search_completion — 启用 AI 搜索建议（stimulus controller）
• expandable_content — 处理可展开内容交互（stimulus controller）
• responsive_attr — 响应式属性调整逻辑（stimulus controller）

在模板主布局中加载：{{ 'baklib/shared/main.js' | asset_url | script_tag: data-turbo-track: 'reload' }}

baklib/shared/ai_search_completion.js

⚙️ 可选（仅在开启 AI 搜索建议时需要）

脚本 (JS)

提供 AI 搜索功能，用于站内搜索输入框或 AI 助手模块。默认由baklib/shared/main.js导入

baklib/shared/stimulus.js

⚙️ 可选（如页面需要使用 Stimulus js）

脚本 (JS)

启用 Stimulus 控制器的初始化入口，负责连接 data-controller 标记的组件。默认由baklib/shared/main.js导入

baklib/shared/turbo.js

⚙️ 可选（如页面需要使用 Turbo Frames / Turbo Streams）

脚本 (JS)

用于支持 Turbo Drive、Turbo Frames 和 Streams 的前端导航与局部更新。默认由baklib/shared/main.js导入

模版中使用turbo时请勿多次导入子模块，统一使用同一个模块实例，否则可能导致未知冲突问题，可能造成页面turbo导航混乱等问题；baklib/shared/main.js 和 baklib/shared/turbo.js 勿同时使用，默认挂载至window.Turbo

提交反馈