Bili主题V2.0.11说明文档
Bili主题V2.0.11相对于过去的几个版本,有了很大的变化,主要体现在界面布局,以及自定义功能的实现方式上。本人一直以来制作博客园主题的宗旨就是:尽可能还原博客园自身的特色的同时,实现主题的个性化定制。本着这条宗旨,我也一直在探索前端的一些知识(我也是个小白,我只会拼凑代码!),加上自己又是个强迫症,不达目的不罢休,于是才有了V2.0.11。因为疫情的限制,没有电脑,所以整个主题制作过程都是由手机完成的,做完之后我自己也震惊了,原来手机也可以很顺利!好了,废话少说,下面来介绍V2.0.11的新特性。
主题新特性
- 适配移动端和PC端,实现响应式布局。这里主要修复了iPad等中间屏幕尺寸的设备显示bug。
- 移除头部背景,感觉头部用处不大,影响整体的阅读,因此去除了该特性
- 调整公告个人信息样式
- 侧边栏相关排列样式修改
- 新增正在加载loading界面
- 新增评论表情包"狗头"
- 移动端隐藏侧边栏
- 评论区布局修改
- 新增相关博文,相关博文能够给阅读增加新的信息,因此还原了该界面
下载
适配
适配步骤
1.设置主题为Custom,并禁用默认CSS代码
2.确认是否开通js权限,没有的话去申请,主题适配需要js
3.将博客园后台里四个输入框按照文件名对应输入
4.个性化定制
定制代码适配说明
<script> $.gshang({ favicon:"https://pic.cnblogs.com/avatar/1489774/20190708183140.png", news:{ enable:true, data:[ '博客园支持Markdown评论了!主题已经抢先修复样式', '<a href="https://www.cnblogs.com/gshang/p/biliTheme.html#scroller-3">主题已经升级至V2.0.9,点击查看</a>', '武汉加油 🇨🇳 中国加油!', '<a href="https://epi.starsee.cn/">全国疫情趋势AI预测</a>', '<a href="https://j-x.gitee.io/home/yiqing/covid-19">武汉光谷周边小区疫情地图</a>', ] }, banner:{ enable:true, data:[ { url: "https://www.cnblogs.com/gshang/p/12318492.html", img: "https://images.cnblogs.com/cnblogs_com/gshang/1609278/o_200216143950Wuhan.jpg", title: "武汉加油!" }, { url: "https://news.ifeng.com/c/special/7tPlDSzDgVk", img: "https://x0.ifengimg.com/ucms/2020_07/7C3B11DC8FF81E8DE68FD4A610F6CB12A0D04ED6_w1125_h483.png", title: "疫情实时动态" }, { url:"https://www.cnblogs.com/gshang/p/biliTheme.html", img:"https://img2018.cnblogs.com/blog/1489774/202001/1489774-20200104194952221-337450693.png", title:"博客主题——Bili2.0" }, { url: "https://www.cnblogs.com/gshang/p/tools.html", img: "https://www.kanjiantu.com/images/2019/07/05/post169393a677253c679.png", title: "实用工具分享" }, { url: "https://www.cnblogs.com/gshang/p/movie.html", img: "https://www.kanjiantu.com/images/2019/07/05/post4242f1ce89576c2f3.png", title: "动画电影分享" }, { url: "https://www.cnblogs.com/gshang/p/11185613.html", img: "https://img2018.cnblogs.com/blog/1489774/201909/1489774-20190923190114426-2061049622.png", title: "VIP视频解析" }, { url: "https://www.cnblogs.com/gshang/p/11135154.html", img: "https://www.kanjiantu.com/images/2019/07/05/post2b40b83305f79d463.png", title: "常用网站集合" } ] }, nav:{ enable:true, data: [{ id: "blog_nav_cnblogs", url: "https://home.cnblogs.com", title: "园子" }, { id: "blog_nav_maintain", url: "https://www.cnblogs.com/gshang/p/11149316.html", title: "维护" }, { id: "blog_nav_frieds", url: "https://www.cnblogs.com/gshang/p/11149804.html", title: "友链" }, { id: "blog_nav_theme", url: "javascript:changeTheme()", title: "夜间模式" } ] }, post:{ blankTarget:true, tableScroll:true, copyCode:true, myMarkdown:true }, sidebarContent:true, hideSidebar:true, themeInfo:{ version:"V2.0.12", page:"", author:"GShang" } }); </script>
参数 | 参数说明 | 参数默认值 | 备注 |
---|---|---|---|
favicon | 博客网站图标 | ……/xxx.jpg | |
news | 博客滚动通知 | 可选择是否开启,定义多个通知 | |
banner | 博客轮播 | {enable:...,data:{{url:,img:,title},...} | 可选择是否开启,定义多个轮播项目 |
nav | 博客导航栏扩展 | {enable:...,data:{{id:,url:,title:},...}} | 可选择是否开启,定义多个 |
post | 博客博文相关功能 | true | 可选择是否开启 |
sidebarContent | 博客导航目录 | true | 可选择是否开启 |
hideSidebar | 侧边栏隐藏 | true | 可选择是否开启 |
themeInfo | 页脚主题信息 | 可忽略此选项,无需修改。 |
- 本文链接: https://www.cnblogs.com/gshang/p/Bili-V_2-0-11.html
- 版权声明: 本博客所有文章除特别声明外,均采用 CC-BY-NC-SA 4.0 许可协议。转载请注明出处!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步