今天给大家分享一下给B2主题增加首页公告条的教程。
首先，我们复制下载的代码，复制粘贴到B2主题的“头部HTML标签”里面：
- <link rel=“stylesheet” href=“//at.alicdn.com/t/font_2467114_k22t1d65q9r.css”>
- <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“anonymous”>
- <script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js” integrity=“sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4” crossorigin=“anonymous”></script>
第二步：在“B2主题设置-模块管理-首页”里面，新增一个模块，模块类型选择“自定义”
第三步：将以下代码复制粘贴到“自定义”模块里面，粘贴完保存即可
- <div class=“alert alert-warning alert-dismissible fade show” role=“alert”>
- <strong><span class=“badge bg-danger”>
- Hello,宝贝<sup aria-hidden=“true” class=“spinner-grow spinner-grow-sm ml-1 small” role=“status” style=“ width: .5rem; height: .5rem; “></sup></strong> 可汗网为回馈广大新老用户，即日起至5月31日，终身会员限时特价19.9元，全站资源免费下载。 <a class=“badge bg-warning text-dark” href=“https://www.kehan.cc/vips” rel=“nofollow noopener noreferrer” target=“_blank”>
- 点击开通会员
- </a>
- <button type=“button” class=“btn-close” data-bs-dismiss=“alert” aria-label=“Close”></button>
- </div>
如果你想自定义颜色、样式，请参考这个网址：https://v5.bootcss.com/docs/components/alerts/
文字部分改成你自己的，改完后保存，在首页即可看到效果。
PC端效果
移动端效果
高端用法：我们可以用同样的方法，在小工具、页面广告中添加如上代码，比如添加到文章页效果如下
更新记录
- 修复关闭按钮异常的问题（2021-05-28）
- 公告条添加关闭按钮（2021-05-24）
- 增加该样式的高端用法（2021-05-24）
- 添加自定义样式的说明（2021-05-23）
