diff --git a/docs/plugins.md b/docs/plugins.md index 2dd75e905..a4a188f15 100644 --- a/docs/plugins.md +++ b/docs/plugins.md @@ -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, }) diff --git a/docs/quickstart.md b/docs/quickstart.md index 0628e70a5..036d081e4 100644 --- a/docs/quickstart.md +++ b/docs/quickstart.md @@ -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 +
Please wait...
+``` + +You should set the `data-app` attribute if you changed `el`. + +*index.html* +```html +
Please wait...
+ + +``` diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md index 8145f016e..aeabf8d80 100644 --- a/docs/zh-cn/plugins.md +++ b/docs/zh-cn/plugins.md @@ -61,7 +61,7 @@ docsify 提供了一套插件机制,其中提供的钩子(hook)支持处 ```js window.$docsify = { plugins: [ - function (hook) { + function (hook, vm) { hook.init(function() { // 初始化时调用,只调用一次,没有参数。 }) diff --git a/docs/zh-cn/quickstart.md b/docs/zh-cn/quickstart.md index c4ebc2821..5bdaf2da8 100644 --- a/docs/zh-cn/quickstart.md +++ b/docs/zh-cn/quickstart.md @@ -59,3 +59,26 @@ docsify serve docs ```bash cd docs && python -m SimpleHTTPServer 3000 ``` + +## Loading 提示 + +初始化时会显示 `Loading...` 内容,你可以自定义提示信息。 + +*index.html* +```html +
加载中
+``` + +如果更改了 `el` 的配置,需要将该元素加上 `data-app` 属性。 + +*index.html* +```html +
加载中
+ + +``` + diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css index d413c10ac..6241ffdb8 100644 --- a/src/themes/basic/_layout.css +++ b/src/themes/basic/_layout.css @@ -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;