模板开发 Step by Step

本指南提供在 Baklib 平台内开发自定义模板的分步说明:复制组织模板、修改静态与动态页面,并在前端验证效果。

前置条件

动手前请确认已完成:
  1. 选择与安装模板 — 已从市场或 Git 安装模板并创建应用。
  2. 进入编辑器与版本管理 — 已将公共模板复制到组织、选定开发版本(如 dev1.0),并进入该版本的代码编辑器。
若公共模板不可编辑,在模板开发界面按提示「复制模板版本(main)至当前组织」,设置版本号后在【应用设置】→【界面展示】中选择该组织模板版本,再点击「进入模板开发」。
也可观看交互式引导:Guidejar 模板开发教程

动手教程

1. 在 statics 目录添加静态页面

在编辑器左侧 /statics 目录下新建静态页面文件。
20250102-2858844-xukrvq

2. 添加 hello.liquid

新建 hello.liquid 静态文件。
20250102-2858844-ndhi7s

3. 编辑文件内容

在文件中输入 Hello World,点击右上角「保存」。
20250922-188-cn8ycc

4. 预览静态页

在网站前端访问 /s/hello 即可查看静态页面。
20250102-2906846-c6vbbu

5. 编辑动态模板页面

/templates 目录下修改动态模板,例如首页 index.liquid
20250102-2881989-hr999

6. 修改首页代码

可任意修改 index.liquid。例如将 Hero 区块注释掉后点击「保存」。
20250102-2906846-j4ya59

7. 前台预览

注释前首页效果:
20250102-2500056-kcsmlc

8. 刷新验证

刷新页面后 Hero 区域消失,说明模板修改已在前端生效。
20250102-2764605-ybm6rz
下一步: 若需本地构建 CSS/JS,见 初始化本地资源;继续学习 API 见 开发指南

FAQs

如果我在尝试编辑模板时遇到错误怎么办?

请尝试刷新页面。若问题仍在,检查网络连接或重新登录,并回顾最近改动以排查代码冲突。

我如何知道我对模板所做的更改是否反映在网站上?

保存后访问站点前端并刷新页面。若看不到变更,确认已保存且已清除浏览器缓存。

访问和编辑模板的先决条件是什么?

需在 Baklib 拥有账号,且对目标组织有权限。另需掌握基本 Web 开发概念:文件结构、Liquid 语法与 HTML。

为什么我需要将模板复制到我的组织?

复制后可在不影响公共模板及其他组织的前提下独立修改,变更仅作用于你的组织版本。

如何访问和使用模板中的静态文件?

静态文件存放在 /statics 目录。前端通过相对路径访问,例如 /s/hello 对应 /statics/hello.liquid