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 页脚主题信息 可忽略此选项,无需修改。
posted @   GShang  阅读(2884)  评论(37编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示