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	博客滾動通知	{enable:...,data:[...,...,...] }	可選擇是否開啟，定義多個通知
banner	博客輪播	{enable:...,data:{{url:,img:,title},...}	可選擇是否開啟，定義多個輪播項目
nav	博客導航欄擴展	{enable:...,data:{{id:,url:,title:},...}}	可選擇是否開啟，定義多個
post	博客博文相關功能	true	可選擇是否開啟
sidebarContent	博客導航目錄	true	可選擇是否開啟
hideSidebar	側邊欄隱藏	true	可選擇是否開啟
themeInfo	頁腳主題信息		可忽略此選項，無需修改。