2016博客改版总结

经过大半个月的努力，终于完成了这次博客改版！

秉着追求极简与追求极速的想法:)，这次博客升级做了不小的改动，现在看起来比以前舒服多了，小伙伴们都评价我的首屏加载非常霸气哈哈哈~

先看看老版本

之前用的是云落的Git主题，这是一款比较大众化的WordPress主题，有着相当大的使用量，相信下面这张图片一定会很眼熟：

Ck1sAVrUYAEEk8r

是的，很多人在用，说说这款主题的优缺点吧：

优点：主题适应性很广，功能强大，小组件很丰富，使用操作对小白友好，扩展开发对码农友好，WordPress学习标杆。

缺点：主题臃肿笨重，页面加载性能提升有瓶颈，对强迫症患者不友好，对极简主义追求者不友好，会限制个人博客的独特性。

这是我建站用的正式主题，也是我第一个深入了解的主题，不得不说它给了我很大的帮助。从某种程度上来说，对该主题的折腾代表了我从一个网站小白成长到如今的历程，不单是学习了WordPress的运作原理，更深的是体会到了一个网站运作起来所需要的方方面面，Linux>>Mysql>>PHP>>Nginx>>Pages；服务器日志分析与错误解决；前后端性能优化等等。但毕竟时过境迁，俗话说的好："沉舟侧畔千帆过，病树前头万木春"，每到了一个阶段，都需要有一些新的东西，来给这个网站注入新鲜的活力。

新版本的变化

1.PHP

新技术天天有，但是每每听到这样的话都会异常兴奋：

“嘿哥们，最近出了个XX，简直神器啊，性能简直爆表的说！”

既然大家都在推荐，那就去官网上看看吧：

Screenshot_1

OMG，竟然比我现在用的版本5快出一倍的请求处理速度！！

搭载全新设计的Zend引擎，很好很强大的样子！

新技术如此性感，没有理由拒绝嘛，赶紧到社区调研一番，观察一下，ok没大问题，升级走起~

参照DigitalOcean的这篇文章 How To Upgrade to PHP 7 on Ubuntu 14.04。很快就在Ubuntu上装上了PHP7.0，处理了一些升级问题，测试一番，的确如官方所说快了不少，这给后续的网站优化铺平了道路。

2.主题

鉴于旧主题产生的审美疲劳以及加载缓慢的问题，所以这次改版在主题选定方面下了个目标：一定要选轻量级的、极简而又不失大气的WordPress主题。一次偶然的机会逛到了Erl的个人站【叶夕青兮】，立马被她博客的风格所吸引，满满的极简主义风呐！更为欣喜地发现Erl开源了她的博客主题，于是乎fork下来进行二次开发，下面是一些改动的细节：

2.1 减少不必要的请求

WordPress以及主题往往会加载一些不必要的东西，"保留有用的，去掉没用的"是网站优化的基本准则之一。

关于WordPress优化，【水煮鱼】应该是做的很好的一个网站，站长会毫不怜惜的告诉你："页面生成时间：0.000859秒"，再看看自己好几秒才能加载出来的博客，顿时那种羡慕感啊..... 那里分享了很多方法，例如这篇文章 WordPress 技巧：删除 wp_head 中无关紧要的代码，不单让你的html头部<head>标签简洁了很多，而且也提高了安全性，减少了一些不必要的请求。

关于主题方面，主要则是合并js、css代码，减少HTTP请求。有些主题会带很多个js、css甚至是字体文件，一些不会用到的代码完全可以删掉，代码量少的可以考虑合并在主文件中，另外代码压缩视情况而定，原主题的文件本来就很小，所以这里就偷懒不压缩了嘿嘿:)

2.2 CDN和七牛云加速

CDN用的是BootCDN这家，一直都很稳定，速度不错，用来加速Font-Awesome、Tooltipster以及JQuery。

对于其它的静态资源（JS，CSS，图片）则用七牛云进行加速，进一步降低服务器压力。给WordPress配置七牛云很简单，只需要在functions.php里添加下面这段代码就行了：

if ( !is_admin() ) {
    add_action('wp_loaded','qiniu_ob_start');
    function qiniu_ob_start() {
        ob_start('qiniu_cdn_replace');
    }
    function qiniu_cdn_replace($html){
        $local_host = 'http://www.zeakhold.com'; //博客域名
        $qiniu_host = 'http://source.zeakhold.com'; //七牛域名
        $cdn_exts   = 'js|css|png|jpg|jpeg|gif|ico'; //扩展名（使用|分隔）
        $cdn_dirs   = 'wp-content|wp-includes'; //目录（使用|分隔）
        $cdn_dirs   = str_replace('-', '\-', $cdn_dirs);
        if ($cdn_dirs) {
            $regex  =  '/' . str_replace('/', '\/', $local_host) . '\/((' . $cdn_dirs . ')\/[^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';
            $html =  preg_replace($regex, $qiniu_host . '/$1$4', $html);
        } else {
            $regex  = '/' . str_replace('/', '\/', $local_host) . '\/([^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';
            $html =  preg_replace($regex, $qiniu_host . '/$1$3', $html);
        }
        return $html;
    }
}

2.3 其它的细节

a.从小剧客栈那里学来的小Tips：

sdfdesd

这个用到的是HTML5的页面可见性API（Page Visibility API）：

document.addEventListener('visibilitychange', function() {
    document.title = document.hidden ? "看这里，看这里!": "蜀山客|今古渔樵话里，江山水墨图中";
});

b.以及给文章之间添加分隔符：

Screenshot_1

用到了伪元素：

$(".post").css({"margin":"2rem auto;","padding-bottom":"2rem","border-bottom":"#e0e5e8 .05rem solid"});
$(".post").append("<style>.post:after{display:block;content:'';width:7px;height:7px;border:.05rem solid #b0aeae;position:relative;bottom:-2.25rem;left:50%;margin-left:-5px;background:#fff;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;box-shadow:#fff 0 0 0 5px}</style>");

c.还有【关于&留言】页面底部的小乌龟：

dfe

动画来自Abowman，这里使用<object> 标签在 footer.php 里加入小乌龟的 Flash 文件：

<?php
        /* 如果是【关于】页面，则在底部添加乌龟部件 */
        if (is_page(146)):?>
            <object type="application/x-shockwave-flash" style="margin: 5px auto;outline:none;display: block;" data="http://www.zeakhold.com/data/turtle.swf?up_turtle5HeadColor=828250&up_turtle5ShellColor=828250&up_waterColor=FFFFFF&up_turtle3LegColor=66663f&up_turtle4ShellColor=828250&up_turtle2HeadColor=828250&up_percentWater=1&up_turtle3HeadColor=828250&up_turtle1ShellColor=828250&up_foodColor=D1BB19&up_turtle4HeadColor=828250&up_turtle3ShellColor=828250&up_turtle1HeadColor=828250&up_turtle4LegColor=66663f&up_turtle1LegColor=66663f&up_numTurtles=2&up_turtleName=Turtle&up_groundColor=EEEEEE&up_turtle2ShellColor=828250&up_turtle2LegColor=66663f&up_turtle5LegColor=66663f&" width="700" height="300"><param name="movie" value="http://www.zeakhold.com/data/turtle.swf?up_turtle5HeadColor=828250&up_turtle5ShellColor=828250&up_waterColor=FFFFFF&up_turtle3LegColor=66663f&up_turtle4ShellColor=828250&up_turtle2HeadColor=828250&up_percentWater=1&up_turtle3HeadColor=828250&up_turtle1ShellColor=828250&up_foodColor=D1BB19&up_turtle4HeadColor=828250&up_turtle3ShellColor=828250&up_turtle1HeadColor=828250&up_turtle4LegColor=66663f&up_turtle1LegColor=66663f&up_numTurtles=2&up_turtleName=Turtle&up_groundColor=EEEEEE&up_turtle2ShellColor=828250&up_turtle2LegColor=66663f&up_turtle5LegColor=66663f&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"><param name="scale" value="noscale"><param name="salign" value="tl"></object>
        <?php endif;?>
?>

3.关于名字

博客由原来的西洋名【Zeakhold's Blog】，更名为【蜀山客】，中国人嘛，用什么英文名呢，是吧？

而为什么是【蜀山】，而不是【白云山】，【泰山】，【太行山】？很明显的原因就是——小时候武侠片看多了:)

刀光剑影、侠骨柔情，古风古韵，那里是满载英雄主义的另一个世界。

蜀山就是一个信仰，每个男人心里都有一把剑一座山。

4.关于logo

另外，关于网站的logo，姑且用下面这张图来顶替吧：

shan-small

Ps：希望有设计师朋友能帮我出出主意，自己设计水平实在有限啊

总结

本次改版做了比较大的改动，从后端PHP驱动改到前端CSS细节，让博客完全变了个样，此间又学到了非常多的新知识，特别是网站性能优化这一块，现在无论是后台管理还是前台页面加载起来都非常的快，以前打开一个页面可是要五秒的说！另外，页面选择了偏向极简的风格，虽然少了些有趣的小功能，但让人把注意力更多的关注在内容上才是一个良好博客最该具备的特点。

总之，我对这次改版的结果是非常满意的嘿，相信这个版本可以用挺长的一段时间了~

新博客，新征程！

本文标题：2016博客改版总结
转载请注明出处，欢迎分享