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

欢迎访问我的网站http://www.wenzhihuai.com/ 。感谢,如果可以,希望能在GitHub上给个star,GitHub地址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

可能是我这网站中最炫的东西了,图片能够自动像幻灯片一样自动滚动,让网站的首页一看起来就高大上,简直就是建站必备的东西,而且安装也及其简单,有兴趣可以点击官网看看。GitHub里也开放了源代码。安装过程:自己选择“幻灯片”切换效果,保存为html就行了,WORDPREESS中好像有集成这个插件的,做的还更好。感兴趣可以点击我的博客首页看一看。

不过还有个值得注意的问题,就是wowslider里面带有一个googleapis的服务,即https://fonts.googleapis.com/css?family=Arimo&subset=latin,cyrillic,latin-ext,由于一般用户不能访问谷歌,会导致网页加载速度及其缓慢,所以,去掉为妙

## 畅言

作为社交评论的工具,虽然说表示还是想念以前的多说,但是畅言现在做得还是好了,有评论审核,评论导出导入等功能,如果浏览量大的话,还能提供广告服务,让站长也能拿到一丢丢的广告费。本博客中使用了畅言的基本评论、获取某篇文章评论数的功能。可以到我这里留言

Editor.md

一款能将markdown解析为html的插件,国人的作品,博客的文章编辑器一开始想使用的是markdown,想法是:写文章、保存数据库都是markdown格式的,保存在数据库中,读取时有需要解析markdown,这个过程是有点耗时的,但是相比把html式的网页保存在数据库中友好点吧,因为如果一篇文章比较长的话,转成html的格式,光是大小估计也得超过几十kb?所以,还是本人选择的是一切都用源markdown。 editor.md,是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。页面看起来还是美观的,相比WORDPRESS的那些牛逼插件还差那么一点点,不过从普通人的眼光来看,应该是可以的了。此处,我用它作为解析网页的利器,还有就是后台编辑也是用的这个。

代码样式,这一点是不如WORDPRESS的插件了,不过已经可以了。

图表

目前最常用的是highcharts跟echart,目前个人博客中的日志系统主要还是采用了highcharts,主要还是颜色什么的格调比较相符吧,其次是因为对echarts印象不太友好,比如下面做这张,打开网页后,缩小浏览器,百度的地域图却不能自适应,出现了越界,而highcharts的全部都能自适应调整。想起有次面试,我说我用的highcharts,面试官一脸嫌弃。。。(网上这么多人鄙视百度是假的?)

不过地图确确实实是echarts的优势,毕竟还是自家的东西了解自家,不过前段时间去看了看echarts的官网,已经不提供下载了。如果有需要,还是去csdn上搜索吧,或者替换为highmap。

百度分享

作为一个以博客为主的网站,免不了使用一些社会化分享的工具,目前主要是jiathis和百度分享,这两者的ui都是相似的(丑爆了)。凭我个人的感觉,jiathis加载实在是太过于缓慢,这点是无法让人忍受的,只好投靠百度。百度分享类似于jiathis,安装也很简单,具体见官网http://share.baidu.com/code/advance#tools。一直点点点,配置完之后,就是下图这种,丑爆了是不是?

好在对它的美观改变不是很难,此处参考了别人的UI设计,原作者我忘记怎么联系他了。其原理主要是使用图片来替换掉原本的东西。完整的源码可以点击此处

#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;}

改完之后的效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏养码场

一周播报| 平淡无奇,但暗藏杀机的一周

养码人B:消息写DB的话,TPS、RT 这些能接受吗?你们用的是什么消息中间件?

581
来自专栏SpringBoot 核心技术

写文章真的是为了报酬吗?

其实我也就是微微一笑,因为写文章去得到报酬从一开始并不是我的目标,也没有想打算通过文章的赞赏来解决生活问题。

1273
来自专栏python学习指南

python爬虫(一)_爬虫原理和数据抓取

本篇将开始介绍Python原理,更多内容请参考:Python学习指南 为什么要做爬虫 著名的革命家、思想家、政治家、战略家、社会改革的主要领导人物马云曾经...

4666
来自专栏西枫里博客

如何让网站打开变快?暨网站速度优化指南。

网站打开速度一向是网站运营者和SEO工作者关注的重要指标。百度在网站优化白皮书中也提到需要注重网站访问速度。2017年更是退出了针对移动端访问推出闪电算法(博文...

1612
来自专栏云瓣

使用React全家桶搭建一个后台管理系统

引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平。 ...

5609
来自专栏IT可乐

Linux系列教程(一)——Linux系统简介

  本系列教程将完整的讲解整个Linux相关的知识,这是楼主学完兄弟连的Linux教程之后重新对Linux知识体系的整理。个人感觉兄弟连的Linux教程可以很好...

2528
来自专栏程序员互动联盟

我在苹果公司学到的编程技巧

当我还在苹果在线商店工作的时候,我们从来没有对在线网站做过负载测试。我们也不觉得需要这么做。然而,当每次史蒂夫·乔布斯在演示某个幻灯片过程中切换到在线商店时,会...

34112
来自专栏阮一峰的网络日志

防止网页被嵌入框架的代码

最近,国内开始流行另一种流氓行为:使用框架(Frame),将你的网页嵌入它的网页中。 比如,有一家网站号称自己是"口碑聚合门户",提供全国各个网上论坛的精华内容...

3364
来自专栏Crossin的编程教室

【Git 第1课】 什么是Git?

今天起,我会在微信推送文章里穿插一个新的系列:Git。和之前Python入门教程不同,这个系列需要有一点编程的经验。倒不是因为它很难,只是如果没有开发过稍大一点...

32510
来自专栏程序员互动联盟

【编程基础】聊聊C语言-存储世界的奥秘

上一篇讲到了C语言的数据类型,从这篇我们开始讲讲与数据类型有这着千丝万缕联系的变量。 所有语言的变量都是存储在计算机存储系统中,C语言的变量当然也不例外。所以...

3817

扫码关注云+社区

领取腾讯云代金券