目录结构
主题模板决定了用户站点的布局、功能和样式。模板主题是使用Liquid
以及HTML
,CSS
,JavaScript
和JSON
构建的,使用这些语言,开发人员可以创建客户想要的任何外观。同时提供了多种工具和最佳实践来加速开发过程。
作为开发人员,您可以为特定客户构建自定义主题模板以满足客户的需求,或构建要在模板商店中销售的模板。
概述
主题模板决定了用户站点的布局、功能和样式。主题代码需要按照主题的标准目录结构组织,同时还包括配套资源,如images
,stylesheets
和scripts
。
文件资源
主题文件分为以下一般类别:
标记和功能 - 这些文件控制主题的布局和功能。他们使用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/ | 存放模板文件,必须有一个 | ||
.gitignore | git 忽略文件 | ||
package-lock.json | js 库打包文件 | ||
package.json | js 库打包文件 | ||
README.md | 模板教程 | ||
tailwind.config.js | TailwindCss 框架引用文件 | ||
yarn.lock | yarn 打包文件 |