博客园主题——Bili2.0

之前制作的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中，主要用于拓展功能的调用：

若不需要某个功能，用双斜杠//注释掉即可。其中首页轮播和导航栏扩展不限数量，可随意增减。

版本更新

主题反馈与交流