这是一个最帅的网站,也是一个最low的网站;css
这是一个机智的网站,也是一个愚蠢的网站;html
这是一篇记录我为何选择了博客园并如何调♂教她的文章。看完这篇文章你能够收获什么?你会不再想写CSS!前端
最近想找个地方整理一些本身的想法,研究了一些热门站点,git
CSDNgithub
和大多数人同样,CSDN是我从小白到入门最常逛的网站,两年前曾在CSDN上持续记过100多篇的leetcode解题思路,坚持了大概1年吧。记得当时参加网易的笔试,考完后把算法题的解析往博客上一贴,几个小时就达到了1w+的访问量,这是第一次亲身体验什么叫“蹭热点”(笑)。后来因为校招结束,算法题也就没再刷了。如今再去看看本身的博客,看看CSDN,感受CSDN如今的广告与抄袭仍是有点多...算法
掘金 && 思否编程
掘金是最近两年火起来的网站吧,我的感受掘金的markdown编辑器是众多博客网站中最好用的,文章排版也好看,掘金上最多的仍是前端开发相关。而思否做为一个国内版的stackoverflow,像我这种面向stackoverflow编程的选手对它的好感度是直接拉满啊,感受这两个网站差很少,都做为备选。服务器
知乎markdown
知乎上写文章却是中规中矩吧,专栏的访问量与我当时在CSDN上访问量增加速度差很少。最难受的一点就是,知乎的markdown编辑器太太太难用了!编辑器
自建网站
有人说你这么挑干脆本身搞一个网站吧,确实我有搞过,不信你能够访问下个人我的网站。部署过Hexo,感受发一篇文章太麻烦了,Gayhub Page访问太慢。最后本身买了个阿里云服务器,又在Gayhub上找个了开源的基于SpringBoot的博客系统tale,吭哧吭哧的就开搞了,虽然如今一直在服务器上跑着,访问者寥寥无几。
最后选择了博客园。
还记得第一次打开博客园首页的时候,这90年代的网站吧,这么low,直接秒关。后来看一些博客的时候,嗯?这些博客好炫啊,怎么都是cnblogs开头的。
真香,自定义CSS天下第一。
综合来讲,博客园支持markdown(虽然每次我都是用神器typora写好而后copy上去),也愿意被当成一个图床,SEO也还行,又是一个大牛云集十分专业的网站,很是赞的一点就是,广告竟然能够直接经过自定义CSS给隐藏掉,我和个人小伙伴都惊呆了,博客园不会忽然有一天没钱倒闭了吧?
虽然最后在好马也吃回头草的心理下选择了博客园,可是调♂教是必不可少的(主要仍是改的多,怕忘记😄)。
在博客园后台的设置->博客皮肤中能够进行主题的选择。
亲,这里推荐你这四款皮肤哦:
这几款皮肤除了IMetro,都比较符合个人审美。可是我曾有幸见识过某位二次元大佬将IMetro这个主题改的“面目全非”,不过一时找不到它的站点了(逃)。
根据我的博客主题的不一样,页面定制的CSS代码也不同。你们能够直接搜索"博客园美化",有不少超炫调教。
这里呢我本身选择了darkgreentrip。给你们看看对比图:
左侧公告栏(我不是给本身打广告)
导航栏
目录
引用
博客园默认的引用样式很僵,直接采用大众接受的这种风格:
代码块
采用sublime主题:
评论区
博客园的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技术栈,回复博客园
获取。
如图,咱们只须要这个文件(固然其余的风格你们能够本身试试)。
咱们将里面的样式所有导入到博客园中,可是注意必定要在第一行的.hljs
前面加上.cnblogs-markdown
,否则样式会失效。例如个人(也放在了gayhub上):
最后,最最有意思的是,我经过修改广告的CSS样式,真的让整个博客没有广告了。
这是正常的:
这是个人:
手动点个赞👍。
其实整个页面元素不少,包括页首的漂浮着的github飘带,页脚的求关注等等样式我还没加,尤为针对我这种青铜级别的CSS水平,整个修改花了巨长的时间,因此文末再次向各位读者朋友求个关注(下次我再更新下超强编辑器VIM的魔改)。关注公众号Plus技术栈,回复博客园
获取整个页面的样式代码。