Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑

20

November

2013

苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5。很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点。

LiveReload会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面。但如果你修改的是CSS或者图片,页面内容会即时更新,无需重新加载。这样我们不用每次修改文件后,都要去按下F5刷新页面,而是直接就能显示,有点类似所见即所得的编辑模式,特别适合使用双屏coding的人。另外同时结合Sublime text和Emmet LiveStyle,能提高不少开发效率。

LiveReload安装前的准备工作:

安装Node.jsGrunt,如果第一次接触,可以参考:Windows下安装Grunt的指南和相关说明,根据步骤操作,创建完package.json 和 Gruntfile.js这2个文件就行。

接下来,开始配置LiveReload所需要的环境和相关插件。这里所提供的有两种安装方案,根据自己需求进行选择。 [ 查看全文... ]

Windows下安装Grunt的指南和相关说明

13

November

2013

Grunt基于Node.js,其中 npm 是 Node.js 的包管理器,而Grunt和Grunt插件就通过 npm 安装并管理。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。

安装Node.js:
Node.js官网,点击INSTALL下载并安装,现在的Node.js会自动安装npm。

安装完成之后,打开命令行,进行后续的操作(开始->输入CMD 或 开始->所有程序 ->命令提示符)。

进入Node.js的安装目录(默认路径为"C:\Program Files\nodejs"):
cd \pro*\nod*
[ 查看全文... ]

阻止WordPress垃圾评论

08

November

2013

最近一段时间,博客上出现大量的垃圾评论,平均每天有2万左右,最多一次甚至有4万6千多条,着实让人有些心烦。

通过IP,发现绝大部分的垃圾评论都来自“福建省莆田市”。并且通过搜索,发现遇到此类的问题的人还不少,不只是博客,很多论坛也时有发生。

针对此,最简洁有效(傻瓜式)的办法,就是屏蔽该地区的IP,方法比较简单,就是有点繁琐。

修改Wordpress根目录下的.htaccess文件,并将需要屏蔽的IP地址或网段,按照以下格式填进去。

Order Deny,Allow
deny from 27.153
deny from 27.153.128
deny from 27.153.128.128
Allow from All

[ 查看全文... ]

新浪微博、腾讯微博、QQ空间、人人网、豆瓣 一键分享API

24

October

2013

新浪微博:
http://service.weibo.com/share/share.php?url=

count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空)
&url=将页面地址转成短域名,并显示在内容文字后面。(可选,允许为空)
&appkey=用于发布微博的来源显示,为空则分享的内容来源会显示来自互联网。(可选,允许为空)
&title=分享时所示的文字内容,为空则自动抓取分享页面的title值(可选,允许为空)
&pic=自定义图片地址,作为微博配图(可选,允许为空)
&ralateUid=转发时会@相关的微博账号(可选,允许为空)
&language=语言设置(zh_cn|zh_tw)(可选)
[ 查看全文... ]

Emmet LiveStyle 介绍和使用方法

08

September

2013

想必听到Emmet(原名:Zen coding)都不太会陌生,它是个能够帮助开发人员高效和快速编写HTML和CSS的插件。

而这次的Emmet LiveStyle,则是个提供“样式实时预览”插件,最大好处就是方便了我们对页面的调试。

不过Emmet LiveStyle目前处于公测阶段,暂时只支持Chrome和Safari浏览器与Sublime Text 2/3的双向修改。并且在官网中提到,它并免费使用,而是有偿使的,即正式版出来后会收费(但相信这个问题难不倒"天朝"...你懂的...)

Emmet LiveStyle的特点:
1. 即时更新(不会重新加载页面,样式修改以后无需保存也能预览);;
2. 多个页面同时预览(例:同时打开多个页面,并且关联到相同的CSS,此时修改该CSS,这些页面都能即时显示修改内容);
3. 双向修改(在Chrome开发者工具和Sublime Text中,只要有一处修改,两个工具的样式都会更改。)
4. 便捷的安装和使用。 [ 查看全文... ]

Markdown 语法手册

15

August

2013

Markdown 是一种轻量级标记语言,能将文本换成有效的XHTML(或者HTML)文档,它的目标是实现易读易写,成为一种适用于网络的书写语言。

Markdown 语法简洁明了,易于掌握,所以用它来写作是件既效率又舒服的事情。我们所熟知的和一些大型CMS,如Joomla!、Drupal等都能很好的支持Markdown。我是因为写GitHub项目库中的Readme才开始接触Markdown。

Markdown 不是想要取代 HTML,甚至也没有要和它相近,它的语法种类很少,只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来, HTML 已经很容易写了。Markdown 的理念是,能让文档更容易读、写和随意改。HTML 是一种发布的格式,Markdown 是一种书写的格式。就这样,Markdown 的格式语法只涵盖纯文本可以涵盖的范围。
[ 查看全文... ]

无觅相关文章插件,快速提升流量