Vim知多少

Vim的官网

Vim最早在1991年由Bram Moolenaar发布,是Vi的一个改良版, 表示Vi IMproved.

Vi最早在1976年由Bill Joy发布。

Richard Stallman称Vi是魔鬼的编辑器(VI-VI-VI在罗马数字中表示兽名数目)。

Vi的支持者反讽Emacs是一个伟大的操作系统,只缺个体面的编辑器。两者有太多的往事不堪回首。

目标:用jQuery和Bootstrap这两个Javascript库,美化VimWiki输出的HTML页面。

软件版本分别是:VimWiki1.2, Bootstrap 2.x,jQuery 1.7.2。

VimWiki默认输出的HTML页面比较原始,我希望在原始页面的基础上添加:

  • 页面顶部的导航。
  • 不同类别页面,有侧边导航。
  • 首页除外的每个页面有个路径导航。
  • 每个页面,生成页面内链接的目录。
  • 点击外链,在新窗口打开;点击内链,在当前窗口打开。

因为我的笔记中有一些HTML相关的笔记,并引用到HTML代码,所以必须禁止VimWiki解析HTML标签:

" _vimrc
let g:vimwiki_valid_html_tags = ''

这样一来,页面布局就完全不能使用HTML标签,以至于一些工作,只能依赖于jQuery/Bootstrap完成。

优化!开始

区分内外链

目标:点击外链,在新窗口打开;点击内链,在当前窗口打开。

对于链接,VimWiki的写法是:

[[VimWiki|VimWiki学习笔记]]
[http://www.vim.org Vim官网]

VimWiki生成的页面:

<a href="VimWiki.html">VimWiki学习笔记</a>
<a href="http://www.vim.org">Vim官网</a>

我希望生成的页面:

<a href="VimWiki.html">VimWiki学习笔记</a>
<a target="_blank" href="http://www.vim.org">Vim官网</a>

因为禁用了HTML标签,所以无法简单手工写<a>标签实现,因此用jQuery搜索以 <a href="http://">link</a> 打头的链接,并添加target属性:

$("a[href^='http://']").each(function(){
  this.target = "_blank";
});

侧边导航

目标:为了让不同类别的页面,有不同的侧边导航,例如:HTML笔记页面的侧边是:HTML表单、HTML头部等;Vim笔记页面的侧边导航是:Vim寄存器、Vim插件、VimWiki等。

需要使用VimWiki的模版文件。以下是目录结构:

vimwiki\
    + template
        + default_template.html     -> 默认模版
        + vim.html                  -> Vim相关笔记的模版文件
        + html.html                 -> HTML相关笔记的模版文件
        + python.html               -> Python笔记的模版文件
        + ...
    + html                          -> 输出HTML目录
        + .html files
        + style.css
        + favorite.ico
        + ...
    + .wiki files

在不同的.wiki文件引用不同的模版,如:

%template vim
%template html 

在.vimrc/_vimrc中指定默认模版、模版路径、模版文件后缀等:

let g:vimwiki_list = [{'path':'d:/vimwiki/',
            \'template_path' : 'd:/vimwiki/template/',
            \'template_default' : 'default_template',
            \'template_ext' : '.html',
            ...

表格边框与颜色

把Bootstrap的table, table-bordered, table-striped三个类添加到table元素上,为表格添加边框,以及奇偶行以不同颜色展现:

$("table").addClass("table table-bordered table-striped");

页面目录

页面目录,套用Bootstrap的well类,以及自己加的page-nav类:

$(".toc").addClass("well page-nav");

page-nav的代码:

.page-nav { float:left; width:auto; margin-right:36px; padding:12px 36px 12px 0; }

添加Google搜索框

其中CustomID是申请Google自定义搜索时获取的ID。ie意指输入语言编码,我这里用了GBK(参考Google搜索参数)。

<form action="http://www.google.com/cse" class="form-search">
    <input type="hidden" name="cx" value="CustomID">
    <input type="hidden" name="ie" value="GBK" />
    <input type="text" class="input search-query" name="q">&nbsp;&nbsp;
    <button type="submit" class="btn">&nbsp;搜索&nbsp;</button>
</form>

分享

0