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

摘要:讲述了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>



posted @ 2020-12-07 09:55  云牧青  阅读(2818)  评论(5编辑  收藏  举报