README

💨 Tailwind CSS 和 ⚡️Vite，为 🍂 OctoberCMS & ❄️ WinterCMS

安装

前往您的后端到 设置 > 系统 > 更新与插件，安装主题 Chkilel.Vitawind，然后安装插件 VitewindManager。 (只需复制 & 粘贴以下插件ID并放入搜索框中。)

    - Chkilel.VitewindManager

没有 Vitewind Manager 插件无法工作，请安装它以使用此主题。

主题设置

您必须首先安装主题依赖项。在 主题文件夹 中，运行

npm install // or yarn install

主题设置

前往您的后端到 设置 > Vitewind 主题，并配置以下设置

    Environment:
        - Use `.env` configuration  : will use the `APP_ENV` value in the .env file
        - Development               : if you are working on the theme development (npm run dev)
        - Production                : if you are in production, the theme must be built before (npm run build)

    Port number : Enter the port on which the theme dev server is running (when you run `npm run dev`), default to 3000.

    Theme: select the appropiate theme, if you modify the theme name in the `theme.yaml` file.

Vite 配置文件

• 如果您重命名了主题文件夹，请相应地调整 vite.config.js 中的 [VITAWIND_FOLDER] 名称。
• 如果您需要为布局添加多个 JS 文件，请将它们全部添加到 build.rollupOptions.input 配置数组中以便编译。

import WindiCSS from 'vite-plugin-windicss'
export default ({command}) => ({
    base: command === 'serve' ? '' : '/themes/[VITAWIND_FOLDER]/public/build/', // Addjust the name of the theme
    publicDir: 'fake_dir_so_nothing_gets_copied',
    processCssUrls: true,
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
            input: [
                'resources/js/app.js',
                'resources/js/home.js',
                // Add here all the files you need if you load different javascript code in each layout
                'ressource/js/myFirstAddedFile.js',
                'ressource/js/mySecondAddedFile.js',
                ...
            ],
        },
    },
    plugins: [...],
});

布局组件

Vitewind 插件 注册布局组件以注入 JS 和 CSS 资产，在开发中管理 热重载，并在生产中注入 构建资产。

将组件放入布局中，并设置每个布局需要加载的 JS 文件，您可以为每个布局使用不同的 JS 文件。

开发

在主题文件夹中运行以下命令

npm run dev // or yarn dev

主题开发服务器将在 https://:3000/ 上启动，并监听您的 .htm 文件（布局、页面、部分等）的任何修改。然后，您可以在其通常的 URL 上访问您的网站并开始开发。

请注意 开发服务器的端口，如果与 3000 不同，您需要在后端设置中调整它。

生产构建

使用 npm run build 编译您的资产。

npm run build // or yarn build

不要忘记在后台设置中将 环境 调整为 生产。

主题许可证

MIT 许可证 - 请参阅 LICENSE 文件以获取 MIT 许可证的详细信息。

变更日志

1.0.0 : 初次发布

• Vitawind: 尾风 CSS 的力量和 Vite JS 的速度