如何在wiki.js中,添加一段可以折叠的内容?
首先在系统设置中,主题,页面代码注入,末尾注入部分,添加代码:
.collapseTitle {
margin-top: 1em;
padding: .5em;
background-color: #607d8b;
color: #fff;
border: 1px solid #607d8b
}
.collapseTitle[collapse=true]:before {
content: "\f036";
display: inline-block;
font-family: Webdings;
margin-right: .5em
}
.collapseTitle[collapse=false]:before {
content: "\f035";
display: inline-block;
font-family: Webdings;
margin-right: .5em
}
.collapseTitle:hover:before {
transform: rotate(360deg);
transform-origin: center;
transition: .5s
}
.collapseContent {
padding: .5em;
border: 1px solid #ccc;
margin-bottom: 1em
}
在正文 HTML注入中,添加代码:
<script>
function processNode(node) {
var div = document.createElement("div");
div.className = 'collapseTitle';
var collapse = node.getAttribute("value") == 'true' ? true : false;
div.setAttribute('collapse', collapse);
div.innerHTML = node.getAttribute("display");
div.addEventListener("click", function(obj) {
var b = obj.srcElement.getAttribute('collapse') == 'true' ? true : false;
obj.srcElement.setAttribute('collapse', !b);
obj.srcElement.nextSibling.style.display = obj.srcElement.nextSibling.style.display =='none' ? 'block' : 'none';
});
node.style.display = collapse ? 'none' : 'block';
node.parentNode.insertBefore(div, node);
}
document.body.onload = function() {
var nodes = document.getElementsByClassName("collapseContent");
for (node of nodes) {
processNode(node);
}
}
</script>
然后编写内容的时候,需要折叠的代码,用下面的
<div class="collapseContent" display="block title" value='true'> </div>
括起来即可。例如:
<div class="collapseContent" display="block title" value='true'>
<h1 class="abc">aaaa</h1>
First one
</div>
<div class="collapseContent" display="block title">
<h1 class="abc">bbbb</h1>
Second one
</div>
Markdown语法简约参考
点我折叠
- 如需要使用章节自动编号,请在内容开头增加
<div class="number">
,末尾增加 </div>
- 若需要折叠的内容,可以用
<div class="collapseContent" display="折叠内容标题" value='true'>
和</div>
括起来 - WIKI 路径中,空格请使用英文下划线
_
替代 - 插入链接:
[链接显示文字](https://www.链接地址.com)
- 插入图片:
![文字提示](图片文件地址)
- 标题: 以
#
, ##
, ###
,…… 开头即可,例如 # 我是一级标题
,## 我是二级标题
- 无序列表: 以
-
开头即可,如果带有缩进,则为二级列表,例如 - 来了老弟
,可以附带样式,如可点击列表在末尾添加{.links-list}
或者 {.is-info}
等等 - 有序列表: 以 数字和
.
开头,例如 1. 第一行
- 斜体文字内容前后用
*
包括即可,粗体内容用连续两个 **
包括即可,粗斜体用三个 ***
括起来即可,例如: *斜体*
- 代码片段用反文号 ` 括起来即可,适合行内代码片段,如果大段代码, 用连续三个反文号 ``` 括起来即可
- Markdown语法内可以完全使用
html
标签,高级用户可以用 html 来实现自己的效果 - 引用使用
>
开头即可,例如 > 我是引用
- 复选框可以用
- [ ]
和 - [x]
表示,例如: