如何购买
1
登录您的BeikeShop商城后台
2
点击右上角“插件市场”
3
选择需要购买的插件
4
购买&安装
插件描述
Custom HTML 自定义装修模块
概述
Custom HTML 是一个为商城后台「设计 → 装修」功能增加自定义内容模块的插件。你可以填写一个可选的标题，并直接编写任意 HTML 片段（支持内联样式、<style> 和 <script> 标签），非常适合放置公告、活动横幅、嵌入代码、自定义表单或第三方组件等内容。模块支持全屏放大的 HTML 编辑框，让代码编写更加舒适。
主要功能
✍️ 自由编写 HTML 内容
| 特性 | 说明 |
|---|---|
| 任意 HTML | 支持完整的 HTML 页面片段，包括 <style> 和 <script> |
| 多语言支持 | 每个语言可独立编写不同的 HTML 内容 |
| 源码编辑 | 全屏放大编辑框，支持等宽字体，代码可读性更好 |
| 内容限制提示 | 自动检测数据库字段容量上限，输入时实时计数提醒 |
📐 模块配置选项
| 配置项 | 说明 |
|---|---|
| 标题 | 模块可选标题（支持多语言） |
| 模块宽度 | 窄屏(container) / 宽屏(container-fluid) / 全屏(w-100) |
🎨 智能样式作用域
| 特性 | 说明 |
|---|---|
| 样式隔离 | 用户编写的 <style> 会自动添加作用域前缀，仅影响当前模块，不污染主题样式 |
| 页面声明剥离 | 自动剥离 body/html 中的背景色和溢出声明，避免产生灰底框或内容被裁切 |
| 视口单位转换 | vw 单位自动转换为 cqw（容器查询宽度），让「全屏」内容受模块宽度控制 |
| 媒体查询保留 | @media 和 @supports 规则完整保留并正确作用域化 |
技术特点
-
✅ 完全自定义：不限制 HTML 内容，从简单文本到复杂嵌入式代码均可
-
✅ 智能 CSS 作用域：用户样式自动限定在当前模块，不干扰主题或其他模块
-
✅ 完整 HTML 支持：可粘贴完整 HTML 页面（含
<head>/<body>），自动提取 body 内容并作用域化样式 -
✅ 容器查询适配：
vw单位自动转cqw，使全屏内容真正受模块宽度容器控制 -
✅ 数据库容量感知：实时提示内容长度限制（settings.value 字段容量），避免保存截断
-
✅ 多语言独立：每种语言可编写不同的 HTML 内容
-
✅ 全屏编辑器：弹窗式源码编辑器，放大查看和编辑大量代码
-
✅ 任意主题兼容：样式完全独立，不受主题更换影响
-
✅ 装修编辑器完美支持：实时预览，内容为空时显示占位提示
适用场景
-
活动/促销横幅
-
公告/通知栏
-
嵌入第三方代码（表单、地图、社交媒体插件等）
-
自定义广告位
-
品牌故事/富文本内容
-
定时器/倒计时组件
-
任何系统模块无法覆盖的自定义需求
