之前制作的BiliBili的博客主題得到了很多園友的肯定，不過在代碼上存在混亂，而我這個人有嚴重的潔癖，於是又重新整理了一遍，並且在整理過程中，產生了一些新的想法，於是就有了現在的這個版本，暫且叫
Bili2.0吧~，一起跟我來看看這款主題有哪些特色。
主題特色
- 響應式布局（自適應<360px、<767px的不同尺寸屏幕）。
- 首頁全屏背景logo，個性定制。
- 首頁公告消息。
- 首頁輪播，支持定義不同數量的banner。
- 頁腳返回頂部按鈕。
- 博客正文為Github風格Markdown。
- 博客底部支持博主微信二維碼。
- 博客評論板塊調整為發表評論在上，評論列表在下，且評論順序為倒序，便於查看。
- 支持博客評論帶頭像。
- 博客正文導航目錄。
- 支持切換夜間模式，且自動提醒切換夜間模式。
- 支持導航欄擴展。
- 支持設置博客Tab圖標。
- 支持博客代碼塊復制。
- 博客正文功能微調：表格寬度自適應、鏈接新窗口打開。
- 支持在博客內部運行腳本（該功能不穩定）。
- 支持自定義Markdown語法（正在探索）
- 更多功能細節，使用后進一步了解。
主題截圖
適配方法
1.下載主題配置文件
首先下載壓縮包，解壓后得到下面幾個文件：
- js備份.js
- 頁面定制 CSS 代碼.css
- 博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）.html
- 頁首 HTML 代碼.html
- 頁腳 HTML 代碼.html
五個文件中對應關系如上圖所示，其中js備份.js主要用於備份主題的功能函數腳本文件，以免我的博客文件失效時，文件調用失敗。
2.主題代碼配置
打開博客園后台，將博客皮膚設置為Custom，將頁面定制CSS代碼.css文件中的代碼復制粘貼到后台中對應的代碼框中。勾選下面的禁用默認模板CSS。將博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）.html、以及頁腳 HTML 代碼.html文件中的對應代碼復制粘貼到對應框中。
至此，你已經適配好了主題大部分，剩下一些用戶信息需要繼續根據個人需求修改。
4.個性化修改
在頁面定制CSS代碼.css文件中，用於個性化配置的代碼為如下部分：
/* 設置全局變量 */
@media screen and (min-width:0px) {
:root {
/* 主題色 */
/*--ThemeColor: #00a1d6;*/
--ThemeColor: #c7443e;
/*中國紅 */
/* 字體色 */
--TextColor1: #4d4d4d;
--TextColor2: #5f5f6b;
--TextColor3: #97979f;
/* 分割線色 */
--DividColor: #e7eaf0;
--BlockColor: #fff;
/* 板塊色 */
--BackgroundColor: #f4f6fa;
/* 輔助色 */
--AidColor1: #fa7d00;
--AidColor2: #ff2e2e;
--AidColor3: #36c67d;
/* 字體級別 */
--text1: 28px;
--text2: 26px;
--text3: 24px;
--text4: 22px;
--text5: 20px;
--text6: 18px;
--textNoraml: 16px;
/* 背景圖 */
--BackgroundImg: url("https://images.cnblogs.com/cnblogs_com/gshang/1453531/o_1912310917011.png");
/*--BackgroundImg: url("https://api.dujin.org/bing/1920.php");*/
--BackgroundImg2: url("https://img2018.cnblogs.com/blog/1489774/201912/1489774-20191228125539538-625693297.jpg");
--Avatar: url("https://img2018.cnblogs.com/blog/1489774/201912/1489774-20191227184718385-1756034612.jpg");
/* 背景圖透明層 */
--ImgShadow: rgba(0, 0, 0, 0.29);
--screen: 100vh;
--screen1: 40vh;
/* 微信二維碼 */
--WeChat: url(https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191015183429352-318054137.jpg);
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
}
這里面包含了主題的字體大小級別，主題顏色，背景圖片等資源，根據需求修改即可。
在博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）.html中，主要用於拓展功能的調用：
<script type="text/javascript" defer="defer">
// 設置公告
var news = '博客園主題Bili2.0發布啦，<a href="https://www.cnblogs.com/gshang/p/12150369.html">快來看看(點擊查看)</a>';
// 設置博客信息
var myprofile = [{
blogName: "GShang",
blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
blogSign: "Stay hungry,Stay foolish.",
blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
QQ: "1220949046",
Github: "https://github.com/GShang2018",
WeChat: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
}];
// 設置首頁輪播
var mybanner = [
{
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: "常用網站集合"
},
];
// 設置導航欄擴展
var mynav = [{
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: "切換主題"
}
];
loadNewsinfo(news); //公告
setFavio(myprofile); // 網頁tab圖像
loadThemeColor(); //導入主題顏色
extendNav(mynav); // 導航欄擴展
loadBanner(mybanner); //首頁輪播
setPostSideBar(); //側邊欄目錄
loadMobileContent(); //移動端目錄功能欄
blankTarget(); //文章鏈接新窗口打開
copyCode(); //代碼塊復制
tableScorll(); //表格滾動
mymd(); //自定義語法
ninghtTip(); //夜間模式提醒
owoEmoji(); //owo表情插件
myscroll();
</script>
若不需要某個功能，用雙斜杠//注釋掉即可。其中首頁輪播和導航欄擴展不限數量，可隨意增減。
版本更新
| 更新時間 | 更新內容 | 下載鏈接 |
|---|---|---|
| 2020.01.04 | 2.0版本正式上線 | V2.0.0下載 |
| 2020.01.06 | - 新增oWo表情包插件(B站小黃臉，貼吧) | V2.0.1下載 |
| 2020.01.08 | - 修改主題一級文字顏色 - 新增板塊輪廓顏色 - 修改全屏首頁顯示方式，僅博客首頁出現，其余界面隱藏 |
V2.0.2下載 |
| 2020.01.10 | - 新增全局錨點鏈接平滑滾動動畫 - 新增 <textarea title="js"></textarea>標簽包裹代碼方式運行js腳本 |
V2.0.4下載 |
| 2020.02.18 | - 修改導航欄hover動畫 - 修改代碼塊默認樣式僅為暗色系 - 新增全局過渡動畫 - 新增自定義圖片配注釋語法 {img}(url)[imgtext] - 修改博客正文文字分散對齊 - 修復iPad上頂部顯示bug - 修復響應式布局樣式 - 修改導航目錄顯示場景及目錄按鈕樣式 - 新增多條通知滾動顯示功能(條數不限) |
V2.0.6下載 |
| 2020.02.21 | - 調整代碼塊字體 - 調整功能代碼加載方式，解決調用失敗問題 - 修復LaTeX渲染錯誤問題 - 修改評論區引用樣式 - 修復通知數量為1時滾動異常問題 - 修復評論表情插件樣式 |
V2.0.7下載 |
| 2020.02.23 | - 修復通知滾動效果 - 修復首頁輪播圖片尺寸不固定問題，調整為固定比例 7:3，自動裁剪 |
V2.0.8下載 |
| 2020.02.28 | - 調整板塊樣式 - 合並移動端目錄按鈕和導航目錄函數 - 合並評論頭像和OwO表情插件 - 修改代碼塊樣式 - 新增暗色樣式圖片亮度調節 |
下載V2.0.9 |
| 2020.03.10 | - 主題代碼整體調整，實現方式升級 詳情請看 | 下載V2.0.11 |
主題反饋與交流
QQ群: 1044972482