目录结构

主题模板决定了用户站点的布局、功能和样式。模板主题是使用Liquid以及HTMLCSSJavaScriptJSON构建的,使用这些语言,开发人员可以创建客户想要的任何外观。同时提供了多种工具和最佳实践来加速开发过程。

作为开发人员,您可以为特定客户构建自定义主题模板以满足客户的需求,或构建要在模板商店中销售的模板。

概述

主题模板决定了用户站点的布局、功能和样式。主题代码需要按照主题的标准目录结构组织,同时还包括配套资源,如imagesstylesheetsscripts

文件资源

主题文件分为以下一般类别:

  • 标记和功能 - 这些文件控制主题的布局和功能。他们使用Liquid生成站点页面的HTML标记。

  • 配套资源 - 这些文件是主题中其他文件调用或使用的资产、脚本或本地化文件。

  • 配置文件 - 这些文件使用JSON存储配置数据,用户可以通过主题编辑器进行自定义设置。

目录结构

模板固定的目录结构:

.
├── assets
    └── images
    └── css
    └── javascripts
    └── ...
├── config
    └── settings_schema.json
├── layout
    └── theme.liquid
├── locales
├── src
├── snippets
└── templates

目录介绍

一个名为 docs 的模板的目录结构如下所示:themes/cms/docs/

一级目录

二级目录

备注

assets/

css/

存放从 src 中编译后的 css 文件

javascripts/

存放从 src 中编译后的 js 文件

images/

存放本地引用的资源

config/

settings_schema.json

存放模板的配置信息

layout/

theme.liquid

模板框架布局文件,其他模板文件都

locales/

多语言版本翻译文件

src/

原始 css/js 资源文件

snippets/

存放模板页面片段

statics/

存放静态模板文件

templates/

存放模板文件,必须有一个 index.liquid

.gitignore

git 忽略文件

package-lock.json

js 库打包文件

package.json

js 库打包文件

README.md

模板教程

tailwind.config.js

TailwindCss 框架引用文件

yarn.lock

yarn 打包文件