Keywind 项目使用教程
1. 项目的目录结构及介绍
Keywind 是一个基于 Tailwind CSS 的组件化 Keycloak 登录主题。以下是其基本的目录结构:
keywind/
├── src/
│ ├── resources/
│ │ ├── css/
│ │ ├── img/
│ │ ├── js/
│ │ ├── theme/
│ │ │ ├── login/
│ │ │ ├── admin/
│ │ │ ├── common/
│ │ │ ├── themes.json
│ ├── templates/
│ │ ├── login/
│ │ ├── admin/
│ │ ├── common/
├── package.json
├── pnpm-lock.yaml
├── tailwind.config.js
目录结构介绍
src/resources/
: 包含主题的所有资源文件,如 CSS、图片和 JavaScript 文件。css/
: 存放自定义的 CSS 文件。img/
: 存放图片资源。js/
: 存放 JavaScript 文件。theme/
: 包含主题的具体配置和模板文件。login/
: 登录页面的模板和资源。admin/
: 管理页面的模板和资源。common/
: 公共模板和资源。themes.json
: 主题配置文件。
src/templates/
: 包含主题的 FreeMarker 模板文件。login/
: 登录页面的模板。admin/
: 管理页面的模板。common/
: 公共模板。
package.json
: 项目的依赖管理文件。pnpm-lock.yaml
: 锁定依赖版本。tailwind.config.js
: Tailwind CSS 的配置文件。
2. 项目的启动文件介绍
Keywind 项目的启动文件主要是 package.json
中的脚本命令。以下是一些常用的启动命令:
{
"scripts": {
"build:jar": "pnpm run build && pnpm run jar",
"build": "tailwindcss -i ./src/resources/css/tailwind.css -o ./src/resources/css/output.css --minify",
"jar": "jar cf keywind.jar -C src/resources ."
}
}
启动命令介绍
build:jar
: 构建并打包主题资源为 JAR 文件。build
: 使用 Tailwind CSS 构建输出 CSS 文件。jar
: 将构建好的资源打包成 JAR 文件。
3. 项目的配置文件介绍
Keywind 项目的配置文件主要包括 tailwind.config.js
和 themes.json
。
tailwind.config.js
这是 Tailwind CSS 的配置文件,用于自定义 Tailwind CSS 的样式和功能。
module.exports = {
purge: ['./src/templates/**/*.ftl'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
themes.json
这是主题的配置文件,用于指定主题的父主题和其他配置。
{
"parent": "base",
"imports": [
"common/common.ftl"
],
"styles": [
"css/output.css"
],
"scripts": [
"js/main.js"
]
}
配置文件介绍
tailwind.config.js
: 配置 Tailwind CSS 的样式和功能。themes.json
: 指定主题的父主题、导入的模板、样式和脚本文件。
以上是 Keywind 项目的基本使用教程,包括项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助!