mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
qingwei.li
cinwell.li
parent
4d61b1e9a3
commit
56608e4739
1
docs/_media/example.html
Normal file
1
docs/_media/example.html
Normal file
@ -0,0 +1 @@
|
||||
<h1>To infinity and Beyond!</h1>
|
||||
1
docs/_media/example.md
Normal file
1
docs/_media/example.md
Normal file
@ -0,0 +1 @@
|
||||
> This is from the `example.md`
|
||||
@ -1,24 +1,28 @@
|
||||
- Getting started
|
||||
- [Quick start](quickstart.md)
|
||||
- [Writing more pages](more-pages.md)
|
||||
- [Custom navbar](custom-navbar.md)
|
||||
- [Cover page](cover.md)
|
||||
* Getting started
|
||||
|
||||
- Customization
|
||||
- [Configuration](configuration.md)
|
||||
- [Themes](themes.md)
|
||||
- [List of Plugins](plugins.md)
|
||||
- [Write a Plugin](write-a-plugin.md)
|
||||
- [Markdown configuration](markdown.md)
|
||||
- [Language highlighting](language-highlight.md)
|
||||
* [Quick start](quickstart.md)
|
||||
* [Writing more pages](more-pages.md)
|
||||
* [Custom navbar](custom-navbar.md)
|
||||
* [Cover page](cover.md)
|
||||
|
||||
- Guide
|
||||
- [Deploy](deploy.md)
|
||||
- [Helpers](helpers.md)
|
||||
- [Vue compatibility](vue.md)
|
||||
- [CDN](cdn.md)
|
||||
- [Offline Mode(PWA)](pwa.md)
|
||||
- [Server-client renderer(SSR)](ssr.md)
|
||||
* Customization
|
||||
|
||||
- [Awesome docsify](awesome.md)
|
||||
- [Changelog](changelog.md)
|
||||
* [Configuration](configuration.md)
|
||||
* [Themes](themes.md)
|
||||
* [List of Plugins](plugins.md)
|
||||
* [Write a Plugin](write-a-plugin.md)
|
||||
* [Markdown configuration](markdown.md)
|
||||
* [Language highlighting](language-highlight.md)
|
||||
|
||||
* Guide
|
||||
|
||||
* [Deploy](deploy.md)
|
||||
* [Helpers](helpers.md)
|
||||
* [Vue compatibility](vue.md)
|
||||
* [CDN](cdn.md)
|
||||
* [Offline Mode(PWA)](pwa.md)
|
||||
* [Server-client renderer(SSR)](ssr.md)
|
||||
* [Embed Files <sup style="color:red">(new)<sup>](embed-files)
|
||||
|
||||
* [Awesome docsify](awesome.md)
|
||||
* [Changelog](changelog.md)
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
- Loslegen
|
||||
- [Schnellstart](de-de/quickstart.md)
|
||||
- [Schreiben weiterer Seiten](de-de/more-pages.md)
|
||||
- [Navigationsleiste anpassen](de-de/custom-navbar.md)
|
||||
- [Titelseite](de-de/cover.md)
|
||||
* Loslegen
|
||||
|
||||
- Anpassen
|
||||
- [Einstellungen](de-de/configuration.md)
|
||||
- [Themen](de-de/themes.md)
|
||||
- [Liste der Erweiterungen](de-de/plugins.md)
|
||||
- [Schreiben eigener Erweiterungen](de-de/write-a-plugin.md)
|
||||
- [Markdown-Einstellungen](de-de/markdown.md)
|
||||
- [Hervorheben von Sprachen](de-de/language-highlight.md)
|
||||
* [Schnellstart](de-de/quickstart.md)
|
||||
* [Schreiben weiterer Seiten](de-de/more-pages.md)
|
||||
* [Navigationsleiste anpassen](de-de/custom-navbar.md)
|
||||
* [Titelseite](de-de/cover.md)
|
||||
|
||||
- Guide
|
||||
- [Inbetriebnahme](de-de/deploy.md)
|
||||
- [Helfer](de-de/helpers.md)
|
||||
- [Vue Kompatibilität](de-de/vue.md)
|
||||
- [CDN](de-de/cdn.md)
|
||||
- [Offline Modus (PWA)](de-de/pwa.md)
|
||||
- [Server-client renderer (SSR)](de-de/ssr.md)
|
||||
* Anpassen
|
||||
|
||||
- [Awesome docsify](de-de/awesome.md)
|
||||
- [Changelog](de-de/changelog.md)
|
||||
* [Einstellungen](de-de/configuration.md)
|
||||
* [Themen](de-de/themes.md)
|
||||
* [Liste der Erweiterungen](de-de/plugins.md)
|
||||
* [Schreiben eigener Erweiterungen](de-de/write-a-plugin.md)
|
||||
* [Markdown-Einstellungen](de-de/markdown.md)
|
||||
* [Hervorheben von Sprachen](de-de/language-highlight.md)
|
||||
|
||||
* Guide
|
||||
|
||||
* [Inbetriebnahme](de-de/deploy.md)
|
||||
* [Helfer](de-de/helpers.md)
|
||||
* [Vue Kompatibilität](de-de/vue.md)
|
||||
* [CDN](de-de/cdn.md)
|
||||
* [Offline Modus (PWA)](de-de/pwa.md)
|
||||
* [Server-client renderer (SSR)](de-de/ssr.md)
|
||||
* [Embed Files <sup style="color:red">(new)<sup>](de-de/embed-files)
|
||||
|
||||
* [Awesome docsify](de-de/awesome.md)
|
||||
* [Changelog](de-de/changelog.md)
|
||||
|
||||
76
docs/de-de/embed-files.md
Normal file
76
docs/de-de/embed-files.md
Normal file
@ -0,0 +1,76 @@
|
||||
# Embed files
|
||||
|
||||
With docsify 4.6 it is now possible to embed any type of file.
|
||||
You can embed these files as video, audio, iframes, or code blocks, and even Markdown files can even be embedded directly into the document.
|
||||
|
||||
For example, here embedded a Markdown file. You only need to do this:
|
||||
|
||||
```markdown
|
||||
[filename](_media/example.md ':include')
|
||||
```
|
||||
|
||||
Then the content of `example.md` will be displayed directly here
|
||||
|
||||
[filename](_media/example.md ':include')
|
||||
|
||||
You can check the original content for [example.md](_media/example.md ':ignore').
|
||||
|
||||
Normally, this will compiled into a link, but in docsify, if you add `:include` it will be embedded.
|
||||
|
||||
## Embedded file type
|
||||
|
||||
Currently, file extension are automatically recognized and embedded in different ways.
|
||||
|
||||
This is a supported embedding type:
|
||||
|
||||
* **iframe** `.html`, `.html`
|
||||
* **markdown** `.markdown`, `.md`
|
||||
* **audio** `.mp3`
|
||||
* **video** `.mp4`, `.ogg`
|
||||
* **code** other file extension
|
||||
|
||||
Of course, you can force the specified. For example, you want to Markdown file as code block embedded.
|
||||
|
||||
```markdown
|
||||
[filename](_media/example.md ':include :type=code')
|
||||
```
|
||||
|
||||
You will get it
|
||||
|
||||
[filename](_media/example.md ':include :type=code')
|
||||
|
||||
## Tag attribute
|
||||
|
||||
If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags.
|
||||
|
||||
```markdown
|
||||
[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
|
||||
```
|
||||
|
||||
[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
|
||||
|
||||
Did you see it? You only need to write directly. You can check [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) for these attributes.
|
||||
|
||||
## The code block highlight
|
||||
|
||||
Embedding any type of source code file, you can specify the highlighted language or automatically identify.
|
||||
|
||||
```markdown
|
||||
[](_media/example.html ':include :type=code')
|
||||
```
|
||||
|
||||
⬇️
|
||||
|
||||
[](_media/example.html ':include :type=code')
|
||||
|
||||
Or Specify the language
|
||||
|
||||
```markdown
|
||||
[](_media/example.html ':include :type=code text')
|
||||
```
|
||||
|
||||
⬇️
|
||||
|
||||
[](_media/example.html ':include :type=code text')
|
||||
|
||||
?> How to set highlight? You can see [here](language-highlight.md).
|
||||
76
docs/embed-files.md
Normal file
76
docs/embed-files.md
Normal file
@ -0,0 +1,76 @@
|
||||
# Embed files
|
||||
|
||||
With docsify 4.6 it is now possible to embed any type of file.
|
||||
You can embed these files as video, audio, iframes, or code blocks, and even Markdown files can even be embedded directly into the document.
|
||||
|
||||
For example, here embedded a Markdown file. You only need to do this:
|
||||
|
||||
```markdown
|
||||
[filename](_media/example.md ':include')
|
||||
```
|
||||
|
||||
Then the content of `example.md` will be displayed directly here
|
||||
|
||||
[filename](_media/example.md ':include')
|
||||
|
||||
You can check the original content for [example.md](_media/example.md ':ignore').
|
||||
|
||||
Normally, this will compiled into a link, but in docsify, if you add `:include` it will be embedded.
|
||||
|
||||
## Embedded file type
|
||||
|
||||
Currently, file extension are automatically recognized and embedded in different ways.
|
||||
|
||||
This is a supported embedding type:
|
||||
|
||||
* **iframe** `.html`, `.html`
|
||||
* **markdown** `.markdown`, `.md`
|
||||
* **audio** `.mp3`
|
||||
* **video** `.mp4`, `.ogg`
|
||||
* **code** other file extension
|
||||
|
||||
Of course, you can force the specified. For example, you want to Markdown file as code block embedded.
|
||||
|
||||
```markdown
|
||||
[filename](_media/example.md ':include :type=code')
|
||||
```
|
||||
|
||||
You will get it
|
||||
|
||||
[filename](_media/example.md ':include :type=code')
|
||||
|
||||
## Tag attribute
|
||||
|
||||
If you embed the file as `iframe`, `audio` and `video`, then you may need to set the attributes of these tags.
|
||||
|
||||
```markdown
|
||||
[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
|
||||
```
|
||||
|
||||
[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
|
||||
|
||||
Did you see it? You only need to write directly. You can check [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) for these attributes.
|
||||
|
||||
## The code block highlight
|
||||
|
||||
Embedding any type of source code file, you can specify the highlighted language or automatically identify.
|
||||
|
||||
```markdown
|
||||
[](_media/example.html ':include :type=code')
|
||||
```
|
||||
|
||||
⬇️
|
||||
|
||||
[](_media/example.html ':include :type=code')
|
||||
|
||||
Or Specify the language
|
||||
|
||||
```markdown
|
||||
[](_media/example.html ':include :type=code text')
|
||||
```
|
||||
|
||||
⬇️
|
||||
|
||||
[](_media/example.html ':include :type=code text')
|
||||
|
||||
?> How to set highlight? You can see [here](language-highlight.md).
|
||||
@ -1,24 +1,28 @@
|
||||
- 入门
|
||||
- [快速开始](zh-cn/quickstart.md)
|
||||
- [多页文档](zh-cn/more-pages.md)
|
||||
- [定制导航栏](zh-cn/custom-navbar.md)
|
||||
- [封面](zh-cn/cover.md)
|
||||
* 入门
|
||||
|
||||
- 定制化
|
||||
- [配置项](zh-cn/configuration.md)
|
||||
- [主题](zh-cn/themes.md)
|
||||
- [插件列表](zh-cn/plugins.md)
|
||||
- [开发插件](zh-cn/write-a-plugin.md)
|
||||
- [Markdown 配置](zh-cn/markdown.md)
|
||||
- [代码高亮](zh-cn/language-highlight.md)
|
||||
* [快速开始](zh-cn/quickstart.md)
|
||||
* [多页文档](zh-cn/more-pages.md)
|
||||
* [定制导航栏](zh-cn/custom-navbar.md)
|
||||
* [封面](zh-cn/cover.md)
|
||||
|
||||
- 指南
|
||||
- [部署](zh-cn/deploy.md)
|
||||
- [文档助手](zh-cn/helpers.md)
|
||||
- [兼容 Vue](zh-cn/vue.md)
|
||||
- [CDN](zh-cn/cdn.md)
|
||||
- [离线模式(PWA)](zh-cn/pwa.md)
|
||||
- [服务端渲染 (SSR)](zh-cn/ssr.md)
|
||||
* 定制化
|
||||
|
||||
- [Awesome docsify](zh-cn/awesome.md)
|
||||
- [Changelog](zh-cn/changelog.md)
|
||||
* [配置项](zh-cn/configuration.md)
|
||||
* [主题](zh-cn/themes.md)
|
||||
* [插件列表](zh-cn/plugins.md)
|
||||
* [开发插件](zh-cn/write-a-plugin.md)
|
||||
* [Markdown 配置](zh-cn/markdown.md)
|
||||
* [代码高亮](zh-cn/language-highlight.md)
|
||||
|
||||
* 指南
|
||||
|
||||
* [部署](zh-cn/deploy.md)
|
||||
* [文档助手](zh-cn/helpers.md)
|
||||
* [兼容 Vue](zh-cn/vue.md)
|
||||
* [CDN](zh-cn/cdn.md)
|
||||
* [离线模式(PWA)](zh-cn/pwa.md)
|
||||
* [服务端渲染 (SSR)](zh-cn/ssr.md)
|
||||
* [文件嵌入<sup style="color:red">(new)<sup>](zh-cn/embed-files)
|
||||
|
||||
* [Awesome docsify](zh-cn/awesome.md)
|
||||
* [Changelog](zh-cn/changelog.md)
|
||||
|
||||
73
docs/zh-cn/embed-files.md
Normal file
73
docs/zh-cn/embed-files.md
Normal file
@ -0,0 +1,73 @@
|
||||
# 文件嵌入
|
||||
|
||||
docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将文件当成 `iframe`、`video`、`audio` 或者 `code block`，如果是 Markdown 文件，甚至可以直接插入到当前文档里。
|
||||
|
||||
这是一个嵌入 Markdown 文件的例子。
|
||||
|
||||
```markdown
|
||||
[filename](_media/example.md ':include')
|
||||
```
|
||||
|
||||
`example.md` 文件的内容将会直接显示在这里
|
||||
|
||||
[filename](_media/example.md ':include')
|
||||
|
||||
你可以查看 [example.md](_media/example.md ':ignore') 原始内容对比效果。
|
||||
|
||||
通常情况下，这样的语法将会被当作链接处理。但是在 docsify 里，如果你添加一个 `:include` 选项，它就会被当作文件嵌入。
|
||||
|
||||
## 嵌入的类型
|
||||
|
||||
当前，嵌入的类型是通过文件后缀自动识别的，这是目前支持的类型：
|
||||
|
||||
* **iframe** `.html`, `.html`
|
||||
* **markdown** `.markdown`, `.md`
|
||||
* **audio** `.mp3`
|
||||
* **video** `.mp4`, `.ogg`
|
||||
* **code** other file extension
|
||||
|
||||
当然，你也可以强制设置嵌入类型。例如你想将 Markdown 文件当作一个 `code block` 嵌入。
|
||||
|
||||
```markdown
|
||||
[filename](_media/example.md ':include :type=code')
|
||||
```
|
||||
|
||||
你将得到
|
||||
|
||||
[filename](_media/example.md ':include :type=code')
|
||||
|
||||
## 标签属性
|
||||
|
||||
如果你嵌入文件是一个 `iframe`、`audio` 或者 `video`，你可以给这些标签设置属性。
|
||||
|
||||
```markdown
|
||||
[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
|
||||
```
|
||||
|
||||
[cinwell website](https://cinwell.com ':include :type=iframe width=100% height=400px')
|
||||
|
||||
看见没？你只需要直接写属性就好了，每个标签有哪些属性建议你查看 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)。
|
||||
|
||||
## 代码块高亮
|
||||
|
||||
如果是嵌入一个代码块，你可以设置高亮的语言，或者让它自动识别。
|
||||
|
||||
```markdown
|
||||
[](_media/example.html ':include :type=code')
|
||||
```
|
||||
|
||||
⬇️
|
||||
|
||||
[](_media/example.html ':include :type=code')
|
||||
|
||||
这里是手动设置高亮语言
|
||||
|
||||
```markdown
|
||||
[](_media/example.html ':include :type=code text')
|
||||
```
|
||||
|
||||
⬇️
|
||||
|
||||
[](_media/example.html ':include :type=code text')
|
||||
|
||||
?> 如何高亮代码？你可以查看[这份文档](language-highlight.md).
|
||||
@ -17,7 +17,8 @@ function getAndRemoveConfig (str = '') {
|
||||
if (str) {
|
||||
str = str
|
||||
.replace(/:([\w-]+)=?([\w-]+)?/g, (m, key, value) => {
|
||||
config[key] = value || true
|
||||
console.log(key, value)
|
||||
config[key] = (value && value.replace(/"/g, '')) || true
|
||||
return ''
|
||||
})
|
||||
.trim()
|
||||
@ -26,7 +27,7 @@ function getAndRemoveConfig (str = '') {
|
||||
return { str, config }
|
||||
}
|
||||
const compileMedia = {
|
||||
markdown (url, config) {
|
||||
markdown (url) {
|
||||
const id = `docsify-get-${uid++}`
|
||||
|
||||
if (!process.env.SSR) {
|
||||
@ -45,20 +46,21 @@ const compileMedia = {
|
||||
</script>`
|
||||
}
|
||||
},
|
||||
html (url, config) {
|
||||
return `<iframe src="${url}" ${config || 'width=100% height=400'}></iframe>`
|
||||
iframe (url, title) {
|
||||
console.log(title)
|
||||
return `<iframe src="${url}" ${title || 'width=100% height=400'}></iframe>`
|
||||
},
|
||||
video (url, config) {
|
||||
return `<video src="${url}" ${config || 'controls'}>Not Support</video>`
|
||||
video (url, title) {
|
||||
return `<video src="${url}" ${title || 'controls'}>Not Support</video>`
|
||||
},
|
||||
audio (url, config) {
|
||||
return `<audio src="${url}" ${config || 'controls'}>Not Support</audio>`
|
||||
audio (url, title) {
|
||||
return `<audio src="${url}" ${title || 'controls'}>Not Support</audio>`
|
||||
},
|
||||
code (url, config) {
|
||||
code (url, title) {
|
||||
const id = `docsify-get-${uid++}`
|
||||
let ext = url.match(/\.(\w+)$/)
|
||||
|
||||
ext = config.lang || (ext && ext[1])
|
||||
ext = title || (ext && ext[1])
|
||||
if (ext === 'md') ext = 'markdown'
|
||||
|
||||
if (!process.env.SSR) {
|
||||
@ -192,20 +194,18 @@ export class Compiler {
|
||||
return media.call(_self, href, title)
|
||||
}
|
||||
|
||||
let type = null
|
||||
let type = 'code'
|
||||
if (/\.(md|markdown)/.test(href)) {
|
||||
type = 'markdown'
|
||||
} else if (/\.html?/.test(href)) {
|
||||
type = 'html'
|
||||
type = 'iframe'
|
||||
} else if (/\.(mp4|ogg)/.test(href)) {
|
||||
type = 'video'
|
||||
} else if (/\.mp3/.test(href)) {
|
||||
type = 'audio'
|
||||
}
|
||||
console.log(href)
|
||||
if (type) {
|
||||
return compileMedia[type].call(_self, href, title)
|
||||
}
|
||||
|
||||
return compileMedia[type].call(_self, href, title)
|
||||
}
|
||||
|
||||
if (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user