文章目录

前言

最近突然意识到,我把过多的内容放到这个博客里面了,是时候把编程、生活日记、工具wiki三者分开了:

(1)个人博客应该记录编程的内容,比如有趣的小实验、小项目、优美的算法、数学等等,它应该是以后工作的名片。

(2)生活日记记录的才是自己去哪儿玩儿了,昨天做什么梦了,有啥想买想吃的东西。

(3)wiki则应该记录一些常用的、系统的知识,比如快捷键、中文文档的翻译、软件程序出错解决手册。它应该是经过多次验证的工具书,不同于平时使用的印象笔记,印象笔记都是杂乱的思绪,突然想到的方法,突然想做的事情,或者在做事过程中边做边记录不需要考虑格式问题的草稿。wiki记录的则是可以快速搜索查找、具有条理的但是非常无聊、平时不会看,关键时候又需要翻一翻的东西。

因此诞生了制作自己的wiki的想法。

需求分析

我主要有三个需求:

(1)可以放在服务器上便于在任何地方查看,这需要体积小巧。

(2)支持Markdown的语法,支持中文。

(3)有强大的搜索功能,能够搜索内容中的关键字而不仅仅是标题。

我的小伙伴钉子在《使用 TiddlyWiki 打造轻便个人 Wiki 知识库》中已经提到了用TiddlyWiki,TiddlyWiki非常有用:

(1)单HTML文件,可以随时装在U盘里离线查看

(2)不需要任何服务器的配置,也不需要任何安装

(3)很多人使用,已经具有很多成熟的插件

(4)有强大的标签和搜索功能

用钉子的原话说:

 笔记软件,例如 EverNote 、 WizNote 、 OneNote 的确十分不错,但是也会带来客户端是否跨平台、启动速度是否好看甚至默认文字排版是否美观的问题;而且,常规的笔记软件也达不到 Wiki 级别方便的 Tag 标签系统。当然, Wiki 系统有经典的 MediaWiki 系统,还有许许多多的静态 Wiki 系统、 Wiki 知识库类客户端。然而, MediaWiki 庞大、复杂和丑陋; Wiki 客户端程序有好有坏,有设计简陋也有强大美观,但是最大的限制还是往往不跨平台;一些可以用 Github Pages 部署的,基于 Markdown 的 Wiki 系统尽管几乎能在功能上满足我的需求,但是每一次撰写新条目和部署的复杂度还是令人难以接受。你可能已经看出了我口味相当的刁钻和需求相当的诡异 …… 在我看来,管理以文字、代码和数学公式为主的个人知识库, TiddlyWiki 可谓是最好的选择之一。

然而其实不太符合我的需求:

(1)无法放到小水管服务器上。

存储在单一HTML文件里,再装几个插件,写点文字,文件会原来越大,钉子的Tiddly已经到5M了,5M的东西要用1M也就是128kb/s的水管传输……而钉子的服务器是80块一个月的Linode,非常适合:

(2)不支持markdown语法

Tiddlywiki用的是WikiText,虽然说差不多,但是也需要学习。

(3)界面凌乱

由于只有一个html文件,作者编辑和读者看是一个界面,虽然读者不会保存修改操作,但看着并不会使用却放在那里的按钮很难受。

(4)对浏览器的支持不太好

搜狗浏览器打开:

不过以后有机会还是想用一用TiddlyWiki的,比如等我租到大带宽服务器……

amwiki简介

在查了一些资料,并且排除了钉子所说的不太好用的那些wiki后,发现了amwiki。amwiki是国人TevinLi开发的在github上开源的wiki程序,起源也是因为觉得wiki都不太好用,于是他自己开发了一个。

amwiki优点

(1)支持markdown语法、支持中文。国人基于Atom开发的产物……太棒了。

(2)有自动构建工具。写完markdown后只需要按一下按钮更新目录即可。

(3)无需数据库。所有的markdown写完都保存为.md文件,它能够自动加载,省去了数据库的备份麻烦。

(4)支持粘贴图片。非常非常实用的功能,QQ截图后在Atom里面粘贴图片,自动把图片保存到assets目录下,并且自动创建文件夹、命名,自动把markdown语句写好……无敌。

(5)支持导出github wiki。因为amwiki最开始是为github项目写wiki用的。

(6)支持全库搜索。支持标题搜索、支持内容搜索。

(7)支持手机浏览

amwiki缺点

(1)没有更新了。amwiki的最后一次更新是在2018年1月3日,5个月没更新了,估计作者要弃坑了……有什么问题得自己去改。

(2)不支持公式。amwiki毕竟是小项目,没有成熟的插件。

(3)加载缓慢。由于没用数据库,还要在加载过程中转换为html,加载也是比较缓慢的。不过,amwiki是有缓存机制的,而且不需要像Tiddlywiki一样一次性加载完所有的文档。

未来的amwiki

注意到在计划中的下一个版本作者准备支持数学公式了,罒ω罒,包括评论系统,都是值得期待的,不过不知道何年何月才能等到……

上手amwiki

amwiki下载和安装

(1)从github上点击Clone or download下载ZIP,这里提供一个百度网盘amwikiv1.2.1(密码xvnk

(2)安装Atom编辑器,安装过程是自动的,强制安装到C盘。这是一款github开发的开源免费的编辑器,amwiki是作为Atom的插件开发的。同样提供百度网盘(密码8bui)备份下载,不过注意这个文件是v1.27.2 For Windows7(64bit) or later的,我的操作系统是windows8 64位,所以如果你的操作系统不同,需要自己去官网下载对应版本。

(3)将amwiki手动安装至Atom。

① 进入C:\Users\BEWINDOWEB\.atom\packages文件夹,这里的BEWINDOWEB是你计算机的名字,.atom是一个隐藏文件夹。

② 将amwiki的ZIP文件解压到这个文件夹,如果解压后的名字不是amWiki的话,比如是amWiki-master,需要把amWiki-master重命名为amWiki

(4)顺手装一个Atom汉化插件,同样的安装方法,下载→解压到packages目录。插件名字叫atom-simplified-chinese-menu-master,给一个百度网盘(密码qqa7)地址。

(5)打开Atom,发现上面的英文菜单栏变为了中文,并且多了一个amWiki轻文库的菜单,说明安装成功了:

amWiki的Hello World

(1)新建一个项目文件夹。我们在喜欢的地方建立一个文件夹,比如G:\githubWorkspace\Helloworld\,然后在Atom里面选择文件添加项目文件夹选中这个Helloworld,一个项目文件夹就建好了:

(2)编写config.json。在这个Helloworld文件夹下创建一个config.json文件,写入内容:

{
  "name": "Hello wiki"
}

(3)生成amwiki。菜单栏amWiki轻文库通过config.json创建新文库,会在这个目录下自动生成很多文件:

(4)启动本地服务器。菜单栏amWiki轻文库启动本地静态Web服务器,可能会提示联网,允许就好了。

(5)查看Hello wiki内容。

① 进入library目录,选择home-首页.md:

② 然后菜单栏amWiki轻文库→在浏览器中打开当前文档,Helloworld!(注意这里不能直接去打开index.html,因为会有跨域的问题,很多文件无法引用,需要从静态Web服务器来操作

修改amwiki

(1)看什么都不如看官方文档,amwiki官网amwiki文档中心

(2)修改config.json。

由于amwiki是自动生成的,所以你手动去更改内容非常麻烦,一切的修改都应该基于config.json,作者提供了以下接口

 参数名默认值 修改示例 作用 
nameamWiki轻文库Hello wiki wiki名称 
verby Tevinv0.0.1wiki版本
logoamwiki/images/logo.png/assets/logo.pnglogo图片 
colour#4296eb/assets/logo界面颜色
github-url你的github项目url作为github附属wiki
page-mountsfalse true页面挂载数据
importsassets/bwb.css引入自己的css/js  

最好的地方就是,作者允许使用自己的css/js,举个例子:

① 可玩点一:修改界面样式。

我希望把文库也改成类似自己博客的界面,风格统一,那么可以建立一个assets文件夹,创建文件bwb.css。

在bwb.css中,通过复写元素的样式就能够覆盖,比如审查头部的背景,class名称叫header:

我们编写一个:

/*头部*/
.header{
  background-color: #242424;
  border-top:none;
}

头部就从蓝白变成了全黑:

完整的界面对比和bwb.css代码如下,你可以参考:

a{
  color:#478cdc;
}
/*头部*/
.header{
  background-color: #242424;
  border-top:none;
}
.header .logo {
  padding-top: 5px;
}

.header .logo img {
  max-height: 59px;
}


.header .logo i {
  display:none;
}

.header .logo b {
  height: 59px;
  color:#f2f2f2;
  line-height:59px;
}
/*主体背景*/
.container{
  background-color:#f1f5f8;
  border: none;
  border-radius: 4px;
  box-shadow: 0px 0px 5px #f2f2f2;
  box-sizing: border-box;
  overflow:hidden;
}
/*左侧菜单*/
.menubar{
  border-right: 1px solid #eee;
}
.menu-filter svg {
  color:#478cdc;
}
.menu-search svg {
  color:#478cdc;
}
.menubar h4.on svg {
  color:#478cdc;
}
.menubar h4.on a {
  color:#478cdc;
}
.menubar h4, .menubar h5 {
  border:none;
}
.menu-search{
  border-left:none;
  border-bottom: 1px solid #eee;
}
.menu-filter{
  border-bottom: 1px solid #eee;
  padding-left: 6px;
  width: 205px;
}
.menu-filter input {
  border-bottom: none;
  width:170px;
  text-align: left;
  height:30px;
}
.menu-filter i {
  line-height: 36px;
  margin-top:2px;
}
.menu-filter:hover input {
  border-bottom: none;
}
.menu-filter input:focus {
outline: none;
  border-bottom: none;
}
.menu-filter svg{
  display:none;
}
.container .nav {
  background-color: #ffffff;
  border:none;
}
/*右侧内容*/
.main-inner{
  background-color: #ffffff;
  border:none;
}
/*搜索功能*/
.search-update input {
  background-color: #eee;
  font-weight: 300;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  border-radius: 15px;
  height: 30px;
  line-height: 28px;
  padding: 1px 10px;
  width: 110px;
  font-size:14px;
  color: #666;
}
.search-update input[disabled] {
  color: #ccc;
  background: #f2f2f2;
  border: #aaa 1px solid;
  padding: 1px 10px;
  border-radius: 15px;
  cursor:not-allowed;
}
.search-update input:hover{
  background-color: #f4f4f4;
}
.search-input input[type="button"] {
  font-size: 14px;
  background-color: #1B9AF7;
  color:#f2f2f2;
  border: none;
  height: 44px;
  padding-left:3px;
  padding-right:3px;
  outline:none;
}
.search-input input[type="button"]:hover{
  background-color: #41afff;
}

.search-input{
  padding-right: 105px;
}

.search-input input[type="text"]{
  border-color:#eee;
  font-size: 14px;
  padding:11px;
}
.search-input input[type="text"]:focus{
  border-color:#478cdc;
  box-shadow: none;
}

/*返回顶部*/
aside .contents{
  background: #eee;
  color: #666;
  box-shadow: 0px 0px 5px #f2f2f2;
  border: 1px solid #f2f2f2;
}
aside .contents-list{
  background: #fafafa;
  border: 1px solid #eee;
}
aside .contents a{
  color: #444;
}

aside .contents a:hover{
  color: #478cdc;
}
aside .contents .markdown-contents ol li>i{
  color: #666;
  background-color: #f2f2f2;
  padding: 0 5px;
  border-radius: 4px;
  line-height: 20px;
}
aside .back-top{
  background: #eee;
  color: #666;
  box-shadow: 0px 0px 5px #f2f2f2;
  border: 1px solid #f2f2f2;
}

/*底部签名*/
.signature{
  display:none;
}

@media screen and (max-width: 720px){
  .header .logo img{
    display:none;
  }
  .header .logo b {
      line-height:49px;
      height:49px;
  }
  .header .logo {
    padding-top: 0;
  }
  .container{
    background-color:#f1f5f8;
    border: none;
    border-radius: none;
    box-shadow: none;
    box-sizing: border-box;
    overflow:hidden;
  }
  .container .nav{
    background: #242424;
  }
  .menu-filter{
    width:100%;
  }
}

② 可玩点二:引入一些成熟的CSS。

作者只允许在config.json中引入一个CSS,其他的CSS会失效,但是我们可以在CSS里面写引入的语句。这使得功能变得强大,比如我想要使用font-awesome4.7.0的图标,百度网盘(密码vxl4),那么把font-awesome插件下载到assets目录下:

再在bwb.css开头(注意是开头,写在结尾无效)写引入语句:

/*引入其他css*/
@import "font-awesome/css/font-awesome.min.css";

就能够在markdown里面使用啦~

<font color="#478cdc"><i class="fa fa-globe"></i></font>

效果:

使用amwiki的姿势

(1)剪贴板功能

QQ截图后,直接使用ctrl+shift+v,或者菜单栏amWiki轻文库→从剪贴板粘贴截图,就能够自动帮你保存图片并写好markdown:

更好的是,它可以根据文档所在目录自动创建文件夹,让你的图片可以按文章分类。

(2)善用搜索功能

虽然amwiki没有标签,但是可以搜索文章内容是非常无敌的。先更新缓存到100%,再搜索:

(3)手机端观看

amwiki支持自适应(虽然写得并不太好),手机端也是可以浏览、搜索、查看的哦。

(4)打开实时预览编写Markdown

在Atom中按Ctrl+shift+m可以打开Markdown实时预览~

amwiki v1.2.1的bug

字符被转码

当输入\n的时候会被转义为&#39;。原因是这一段,来源于amWiki\js\amWiki.docs.js

content = content.replace(/\\(.)/g, function (m, s1) {
      return '&#' + s1.charCodeAt(0) + ';';
});

看了下作者的wiki:

………………目测是开发中状态,而且和作者交流后,发现作者已经用上了自己开发好了的版本了……没办法,把这段注释掉就好了,不过用不上这个新功能了。记得注释C:\Users\BEWINDOWEB\.atom\packages\amWiki\filesamWiki.docs.js中的内容,这样再次用config.json生成的时候就一直会是注释状态,否则只注释项目内的amWiki.docs.js,重新生成的时候会被重写。

img.toPng() is not a function

Atom 1.28.0版本已经将Electron升级到2.0版本了。而Electron v2.0的NativeImage.toPng函数已经被移除,取而代之的是NativeImage.toPNG。所以修改这个代码即可。解决方法参见《amwiki报错:img.toPng is not a function》

使用github托管wiki

如果没有合适的服务器,完全可以用github来托管,和普通的上传项目的方式一致:create项目→ push本地仓库 → push到github。不过建立的项目名称必须为:username.github.io,比如我的wiki为bewindoweb.github.io,他会自动识别的,一打开就是home-首页.md的内容。赶紧尝试动手搭一个吧~

你还可以通过github项目SettingsGithub PagesCustom domain自定义其他的域名。当然,你要提前在域名解析上面添加CNAME指向wiki的地址。

还能够强制启用HTTPS,不过这个证书是github的,在Chrome上会有拦截信息,这样wiki.bewindoweb.com也能访问它了。


转载请注明出处http://www.bewindoweb.com/199.html | 三颗豆子
分享许可方式知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
重大发现:转载注明原文网址的同学刚买了彩票就中奖,刚写完代码就跑通,刚转身就遇到了真爱。
你可能还会喜欢
具体问题具体杠