Fork me on GitHub

2014年8月

开启Nginx的gzip压缩

gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小,这样,用户浏览页面的时候速度会块得多。gzip的压缩页面需要浏览器和服务器双方都支持,实际上就是服务器端压缩,传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心,因为目前的巨大多数浏览器都支持解析gzip过的页面。

将代码放置到nginx.conf的http块中:

    gzip on;    
 
    gzip_vary on;
    gzip_disable "msie6";
    gzip_proxied any;
    gzip_comp_level 8;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

配置

gzip on;

该指令用于开启或关闭gzip模块(on/off)

gzip_min_length 1k;

/设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。

gzip_buffers 4 16k;

设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。4 16k代表以16k为单位,安装原始数据大小以16k为单位的4倍申请内存。

gzip_http_version 1.1;

识别http的协议版本(1.0/1.1)

gzip_comp_level 8;

gzip压缩比,1压缩比最小处理速度最快,9压缩比最大但处理速度最慢(传输快但比较消耗cpu)

gzip_types text/plain application/x-javascript text/css application/xml

匹配mime类型进行压缩,无论是否指定,”text/html”类型总是会被压缩的。

gzip_vary on;

和http头有关系,加个vary头,给代理服务器用的,有的浏览器支持压缩,有的不支持,所以避免浪费不支持的也压缩,所以根据客户端的HTTP头来判断,是否需要压缩。

tagcloud的使用

tagcloud一共两个文件

  1. tagcloud.swf:是标签云显示的主flash程序
  2. swfobject.js: flash的控制程序
    下载地址:[[csdn]][1]

有两种使用方式,第一种是通过在网页上使用函数实时生成标签云的标签;第二种是通过将标签写入xml文件,flash读取xml文件显示标签云

基础

参考Demo程序3DTagCloudWithoutXML,在网页文件里的<head>标签中加入swfobject.js的引用

<head>
<title>3D Tag Cloud without XML example</title>
<meta http-equiv="Content-Type" content="text/html" />
<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
    body { background-color: #eee; padding: 20px; }
</style>
</head>

方式一

在网页<body>标签中插入以下代码

<body>
    <div id="flashcontent">This will be shown to users with no Flash or Javascript.</div>
    <script type="text/javascript">

              var so = new SWFObject("tagcloud.swf", "tagcloud", "600", "400", "7", "#ffffff");

              // uncomment next line to enable transparency

              so.addParam("wmode", "transparent");

              so.addVariable("tcolor", "0x333333");

              so.addVariable("mode", "tags");

              so.addVariable("distr", "true");

              so.addVariable("tspeed", "100");

              so.addVariable("tagcloud", "<tags><a  href='http://www.google.com' style='22' color='0xff0000'  hicolor='0x00cc00'>Google</a><a href='http://www.baidu.com'  style='12'>Baidu</a><a href='http://www.sina.com.cn'  style='16'>Sina</a><a href='http://www.apple.com.cn'  style='14'>Apple</a><a href='http://wsi.gucas.ac.cn'  style='12'>WSI</a><a href='http://www.bit.edu.cn'  style='12'>BIT</a><a href='http://www.sony.com.cn'  style='9'>SONY</a><a href='http://www.gucas.ac.cn'  style='10'>GUCAS</a><a href='http://www.sohu.com.cn'  style='10'>Sohu</a><a href='http://www.renren.com'  style='12'>renren</a><a href='http://www.qq.com'  style='12'>QQ</a></tags>");

              so.write("flashcontent");

    </script>
</body>

方式二

在网页<body>标签中插入以下代码

<body>
  <div id="flashcontent">This will be shown to users with no Flash or Javascript.</div>
  <script type="text/javascript">
           var so = new SWFObject("tagcloud.swf", "tagcloud", "600", "400", "7", "#ffffff");
           // uncomment next line to enable transparency
           so.addParam("wmode", "transparent");
           so.addVariable("tcolor", "0x333333");
           so.addVariable("tcolor2", "0x009900");
           so.addVariable("hicolor", "0x000000");
           so.addVariable("tspeed", "100");
           so.addVariable("distr", "true");
           so.addVariable("xmlpath", "tagcloud.xml");
           so.write("flashcontent");
  </script>
 </body>

分页功能的实现

分页功能的实现需要三个基本要素:

pageCount(总页数),

currentPage(当前页码),

maxButtons(最大显示按钮数量)

根据这三个基本要素计算出要显示的页码范围,要求页码范围是有效的取值(假如页码从0开始计数,那页码范围就是区间[0,pageCount-1]的子集),php实现如下:


/**
 * 计算页码的范围(页码从0开始)
 */
protected function getPageRange()
{
    $currentPage=$this->getCurrentPage();
    $pageCount=$this->getPageCount();

    //先计算出有效的起点
    $beginPage=max(0, $currentPage-(int)($this->max_button_number/2));
    //再依据有效起点和最大显示按钮数量算出终点
    $endPage=$beginPage+$this->max_button_number-1;
    //验证终点的有效性
    if($endPage>=$pageCount)
    {
        //如果右边终点无效,则重新获取有效的终点
        $endPage=$pageCount-1;
        //根据有效终点和最大显示按钮算出有效起点
        $beginPage=max(0,$endPage-$this->max_button_number+1);
    }
    return array(
        'beginPage'=>$beginPage,
        'endPage'=>$endP
    );
}

这样就能保证maxButtons有效性。

上一页/下一页的显示逻辑:如果当前页不是第一页就显示上一页按钮,如果当前页不是最后一页就显示下一页按钮

升级UEditor的SyntaxHighlighter

博客文本编辑器使用的是UEditor1.4.3,和Bootstrap还有不兼容,语法高亮效果也很差,于是看了下自带SyntaxHighlighter的版本,竟然是1.5.1的,而且js文件有160kb。官网SyntaxHighlighter最新版本已经更新到3.0.83了,于是准备给UEditor的SyntaxHighlighter升下级。

升级SynTaxHighlighter

一、下载

  • 首先下载SyntaxHighlighter最新版,解压。
  • 将scripts目录下的js压缩成一个文件(注意:shCore.js这个核心文件要放在最前面),我这里压缩为shCore.min.js。
  • styles目录中的文件包含基本样式shCore.css,主题基本样式shCoreXX.css以及其对应主题样式shThemeXX.css,我把每个主题与基本样式压缩成一个主题样式shCoreXX.min.css,8个主题,这里生成了8个文件。

二、修改UEditor

  • 将上面生成的9个文件复制到UEditor目录下third-party/SyntaxHighlighter/目录中,并修改UEditor目录下的 ueditor.parse.js 文件,将 sh_js属性 设置为 shCore.min.js 增加语法高亮设置:
    /*!
     * UEditor
     * version: ueditor
     * build: Thu May 29 2014 16:47:49 GMT+0800 (中国标准时间)
     */
     
    (function(){
        (function(){
        UE = window.UE || {};
        //语法高亮设置
        UE.sh_config = {
            sh_js : "shCore.min.js",
            sh_theme : "Default"
        };
        var isIE = !!window.ActiveXObject;
        //定义utils工具
       var utils = {
  • 并修改加载SyntaxHighlighter的文件名:
UE.parse.register('insertcode',function(utils){
    var pres = this.root.getElementsByTagName('pre');
    if(pres.length){
        if(typeof XRegExp == "undefined"){
            var jsurl,cssurl;
            if(this.rootPath !== undefined){
                jsurl = utils.removeLastbs(this.rootPath)  + '/third-party/SyntaxHighlighter/'+UE.sh_config.sh_js;
                cssurl = utils.removeLastbs(this.rootPath) + '/third-party/SyntaxHighlighter/shCore'+UE.sh_config.sh_theme+'.min.css';
            }else{
                jsurl = this.highlightJsUrl;
                cssurl = this.highlightCssUrl;
            }

然后就修改完成啦,再将文件压缩一下就可以了。

三、使用方法

依然保持UEditor原来的使用方法,编辑内容展示,增加了两个可选配置,语法解析文件和高亮主题:

<script>
    UE.sh_config.sh_js="shCore.min.js";    //语法解析文件
    UE.sh_config.sh_theme="Default";    //语法高亮主题
    uParse(".article-content",{rootPath: "/js/ueditor"});
</script>

一共有8种主题可选:Default,Django,Eclipse,Emacs,FadeToGrey,MDUltra,Midnight,RDark

效果

Midnight:

1408548337165875.jpg

RDark:

1408548337540451.jpg

Default:

1408548339694916.jpg

UEditor入门

UEditor

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

1 入门部署和体验

1.1 下载编辑器

到官网下载 UEditor 最新版:UEditor官方地址

1.2 创建demo文件

解压下载的包,在解压后的目录创建 demo.html 文件,填入下面的html代码

<!DOCTYPE HTML><html lang="en-US"><head>
<meta charset="UTF-8">
<title>ueditor demo</title></head><body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
    这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script></body></html>

1.3 在浏览器打开demo.html

如果看到了下面这样的编辑器,恭喜你,初次部署成功!

请输入图片描述

1.4 传入自定义的参数

编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器:

var ue = UE.getEditor('container', {
autoHeight: false});

配置项也可以通过 ueditor.config.js 文件修改,具体的配置方法请看前端配置项说明

1.5 设置和读取编辑器的内容

通过 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();//对编辑器的操作最好在编辑器ready之后再做ue.ready(function() {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容,返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容,返回: hello
var txt = ue.getContentTxt();});

UEditor 的更多API请看API文档

2 详细文档

UEditor 官网:http://ueditor.baidu.com

UEditor API 文档:http://ueditor.baidu.com/doc

UEditor Github 地址:http://github.com/fex-team/ueditor

Nginx源码安装

一 . 依赖工具

1)gcc

说明:gcc是一个编译工具,Nginx是c语言写的所以需要一个编译工具

安装方法:

yum install gcc

2)PCRE 库

说明:这个库是用于支持Nginx正则表达式语法

安装方法:

yum install pcre pcre-devel

3)zlib 库

说明:用于支持Nginx gzip压缩

安装方法:

yum install zlib zlib-devel

4)OpenSSL

说明:用于支持Nginx 的安全连接

安装方法:

yum install openssl openssl-devel

二 . Nginx安装

配置:

./configure

编译:

make

安装:

make install