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 |