一个计算机技术爱好者与学习者

0%

wiki使用技巧

1. 前言

wiki是在公司里最常用的工具之一,本文总结记录一些wiki使用技巧,希望对大家也有一些帮助。

2. 标题自动编号

2.1. 背景

给文档标题手动添加编号很麻烦,而且容易写错。如果插入或删除章节,后面的编号都要重新修改一遍,无法接受。

2.2. 目的

实现wiki标题自动编号。

2.3. 原理

通过wiki的markdown插件,可以插入一些自定义的css/js,来自定义页面内容。
参考文档:MarkDown标题自动添加编号

2.4. 方法

1、插入,其他宏,markdown。

2、markdown中填入如下css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
#main-content { counter-reset: h1counter; }
#main-content h1 { counter-reset: h2counter; }
#main-content h2 { counter-reset: h3counter; }
#main-content h3 { counter-reset: h4counter; }
#main-content h4 { counter-reset: h5counter; }
#main-content h5 { counter-reset: h6counter; }
#main-content h6 { }
#main-content h1:before {
counter-increment: h1counter;
content: counter(h1counter) ".\0000a0\0000a0";
}
#main-content h2:before {
counter-increment: h2counter;
content: counter(h1counter) "."
counter(h2counter) ".\0000a0\0000a0";
}
#main-content h3:before {
counter-increment: h3counter;
content: counter(h1counter) "."
counter(h2counter) "."
counter(h3counter) ".\0000a0\0000a0";
}
#main-content h4:before {
counter-increment: h4counter;
content: counter(h1counter) "."
counter(h2counter) "."
counter(h3counter) "."
counter(h4counter) ".\0000a0\0000a0";
}
#main-content h5:before {
counter-increment: h5counter;
content: counter(h1counter) "."
counter(h2counter) "."
counter(h3counter) "."
counter(h4counter) "."
counter(h5counter) ".\0000a0\0000a0";
}
#main-content h6:before {
counter-increment: h6counter;
content: counter(h1counter) "."
counter(h2counter) "."
counter(h3counter) "."
counter(h4counter) "."
counter(h5counter) "."
counter(h6counter) ".\0000a0\0000a0";
}
</style>

保存后,即可看到标题编号后的效果。

3、目录
在插入目录宏时,通过css加的编号效果在目录中不会显示,勾选 “显示节数” 即可自动编号。

3. 浮动目录

3.1. 背景

wiki 的标题无浮动功能,对于大文档阅读体验不佳。

3.2. 目的

通过自定义css/js,达到浮动目录的效果,提高长文档的阅读体验。

3.3. 原理

通过wiki的markdown插件,可以插入一些自定义的css/js,来自定义页面内容。

3.4. 方法

1、页面布局,修改为两列
一列放内容,另外一列放目录。

2、插入目录宏,CSS类名填入 floating_catalog

3、插入,其他宏,markdown,填入如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
.floating_catalog {
position: fixed;
background-color: #FFF;
background: #FFF;
margin-top: -80px;
font-size: 12px;
z-index:100;
}
.current_catalog {
font-size: 14px;
font-weight: bolder;
background-color: yellow;
}
</style>
<script type="text/javascript">
function updateCatalog(){
var catalog = $('.floating_catalog a');
var isFirst = true;
for (var i = catalog.length - 1; i >= 0; --i) {
var header = $(decodeURIComponent(catalog[i].hash).replace(/([ ;?%&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1'));
if (isFirst && (i == 0 || (!(header === null) && header[0].getBoundingClientRect().top < 20))) {
catalog[i].parentElement.classList.add('current_catalog');
isFirst = false;
}
else {
catalog[i].parentElement.classList.remove('current_catalog');
}
}
}
$(document).ready(updateCatalog);
$(document).scroll(updateCatalog);
</script>

保存后,即可看到浮动标题的效果。

4. 引用页面

4.1. 背景

工作内容通常会放在公共wiki,个人工作内容无法很好汇总。
wiki的收藏功能不能分层级,不是很好用。

4.2. 目的

创建引用页面,即:
创建一个页面,本身没有内容,但是会将其他页面内容引用过来,进行展示。
可以方便个人信息汇总,创建多层级页面收藏等。

4.3. 原理

通过wiki的markdown插件,可以插入一些自定义的css/js,来自定义页面内容。

4.4. 方法

1、新建wiki,标题随意

2、插入,其他宏,markdown,填入如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
function setupPage(sourcePage) {
$('.page-metadata-modification-info').append(' | 当前页面是其他页面的引用,无法导出pdf/work,如需导出请点击<a class="like-button" href="' + sourcePage + '">【阅读原文】</a>');
$('#main-content').append($('<iframe id="frame_load_other_page" style="display:none" width="100%" height="100%" src="' + sourcePage + '"></iframe>'));
var frame_load_other_page = $('#frame_load_other_page');
frame_load_other_page.on("load", function() {
setTimeout(function(){
main_content = $('#main-content', frame_load_other_page.contents()).html();
$('#main-content').append(main_content);
frame_load_other_page.remove();
// 修复折叠页面无法访问的问题
$('div[id^=expander-control-]').click(function(event){
let item = $("#" + event.currentTarget.id.replace('control', 'content'));
item.css('display', item.css('display') == 'none' ? 'inline' : 'none');
});
// 隐藏绘图部分的按钮(加载不出来,影响美观,所以就暂时显示了)
$('.gliffy-chrome-container').css("display", "none");
}, 100);
});
}
$(document).ready(function(){
setupPage("http://wiki.baidu.com/pages/viewpage.action?pageId={PAGE_ID}");
});
</script>

其中,{PAGE_ID} 需要替换成引用的wiki页面的url。

保存后,即可看到引用效果。

  • 本文作者: 好好学习的郝
  • 原文链接: https://www.voidking.com/dev-wiki-skill/
  • 版权声明: 本文采用 BY-NC-SA 许可协议,转载请注明出处!源站会即时更新知识点并修正错误,欢迎访问~
  • 微信公众号同步更新,欢迎关注~