Skip to content

Commit

Permalink
Merge pull request flysnow-org#52 from kkua/master
Browse files Browse the repository at this point in the history 
悬浮目录
  • Loading branch information
@flysnoworg
flysnoworg authored Aug 22, 2019
2 parents 520c56a + 6ef1002 commit 1f920fe
Show file tree
Hide file tree
Showing 5 changed files with 421 additions and 18 deletions.
107 changes: 106 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ theme = "maupassant"
```toml
toc = true
```

当左侧空白空间宽度超过100px时，则显示悬浮目录。具体效果参考[https://kkua.github.io/post/java-util-code-snippet/](https://kkua.github.io/post/java-util-code-snippet/)
#### 友情链接

```toml
Expand Down Expand Up @@ -268,6 +268,107 @@ disablePathToLower = true
```

* youku（youku.html）
#### 绘图支持
- 序列图(使用[js-sequence](https://bramp.github.io/js-sequence-diagrams/))
1. 全局使用，在`config.toml`中添加如下配置

```toml
[params.sequenceDiagrams]
enable = true
options = "" # default: "{theme: 'simple'}"
```

2. 每篇文章单独设置，在`Front Matter` 添加如下内容

```yaml
sequenceDiagrams
enable: true
```

将代码块的语言标识符设置为`sequence`。例如

```
​```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
​```
```
- 流程图（使用[flowchart.js](http://flowchart.js.org/)）
1. 全局使用，在`config.toml`中添加如下配置
```tom
[params.flowchartDiagrams]
enable = true
options = ""
```
2. 每篇文章单独设置，在`Front Matter` 添加如下内容
```yaml
flowchartDiagrams:
enable: true
```
将代码块的语言标识符设置为`flowchat`或者`flow`。例如
```
​```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
​```
```
- graphviz（[viz.js](https://github.com/mdaines/viz.js))
需要对每篇文章单独设置是否启用，在`Front Matter` 添加如下内容
```yaml
graphviz:
enable: true
```

将代码块的语言标识符设置为`viz-<engin>`， engin是选用的graphviz绘图引擎的名称，包括`circo`、`dot`、`fdp`、`neato` 、`osage`和`twopi`。例如

```
​```viz-dot
digraph G {
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster_1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape=Mdiamond];
end [shape=Msquare];
}
​```
```

## 贡献

Expand All @@ -282,3 +383,7 @@ disablePathToLower = true
+ Ghost: https://github.com/LjxPrime/maupassant/
+ Hexo: https://github.com/tufu9441/maupassant-hexo
+ Hugo: https://github.com/rujews/maupassant-hugo

```
```
103 changes: 102 additions & 1 deletion README_EN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ TOC support in Front Matter .
```toml
toc = true
```

If the left blank space more than 100px, it will display Floating TOC. here is preview [https://kkua.github.io/post/java-util-code-snippet/](https://kkua.github.io/post/java-util-code-snippet/)
#### Ads

```toml
Expand Down Expand Up @@ -137,6 +137,107 @@ disqusShortname = "yourdiscussshortname"
busuanzi = true
```

#### Draw Diagram
- sequence diagram(powered by [js-sequence](https://bramp.github.io/js-sequence-diagrams/))
1. global setting, add below config to `config.toml`.

```toml
[params.sequenceDiagrams]
enable = true
options = "" # default: "{theme: 'simple'}"
```

2. Configure for an article itself only, add below config to `Front Matter` of the article.

```yaml
sequenceDiagrams
enable: true
```

Then set language identifier of code blocks as `sequence`. For example

```
​```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
​```
```
- flowchart diagram(powered by [flowchart.js](http://flowchart.js.org/))
1. Global setting, add below config to `config.toml`.
```toml
[params.flowchartDiagrams]
enable = true
options = ""
```
2. Configure for an article itself only, add below config to `Front Matter` of the article.
```yaml
flowchartDiagrams:
enable: true
```
Then set language identifier of code blocks as `flowchat` or `flow`. For example
```
​```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
​```
```
- graphviz(powered by [viz.js](https://github.com/mdaines/viz.js))
It should be configured for an article itself only，add below config to `Front Matter` of the article.
```yaml
graphviz:
enable: true
```

Then set language identifier of code blocks as `viz-<engin>`, engin parameter is the name of graphviz engin including `circo`、`dot`、`fdp`、`neato` 、`osage`和`twopi`. For example

```
​```viz-dot
digraph G {
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster_1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape=Mdiamond];
end [shape=Msquare];
}
​```
```

## Contributing

All kinds of contributions (enhancements, new features, documentation & code improvements, issues & bugs reporting) are welcome.
Expand Down
108 changes: 106 additions & 2 deletions layouts/_default/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,111 @@
{{ partial "header" . }}

<div id="body">
{{ if .Params.toc -}}
<!--悬浮目录-->
<div id="virtual_toc_list" style="display: none">
{{.TableOfContents}}
</div>
<div id="float_toc_div" style="margin: 10px;border: 1px solid gray;z-index:99999;display: none;">
<header style="background-color: #f3f3f3;color: black;border-bottom: 1px solid gray;padding: 10px 10px 10px 10px;">
<strong id="toc_btn_open" style="color: black;font-size: large;">目录</strong>
<strong id="toc_btn_close" style="color: black;font-size: large;float: right">╳</strong>
</header>
<div id="toc_list" style="background-color: #f3f3f3;color: black;padding: 10px;">

</div>
</div>
<style type="text/css">
#float_toc_div {
position: fixed;
display: none;
/* width: 10.6%; */
height: auto;
font-size: 13px;
}

#toc_list a:hover,
#toc_list a:active {
color: #ba3925;
}
</style>
<script>
window.onload = function () {
let tocNavElem = document.getElementById("TableOfContents");
let floatTocDivElem = document.getElementById("float_toc_div");
let tocListElem = floatTocDivElem.getElementsByTagName('div')[0];
let colGroupElem = document.getElementById("body").getElementsByClassName("col-group")[0]
let floatTocWidth = (document.body.clientWidth - colGroupElem.offsetWidth) / 2 - 16;
var useFloatToc = false;

if (floatTocWidth >= 100) {
useFloatToc = true;
document.getElementById("toc_list").appendChild(tocNavElem);
floatTocDivElem.style.display = 'block';
floatTocDivElem.style.width = floatTocWidth + 'px';
top();
floatTocDivElem.style.left = '0px';

function top() {
if (document.getElementsByClassName('container')[0].offsetWidth <= 720) {
floatTocDivElem.style.top = '0px';
} else {
floatTocDivElem.style.top = window.innerHeight / 9 + 'px';
}
}

function ishide() {
if (document.getElementsByClassName('container')[0].offsetWidth <= 720) {
floatTocDivElem.style.top = '0px';
} else {
floatTocDivElem.style.display = 'block';
}
}

window.onscroll = function () {
ishide();
if ((document.documentElement.scrollTop != 0) && (floatTocDivElem.style.display == 'block')) {
top();
}
};

window.onresize = function () {
ishide();
}

document.getElementById("toc_btn_open").addEventListener('click', function () {
switch (tocListElem.style.display) {
case "none":
document.getElementById("toc_btn_close").style.display = "";
tocListElem.style.display = "";
floatTocDivElem.getElementsByTagName("header")[0].style.borderBottom = "1px solid gray";
break;
default:
break;
}
}, false);

document.getElementById("toc_btn_close").addEventListener('click', function () {
switch (tocListElem.style.display) {
case "":
document.getElementById("toc_btn_close").style.display = "none";
tocListElem.style.display = "none";
floatTocDivElem.getElementsByTagName("header")[0].style.borderBottom = "";
break;
default:
break;
}
}, false);
} else {
let fixedTocElem = document.getElementsByClassName("toc-article")[0];
fixedTocElem.appendChild(tocNavElem);
fixedTocElem.parentElement.style.display = "";
}
document.getElementById("virtual_toc_list").remove();
};
</script>
{{- end }}

<div class="container">
<div class="col-group">

Expand All @@ -29,10 +134,9 @@ <h1 class="post-title">{{ .Title }}</h1>
</div>
{{ end }}
{{ if .Params.toc }}
<div class="clear">
<div class="clear" style="display: none">
<div class="toc-article">
<div class="toc-title">文章目录</div>
{{.TableOfContents}}
</div>
</div>
{{ end }}
Expand Down
Loading

0 comments on commit 1f920fe

Please sign in to comment.