Bili主题V2.0.11说明文档

作者：GShang

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。

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	博客滚动通知	{enable:...,data:[...,...,...] }	可选择是否开启，定义多个通知
banner	博客轮播	{enable:...,data:{{url:,img:,title},...}	可选择是否开启，定义多个轮播项目
nav	博客导航栏扩展	{enable:...,data:{{id:,url:,title:},...}}	可选择是否开启，定义多个
post	博客博文相关功能	true	可选择是否开启
sidebarContent	博客导航目录	true	可选择是否开启
hideSidebar	侧边栏隐藏	true	可选择是否开启
themeInfo	页脚主题信息		可忽略此选项，无需修改。