# 3.7 那些牛逼的插件.md
## 7.那些牛逼的插件
欢迎访问我的网站 。感谢，如果可以，希望能在GitHub上给个star，GitHub地址 。\
建站的一开始，我也想自己全部实现，各种布局，各种炫丽的效果，想做点能让大家佩服的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)看一看。
**不过还有个值得注意的问题，就是wowslider里面带有一个googleapis的服务，即**
### 畅言
作为社交评论的工具，虽然说表示还是想念以前的多说，但是畅言现在做得还是好了，有评论审核，评论导出导入等功能，如果浏览量大的话，还能提供广告服务，让站长也能拿到一丢丢的广告费。本博客中使用了畅言的基本评论、获取某篇文章评论数的功能。可以到我这里[留言](http://www.wenzhihuai.com/board.html)哈
### Editor.md
一款能将markdown解析为html的插件，国人的作品，博客的文章编辑器一开始想使用的是markdown，想法是：写文章、保存数据库都是markdown格式的，保存在数据库中，读取时有需要解析markdown，这个过程是有点耗时的，但是相比把html式的网页保存在数据库中友好点吧，因为如果一篇文章比较长的话，转成html的格式，光是大小估计也得超过几十kb？所以，还是本人选择的是一切都用源markdown。 [editor.md](https://github.com/pandao/editor.md)，是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。页面看起来还是美观的，相比WORDPRESS的那些牛逼插件还差那么一点点，不过从普通人的眼光来看，应该是可以的了。此处，我用它作为解析网页的利器，还有就是后台编辑也是用的这个。
代码样式，这一点是不如WORDPRESS的插件了，不过已经可以了。
### 图表
目前最常用的是highcharts跟echart，目前个人博客中的日志系统主要还是采用了highcharts，主要还是颜色什么的格调比较相符吧，其次是因为对echarts印象不太友好，比如下面做这张，打开网页后，缩小浏览器，百度的地域图却不能自适应，出现了越界，而highcharts的全部都能自适应调整。想起有次面试，我说我用的highcharts，面试官一脸嫌弃。。。（网上这么多人鄙视百度是假的？）
不过地图确确实实是echarts的优势，毕竟还是自家的东西了解自家，不过前段时间去看了看echarts的官网，已经不提供下载了。如果有需要，还是去csdn上搜索吧，或者替换为highmap。
### 百度分享
作为一个以博客为主的网站，免不了使用一些社会化分享的工具，目前主要是[jiathis](http://www.jiathis.com/)和百度分享，这两者的ui都是相似的（丑爆了）。凭我个人的感觉，jiathis加载实在是太过于缓慢，这点是无法让人忍受的，只好投靠百度。百度分享类似于jiathis，安装也很简单，具体见官网。一直点点点，配置完之后，就是下图这种，丑爆了是不是？
好在对它的美观改变不是很难，此处参考了别人的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;
}
```
改完之后的效果。
### 瀑布流
有段时间，瀑布流特别流行？还有段时间，瀑布流开始遭到各种抵制。。。[看看知乎的人怎么说](https://www.zhihu.com/question/20653270)，大部分人不喜欢的原因是让人觉得视觉疲劳，不过瀑布流最大的好处还是有的：提高发现好图的效率以及图片列表页极强的视觉感染力。没错，我还是想把自己的网站弄得铉一些==，所以采用了瀑布流（不过效果不是很好，某些浏览器甚至加载出错），这个大bug有时间再改，毕竟花了很多时间做的这个，效果确实不咋地。目前主要的瀑布流有[waterfall.js](/ge-ren-wang-zhan/7.-na-xie-niu-bi-de-cha-jian.md)和[masory.js](/ge-ren-wang-zhan/7.-na-xie-niu-bi-de-cha-jian.md)。这一块目前还不是很完善，希望能得到各位大佬的指点。
### 天气插件
此类咨询服务还是网上还是挺多的，这一块不知道是不是所谓的“画蛇添足”这部分，主要是我觉得网站右边这部分老是少了点什么，所以加上了天气插件。目前常用的天气插件有[中国天气网](http://cj.weather.com.cn/)，[心知天气](https://www.seniverse.com/widget/intro)等。安装方式见各自的官网，这里不再阐述，我使用的是心知天气。注意：心知天气限制流量的，一个小时内只能使用400次，如果超出了会失效，当然也可以付费使用。
### 标签云
标签云，弄得好的话应该说是一个网站的点缀。现在好像比较流行3D的标签云？像下面这种。
从个人的网站风格来看，比较适应PHP形式的，有点颜色而又不绚丽的即可，之前用的跟分类的一样的样式，即双纵列的样式，美观度还行，虽然老是感觉有点怪怪的，如果某个标签的字数过长怎么办，岂不是要顶出div了。所以还是选择换另一种风格，最终偶然一次找到了下面这种，能够自适应宽度，颜色虽然鲜艳了点（以后有空再调一下吧），源码见[style.css](https://github.com/Zephery/newblog/blob/master/src/main/webapp/css/newlypublished.css)。 下图为目前的标签页。
## 总结
作为一个后端人员，调css和js真是痛苦==，好在坚持下来了，虽然还是很多不足，以后有时间慢慢改。说了那么多，感觉自己还是菜的抠脚。 题外话，搭建一个博客，对于一个新近程序员来说真的是锻炼自己的一个好机会，能够认识到从前端、java后台、linux、jvm等等知识，只是真的有点耗时间（还不如把时间耗在Spring源码），如果不采用别人的框架的话，付出的代价还是蛮大的（所以不要鄙视我啦）。没有什么能够一举两得，看自己的取舍吧。加油💪(ง •\_•)ง
欢迎访问我的网站 。感谢，如果可以，希望能在GitHub上给个star，GitHub地址 。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://gitbook.wenzhihuai.com/ge-ren-wang-zhan/7.-na-xie-niu-bi-de-cha-jian.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.