smartbanner.js完全定制指南SCSS主题换肤、i18n多语言与custom-design-modifier实战【免费下载链接】smartbanner.jsCustomisable and lightweight smart app banner for iOS and Android项目地址: https://gitcode.com/gh_mirrors/smar/smartbanner.jssmartbanner.js是一款轻量压缩后约 15.7KB的Smart App Banner智能应用横幅开源方案用于在 iOS 和 Android 移动端网页顶部显示「下载 App」引导横幅。本文将从SCSS 主题换肤、i18n 多语言、custom-design-modifier三个核心定制点出发手把手带你完成一个完全属于自己的 App 引导横幅无需 jQuery几行 meta 标签即可上手。1️⃣ 先看懂内置皮肤BEM 类名与平台修饰符smartbanner.js 的所有样式定义在 src/smartbanner.scss 中采用 BEM 命名规范DOM 结构对应的类名如下类名对应元素默认样式smartbanner横幅容器顶部固定、宽 100%、高 84pxsmartbanner__iconApp 图标64×64px圆角 15pxsmartbanner__info标题/作者/价格区Flex 布局smartbanner__button下载按钮蓝色字、浅灰底smartbanner__exit关闭按钮纯 CSS 绘制的 ✕关键点横幅会根据用户设备平台自动挂载修饰符类名 —— iOS 设备得到smartbanner--iosAndroid 设备得到smartbanner--android。源码逻辑见 src/detector.js 与 src/smartbanner.js。内置两套风格差异明显iOS 风浅灰底#f3f3f3、蓝色按钮类似 App Store 风格Android 风深色底#3d3d3d 顶部绿色高光线、青色渐变按钮知道这两点后换肤就变成了「用更高优先级的 CSS 覆盖对应类」。2️⃣ SCSS 主题换肤最快方法三步覆盖核心变量第 1 步确定你要改哪个平台。只改 iOS 就选smartbanner--ios全平台统一样式见下文 custom-design-modifier。第 2 步按内置 SCSS 的变量表对照修改定义于src/smartbanner.scss顶部$light-grey: #f3f3f3; /* 背景色 */ $grey: #716F6F; /* 关闭按钮颜色 */ $blue: #1474fc; /* 按钮文字色 */第 3 步在页面引入你自己的 CSS放在 smartbanner 样式之后例如把 iOS 横幅按钮改成品牌绿.smartbanner--ios .smartbanner__button { background: #e8f6ef; color: #12b76a; font-size: 16px; } 小技巧若你希望完全接管横幅的定位比如改成吸顶 sticky可以加一个 meta 标签smartbanner:disable-positioning禁用内置定位然后在自己的 CSS 里自由布局。3️⃣ i18n 多语言配置一张 meta 标签速查表smartbanner.js 的设计哲学是「配置零代码」所有文案与链接都通过head中的 meta 标签传入由 src/optionparser.js 统一解析namesmartbanner:xxx自动转为驼峰配置项。多语言站点只需要按语言输出不同的 meta 内容即可meta 标签作用多语言示例smartbanner:title应用标题「智享阅读」「Smart Reader」smartbanner:author开发者署名公司/团队名smartbanner:price价格FREE/免费/¥6smartbanner:price-suffix-appleiOS 价格后缀- 在 App Store/- On the App Storesmartbanner:price-suffix-googleAndroid 价格后缀- 在 Google Playsmartbanner:button默认按钮文案VIEW/查看smartbanner:button-appleiOS 专用按钮Download on the App Storesmartbanner:button-googleAndroid 专用按钮Get it on Google Playsmartbanner:close-label关闭按钮无障碍文案关闭/Close配合两个「平台定向」标签可实现真正的国际化分发!-- 只在 iOS 和 Android 上显示横幅 -- meta namesmartbanner:enabled-platforms contentandroid,ios !-- 排除特定浏览器正则黑名单优先级最高 -- meta namesmartbanner:exclude-user-agent-regex content^.*My Webapp$优先级规则enabled-platforms最低exclude-user-agent-regex最高也可以同时提供白名单smartbanner:include-user-agent-regex。想彻底隐藏横幅时把enabled-platforms设为none即可。4️⃣ custom-design-modifier 实战一个类名两种玩法这是最被低估的定制点。通过一个 meta 标签可以在横幅容器上追加一个自定义类名smartbanner--你的值meta namesmartbanner:custom-design-modifier contentmysite玩法一接入全站主题外部样式接管容器类名变为smartbanner--mysite于是你可以写一份与平台无关的统一皮肤.smartbanner--mysite { background: linear-gradient(90deg, #667eea, #764ba2); } .smartbanner--mysite .smartbanner__info { color: #fff; }这样无论访客用 iPhone 还是 Pixel横幅都是同一个品牌配色彻底摆脱「两个平台两种脸」。玩法二强制统一平台风格如果不想另写样式只想让所有设备都用 iOS 浅色风meta namesmartbanner:custom-design-modifier contentios容器类名直接变成smartbanner--iosAndroid 用户也会看到与 iPhone 一致的设计。反过来填android同理。5️⃣ 进阶收尾关闭策略、事件与 API限时关闭smartbanner:hide-ttl毫秒控制关闭后多久重新出现如10000表示 10 秒后重现全站关闭smartbanner:hide-path设为/用户关闭一次后全站不再打扰事件系统横幅会派发smartbanner.init/smartbanner.view/smartbanner.clickout/smartbanner.exit四个事件方便埋点统计转化率事件测试见 test/spec/events_spec.jsAPI 手动模式设置smartbanner:api为yes后横幅不会自动渲染由你在合适的时机调用smartbanner.publish()插入 DOM适合「用户滚动到底部再弹」这类策略6️⃣ 总结三种定制方式怎么选需求推荐方案只改配色、字号、按钮风格直接覆盖smartbanner--ios / --android的 CSS多语言、多商店链接、差异化文案i18n meta 标签组合全平台统一品牌皮肤custom-design-modifier 自定义类名精细曝光时机api模式 smartbanner.publish()三种方式可以任意叠加。现在打开你的页面head加上几行 meta 标签一条完全符合品牌调性的 Smart App Banner 就上线了。【免费下载链接】smartbanner.jsCustomisable and lightweight smart app banner for iOS and Android项目地址: https://gitcode.com/gh_mirrors/smar/smartbanner.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考