彰显个性│博客园的自定义主题
一、开放的博客园
在国内,开源社区有很多,比如:掘金、CSDN、51CTO、开源中国、InfoQ 等,但是可以自定义主题的却只有博客园一家
对于技术社区而言,能够自定义主题,方能展现程序员们自己的个性。将自己的主页做的好看不仅能够吸引更多的人关注,也能在另一方面让人家认可自己的技术
相对于其他平台每个用户点进去,单一乏味的主页界面,博客园可谓是百花齐放,涌现出来各种各样好看的界面,让人在学习知识的时候有更好的阅读体验
经过自己的摸索,终于将自己的博客园主页设置成了自己满意的样式,如下图所示:
该代码均已开源在 Github 上:
二、主题推荐
该项目是 esofar 大神开源的,我的主页就是根据这个项目进行修改的,该项目内其实就是将博客园的网页的首页源码拷贝下来,在本地启动预览后,然后通过修改本地的代码样式,在本地的网站调试成自己想要的样式后,将其中的 JS、CSS 进行编译打包,在博客园后台中设置即可
该大神怕大家不会部署,项目文档中的部署指南写的一清二楚:https://esofar.github.io/cnblogs-theme-silence/#/guide
部署该主题前,博客皮肤必须选择
Custom
这一款,因为该项目是根据这款皮肤进行修改的,而且必须先要在博客园的设置中申请 JS 权限才可以使用因为在网页中写 JS 是一件很危险的事情,很容易造成 XSS 攻击,所以需要提交申请,才可以使用 JS 权限,一般二十分钟内就可以通过申请
三、自定义主题配置 CSS
在 JS 权限申请通过后,我们就可以设置自定义主题了
当项目编译后,会在
dist
目录下生成 css 和 js 两个文件,我们只需要将这两个文件内容分别复制放到页面定制 CSS 代码和页脚 HTML 代码中即可在部署 CSS 代码时,一定要勾选模板默认的 CSS,这样系统就只会使用你复制的这段样式了
点击保存,刷新自己博客园首页,即可看到效果了
四、自定义主题配置 JS
当然配置 JS 也可以跟 CSS 一样,在页脚 HTML 代码中使用
<script>
标签进行包裹即可当然也可以将生成的 JS 文件托管到博客园的文件系统中,然后获取外链,直接引入也是可以的
其中
window.$silence
中可以进行页面的配置,包括配置主页头像、github 跳转链接、主题模式、页面图标等,可以参考上面提到的大神文档
五、页面加载 loading
如果想要在页面中添加 loading 效果
可以将以下代码粘贴到页首 HTML 代码中即可
六、页面看板
如果想要在页面的右下角添加页面看板功能的话
可以在页脚 HTML 导航中添加以下代码
七、动态背景
如果想要添加页面背景动画的话,这里的特效是线性粒子跟随鼠标
可以在页脚 HTML 导航中添加以下代码
版权声明: 本文为 InfoQ 作者【程序员亮仔】的原创文章。
原文链接:【http://xie.infoq.cn/article/5a49ec413f795ee78dcb5c5b2】。未经作者许可,禁止转载。
评论