docs: add executeScript demo
This commit is contained in:
parent
4b64386465
commit
3e7d6ab26c
6 changed files with 125 additions and 4 deletions
|
|
@ -267,3 +267,25 @@ window.$docsify = {
|
||||||
autoHeader: true
|
autoHeader: true
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## execute-script
|
||||||
|
|
||||||
|
- type: `Boolean`
|
||||||
|
|
||||||
|
Execute the script on the page. Only parse the first script tag([demo](themes)). If Vue is present, it is turned on by default.
|
||||||
|
|
||||||
|
```js
|
||||||
|
window.$docsify = {
|
||||||
|
executeScript: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## This is test
|
||||||
|
|
||||||
|
<script>
|
||||||
|
console.log(2333)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,3 +12,37 @@ There are currently three themes available. Copy [Vue](//vuejs.org) and [buble](
|
||||||
!> This compressed files in `/lib/themes/`.
|
!> This compressed files in `/lib/themes/`.
|
||||||
|
|
||||||
If you have any ideas or would like to develop new theme, welcome submit [PR](https://github.com/QingWei-Li/docsify/pulls).
|
If you have any ideas or would like to develop new theme, welcome submit [PR](https://github.com/QingWei-Li/docsify/pulls).
|
||||||
|
|
||||||
|
#### Click to preview
|
||||||
|
|
||||||
|
|
||||||
|
<div class="demo-theme-preview">
|
||||||
|
<a data-theme="vue">vue.css</a>
|
||||||
|
<a data-theme="buble">buble.css</a>
|
||||||
|
<a data-theme="dark">dark.css</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-theme-preview a {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-theme-preview a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var preview = Docsify.dom.find('.demo-theme-preview');
|
||||||
|
var themes = Docsify.dom.findAll('[rel="stylesheet"]');
|
||||||
|
|
||||||
|
preview.onclick = function (e) {
|
||||||
|
var title = e.target.getAttribute('data-theme')
|
||||||
|
|
||||||
|
themes.forEach(function (theme) {
|
||||||
|
theme.disabled = theme.title !== title
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -265,3 +265,25 @@ window.$docsify = {
|
||||||
autoHeader: true
|
autoHeader: true
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## execute-script
|
||||||
|
|
||||||
|
- 类型:`Boolean`
|
||||||
|
|
||||||
|
执行文档里的 script 标签里的脚本,只执行第一个 script ([demo](zh-cn/themes))。 如果 Vue 存在,则自动开启。
|
||||||
|
|
||||||
|
```js
|
||||||
|
window.$docsify = {
|
||||||
|
executeScript: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## This is test
|
||||||
|
|
||||||
|
<script>
|
||||||
|
console.log(2333)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,44 @@
|
||||||
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
|
<link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css">
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<a id="demo-theme-vue">vue.css</a>
|
||||||
|
<a id="demo-theme-buble">buble.css</a>
|
||||||
|
<a id="demo-theme-dark">dark.css</a>
|
||||||
|
|
||||||
!> CSS 的压缩文件位于 `/lib/themes/`
|
!> CSS 的压缩文件位于 `/lib/themes/`
|
||||||
|
|
||||||
如果你有其他想法或者想开发别的主题,欢迎提 [PR](https://github.com/QingWei-Li/docsify/pulls)。
|
如果你有其他想法或者想开发别的主题,欢迎提 [PR](https://github.com/QingWei-Li/docsify/pulls)。
|
||||||
|
|
||||||
|
#### 点击切换主题
|
||||||
|
|
||||||
|
|
||||||
|
<div class="demo-theme-preview">
|
||||||
|
<a data-theme="vue">vue.css</a>
|
||||||
|
<a data-theme="buble">buble.css</a>
|
||||||
|
<a data-theme="dark">dark.css</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo-theme-preview a {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-theme-preview a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var preview = Docsify.dom.find('.demo-theme-preview');
|
||||||
|
var themes = Docsify.dom.findAll('[rel="stylesheet"]');
|
||||||
|
|
||||||
|
preview.onclick = function (e) {
|
||||||
|
var title = e.target.getAttribute('data-theme')
|
||||||
|
|
||||||
|
themes.forEach(function (theme) {
|
||||||
|
theme.disabled = theme.title !== title
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ const config = merge({
|
||||||
themeColor: '',
|
themeColor: '',
|
||||||
nameLink: window.location.pathname,
|
nameLink: window.location.pathname,
|
||||||
autoHeader: false,
|
autoHeader: false,
|
||||||
|
executeScript: false,
|
||||||
ga: ''
|
ga: ''
|
||||||
}, window.$docsify)
|
}, window.$docsify)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,9 @@ function executeScript () {
|
||||||
const code = script.innerText.trim()
|
const code = script.innerText.trim()
|
||||||
if (!code) return false
|
if (!code) return false
|
||||||
|
|
||||||
window.__EXECUTE_RESULT__ = new Function('return ' + code)()
|
setTimeout(_ => {
|
||||||
|
window.__EXECUTE_RESULT__ = new Function(code)()
|
||||||
|
}, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderMain (html) {
|
function renderMain (html) {
|
||||||
|
|
@ -31,11 +33,13 @@ function renderMain (html) {
|
||||||
if (!this.config.executeScript &&
|
if (!this.config.executeScript &&
|
||||||
typeof window.Vue !== 'undefined' &&
|
typeof window.Vue !== 'undefined' &&
|
||||||
!executeScript()) {
|
!executeScript()) {
|
||||||
window.__EXECUTE_RESULT__ = new window.Vue().$mount('#main')
|
setTimeout(_ => {
|
||||||
|
window.__EXECUTE_RESULT__ = new window.Vue().$mount('#main')
|
||||||
|
}, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.config.auto2top) {
|
if (this.config.auto2top) {
|
||||||
setTimeout(() => scroll2Top(this.config.auto2top), 0)
|
scroll2Top(this.config.auto2top)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue