10

使用 Vimwiki + git 做知识管理

 2 years ago
source link: https://www.linuxzen.com/shi-yong-vimwiki-git-zuo-zhi-shi-guan-li.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Home Menu

使用 Vimwiki + git 做知识管理

Gray King | Thu 26 December 2013

一直在找一个合适的知识管理工具, 用过 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 对代码进行高亮


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK