最后,我选择了博客园

这是一个最帅的网站,也是一个最low的网站;

这是一个机智的网站,也是一个愚蠢的网站;

这是一篇记录我为什么选择了博客园并如何调♂教她的文章。看完这篇文章你可以收获什么?你会再也不想写CSS!

前言

最近想找个地方整理一些自己的想法,研究了一些热门站点,

CSDN

和大多数人一样,CSDN是我从小白到入门最常逛的网站,两年前曾在CSDN上持续记过100多篇的leetcode解题思路,坚持了大概1年吧。记得当时参加网易的笔试,考完后把算法题的解析往博客上一贴,几个小时就达到了1w+的访问量,这是第一次亲身体验什么叫“蹭热点”(笑)。后来由于校招结束,算法题也就没再刷了。现在再去看看自己的博客,看看CSDN,感觉CSDN现在的广告与抄袭还是有点多...

掘金 && 思否

掘金是最近两年火起来的网站吧,个人感觉掘金的markdown编辑器是众多博客网站中最好用的,文章排版也好看,掘金上最多的还是前端开发相关。而思否作为一个国内版的stackoverflow,像我这种面向stackoverflow编程的选手对它的好感度是直接拉满啊,感觉这两个网站差不多,都作为备选。

知乎

知乎上写文章倒是中规中矩吧,专栏的访问量与我当时在CSDN上访问量增长速度差不多。最难受的一点就是,知乎的markdown编辑器太太太难用了!

自建网站

有人说你这么挑干脆自己搞一个网站吧,确实我有搞过,不信你可以访问下我的个人网站。部署过Hexo,感觉发一篇文章太麻烦了,Gayhub Page访问太慢。最后自己买了个阿里云服务器,又在Gayhub上找个了开源的基于SpringBoot的博客系统tale,吭哧吭哧的就开搞了,虽然现在一直在服务器上跑着,访问者寥寥无几。

最后选择了博客园

还记得第一次打开博客园首页的时候,这90年代的网站吧,这么low,直接秒关。后来看一些博客的时候,嗯?这些博客好炫啊,怎么都是cnblogs开头的。

真香,自定义CSS天下第一。

综合来说,博客园支持markdown(虽然每次我都是用神器typora写好然后copy上去),也愿意被当成一个图床,SEO也还行,又是一个大牛云集十分专业的网站,非常赞的一点就是,广告居然可以直接通过自定义CSS给隐藏掉,我和我的小伙伴都惊呆了,博客园不会突然有一天没钱倒闭了吧?

虽然最后在好马也吃回头草的心理下选择了博客园,但是调♂教是必不可少的(主要还是改的多,怕忘记?)。

主题选择

在博客园后台的设置->博客皮肤中可以进行主题的选择。

亲,这里推荐你这四款皮肤哦:

1519375-20190526175639633-514098938.png

这几款皮肤除了IMetro,都比较符合我的审美。但是我曾有幸见识过某位二次元大佬将IMetro这个主题改的“面目全非”,不过一时找不到它的站点了(逃)。

根据个人博客主题的不同,页面定制的CSS代码也不一样。大家可以直接搜索"博客园美化",有很多超炫调教。

这里呢我自己选择了darkgreentrip。给大家看看对比图:

左侧公告栏(我不是给自己打广告)

1519375-20190526175656283-801677659.png

导航栏

1519375-20190526175716576-1311050411.png

目录

1519375-20190526175733849-690720312.png

引用

博客园默认的引用样式很僵,直接采用大众接受的这种风格:

1519375-20190526175748893-1349471956.png

代码块

采用sublime主题:

1519375-20190526175801622-1152482295.png

评论区

1519375-20190526175815194-322832603.png

1519375-20190526175823418-637521384.png

定制CSS

博客园的CSS定制功能其实就是你自定义一个同名样式去顶掉当前博客使用的样式。各个模板由于样式不同会有一定的区别,但整个html树都是一致的。需要我们会用F12去调试。

不得不说,博客园的这个CSS定制功能真是太棒了。

比如将博客园的引用改为通用markdown的引用效果,则在页面定制CSS代码中输入:

.postBody blockquote{
  border: none;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  /*隐去默认的引号图片*/
  background: none;    
  /*覆盖默认90%*/
  width: 100%; 
}

通过border-left在左边画一条灰色的线即可。

代码块功能采用sublime样式,这里需要去highlight.js官网下载相关CSS样式,国内访问+下载比较慢。因此呢我把它放在gayhub上,打个广告,大家需要获取这个代码块样式的可以关注我的公众号:Plus技术栈,回复博客园获取。

如图,我们只需要这个文件(当然其他的风格大家可以自己试试)。

1519375-20190526175842675-1722161011.png

我们将里面的样式全部导入到博客园中,但是注意一定要在第一行的.hljs前面加上.cnblogs-markdown,不然样式会失效。例如我的(也放在了gayhub上):

1519375-20190526175852638-32208867.png

最后,最最有意思的是,我通过修改广告的CSS样式,真的让整个博客没有广告了。

这是正常的:

1519375-20190526175904098-1307820004.png

这是我的:

1519375-20190526175914962-876608239.png

手动点个赞?。

最后

其实整个页面元素很多,包括页首的漂浮着的github飘带,页脚的求关注等等样式我还没加,尤其针对我这种青铜级别的CSS水平,整个修改花了巨长的时间,所以文末再次向各位读者朋友求个关注(下次我再更新下超强编辑器VIM的魔改)。关注公众号Plus技术栈,回复博客园获取整个页面的样式代码。

转载于:https://www.cnblogs.com/9plus/p/10926842.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值