博客园主题——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

主题反馈与交流