Skip to content

Commit

Permalink
feat(themes): add loading info
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 19, 2017
1 parent a6d823b commit 86594a3
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ The hook supports handling asynchronous tasks.
```js
window.$docsify = {
plugins: [
function (hook) {
function (hook, vm) {
hook.init(function() {
// Called when the script starts running, only trigger once, no arguments,
})
Expand Down
22 changes: 22 additions & 0 deletions docs/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,25 @@ If your system has Python, you can easily to run a static server to preview your
```bash
cd docs && python -m SimpleHTTPServer 3000
```

## Loading tip

Show `Loading...` Before starting rendering. You can customize the content.

*index.html*
```html
<div id="app">Please wait...</div>
```

You should set the `data-app` attribute if you changed `el`.

*index.html*
```html
<div data-app id="main">Please wait...</div>

<script>
window.$docsify = {
el: '#main'
}
</script>
```
2 changes: 1 addition & 1 deletion docs/zh-cn/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ docsify 提供了一套插件机制,其中提供的钩子(hook)支持处
```js
window.$docsify = {
plugins: [
function (hook) {
function (hook, vm) {
hook.init(function() {
// 初始化时调用,只调用一次,没有参数。
})
Expand Down
23 changes: 23 additions & 0 deletions docs/zh-cn/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,26 @@ docsify serve docs
```bash
cd docs && python -m SimpleHTTPServer 3000
```

## Loading 提示

初始化时会显示 `Loading...` 内容,你可以自定义提示信息。

*index.html*
```html
<div id="app">加载中</div>
```

如果更改了 `el` 的配置,需要将该元素加上 `data-app` 属性。

*index.html*
```html
<div data-app id="main">加载中</div>

<script>
window.$docsify = {
el: '#main'
}
</script>
```

17 changes: 17 additions & 0 deletions src/themes/basic/_layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,23 @@
-webkit-font-smoothing: antialiased;
}

body:not(.ready) {
[data-cloak] {
display: none;
}
}

div#app {
text-align: center;
font-size: 30px;
font-weight: lighter;
margin: 40vw auto;

&:empty::before {
content: "Loading...";
}
}

.emoji {
height: 1.2em;
vertical-align: middle;
Expand Down

0 comments on commit 86594a3

Please sign in to comment.