Note

让百度统计支持 PJAX

最近把博客系统迁移到 Hexo 上了，作为一名前端工(zha)程(ma)师(nong)，不得不说 Hexo 的相性更好些。

重新做了套新皮肤，简单的做了下对 iPhone 访问的优化，同时使用了已不新鲜的 PJAX 技术。不过发现百度统计还没支持 PJAX，只能记录第一次打开的页面。没办法只能拿统计代码开刀了。

我使用的是百度统计的异步加载模式，整个过程分三步：执行插入页面的异步代码；执行异步加载的hm.js；GET 方式请求hm.gif传递统计信息。后两步肯定是没法改了，那就看看百度统计的异步代码吧。

百度统计的异步代码
1
2
3
4
5
6
7
8
9
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?/* id here */";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

好吧突然发现这代码和两年前的一模一样，真稳定= =。代码很简单，新建一个<script>元素，设置src然后插到页面中第一个<script>元素前，剩下的就是hm.js的事了。因此要完成统计工作，实际上只要在每次通过 PJAX 加载后重新加载hm.js就好了。

修改后的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
<script id="bd-hm">
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?/* id here */";
        hm.onload = function() {
            // 清除百度统计的加载标识
            delete window["_bdhm_loaded_/* id here */"];
        };
        var s = document.getElementById('bd-hm');
        s.parentNode.insertBefore(hm, s);
    })();
</script>

然后在 layout 模板中把这段代码从</head>前移到合适的位置，在这套主题中，PJAX 请求完替换的是div#main的内容，因此放到它的</div>前。给<script>加id="bd-hm"是为了定位统计代码，总不能每次都还是像之前那样插到<head>里吧？你要不介意我也没话说= =。

Note

Octopress搭建小记

偶然看到了Octopress的介绍，我便被它惊人的载入速度和独特的离线写作模式吸引了。虽然之前的Wordpress使用的也挺不错的，但细想之下其实我还真用不到那么多功能，顿时让我有了把博客迁移到Octopress上的冲动。

网络上关于Octopress的部署教程已经有很多了，一种不错的方案是使用Github Pages服务。不过考虑到数据的安全性（比如_config.yml、一些第三方服务的API Key等），我决定同时使用Bitbucket和Github，即使用Bitbucket的私有Repo管理source，使用Github管理生成的页面。

Ruby环境的搭建以及Octopress的安装方法可以在Octopress的文档中找到，这里主要记录部署过程(Ubuntu环境)。

Octopress Documentation

Read More

Note

SF通过SSH安装Wordpress插件

Putty登录SourceForge的SSH：

  1. Session

host name: shell.sourceforge.net, port: 22, SSH

  1. Connection->Data

Login detail Auto-login username: user,project-name

  1. Connection->SSH

Remote command: create (必填，否则会闪退)

安装插件：

进入Wordpress插件目录

1
cd /home/project-web/项目名称/htdocs/blog/wp-content/pluginswget

下载插件包

在http://wordpress.org/extend/plugins/找到链接地址(http://downloads.wordpress.org/plugin/syntaxhighlighter.zip)，用wget命令下载

1
wget http://downloads.wordpress.org/plugin/syntaxhighlighter.zip

解压

1
unzip syntaxhighlighter.zip

进入wordpress后台启用插件