AdminLTE 如何启用 RTL从右到左布局用 rtlcss 生成 .rtl.css 并在页面应用 dirrtl【免费下载链接】AdminLTEAdminLTE - Free admin dashboard template based on Bootstrap 5项目地址: https://gitcode.com/GitHub_Trending/ad/AdminLTE如果你的项目使用 AdminLTE 4基于 Bootstrap 5 的后台模板需要为阿拉伯语、希伯来语等从右到左的语言提供镜像版布局那么要做两件事用构建管线中的rtlcss插件把编译出的 CSS 转换一份.rtl.css再在 HTML 页面的html标签上应用dirrtl并让该页面加载这份 RTL 样式表。本仓库已经内置了完整的这条链路本文按照 package.json、postcss 配置 和 layout-rtl 示例页 中的真实配置说明生成与应用的全部步骤以及如何核对产物。准备条件按照 README.md 的 Quick start 一节编译 dist 文件需要 Node.js/npm克隆或下载仓库后执行npm install安装依赖依赖中已包含 RTL 所需的全部工具无需额外安装。在 package.json 的devDependencies中可以核对到postcss: ^8.4.43, postcss-cli: ^11.0.0, rtlcss: ^4.3.0, cross-env: ^7.0.3其中rtlcss负责 CSS 方向转换cross-env用于在命令中设置环境变量postcss-cli提供命令行入口。注意副作用npm run production的定义是npm-run-all clean lint compile而clean是rimraf dist即先删除整个dist目录再重新编译。如果只想增量生成 RTL 样式使用后文的单步脚本即可。生成 .rtl.css生成由css-rtl脚本完成它要求dist/css/下已经存在编译好的.css文件即先跑过css-compile。完整链路用一条命令即可定义于 package.jsonnpm run css它的展开是npm-run-all css-compile css-prefix css-rtl css-minify按顺序执行四步css-compile用 sass 把src/scss/编译到dist/css/css-prefix对dist/css/*.css排除*.rtl*.css和*.min.css做 postcss 前缀处理css-rtl即下一条命令生成.rtl.csscss-minify并行压缩主样式css-minify-main和 RTL 样式css-minify-rtl单独对dist/css/*rtl.css压缩出.rtl.min.css。只跑 RTL 转换这一步的原始命令是npm run css-rtl展开为cross-env NODE_ENVRTL postcss --config src/config/postcss.config.mjs --dir dist/css --ext .rtl.css dist/css/*.css !dist/css/*.min.css !dist/css/*.rtl.css逐段说明--dir dist/css --ext .rtl.css输入文件就地输出到dist/css/扩展名追加为.rtl.css即adminlte.css生成adminlte.rtl.css输入参数dist/css/*.css !dist/css/*.min.css !dist/css/*.rtl.css只处理普通 CSS明确排除已压缩文件和已生成的 RTL 文件避免二次转换cross-env NODE_ENVRTL设置环境变量。这是 rtlcss 生效的开关——src/config/postcss.config.mjs 中 rtlcss 插件的启用条件正是plugins: { autoprefixer: { cascade: false }, rtlcss: ctx.env RTL ? {} : false }也就是说同样的 postcss 配置在非 RTL 步骤如css-prefix中不会执行方向转换rtlcss只在NODE_ENVRTL时挂载。开发模式下还有对应的 watch 脚本package.jsonwatch-css-dist用 nodemon 监听dist/css/且--ignore dist/css/*.rtl.*忽略自己生成的 RTL 文件以防循环触发每次源 CSS 变化后自动重跑npm run css-rtl。npm run dev会并行启动所有watch-*脚本和文档站点。RTL 输出中源码注释的作用rtlcss 通过 CSS 注释指令控制转换行为。本仓库源码中就使用了这种指令例如 src/scss/_app-sidebar.scss 中transform: translateY(-50%) /*rtl:append:rotate(180deg)*/;以及/*rtl:ignore*/。编译产物dist/css/adminlte.css中还保留了大量来自 Bootstrap 的/* rtl:... */注释如rtl:begin:ignore/rtl:end:ignore、rtl:url(...)这些注释在生成adminlte.rtl.css时被 rtlcss 读取决定对应声明是翻转、忽略还是替换。在页面应用 dirrtl参考仓库自带的示例页 src/html/pages/layout/layout-rtl.astro启用 RTL 的页面写法分两点在html标签上加dirrtl并在 frontmatter 中声明isRtl--- const title AdminLTE 4 | Layout RTL; const path ../../../dist; const isRtl true; --- html langen dirrtl head Head title{title} path{path} isRtl{isRtl} / /head头部组件根据isRtl选择样式表文件名。src/html/components/_head.astro 中的逻辑是--- const { title, path, isRtl } Astro.props; const cssPath isRtl ? .rtl : ; --- link relstylesheet href{path /css/adminlte cssPath .css} /即 RTL 页面加载adminlte.rtl.css其余页面加载adminlte.css。在自己的 HTML 页面中对应写法就是给html加dirrtl并把 AdminLTE 样式表指向dist/css/adminlte.rtl.css压缩版为adminlte.rtl.min.css。验证结果编译完成后按以下产物核对仓库当前dist中已包含这些文件可直接对照RTL 样式表已生成dist/css/下存在adminlte.rtl.css、adminlte.rtl.min.css及对应的.map文件与主样式adminlte.css、adminlte.min.css并列。RTL 页面指向了 RTL 样式表构建出的示例页 dist/pages/layout/layout-rtl.html 中可以看到html langen dirrtl ... link relstylesheet href../../../dist/css/adminlte.rtl.css /即dirrtl与.rtl.css引用同时生效。 3.浏览器预览执行npm run devREADME 中注明为开发模式带浏览器自动刷新后打开 Layout 分组的 Layout RTL 演示页构建产物路径为dist/pages/layout/layout-rtl.html整版布局相对默认页呈镜像排布即为 RTL 生效。限制说明rtlcss插件的启用完全依赖NODE_ENVRTL单独直接运行 postcss 而不设置该变量时插件为false不会产生 RTL 文件RTL 生成必须走css-rtl脚本或等价的带环境变量的调用。css-rtl的输入显式排除了*.min.css与*.rtl.css压缩版 RTL 文件由css-minify-rtl从.rtl.css另行生成不要手动对.rtl.css再跑一次css-rtl。修改src/scss/后watch 流程会先触发css-compile重编译主 CSS再由watch-css-dist自动重跑css-rtl手动重跑时用npm run css一条命令即可保证四步顺序正确。【免费下载链接】AdminLTEAdminLTE - Free admin dashboard template based on Bootstrap 5项目地址: https://gitcode.com/GitHub_Trending/ad/AdminLTE创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AdminLTE 如何启用 RTL（从右到左）布局：用 rtlcss 生成 .rtl.css 并在页面应用 dir=“rtl“
AdminLTE 如何启用 RTL从右到左布局用 rtlcss 生成 .rtl.css 并在页面应用 dirrtl【免费下载链接】AdminLTEAdminLTE - Free admin dashboard template based on Bootstrap 5项目地址: https://gitcode.com/GitHub_Trending/ad/AdminLTE如果你的项目使用 AdminLTE 4基于 Bootstrap 5 的后台模板需要为阿拉伯语、希伯来语等从右到左的语言提供镜像版布局那么要做两件事用构建管线中的rtlcss插件把编译出的 CSS 转换一份.rtl.css再在 HTML 页面的html标签上应用dirrtl并让该页面加载这份 RTL 样式表。本仓库已经内置了完整的这条链路本文按照 package.json、postcss 配置 和 layout-rtl 示例页 中的真实配置说明生成与应用的全部步骤以及如何核对产物。准备条件按照 README.md 的 Quick start 一节编译 dist 文件需要 Node.js/npm克隆或下载仓库后执行npm install安装依赖依赖中已包含 RTL 所需的全部工具无需额外安装。在 package.json 的devDependencies中可以核对到postcss: ^8.4.43, postcss-cli: ^11.0.0, rtlcss: ^4.3.0, cross-env: ^7.0.3其中rtlcss负责 CSS 方向转换cross-env用于在命令中设置环境变量postcss-cli提供命令行入口。注意副作用npm run production的定义是npm-run-all clean lint compile而clean是rimraf dist即先删除整个dist目录再重新编译。如果只想增量生成 RTL 样式使用后文的单步脚本即可。生成 .rtl.css生成由css-rtl脚本完成它要求dist/css/下已经存在编译好的.css文件即先跑过css-compile。完整链路用一条命令即可定义于 package.jsonnpm run css它的展开是npm-run-all css-compile css-prefix css-rtl css-minify按顺序执行四步css-compile用 sass 把src/scss/编译到dist/css/css-prefix对dist/css/*.css排除*.rtl*.css和*.min.css做 postcss 前缀处理css-rtl即下一条命令生成.rtl.csscss-minify并行压缩主样式css-minify-main和 RTL 样式css-minify-rtl单独对dist/css/*rtl.css压缩出.rtl.min.css。只跑 RTL 转换这一步的原始命令是npm run css-rtl展开为cross-env NODE_ENVRTL postcss --config src/config/postcss.config.mjs --dir dist/css --ext .rtl.css dist/css/*.css !dist/css/*.min.css !dist/css/*.rtl.css逐段说明--dir dist/css --ext .rtl.css输入文件就地输出到dist/css/扩展名追加为.rtl.css即adminlte.css生成adminlte.rtl.css输入参数dist/css/*.css !dist/css/*.min.css !dist/css/*.rtl.css只处理普通 CSS明确排除已压缩文件和已生成的 RTL 文件避免二次转换cross-env NODE_ENVRTL设置环境变量。这是 rtlcss 生效的开关——src/config/postcss.config.mjs 中 rtlcss 插件的启用条件正是plugins: { autoprefixer: { cascade: false }, rtlcss: ctx.env RTL ? {} : false }也就是说同样的 postcss 配置在非 RTL 步骤如css-prefix中不会执行方向转换rtlcss只在NODE_ENVRTL时挂载。开发模式下还有对应的 watch 脚本package.jsonwatch-css-dist用 nodemon 监听dist/css/且--ignore dist/css/*.rtl.*忽略自己生成的 RTL 文件以防循环触发每次源 CSS 变化后自动重跑npm run css-rtl。npm run dev会并行启动所有watch-*脚本和文档站点。RTL 输出中源码注释的作用rtlcss 通过 CSS 注释指令控制转换行为。本仓库源码中就使用了这种指令例如 src/scss/_app-sidebar.scss 中transform: translateY(-50%) /*rtl:append:rotate(180deg)*/;以及/*rtl:ignore*/。编译产物dist/css/adminlte.css中还保留了大量来自 Bootstrap 的/* rtl:... */注释如rtl:begin:ignore/rtl:end:ignore、rtl:url(...)这些注释在生成adminlte.rtl.css时被 rtlcss 读取决定对应声明是翻转、忽略还是替换。在页面应用 dirrtl参考仓库自带的示例页 src/html/pages/layout/layout-rtl.astro启用 RTL 的页面写法分两点在html标签上加dirrtl并在 frontmatter 中声明isRtl--- const title AdminLTE 4 | Layout RTL; const path ../../../dist; const isRtl true; --- html langen dirrtl head Head title{title} path{path} isRtl{isRtl} / /head头部组件根据isRtl选择样式表文件名。src/html/components/_head.astro 中的逻辑是--- const { title, path, isRtl } Astro.props; const cssPath isRtl ? .rtl : ; --- link relstylesheet href{path /css/adminlte cssPath .css} /即 RTL 页面加载adminlte.rtl.css其余页面加载adminlte.css。在自己的 HTML 页面中对应写法就是给html加dirrtl并把 AdminLTE 样式表指向dist/css/adminlte.rtl.css压缩版为adminlte.rtl.min.css。验证结果编译完成后按以下产物核对仓库当前dist中已包含这些文件可直接对照RTL 样式表已生成dist/css/下存在adminlte.rtl.css、adminlte.rtl.min.css及对应的.map文件与主样式adminlte.css、adminlte.min.css并列。RTL 页面指向了 RTL 样式表构建出的示例页 dist/pages/layout/layout-rtl.html 中可以看到html langen dirrtl ... link relstylesheet href../../../dist/css/adminlte.rtl.css /即dirrtl与.rtl.css引用同时生效。 3.浏览器预览执行npm run devREADME 中注明为开发模式带浏览器自动刷新后打开 Layout 分组的 Layout RTL 演示页构建产物路径为dist/pages/layout/layout-rtl.html整版布局相对默认页呈镜像排布即为 RTL 生效。限制说明rtlcss插件的启用完全依赖NODE_ENVRTL单独直接运行 postcss 而不设置该变量时插件为false不会产生 RTL 文件RTL 生成必须走css-rtl脚本或等价的带环境变量的调用。css-rtl的输入显式排除了*.min.css与*.rtl.css压缩版 RTL 文件由css-minify-rtl从.rtl.css另行生成不要手动对.rtl.css再跑一次css-rtl。修改src/scss/后watch 流程会先触发css-compile重编译主 CSS再由watch-css-dist自动重跑css-rtl手动重跑时用npm run css一条命令即可保证四步顺序正确。【免费下载链接】AdminLTEAdminLTE - Free admin dashboard template based on Bootstrap 5项目地址: https://gitcode.com/GitHub_Trending/ad/AdminLTE创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考