Commit a867763e authored by dmscode's avatar dmscode
Browse files

V2.0

parent 3bb9133f

README.md

+49 −34
Original line number Diff line number Diff line
@@ -5,53 +5,63 @@ Wiki in box 


扯远了哈，所以在经历过许多次的“查询 --> 忘记”的过程之后，我终于决定开始构建自己的知识体系了，那么如上所述， Wiki 便成了我的不二选择。



但是，自己搭建 Wiki 总是需要各种环境支持，这倒不不难，但是琢磨起备份的方法来总是觉得头晕。因为本人手残，在服务器上误删网站的事情也屡有发生，所以就希望一个简简单单，放在 Dropbox 里的 Wiki 系统。当然，其实这个已经有很多人在做了，但是也许是我笨，一个都没能试验成功，索性自己操刀了……

但是，自己搭建 Wiki 总是需要各种环境支持，这倒是不难，但是琢磨起备份的方法来总是觉得头晕。因为本人手残，在服务器上误删网站的事情也屡有发生，所以就希望一个简简单单，放在 Dropbox 里的 Wiki 系统。当然，其实这个已经有很多人在做了，但是也许是我笨，一个都没能试验成功，索性自己操刀了……



**Append:** 我想我是被 Chrome 给坑了，他喵的不允许 Javascript 操作本地文件。所以如果你用的是 Chrome 浏览器，那么你必须搭建一个服务器。



不过好消息是：在 Windows 下搭建静态服务器的软件实在是多的一塌糊涂，且十分小巧方便，比打开一个记事本可能都要省资源，那么网盘里放一个也不算什么了。

不过好消息是：在 Windows 下搭建静态服务器的软件实在是多的一塌糊涂，且十分小巧方便，比打开一个记事本可能都要省资源，那么网盘里放一个也不算什么。



Linux 下可能更简单一些，大部分系统都自带了 Python， 那么到 Wiki 根目录下运行 ```python -m SimpleHTTPServer 4000``` 然后访问 ```http://localhost:4000``` 即可。



Mac 系统我不了解，求赞助一个供我研究……



**如果你使用 Sublime Text 作为编辑器，那么，只需要安装 SublimeServer 插件 [SublimeServer](https://github.com/learning/SublimeServer) 便可以轻松 High 翻天。本人目前的测试工作都是在这上面进行。**

**如果你使用 Sublime Text 作为编辑器，那么，只需要安装  [SublimeServer](https://github.com/learning/SublimeServer) 插件便可以轻松 High 翻天。本人目前的测试工作都是在这上面进行。**



---



## 当前状态： ##



* 建立项目 ………… OK

* 文件体系 ………… OK

* 网页模板 ………… OK

* 代码转换 ………… OK

* 文件获取 ………… OK

* 命名空间 ………… OK

* 样式定义 ………… OK

* 首页文档 ………… OK

* 内页链接 ………… OK

* 代码复制 ………… OK

* 页内索引 ………… 还在犹豫它的必要性

* 变量设置

* 内链优化

## 当前版本： ##



### V2.0 - 2015年11月30日 ###



重新整理增强。



## 使用说明： ##



1. 如果你使用的是 Firefox 浏览器，那么可以把文件放在网盘，在本地使用，十分方便；

2. 如果你使用的是 Chrome 浏览器，你需要准备一个 Http 服务器，请不要找那些大型套件，一个很小很小的 Http 服务器即可，把文件放在网站根目录，在本地使用一样爽歪；

3. 如果你有需要，也可以以上传到网站进行展示，这不需要做任何修改，但是由于是异步读取文件内容，境外主机请慎选，否则可能也面颊在时间过长；

4. 文件存放在 data 目录下，后缀为 md，因为本系统支持的是 Markdown 语法（[Markdown教程](http://wowubuntu.com/markdown/)）；

5. data 目录下支持子目录；

6. 命名空间深度无限，区分大小写，详细规则如下：

* 页面内容文件存放在 data 目录下，后缀为 md，因为本系统支持的是 Markdown 语法（[Markdown教程](http://wowubuntu.com/markdown/)）；

* data 目录下支持子目录；

* 内部链接只需要链接到页面命名，比如：`[链接到一个页面](linux:software:vim)`；

* 命名空间深度无限，详细规则如下：



	http://yourname.com/?name=dir-a:dir-b:file-c

> linux:software:vim



对应读取文件为：



	/data/ dir-a/dir-b/file-c.md

> /data/linux/software/vim.md



* imgs 文件夹可用来储存文章图片，也可自行安排使用其他位置；



###本地使用###



* 站点文件可以存放在任意喜欢的位置，就如同您期望的，存放在网盘中是一个十分不错的选择。你唯一需要注意的只是保持这些文件的相对位置不变而已；

* 如果你使用的是 Firefox 浏览器，那么直接访问 `index.html` 文件即可，十分方便；

* 如果你使用的是 Chrome 浏览器，你需要准备一个 Http 服务器，请不要找那些大型套件，一个很小很小的 Http 服务器即可，把服务器的根目录设置到 `index.html` 文件所在目录即可，在本地使用一样爽歪；

* 如果你使用 Sublime Text 作为编辑器，那么，只需要安装 [SublimeServer](https://github.com/learning/SublimeServer) 插件便可以轻松 High 翻天；



###在线使用###



* 如果你有需要，也可以以上传到您的网站空间上进行展示，这不需要做任何修改，但是由于是异步读取文件内容，境外主机请慎选，否则可能页面加载时间过长；



###添加页内目录###



7. 内部链接只需要链接到页面命名，比如：```[链接到一个页面](linux:vim)```；

8. imgs 文件夹可用来储存文章图片，目录结构自行安排；

因为 Wiki 单页面很容易有大量的内容，这时候就需要有页内导航，本系统支持页内目录功能。使用方法：



> 在文档内任意位置的单独一个段落使用标签 `[TOC]` 即可，每页只可使用一次，如下：



[TOC]



###关于语法###



较基本语法略有增强，额外支持表格和注释。其他需求请自行使用 HTML 代码解决。



## 文件结构： ##
@@ -59,15 +69,20 @@ Mac 系统我不了解，求赞助一个供我研究…… 
	* 	|- files			全部引用文件

		* 	|- css			全部样式文件，包括 Bootscrap、Hightlight、自定义

		* 	|- fonts		全部字体文件，目前主要是 Bootscrap

		* 	|- js			全部脚本文件，包括 Bootscrap、Hightlight、自定义

	* 	|- files			全部引用文件

		* 	|- js			全部脚本文件，包括 Bootscrap、Marked、Hightlight、toc、自定义

	* 	|- imgs				全部文章图片

	* 	|- data				全部文章源码

		*	|- index.md		默认显示文档，建议用作索引

	* 	|- index.html		唯一的页面文件，负责解读一切内容



## 请支持一下 ##



如果您觉得这个小程序对你有所帮助，希望您请我喝杯咖啡，让我在这寒冷的冬日里感受到一份温暖，谢谢~



本人支付宝账号：**alay9999@163.com**



## 技术支持： ##



* [marked](https://github.com/chjj/marked) by [chjj](https://github.com/chjj) 这是一个很不错的 Markdown 转化 Html 的工具，JavaScript 书写， Node.js 和本地都可以使用.

* [highlight.js](https://github.com/isagalaev/highlight.js) by [isagalaev](https://github.com/isagalaev) 一个真心好用的代码高亮工具，支持 118 种代码高亮。爽得一塌糊涂，记得去他的管网下载，我就是傻乎乎的在 Github 下载的，然后被坑的好爽……
 
* [marked.js](https://github.com/chjj/marked) by [Christopher Jeffrey (JJ)](https://github.com/chjj) 这是一个很不错的 Markdown 转化 Html 的工具，JavaScript 书写， Node.js 和本地都可以使用.

* [highlight.js](https://github.com/isagalaev/highlight.js) by [Ivan Sagalaev](https://github.com/isagalaev) 一个真心好用的代码高亮工具，支持 118 种代码高亮。爽得一塌糊涂，记得去他的官网下载，我就是傻乎乎的在 Github 下载的，然后被坑的好爽……

* [TOC.js](https://github.com/jgallen23/toc) by [Greg Allen](https://github.com/jgallen23) 生成页内标题目录的工具，自定义性很好，只是默认设置对中文……很不友好。不过改个设置就好。
 
 No newline at end of file

data/index.md

+48 −26
Original line number Diff line number Diff line 
示例文档

说明文档

===



一个可以放在各种网盘，各种空间的，Markdown 语法支持的 Wiki 系统，可以用来方便的管理自己的知识碎片。欢迎各种支持～

一个可以放在各种网盘，各种空间的，Markdown 语法支持的 Wiki 系统，可以用来方便的管理自己的知识碎片，也可以用来搭建自己的静态博客（http://zji.me/ ）。欢迎各种支持～



[Github 项目页](https://github.com/dmscode/Wiki-in-box)

[主页 / 发布页](http://dmscode.github.io/Wiki-in-box/) | [Github 项目页](https://github.com/dmscode/Wiki-in-box)



## 使用说明： ##

## 请支持一下 ##



1. 如果你使用的是 Firefox 浏览器，那么可以把文件放在网盘，在本地使用，十分方便；

2. 如果你使用的是 Chrome 浏览器，你需要准备一个 Http 服务器，请不要找那些大型套件，一个很小很小的 Http 服务器即可，把文件放在网站根目录，在本地使用一样爽歪；

3. 如果你使用 Sublime Text 作为编辑器，那么，只需要安装 SublimeServer 插件 [SublimeServer](https://github.com/learning/SublimeServer) 便可以轻松 High 翻天

4. 如果你有需要，也可以以上传到网站进行展示，这不需要做任何修改，但是由于是异步读取文件内容，境外主机请慎选，否则可能也面颊在时间过长；

5. 文件存放在 data 目录下，后缀为 md，因为本系统支持的是 Markdown 语法（[Markdown教程](http://wowubuntu.com/markdown/)）；

6. data 目录下支持子目录；

7. 命名空间深度无限，详细规则如下：

如果您觉得这个小程序对你有所帮助，希望您请我喝杯咖啡，让我在这寒冷的冬日里感受到一份温暖，谢谢~



	http://yourname.com/?name=dir-a:dir-b:file-c

本人支付宝账号：**alay9999@163.com**



## 使用说明 ##



* 页面内容文件存放在 data 目录下，后缀为 md，因为本系统支持的是 Markdown 语法（[Markdown教程](http://wowubuntu.com/markdown/)）；

* data 目录下支持子目录；

* 内部链接只需要链接到页面命名，比如：`[链接到一个页面](linux:software:vim)`；

* 命名空间深度无限，详细规则如下：



> linux:software:vim



对应读取文件为：



	/data/ dir-a/dir-b/file-c.md

> /data/linux/software/vim.md



* imgs 文件夹可用来储存文章图片，也可自行安排使用其他位置；



###本地使用###



* 站点文件可以存放在任意喜欢的位置，就如同您期望的，存放在网盘中是一个十分不错的选择。你唯一需要注意的只是保持这些文件的相对位置不变而已；

* 如果你使用的是 Firefox 浏览器，那么直接访问 `index.html` 文件即可，十分方便；

* 如果你使用的是 Chrome 浏览器，你需要准备一个 Http 服务器，请不要找那些大型套件，一个很小很小的 Http 服务器即可，把服务器的根目录设置到 `index.html` 文件所在目录即可，在本地使用一样爽歪；

* 如果你使用 Sublime Text 作为编辑器，那么，只需要安装 [SublimeServer](https://github.com/learning/SublimeServer) 插件便可以轻松 High 翻天；



###在线使用###



* 如果你有需要，也可以以上传到您的网站空间上进行展示，这不需要做任何修改，但是由于是异步读取文件内容，境外主机请慎选，否则可能页面加载时间过长；



###添加页内目录###



8. 内部链接只需要链接到页面命名，比如：```[链接到一个页面](linux:vim)```；

9. imgs 文件夹可用来储存文章图片，目录结构自行安排

因为 Wiki 单页面很容易有大量的内容，这时候就需要有页内导航，本系统支持页内目录功能。使用方法：



> 在文档内任意位置的单独一个段落使用标签 `[TOC]` 即可，每页只可使用一次，效果如本页。



[TOC]



###关于语法###



较基本语法略有增强，额外支持表格和注释[注释]。其他需求请自行使用 HTML 代码解决。



[注释]: 这是一个注释



## 文件结构： ##
@@ -30,19 +57,14 @@ 
	* 	|- files			全部引用文件

		* 	|- css			全部样式文件，包括 Bootscrap、Hightlight、自定义

		* 	|- fonts		全部字体文件，目前主要是 Bootscrap

		* 	|- js			全部脚本文件，包括 Bootscrap、Hightlight、自定义

	* 	|- files			全部引用文件

		* 	|- js			全部脚本文件，包括 Bootscrap、Marked、Hightlight、toc、自定义

	* 	|- imgs				全部文章图片

	* 	|- data				全部文章源码

		*	|- index.md		默认显示文档，建议用作索引

	* 	|- index.html		唯一的页面文件，负责解读一切内容



## 代码高亮： ##



	<script>

		alert('Hello, World!')

	</script>



## 图片效果： ##

## 技术支持： ##



![Bridge](imgs/bridge.jpg)
 
 No newline at end of file
 
* [marked.js](https://github.com/chjj/marked) by [Christopher Jeffrey (JJ)](https://github.com/chjj) 这是一个很不错的 Markdown 转化 Html 的工具，JavaScript 书写， Node.js 和本地都可以使用.

* [highlight.js](https://github.com/isagalaev/highlight.js) by [Ivan Sagalaev](https://github.com/isagalaev) 一个真心好用的代码高亮工具，支持 118 种代码高亮。爽得一塌糊涂，记得去他的官网下载，我就是傻乎乎的在 Github 下载的，然后被坑的好爽……

* [TOC.js](https://github.com/jgallen23/toc) by [Greg Allen](https://github.com/jgallen23) 生成页内标题目录的工具，自定义性很好，只是默认设置对中文……很不友好。不过改个设置就好。
 
 No newline at end of file

files/css/main.css

+190 −18
Original line number Diff line number Diff line 
/*为什么在写之前还有一点小激动呢？*/

*{

	font-family: Arial, 'Microsoft YaHei';

	font-family: "Consolas", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

}

html,

body {

	margin: 0;

	background: #EFEFEF;

	font-size: 16px;

	line-height: 1.8em;

}
@@ -8,13 +13,9 @@ a { 
	text-decoration: none;

}

a:hover {

	color: #F92672;

	text-decoration: none;

}

html,

body {

	margin:0;

	background: #EFEFEF;

}

body>#header {

	background: #22222C;

	width: 100%;
@@ -32,8 +33,7 @@ body>#header h1 { 
	margin: 0;

}

body>#main {

	margin-top: 15px;

	margin-bottom: 15px;

	padding: 15px 0;

}

body>#main #content {

	background: #FEFEFE;
@@ -44,17 +44,16 @@ body>#main #content { 
	-moz-box-shadow: 0 2px 3px 5px #EEE;

	box-shadow: 0 2px 3px 5px #EEE;

}



body>#footer {

	background: #DDD;

	width: 100%;

	text-align: center;

	color: #999;

	font-size: 12px;

	font-size: 0.75em;

	line-height: 2.4em;

}

body>#footer a {

	font-size: 12px;

	font-size: 0.75em;

	color: #999;

}

/*内容样式*/
@@ -64,9 +63,52 @@ body>#main #content p { 
	/*text-indent:2em;*/

}

body>#main #content h1 {

	font-size: 2em;

	line-height: 2.4em;

	border-bottom: 5px solid #DDD;

	margin: 20px 0;

	padding: 0 60px;

	margin: 20px -60px;

}

body>#main #content h2 {

	font-size: 1.4em;

	line-height: 1.6em;

	color: #EFEFEF;

	padding: 0 60px;

	margin: 20px -60px;

	background-color: #22222C;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	-ms-border-radius: 3px;

	-o-border-radius: 3px;

	border-radius: 3px;

}

body>#main #content h3 {

	font-size: 1.4em;

	line-height: 1.6em;

	padding: 0 60px;

	margin: 20px -60px;

	background-color: #DDD;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	-ms-border-radius: 3px;

	-o-border-radius: 3px;

	border-radius: 3px;

}

body>#main #content h4 {

	font-size: 1.4em;

	line-height: 1.8em;

}

body>#main #content h5 {

	font-size: 1.2em;

	font-weight: bold;

	line-height: 1.8em;

	color: #666;

}

body>#main #content h6 {

	font-size: 1.1em;

	line-height: 1.8em;

	font-weight: bold;

	color: #999;

}

pre {

	display: block;
@@ -77,12 +119,12 @@ pre { 
	margin: 0.6em -60px;

	background: #23241f;

	color: #f8f8f2;

	font-size: 16px;

	-webkit-text-size-adjust: none;

}

pre code {

	font-size: 16px;

	display: block;

	padding: 35px 15px;

	padding: 15px 15px;

	margin:0;

	border-left:2px solid #666;

}
@@ -109,10 +151,140 @@ body>#main #content .img-box img { 
	margin: 0 auto;

	max-width: 100%;

}

body>#main #content blockquote {

body>#main #content blockquote,

body>#main #content blockquote>blockquote>blockquote,

body>#main #content blockquote>blockquote>blockquote>blockquote>blockquote {

	background: #F6F6F6;

	border-left: 5px solid #DDDDE3;

}

body>#main #content blockquote>blockquote {

body>#main #content blockquote>blockquote,

body>#main #content blockquote>blockquote>blockquote>blockquote {

	background: #FFF;

}

 {

	background: #F6F6F6;

}

body>#main #content table {

	border: 2px solid #DDD;

	margin: 0.6em auto;

}

body>#main #content table td,

body>#main #content table th {

	padding: 5px 10px;

	border: 1px solid #DDD;

}

body>#main #content table th {

	background-color: #EFEFEF;

}



#toc-box {

	position: fixed;

	z-index: 10;

	bottom: 0;

	max-height: 80%;

	left: center;

	background-color: #22222C;

	padding: 10px 35px 0;

	margin: 0 -35px;

	-webkit-box-shadow: 0 -2px 12px #333;

	box-shadow: 0 -2px 12px #333;

	-webkit-border-radius: 6px 6px 0 0;

	-moz-border-radius: 6px 6px 0 0;

	-ms-border-radius: 6px 6px 0 0;

	-o-border-radius: 6px 6px 0 0;

	border-radius: 6px 6px 0 0;

	border-top: 1px solid rgba(255,255,255,0.3);

	border-right: 1px solid rgba(255,255,255,0.3);

}

#toc-box .menu {

	position: absolute;

	top: -30px;

	left: 50%;

	width: 60px;

	height: 60px;

	margin-left: -30px;

	background-color: #22222C;

	-webkit-border-radius: 40px;

	-moz-border-radius: 40px;

	-ms-border-radius: 40px;

	-o-border-radius: 40px;

	border-radius: 40px;

	color: #DDD;

	font-size: 20px;

	line-height: 50px;

	text-align: center;

	cursor: pointer;

}

#toc-box .menu:before {

	content: " ";

	position: absolute;

	top: 0;

	left: 0;

	z-index: -10;

	width: 60px;

	height: 60px;

	background-color: #22222C;

	-webkit-border-radius: 40px;

	-moz-border-radius: 40px;

	-ms-border-radius: 40px;

	-o-border-radius: 40px;

	border-radius: 40px;

	-webkit-box-shadow: 0 -2px 12px #333;

	box-shadow: 0 -2px 12px #333;

}

#toc {

	position: relative;

	z-index: 100;

	background-color: #FFF;

	padding: 10px 25px 0;

	margin: 0 -25px;

	-webkit-box-shadow: 0 2px 3px #999 inset;

	box-shadow: 0 2px 3px #999 inset;

	-webkit-border-radius: 6px 6px 0 0;

	-moz-border-radius: 6px 6px 0 0;

	-ms-border-radius: 6px 6px 0 0;

	-o-border-radius: 6px 6px 0 0;

	border-radius: 6px 6px 0 0;

	border-top: 1px solid #333;

	border-right: 1px solid #333;

	overflow-y: auto;

	display: none;

}

#toc ul {

	margin: 0;

	padding: 0;

	list-style: none;

}

#toc li {

	border-bottom: 1px dashed #DDD;

	word-wrap: break-word;

	word-break: normal;

}

#toc li:last-child {

	border: none;

}

#toc a {

    text-decoration: none;

    display: block;

}

#toc .toc-h2 {

    padding-left: 30px;

}

#toc .toc-h3 {

    padding-left: 60px;

}

#toc .toc-h4 {

    padding-left: 90px;

}

#toc .toc-h5 {

    padding-left: 120px;

}

#toc .toc-h6 {

    padding-left: 150px;

}

#toc .toc-active {

    background-color: #F92672;

}

#toc .toc-active a {

    color: #FFF;

}
 
 No newline at end of file

files/js/highlight.js

+3 −2

File changed.

Preview size limit exceeded, changes collapsed.

files/js/marked.js

+2 −2
Original line number Diff line number Diff line
@@ -370,7 +370,7 @@ Lexer.prototype.token = function(src, top, bq) { 
      src = src.substring(cap[0].length);

      this.tokens.links[cap[1].toLowerCase()] = {

        href: cap[2],

        title: cap[3]

        title: "def" //cap[3]

      };

      continue;

    }
@@ -1259,7 +1259,7 @@ marked.inlineLexer = InlineLexer.output; 


marked.parse = marked;



if (typeof module !== 'undefined' && typeof exports === 'object') {

if (typeof module !== 'unined' && typeof exports === 'object') {

  module.exports = marked;

} else if (typeof define === 'function' && define.amd) {

  define(function() { return marked; });

CRA Git | Maintained and supported by SUSTech CRA and CCSE