博客园主题——Bili2.0来啦
之前制作的BiliBili的博客主题得到了很多园友的肯定，不过在代码上存在混乱，而我这个人有严重的洁癖，于是又重新整理了一遍，并且在整理过程中，产生了一些新的想法，于是就有了现在的这个版本，暂且叫
Bili2.0吧~，一起跟我来看看这款主题有哪些特色。
一、主题特色
- 响应式布局（自适应<360px、<767px的不同尺寸屏幕）。
- 首页全屏背景logo，个性定制。
- 首页公告消息。
- 首页轮播，支持定义不同数量的banner。
- 页脚返回顶部按钮。
- 博客正文为Github风格Markdown。
- 博客底部支持博主微信二维码。
- 博客评论板块调整为发表评论在上，评论列表在下，且评论顺序为倒序，便于查看。
- 支持博客评论带头像。
- 博客正文导航目录。
- 支持切换夜间模式，且自动提醒切换夜间模式。
- 支持导航栏扩展。
- 支持设置博客Tab图标。
- 支持博客代码块复制。
- 博客正文功能微调：表格宽度自适应、链接新窗口打开。
- 支持在博客内部运行脚本（该功能不稳定）。
- 支持自定义Markdown语法（正在探索）
- 更多功能细节，使用后进一步了解。
二、主题截图
三、适配方法
3.1下载主题配置文件
首先下载压缩包，解压后得到下面几个文件：
- js备份.js
- 页面定制 CSS 代码.css
- 博客侧边栏公告（支持HTML代码） （支持 JS 代码）.html
- 页首 HTML 代码.html
- 页脚 HTML 代码.html
五个文件中对应关系如上图所示，其中js备份.js主要用于备份主题的功能函数脚本文件，以免我的博客文件失效时，文件调用失败。
3.2 主题代码配置
打开博客园后台，将博客皮肤设置为Custom，将页面定制CSS代码.css文件中的代码复制粘贴到后台中对应的代码框中。勾选下面的禁用默认模板CSS。将博客侧边栏公告（支持HTML代码） （支持 JS 代码）.html、以及页脚 HTML 代码.html文件中的对应代码复制粘贴到对应框中。
至此，你已经适配好了主题大部分，剩下一些用户信息需要继续根据个人需求修改。
3.3 个性化修改
在页面定制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
