Migrate from MediaWiki to GitBook

Export data from MediaWiki

Using ‘Special:Export’ to export all pages at MediaWiki

  • Go to Special:Allpages and choose the desired article/file.
  • Copy the list of page names to a text editor
  • Put all page names on separate lines. I did this job with Vim.
  • Go to Special:Export and paste all your page names into the textbox, making sure there are no empty lines.
  • Click ‘Submit query’
  • Save the resulting XML to a file using your browser’s save facility.

Now you can use this XML file to next step

Convert MediaWiki documents to markdown format

We have a big XML file now. It contains all pages in MediaWiki. All the pages are in MediaWiki format. pandoc tool can convert the format to markdown directly. But pandoc can’t parse XML file.

I use tool MediaWiki to Markdown to do the job. It’s written in PHP. The conversion uses an XML export from MediaWiki and converts each wiki page to an individual markdown file.

The tool is easy to use. An example convert all pages to Github Flavoured Markdown format.

php convert.php --filename=mediawiki.xml --output=export --format=gfm 

Import data to GitBook

I got many md files in previous step.

  • Create two folders en and zh for multiple languages support
  • Copy all md files to the two folders. Cleanup files for each language.
  • Copy Main_Page.md to SUMMARY.md. It’s the index file for gitbook. I rewrited this file carefully.
  • Create languages file for gitbook
* [English](en/)
* [Chinese](zh/)
  • Create book file for gitbook, Content for book.json.
{
    "plugins": [
        "language-selected",
        "expandable-chapters-small", 
        "-search", 
        "-livereload", 
        "-fontsettings", 
        "-lunr", 
        "-sharing"
    ]
}
  • Install gitbook and preview

Rewrite rule for nginx

I wrote these rewrite rules for nginx. It make the new URLs compatible with original MediaWiki.

        rewrite ^/wiki/Main_Page$ /_book/index.html last;
        rewrite ^/index.html$ /_book/index.html last;
        rewrite ^/gitbook/(.+)$ /_book/gitbook/$1 last;
        rewrite ^/wiki/(.+).html$ /en/$1.html permanent;
        rewrite ^/wiki/(.+)$ /en/$1.html permanent;

        location /en/ {
                try_files $uri /_book$uri /_book$uri.html;
        }

        location /zh/ {
                try_files $uri /_book$uri /_book$uri.html;
        }

Miscs

I have many markdown files from original MediaWiki. It’s too sad gitbook can’t process markdown file outside the SUMMARY.md. You can find more peoples have same problem at the repo of Gitbook. I use the workground to resolve the problem.

关于Markdown Preview Plus的补充说明

Markdown Preview Plus的使用方法做一个补充说明,这是一个chrome的插件,方便预览markdown格式的文件。

使用方法

  • 从chrome的webstore安装Markdown Preview Plus插件
  • 在设置页中勾选 “允许访问文件网址”,如图
    \"options\"
  • 在chrome中打开本地markdown文件,http/https也是可以支持的
  • 你会看到已经转换成html的内容

为每个md文件设置样式

新的0.2.1版本已经支持对每个md文件设置样式,这个可以覆盖全局的样式设置

\"弹出页面\"

Markdown Preview Plus

Markdown Preview Plus是一个chrome下的markdown预览插件。这个插件基于Markdown Preview的基础上,做了一部分改进。

改进的部分

  • 支持自动加载,这个选项默认是关闭的,可在options中设置。
  • 支持http和https的markdown文件预览
  • 支持部分css样式,例如Github,TopMarks,另外也从Mac下的客户端Mou中导入了Clearness样式

预览

设置界面的预览

\"Markdown

使用详情可参考使用markdown格式写Todo list

做这个插件的初衷

我比较习惯使用vim编辑文件,虽然现在有不少带即时预览功能的markdown编辑工具,仍然无法适应,所以做了这个插件来满足日常的编辑需求。如果有问题,请在github上指出。

使用markdown格式写Todo list

上周我完成了chrome的markdown-preview扩展的修改,使它支持markdown文件的实时预览功能。现在可以考虑用这个功能来做一些更酷的事情,比如说,写Todo list?

开始干

  • 首先我找到了一个叫topmarks的markdown样式文件,这个样式文件能给出一个漂亮的Todo list样式,我把它合并到了 修改后的markdown preview插件
  • 关注了一下markdown-preview原作者的github,他有计划增加一项功能,让用户可以自定义css文件,但是近期完成无望,所以我新增了一个topmarks的分支,采用新的样式
  • 在chrome的扩展中重新加载插件

效果图

如图,我采用vim编辑文件,右边摆上chrome浏览器预览,文件采用dropbox同步,保证我随时能更新这个文件。

\"效果图\"

关于topmarks的补充说明

topmarks样式采用了这些自定义标签

  • <t> 新任务
  • <d> 已完成的任务
  • <c> 已取消的任务
  • http, ical, mailto, file链接有不同的图标

markdown文件的编辑以及实时预览

之前看到有一款叫Mou的软件可以编辑markdown格式的文本内容并且实时预览,可是我比较喜欢用vim编辑器,所以就想着能不能用别的软件配合着来实现实时预览。

今天看到一个chrome的扩展叫markdown preview,它可以自动把md或markdown后缀的文本转换为html格式在chrome中查看,只是还欠缺一个自动刷新的功能。然后我看到它的源码已经放在github上,于是抓回来做了一些修改,加上了自动刷新的功能。

演示

尝试了一下在vim中编辑文件,然后在chrome中浏览,效果还不错,见下图:

\"效果图\"

更改后的扩展

我把修改后的markdown preview插件放在github上 , 已经尝试向原作者发起pull requests,要试用的话需要按下面几步操作:

  1. 把插件的代码clone回来 git clone git://github.com/volca/markdown-preview.git
  2. 开启chrome扩展的开发者模式,具体位置在窗口 -> 扩展程序
  3. 载入正在开发的扩展程序
  4. 允许访问文件网址勾选上

然后你就可以尝试用chrome浏览器打开markdown文件预览html,采用趁手的编辑器去修改它。

BTW

  • chrome下的插件写起来比想像的要简单,写javascript就是了
  • 现在这篇blog即是我用markdown格式写成的,用到了wordpress的markdown on save扩展。

Update

  • 测试把文件放在dropbox的Public下,修改之后的效果能够立刻在共享链接里看到效果,很完美

jquery mobile alpha4有什么变化

Jquery mobile团队即将发布alpha4,这个版本主要关注两个问题:性能以及兼容性。以下是这个版本更新的主要部分

Windows Phone 7 (WP7) 支持

JQM已经支持在WP7上运行,原来对WP7原生浏览器的支持度为C,也就是说部分核心功能不可用。而alpha4对这个做了大幅改动,支持度为A-,也就是说jquery mobile所有核心功能在WP7上都能运行良好。顺带受惠的还有桌面版的ie7, 8, 9,也能取得很好的运行效果。

名称空间data- 属性

jquery mobile大量使用html5的data属性来定义html标签,比如页头是 data-role=”header”,但是其它开发框架和插件也可能使用了data来标记某些特性,为避免冲突,alpha4新增了名称空间的概念,新增了jqmData,jqmRemoveData和jqmHasData这几个方法来访问data属性,和jquery的data()相比,这几个方法支持名称空间访问。

举个例子,原来使用data-icon来标记一个标签使用的图标,但是如果你使用了名称空间 foo,那么这个属性应该变成 data-foo-icon。为了不影响原来基于jquery mobile开发的程序,名称空间默认为空,保持不变。

统一的touch/mouse事件处理系统

新的touch/mouse“虚拟”事件,详情请参考The current state of touch events

phonegap支持增强

jquery mobile很适合和phonegap一起搭配来做原生的手机应用,但是在alpha3的时候,页面上的链接会被phonegap神奇的截断,有三个相关的问题:

  • jQuery 1.5 截断了 file:// URLs
  • jQuery 1.5.1 修复了 file://,但是它把HTML当成是XML, 所以需要在做ajax请求的时候指定dataType.
  • 原来是不允许JQM加载跨域的JQM页面,但是这个版本新增了一个配置选项 $.mobile.allowCrossDomainPages 来支持http/https页面. 这个改动会导致URL可能出现这样的情况: file://dir1/dir2/myPhoneGapApp.html#https://myHomeServer.com/dir1/dir2/foo

以上这些问题在JQM alpha4里都得到了很好的解决,前提是使用jquery 1.5.1。

重要的升级注意事项

  • 列表li的html结构变化,可以用a标签直接包住li中需要链接的整个部分,比如图片,文字段落。
  • 由于WP7不支持动态插入viewport meta标签,所以现在推荐的方式是在每个页面上都放上meta标签,原来是由JQM的metaViewportContent 方法动态插入的,但是以后这个方法将被取消。为了避免影响已有的站点,JQM会在缺少meta标签的页面上直接插入了一个。
  • 原生的select选单将成为默认选项,这是出于性能问题考虑,如果你希望在alpha4中继续使用JQM定制的select选单,那么需要加上 data-native-menu=”false”

yepnope.js – 异步加载资源文件

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。

典型代码示例


yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别?

个人认为主要 是这两点:

  • 可以同时处理javascript以及css
  • 能够按条件加载

yepnope的全部参数

yepnope([{
  test : /* boolean(ish) - 你要检查真伪的表达式             */,
  yep  : /* array (of strings) | string - test为true时加载这项  */,
  nope : /* array (of strings) | string - test为false时加载这项 */,
  both : /* array (of strings) | string - 什么情况下都加载              */,
  load : /* array (of strings) | string - 什么情况下都加载              */,
  callback : /* function ( testResult, key ) | object { key : fn }   当某个url加载成功时执行相应的方法         */,
  complete : /* function   都加载完成了执行这个方法                                                   */
}, ... ]);

这里的参数都可以是array或者object,在加载多个资源文件的时候有用。

yepnope加载jquery的实例

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

这段代码异步加载了jquery和jquery.plugin.js,甚至还对jquery加载失败的情况做了一个备用处理。

如何安装Node.js

下面分别介绍在Mac, Ubuntu,Centos以及Windows下安装Node.js.

Mac

在Mac下,如果你喜欢用homebrew,那么只用一行就可以装好:

brew install node

否则,只能考虑手工安装了,步骤如下:

    1. 安装Xcode
    2. 安装git
    3. 运行下面的命令行编译node.js
      git clone git://github.com/joyent/node.git
      cd node
      ./configure
      make
      sudo make install

Ubuntu

    1. 安装依赖包
      sudo apt-get install g++ curl libssl-dev apache2-utils
      sudo apt-get install git-core
    2. 运行下面的命令行:
      git clone git://github.com/joyent/node.git
      cd node
      ./configure
      make
      sudo make install

Windows

用cygwin来安装node,步骤如下:

    1. 安装cygwin
    2. 在cygwin的目录下,运行setup.exe安装下面列表中的包
      • devel → openssl
      • devel → g++-gcc
      • devel → make
      • python → python
      • devel → git
    3. 运行cygwin
    4. 运行下面的命令行:
      git clone git://github.com/joyent/node.git
      cd node
      ./configure
      make
      sudo make install

Centos

yum install gcc-c++ openssl-devel
wget --no-check-certificate https://github.com/joyent/node/tarball/v0.3.3
tar -xzvf ry-node-v0.3.3-0-g57544ba.tar.gz
cd ry-node-v0.3.3-0-g57544bac1
./configure
make
make install

Hello Node.js!

写一段小程序例如hello_node.js来验证安装是否正确:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Node.js\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

用node来运行这段代码

node hello_node.js
Server running at http://127.0.0.1:8124/

现在,用浏览器打开 http://127.0.0.1:8124/ , 应该能够看到一条好消息。

参考文档

How to Install Node.js

Update

  • 补充了在centos上安装Node.js的步骤

如何在jquery mobile中加载google map api

介绍一个用jquery mobile的ajax效果加载google map api,实现地图呈现的例子。

代码示例

首先是代码示例,使用iphone或android之类的手机查看,效果更佳
google map with jquery mobile

关键代码说明

map.js

map.js定义了加载地图的方法initiallize(),这个和常规网页中加载google map是一致的,因此这里不再细述。

map.html

地图的实际页面,在这个页面中不能直接加载google map的api,因为它是采用document.write再次写入script来实现的,所以我们采用callback的方式来加载它,见下面的代码:

head.js(
        "map.js",
        function() {
            head.js("http://maps.google.com/maps/api/js?sensor=true&callback=initialize");
        }
    );

首先用head.js把initialize方法装载进来,然后用callback方式调用google map api。你可以试试用最平常的方式加载这段代码,看看有什么效果。


<script src="map.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"></script>

gmail的pop3快速刷新脚本

gmail接收pop3邮件的周期挺长的,如果邮件不是太频繁的话,差不多1小时才会刷新一次。如果你是firefox用户的话,解决办法是:

这个工具的用途是在页面上方的“刷新”旁边新增一个链接“刷新POP3邮件”,点击之后会马上检查所有的POP3邮箱。至于自动刷新功能,还等着看官你自己搞定呢。

BTW:如果是英文版的gmail,请手工修改gmail_pop3_quick_checker.user.js,我都提取出来了。