作为一个搞CS的人,如果你只是想找个地方发博客,那么博客园还是个不错的平台。虽然现在的自建博客工具多的不得了,动态的有WordPress、Ghost,静态的有hexo、jekyll等等;虽然对于一个码农而言捣鼓这些东西也算不上太难,不过终归是要浪费时间的。所以本着一切从简的原则,我也很支持从博客园这样现成的平台上写博客。
博客园的优点很多,比如支持css、支持Markdown、支持页首html代码,也支持侧边栏JS代码。缺点当然也不少,后台界面样式古板,相对于自己建站能设置的选项还是太少,而且也不支持绑定自有域名。不过总体上来说,我还是非常喜欢博客园的,这也是我所使用的第一个技术博客平台。
使用博客园是为了从简,但是博客园提供的官方模板确实不够美观。作为一个码农,在这些模板上发表技术博客,显得low了一点,对不起自己的专业,所以这里我就介绍一下我折腾博客园美化的经历。如果你觉得我的博客园设置的还算美观,按照接下来的教程一步步来,就可以做出一样的效果。
我的博客园博客:https://www.cnblogs.com/yaoyaoliu/
首先进入博客园设置界面:
皮肤选择ThinkInside
,然后在下面的页面定制CSS代码
中输入如下的代码:
/*主页面样式*/ |
要特意说明一下,这个代码源自以下的博文:http://www.cnblogs.com/liyunhua/p/4558480.html
原博主的博客地址:http://www.cnblogs.com/wangqiguo/
其实我就是稍作修改,换了个字体,另外原作者标题有个动画,我个人不太喜欢就去掉了。
而且我发现居然有人对这篇文章点反对,我已经更新了css代码,把反对按钮也去掉了。
如果不喜欢我的修改,你们也可以参考文章中用原来的模板。
因为我在css中使用了Ubuntu
这个字体,需要从Google fonts加载,所以需要在页首Html代码
中添加:
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> |
如果想换用其他字体,直接通过Google fonts生成html代码就可以了。
计数器是在这家网站搞定的:https://clustrmaps.com/
先注册个账号,然后填入链接生成项目就行。
然后点击Customize
,进行如下设置:
因为需要和侧边栏背景融为一体,海洋颜色要选成#f5f5f5
,陆地颜色、文字颜色随你选就可以,也可以参考我的设置,宽度我设置的是170,然后要选Image based
。我在博客园上申请了JS权限,JS版还是不能正常加载,索性就用图片版了,复制右边的代码,设置一个div,然后添加到博客园博客侧边栏公告
里面就可以了:
代码如下:
<div id="counter"> |
注意<div id="counter"> </div>
之间的部分要换成你生成的代码,不然你就把我的计数器加进去了。其他文字部分也可以做对应修改。
页脚Html
的设置可以参考如下代码:
<div id="my_footer"> |
同样的,文字部分可以根据个人需求进行修改。
到此为止就全部设置完毕了,如果喜欢这篇文章你可以自由地分享,同时也感谢该模板原作者。