博客園主題——Bili2.0來啦

以前製做的BiliBili的博客主題獲得了不少園友的確定，不過在代碼上存在混亂，而我這我的有嚴重的潔癖，因而又從新整理了一遍，而且在整理過程當中，產生了一些新的想法，因而就有了如今的這個版本，暫且叫Bili2.0吧~，一塊兒跟我來看看這款主題有哪些特點。javascript

php

主題特點

響應式佈局（自適應<360px、<767px的不一樣尺寸屏幕）。
首頁全屏背景logo，個性定製。
首頁公告消息。
首頁輪播，支持定義不一樣數量的banner。
頁腳返回頂部按鈕。
博客正文爲Github風格Markdown。
博客底部支持博主微信二維碼。
博客評論板塊調整爲發表評論在上，評論列表在下，且評論順序爲倒序，便於查看。
支持博客評論帶頭像。
博客正文導航目錄。
支持切換夜間模式，且自動提醒切換夜間模式。
支持導航欄擴展。
支持設置博客Tab圖標。
支持博客代碼塊複製。
博客正文功能微調：表格寬度自適應、連接新窗口打開。
支持在博客內部運行腳本（該功能不穩定）。
支持自定義Markdown語法（正在探索）
更多功能細節，使用後進一步瞭解。

css

主題截圖

html

適配方法

1.下載主題配置文件java

首先下載壓縮包，解壓後獲得下面幾個文件：git

js備份.js
頁面定製 CSS 代碼.css
博客側邊欄公告（支持HTML代碼）（支持 JS 代碼）.html
頁首 HTML 代碼.html
頁腳 HTML 代碼.html

五個文件中對應關係如上圖所示，其中js備份.js主要用於備份主題的功能函數腳本文件，以避免個人博客文件失效時，文件調用失敗。github

2.主題代碼配置web

打開博客園後臺，將博客皮膚設置爲Custom，將頁面定製CSS代碼.css文件中的代碼複製粘貼到後臺中對應的代碼框中。勾選下面的禁用默認模板CSS。將博客側邊欄公告（支持HTML代碼）（支持 JS 代碼）.html、以及頁腳 HTML 代碼.html文件中的對應代碼複製粘貼到對應框中。api

至此，你已經適配好了主題大部分，剩下一些用戶信息須要繼續根據我的需求修改。微信

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	- 修改主題一級文字顏色 <br/> - 新增板塊輪廓顏色<br/> - 修改全屏首頁顯示方式，僅博客首頁出現，其他界面隱藏	V2.0.2下載
2020.01.10	- 新增全局錨點連接平滑滾動動畫 <br/> - 新增`<textarea title="js"></textarea>`標籤包裹代碼方式運行js腳本	V2.0.4下載
2020.02.18	- 修改導航欄hover動畫<br/> - 修改代碼塊默認樣式僅爲暗色系 <br/> - 新增全局過渡動畫 <br/> - 新增自定義圖片配註釋語法`{img}(url)[imgtext]` <br/> - 修改博客正文文字分散對齊 <br/>- 修復iPad上頂部顯示bug </br> - 修復響應式佈局樣式<br/> - 修改導航目錄顯示場景及目錄按鈕樣式 <br/> - 新增多條通知滾動顯示功能(條數不限)	V2.0.6下載
2020.02.21	- 調整代碼塊字體 <br/>- 調整功能代碼加載方式，解決調用失敗問題<br/>- 修復LaTeX渲染錯誤問題<br/>- 修改評論區引用樣式<br/>- 修復通知數量爲1時滾動異常問題<br/>- 修復評論表情插件樣式	V2.0.7下載
2020.02.23	- 修復通知滾動效果<br/> - 修復首頁輪播圖片尺寸不固定問題，調整爲固定比例`7:3`，自動裁剪	V2.0.8下載
2020.02.28	- 調整板塊樣式<br/> - 合併移動端目錄按鈕和導航目錄函數 <br/> - 合併評論頭像和OwO表情插件<br/> - 修改代碼塊樣式 <br/> - 新增暗色樣式圖片亮度調節	下載V2.0.9
2020.03.10	- 主題代碼總體調整，實現方式升級詳情請看	下載V2.0.11

主題反饋與交流