使用 Vimwiki + git 做知识管理

Gray King |

一直在找一个合适的知识管理工具, 用过 Evernote, 但是不支持 Markdown, 用了一段时间也放弃了. 最近 python-cn 列表里也在讨论这个问题, 看到有人使用 Vimwiki, 所以就尝试了一下.

安装后,试着写了点东西, 发现很方便做知识管理和记录笔记, 可以生成HTML, 可以定制模板, 这里不讨论如何使用, Vimwiki 的文档介绍的很详细,

我使用bootstrap和 jquery 对模板进行了一些定制:

  • 添加导航
  • 将toc移动到左侧

下面将介绍我是如何做的, 并在最后附上如何部署的

指定模板

首先需要更改默认模板

    let g:vimwiki_list = [{'path': '~/vimwiki',
    \    'path_html': '~/vimwiki_html',
    \    'template_path': '~/vimwiki/template',
    \    'template_default': "default.tpl"}]

并将默认的模板作为模板进行修改

mkdir -p ~/vimwiki/template
cp ~/.vim/bundle/vimwiki/autoload/vimwiki/default.tpl ~/vimwiki/template

添加静态文件

将jqeury和bootstrap的js和css文件放到 ~/vimwik_html目录下,

为了统一修改和发布 Wiki, 我将静态文件放在 ~/vimwiki 的 static 目录下, 并在 ~/vimwiki_html 创建一个软链链接到这个目录, 下面是我 static 目录的一个快照

$ tree ~/vimwiki/static 
~/vimwiki/static
├── bootstrap
│   ├── css
│   │   ├── bootstrap.min.css
│   │   └── bootstrap-theme.min.css
│   ├── fonts
│   │   ├── glyphicons-halflings-regular.eot
│   │   ├── glyphicons-halflings-regular.svg
│   │   ├── glyphicons-halflings-regular.ttf
│   │   └── glyphicons-halflings-regular.woff
│   └── js
│       └── bootstrap.min.js
├── css
│   └── wiki.css
└── js
    ├── jquery-1.8.3.min.js
    └── wiki.js

6 directories, 10 files

其中wiki.js和wiki.css分别是自定义的Javascript和CSS 然后在~/vimwiki_html中创建链接

$ ln -s ~/vimwiki/static ~/vimwiki_html/static

在模板中引用静态文件

结合 %root_path%模板变量引入静态文件

<link rel="Stylesheet" type="text/css" href="%root_path%static/css/wiki.css">
<link rel="Stylesheet" type="text/css" href="%root_path%static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="%root_path%static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="%root_path%static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="%root_path%static/js/wiki.js"></script>

创建导航

根据 Boostrap 文档中的例子很容易就可以创建一个好看的导航

<nav class="navbar navbar-default navbar-inverse" role="navigation">
 <div class="container">
    <div class="navbar-header">
<button data-target=".bs-navbar-collapse" data-toggle="collapse" type="button" class="navbar-toggle">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="/index.html">cold's wiki</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="%root_path%index.html">首页</a></li>
            <li><a href="%root_path%diary/diary.html">日记</a></li>
            <li><a href="%root_path%TODO.html">TODO</a></li>
        </ul>
    </div>
 </div>
</nav>

然后将 content 变量放在 'contaniner' 中

<div class="container content-body">
    %content%
</div>

替换样式和将 toc 移动到左侧

替换表格样式

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

然后将 toc 移动到右侧, 并使用 affix 效果

// 生成左侧toc导航
if ($(".toc").html().trim()){
    var html = $(".content-body").html();
    var toc_html = '<div class="toc">'+$(".toc").html() + "</div>"
    var content = html.replace(toc_html, "");
    var html = '<div class="col-md-3">\n'+toc_html+'\n</div>\n';
    html += '<div class="col-md-9">\n'+content+'\n</div>\n';
    html = html.replace(/blockquote/g, "pre");
    $(".content-body").html(html);
    $(".toc").addClass("bs-sidebar");
    /* $(".toc").attr("role", "complementary"); */
    $(".toc").attr("data-spy", "affix");
    /* $(".toc").attr("data-offset-top", "200") */
    var uls = $(".toc").find("ul");
    for (var i = 0; i < uls.length; i++){
        ul = uls[i];
        console.log($(ul).parent(), $(".toc"));
        console.log($(ul).parent() == $(".toc"));
        console.log($(ul).parent().hasClass("toc"));
        if ($(ul).parent().hasClass("toc"))
            $(ul).addClass("nav bs-sidenav");
        else
            $(ul).addClass("nav");

    }
}

完整的wiki.js

自定义样式

我同时还用 Vimwiki 做TODO管理, 原有的样式感觉挺不错的, 就拷贝了一份, 还有一点是从 bootcss.com 文档页面扒下来的, 可以在这里看到.

部署

我将我的vimwiki上传到了 bitbucket, 然后添加了一个定义更新的脚本, 下面是脚本内容:

#!/bin/sh
PWD="/home/yourusername/vimwiki"
cd "$PWD"
git pull | grep "Allready up-to-date." 2>&1 > /dev/null

if [ $? -ne 0 ]
then
    vim +VimwikiIndex +VimwikiAll2HTML +qa
fi
cd -

上面脚本命名为 update.sh 保存在 ~/vimwiki 下, 通过 crontab 进行定时调用

$ crontab -l
*/30 * * * * /bin/bash /home/yourusername/vimwiki/update.sh &> /dev/null

使用 Disqus 评论系统

我在 template/default.tpl 添加了代码来使用 Disqus 评论系统, 这里不在详述

已经上线的Wiki

当然现在我已经部署了自己的wiki, 猛击这里进入

接下来

现在wiki还没有代码高亮, 我不想使用那个js的高亮, 想通过 pygments 来做代码高亮, 所以接下想通过 pygments 对代码进行高亮

参考

Show Comments