README

🔥 自动编译 Tailwindcss [测试版]

如果你是 Tailwind CSS 的粉丝，你绝对应该尝试这个测试版功能，它会自动编译文件，并生成带有 Tailwind 类的 CSS！你还可以创建自己的可重复使用的模板并将其添加到 TinyMCE！

🔥 还可以发现 OpenMage 中集成 Monaco 编辑器 以获得惊人的开发者体验！

要求

• OpenMage [^20.2.0]：从本版本开始，已集成 TinyMCE 6

注意：经过一些修改，它也可以与旧编辑器一起使用。如果你感兴趣，请发起一个 pull request，但建议更新。

描述

扩展创建一个文件副本，并使其与启用的 CMS 静态块和页面的内容同步。

副本在两个方向上保持同步，这意味着保存一个静态块会更新文件副本，反之亦然！

这允许直接在文件上工作，并利用 IDE 所能提供的所有好处，例如自动完成、语法高亮显示等，而不是在文本区域中工作。

当 CMS 内容中有很多 HTML 标记时，这非常有用，例如在主页上，或者如果你必须处理大量依赖静态块的主题（例如，我特别不喜欢这个原因的 Porto）。

此外，还可以将创建的文件包含到 CSS 清理等工作流程中（这也是它最初创建的目的）。

默认情况下禁用文件创建，您可以在以下位置启用一个或多个静态块或页面：

系统 -> 配置 -> 内容管理.

文件将在以下位置创建

• app/design/{package}/{name}/template/cms/static_block/static_block_identifier.html
• app/design/{package}/{name}/template/cms/static_page/url_key_page.html

例如

• app/design/rwd/default/template/cms/static_block/category_landingpage_vip.html
• app/design/rwd/default/template/cms/static_page/company.html

注意

• 为 CMS 每个启用店铺视图的每个 package/name 对应创建文件
• 如果修改了标识符或 url_key，则会正确重命名文件
• ! 如果删除静态块/页面，则不会删除文件
• 如果你的静态块/页面分配给多个具有不同主题的店铺视图，将在所有对应位置创建文件

⚠️ 重要 ⚠️

已知问题

如果你有多个静态块/页面具有相同的标识符分配给不同的视图（用于翻译），它们将被最新修改的版本覆盖。这种情况尚不支持，需要实现。

免责声明

我个人在生产中使用此模块，但请记住在测试之前进行完整备份。我对任何可能发生的损坏或数据丢失不承担责任。

🔥 TailwindCSS 功能 [测试版]

在配置中启用 TailwindCSS 编译器并解锁 TailwindCSS 的力量！

1. 编译 TailwindCSS 类并在 TinyMCE 编辑器中预览

   在内容中使用 TailwindCSS 类，并自动将它们编译成 CSS 文件，该文件将添加到您的前端中的此位置

   • https://openmage.dev/skin/frontend/rwd/default/css/tailwind.css

2. 创建可重复使用的块模板

   您可以在主题的此路径中创建可重复使用的模板

   • app/design/{package}/{name}/template/cms/tinymce_templates/

   示例

   app/design/rwd/default/template/cms/tinymce_templates/grid-4-columns.html

       <div class="grid grid-cols-4 gap-4 font-mono text-white text-sm text-center font-bold leading-6 bg-stripes-fuchsia rounded-lg mt-12 mb-12">
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">01</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">02</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">03</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">04</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">05</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">06</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">07</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">08</div>
           <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">09</div>
       </div>

   然后您可以在 TinyMCE 中选择模板并将其添加到内容中。

3. 使用您自己的 tailwind.config.js 和基础文件自定义 TailwindCSS 编译器

   您可以在主题的皮肤 CSS 目录中创建自己的 tailwind.config.js

   例如，要启用 preflight（默认禁用），添加前缀如 'tw-' 或添加插件。

   示例

   自定义 TailwindCSS 配置: app/design/frontend/rwd/default/css/tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
       prefix: '',
       corePlugins: {
           preflight: true,
       },
       theme: {
           extend: {},
       },
       plugins: [
           require('@tailwindcss/forms'),
           require('@tailwindcss/typography'),
       ],
   }

   您可以在 lib/tailwindcss/tailwind.config.js 中找到默认配置，默认不添加基础 CSS。

   PS：如果您没有使用 TailwindCSS 构建主题，我建议您添加 prefix: 'tw-' 到 Tailwind 类，并保持 preflight 禁用。例如，rwd/default 主题包含 .block 类，它对应于 TailwindCSS 中的 display: block;。然后，您不能使用 bg-fuchsia-500，而必须使用 tw-bg-fuchsia-500。我希望将来使这种模式可配置。

   您还可以创建 TailwindCSS 入口点以添加/删除组件或扩展层

   app/design/frontend/rwd/default/css/tailwind-base.css

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @layer components {
       .my-button-primary {
           @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
       }
   }

   然后您可以在内容中使用

   <button class="my-button-primary">SEND</button>

故障排除

TailwindCSS 样式未渲染

如果您看不到 Tailwind 类被应用，请确保它们没有被模板的 CSS 覆盖。

示例

在这种情况下，使用 !text-white 并考虑通过添加前缀 tw- 来自定义 tailwind.config.js 以适用于所有 Tailwind 样式。

注意：如果使用前缀，请将其添加到修饰符之后，如 md:!tw-text-white

屏幕截图

⚠️ 非常实验性

您可以将TailwindCSS配置为在开发过程中查看所有主题文件，并强制重新编译TailwindCSS（仅对开发者IP地址启用）。

示例

/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: '',
    corePlugins: {
        preflight: false,
    },
    content: [
        '../../../app/design/frontend/base/default/**/*.phtml',
        '../../../app/design/frontend/rwd/default/**/*.phtml',
        '../../../app/design/frontend/rwd/lightclean/**/*.phtml',
        '../../../skin/frontend/rwd/lgihtclean/js/*.js',
        '../../../js/*.js'
    ],
    theme: {
        extend: {},
    },
    plugins: [
        //require('@tailwindcss/forms'),
        //require('@tailwindcss/typography'),
    ],
}

注意：这尚未经过测试，因此我不知道在这么多文件的情况下二进制编译器的性能如何。

您可以从另一个有趣的项目开始实验，例如openmage-theme-lanzarote，无需安装BUN，但我不清楚其性能如何。请告诉我！

支持

如果您对此扩展有任何问题，请打开GitHub上的问题。

贡献

任何贡献都备受赞赏。贡献代码的最佳方式是在GitHub上提交拉取请求。

许可证

OSL - 开源软件许可证 3.0