使用博客园的第一件事 - 自定义主题

摘要：讲述了IT博客平台对比；博客园入坑设置以及自定义主题推荐（含教程），包括主题、动态背景和看板娘。

一、为什么使用博客园

可以写博文的平台有很多，比如博客园、CSDN、简书、知乎、微博、豆瓣...

可自己搭建的免费开源博客程序也很多，比如：wordpress、typecho、halo...

IT爱好者们更倾向于博客园、CSDN或自建网站。自建网站除了要花费搭建网站的时间、精力、金钱外，真正用来写博客时还需要解决搜索引擎SEO问题，否则没人看得到你的博客。

我之前使用的是CSDN【我的CSDN】，可能是以前遇到问题搜索时前排清一色的CSDN吧，入坑后发现写博客时的Markdown编辑器也很棒，就用了一段时间。但是也发现CSDN存在很多问题，而且越做越差，网上声讨声不断。比如平台广告过多、弹窗要求登录、下载资源还要付费等；从博客内容上来说，遍地盗版、水文，少见干货，可取的地方可能只剩大家解决bug的经验分享了吧。

最后的选择就是博客园了，博客园给用户的第一感受就是：这个页面看起来是真的老！但是，虽不知道博客园是什么时候开始开放html、css、js给用户使用的，但最近看到越来越多漂亮的博客园博客，这让我决定开始去了解，然后就是掌握、入坑。

二、自定义博客园主题

博客园允许在用户的页面运行用户的html、css、js代码，这意味着一千个人笔下就有一千个博客园！一句简单的代码就足以让前端页面发生翻天覆地地变化！

在开始推荐主题之前，我说一些设置问题：

①申请开通博客后可以尽早在设置中申请js代码权限；

②博客园把作品分为“随笔”和“文章”，平时写的文章都发随笔即可。

文章默认不显示在主页，在选项中勾选“允许‘文章’显示在首页及RSS中”虽然可以让文章显示在主页，但是他人查看时需要登陆，限制了内容的分享。网上流传文章比博客高大上，是精华什么的，同时又说文章用于转载，自相矛盾。文章可能是偏私有的东西，虽然我还没彻底弄清文章和随笔的区别，但反对文章更高大上地说法。博客园首页推的也都是新闻和随笔，总之大家忽略“文章”的存在，记住随笔=博文就行了。

以下是主题推荐

2.1 主题推荐：cnblogs-theme-silence

>>GitHub项目地址<<

可以在其 [文档] 中找到部署方法和参数设置。

相信部署了这个主题后，你对博客园的设置有了一定的了解。接着是博客园或自建网站都能用到的模块推荐。

2.2 模块推荐：Live2D Widget看板娘

>>GitHub项目地址<<

如果自建网站需要在右下脚显示的话，可以用我的：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

<script src="https://live2d-widget-right.oss-cn-hangzhou.aliyuncs.com/autoload.js"></script>

设置默认看板娘 ：

看板娘模型有很多个

查看 https://github.com/stevenjoezhang/live2d-widget/blob/master/waifu-tips.js 的164行可以发现，打开网页出现哪个看板娘是确定的，就是上次出现的那个，如果首次打开，那默认modelId是0

但是总有一种每次打开都是随机看板娘的错觉，不知道为什么

以下的方法能确保每次打开页面都是固定的看板娘

// 在导入font-awesome.min.css、autoload.js之前加一句
<img src=1 onerror="localStorage.setItem('modelId','0')" style="display: none;">

2.3 模块推荐：动态背景

作者：https://www.cnblogs.com/jingmoxukong/p/7826982.html

使用：

<!-- 背景动画 -->

<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>

我改版了一下，让经过鼠标的圆点不会被束缚在一个圆内，并降低了页面内的圆点数，详情可以看js内的注释

<!-- 动态背景  阿里云 -->

<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

<script src="https://live2d-widget-right.oss-cn-hangzhou.aliyuncs.com/canvas-nest.min.js"></script>