Keywind 项目使用教程

Keywind 项目使用教程

keywindKeywind is a component-based Keycloak Login Theme built with Tailwind CSS项目地址:https://gitcode.com/gh_mirrors/ke/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 项目的基本使用教程，包括项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

keywindKeywind is a component-based Keycloak Login Theme built with Tailwind CSS项目地址:https://gitcode.com/gh_mirrors/ke/keywind