谈谈个人网站的建立（七）—— 那些建站必备的插件

欢迎访问我的网站[http://www.wenzhihuai.com/](http://www.wenzhihuai.com/) 。感谢，如果可以，希望能在GitHub上给个star，GitHub地址[https://github.com/Zephery/newblog](https://github.com/Zephery/newblog) 。 建站的一开始，我也想自己全部实现，各种布局，各种炫丽的效果，想做点能让大家佩服的UI出来，但是，事实上，自己作为专注Java的程序员，前端的东西一碰脑子就有“我又不是前端，浪费时间在这合适么？”这种想法，捣鼓来捣鼓去，做出的东西实在是没法看，我就觉得，如果自己的“产品”连自己都看不下去了，那还好意思给别人看？特别是留言板那块，初版的页面简直low的要死。所以，还是踏踏实实的“站在巨人的肩膀上”吧，改用别人的插件。但不要纯粹的使用别人的博客模板了，如hexo，wordpress这些，就算是自己拼凑过来的也比这些强。下面是本博客中所用到的插件，给大家介绍介绍，共同学习学习。 本站主要用到的插件有： 1.wowslider 2.畅言 3.Editor.md 4.highchart、echart 5.百度分享 6.waterfall.js 7.心知天气 8.标签云 ## wowslider 可能是我这网站中最炫的东西了，图片能够自动像幻灯片一样自动滚动，让网站的首页一看起来就高大上，简直就是建站必备的东西，而且安装也及其简单，有兴趣可以点击[官网](http://wowslider.com/)看看。GitHub里也开放了[源代码](https://github.com/WOWSlider/WOWSlider)。安装过程：自己选择“幻灯片”切换效果，保存为html就行了，WORDPREESS中好像有集成这个插件的，做的还更好。感兴趣可以点击[我的博客首页](http://www.wenzhihuai.com)看一看。 <div align="center">  </div> **不过还有个值得注意的问题，就是wowslider里面带有一个googleapis的服务，即https://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic,latin-ext，由于一般用户不能访问谷歌，会导致网页加载速度及其缓慢，所以，去掉为妙** ## 畅言 作为社交评论的工具，虽然说表示还是想念以前的多说，但是畅言现在做得还是好了，有评论审核，评论导出导入等功能，如果浏览量大的话，还能提供广告服务，让站长也能拿到一丢丢的广告费。本博客中使用了畅言的基本评论、获取某篇文章评论数的功能。可以到我这里[留言](http://www.wenzhihuai.com/board.html)哈 <div align="center">  </div> ## Editor.md 一款能将markdown解析为html的插件，国人的作品，博客的文章编辑器一开始想使用的是markdown，想法是：写文章、保存数据库都是markdown格式的，保存在数据库中，读取时有需要解析markdown，这个过程是有点耗时的，但是相比把html式的网页保存在数据库中友好点吧，因为如果一篇文章比较长的话，转成html的格式，光是大小估计也得超过几十kb？所以，还是本人选择的是一切都用源markdown。 [editor.md](https://github.com/pandao/editor.md)，是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。页面看起来还是美观的，相比WORDPRESS的那些牛逼插件还差那么一点点，不过从普通人的眼光来看，应该是可以的了。此处，我用它作为解析网页的利器，还有就是后台编辑也是用的这个。 <div align="center">  </div> 代码样式，这一点是不如WORDPRESS的插件了，不过已经可以了。 <div align="center">  </div> ## 图表 目前最常用的是highcharts跟echart，目前个人博客中的日志系统主要还是采用了highcharts，主要还是颜色什么的格调比较相符吧，其次是因为对echarts印象不太友好，比如下面做这张，打开网页后，缩小浏览器，百度的地域图却不能自适应，出现了越界，而highcharts的全部都能自适应调整。想起有次面试，我说我用的highcharts，面试官一脸嫌弃。。。（网上这么多人鄙视百度是假的？） <div align="center">  </div> 不过地图确确实实是echarts的优势，毕竟还是自家的东西了解自家，不过前段时间去看了看echarts的官网，已经不提供下载了。如果有需要，还是去csdn上搜索吧，或者替换为highmap。 <div align="center">  </div> ## 百度分享 作为一个以博客为主的网站，免不了使用一些社会化分享的工具，目前主要是[jiathis](http://www.jiathis.com/)和百度分享，这两者的ui都是相似的（丑爆了）。凭我个人的感觉，jiathis加载实在是太过于缓慢，这点是无法让人忍受的，只好投靠百度。百度分享类似于jiathis，安装也很简单，具体见官网[http://share.baidu.com/code/advance#tools](http://share.baidu.com/code/advance#tools)。一直点点点，配置完之后，就是下图这种，丑爆了是不是？ <div align="center">  </div> 好在对它的美观改变不是很难，此处参考了别人的UI设计，原作者我忘记怎么联系他了。其原理主要是使用图片来替换掉原本的东西。完整的源码可以点击[此处](https://github.com/Zephery/newblog/blob/master/src/main/webapp/board.jsp)。 ```css #share a { width: 34px; height: 34px; padding: 0; margin: 6px; border-radius: 25px; transition: all .4s; } /*主要的是替换掉backgound的背景图片*/ #share a.bds_qzone { background: url(http://image.wenzhihuai.com/t_QQZone.png) no-repeat; background-size: 34px 34px; } ``` 改完之后的效果。 <div align="center">  </div> ## 瀑布流 有段时间，瀑布流特别流行？还有段时间，瀑布流开始遭到各种抵制。。。[看看知乎的人怎么说](https://www.zhihu.com/question/20653270)，大部分人不喜欢的原因是让人觉得视觉疲劳，不过瀑布流最大的好处还是有的：提高发现好图的效率以及图片列表页极强的视觉感染力。没错，我还是想把自己的网站弄得铉一些==，所以采用了瀑布流（不过效果不是很好，某些浏览器甚至加载出错），这个大bug有时间再改，毕竟花了很多时间做的这个，效果确实不咋地。目前主要的瀑布流有[waterfall.js]()和[masory.js]()。这一块目前还不是很完善，希望能得到各位大佬的指点。 <div align="center">  </div> ## 天气插件 此类咨询服务还是网上还是挺多的，这一块不知道是不是所谓的“画蛇添足”这部分，主要是我觉得网站右边这部分老是少了点什么，所以加上了天气插件。目前常用的天气插件有[中国天气网](http://cj.weather.com.cn/)，[心知天气](https://www.seniverse.com/widget/intro)等。安装方式见各自的官网，这里不再阐述，我使用的是心知天气。注意：心知天气限制流量的，一个小时内只能使用400次，如果超出了会失效，当然也可以付费使用。 <div align="center">  </div> ## 标签云 标签云，弄得好的话应该说是一个网站的点缀。现在好像比较流行3D的标签云？像下面这种。 <div align="center">  </div> 从个人的网站风格来看，比较适应PHP形式的，有点颜色而又不绚丽的即可，之前用的跟分类的一样的样式，即双纵列的样式，美观度还行，虽然老是感觉有点怪怪的，如果某个标签的字数过长怎么办，岂不是要顶出div了。所以还是选择换另一种风格，最终偶然一次找到了下面这种，能够自适应宽度，颜色虽然鲜艳了点（以后有空再调一下吧），源码见[style.css](https://github.com/Zephery/newblog/blob/master/src/main/webapp/css/newlypublished.css)。 下图为目前的标签页。 <div align="center">  </div> # 总结 作为一个后端人员，调css和js真是痛苦==，好在坚持下来了，虽然还是很多不足，以后有时间慢慢改。说了那么多，感觉自己还是菜的抠脚。 题外话，搭建一个博客，对于一个新近程序员来说真的是锻炼自己的一个好机会，能够认识到从前端、java后台、linux、jvm等等知识，只是真的有点耗时间（还不如把时间耗在Spring源码），如果不采用别人的框架的话，付出的代价还是蛮大的（所以不要鄙视我啦）。没有什么能够一举两得，看自己的取舍吧。加油 欢迎访问我的网站[http://www.wenzhihuai.com/](http://www.wenzhihuai.com/) 。感谢，如果可以，希望能在GitHub上给个star，GitHub地址[https://github.com/Zephery/newblog](https://github.com/Zephery/newblog) 。