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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gshang/p/biliTheme.html