From a56569c25f25daf2e41e40ec430248390e80ec07 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Sat, 10 Feb 2018 23:49:37 +0800 Subject: [PATCH] docs: add embed files, resolve #383, resolve #333, resolve #134 --- docs/_media/example.html | 1 + docs/_media/example.md | 1 + docs/_sidebar.md | 46 ++++++++++++---------- docs/de-de/_sidebar.md | 46 ++++++++++++---------- docs/de-de/embed-files.md | 76 +++++++++++++++++++++++++++++++++++++ docs/embed-files.md | 76 +++++++++++++++++++++++++++++++++++++ docs/zh-cn/_sidebar.md | 46 ++++++++++++---------- docs/zh-cn/embed-files.md | 73 +++++++++++++++++++++++++++++++++++ src/core/render/compiler.js | 32 ++++++++-------- 9 files changed, 318 insertions(+), 79 deletions(-) create mode 100644 docs/_media/example.html create mode 100644 docs/_media/example.md create mode 100644 docs/de-de/embed-files.md create mode 100644 docs/embed-files.md create mode 100644 docs/zh-cn/embed-files.md diff --git a/docs/_media/example.html b/docs/_media/example.html new file mode 100644 index 000000000..d35ee1624 --- /dev/null +++ b/docs/_media/example.html @@ -0,0 +1 @@ +

To infinity and Beyond!

\ No newline at end of file diff --git a/docs/_media/example.md b/docs/_media/example.md new file mode 100644 index 000000000..6ee64944c --- /dev/null +++ b/docs/_media/example.md @@ -0,0 +1 @@ +> This is from the `example.md` diff --git a/docs/_sidebar.md b/docs/_sidebar.md index c2e226f07..4b2bc444a 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.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 (new)](embed-files) + +* [Awesome docsify](awesome.md) +* [Changelog](changelog.md) diff --git a/docs/de-de/_sidebar.md b/docs/de-de/_sidebar.md index 73319c95c..3cc4043f9 100644 --- a/docs/de-de/_sidebar.md +++ b/docs/de-de/_sidebar.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 (new)](de-de/embed-files) + +* [Awesome docsify](de-de/awesome.md) +* [Changelog](de-de/changelog.md) diff --git a/docs/de-de/embed-files.md b/docs/de-de/embed-files.md new file mode 100644 index 000000000..012ce5c20 --- /dev/null +++ b/docs/de-de/embed-files.md @@ -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). diff --git a/docs/embed-files.md b/docs/embed-files.md new file mode 100644 index 000000000..012ce5c20 --- /dev/null +++ b/docs/embed-files.md @@ -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). diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md index a024a54a4..03f78c861 100644 --- a/docs/zh-cn/_sidebar.md +++ b/docs/zh-cn/_sidebar.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) + * [文件嵌入(new)](zh-cn/embed-files) + +* [Awesome docsify](zh-cn/awesome.md) +* [Changelog](zh-cn/changelog.md) diff --git a/docs/zh-cn/embed-files.md b/docs/zh-cn/embed-files.md new file mode 100644 index 000000000..e3140ba78 --- /dev/null +++ b/docs/zh-cn/embed-files.md @@ -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). diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index a569bfde7..133327e45 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -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 = { ` } }, - html (url, config) { - return `` + iframe (url, title) { + console.log(title) + return `` }, - video (url, config) { - return `` + video (url, title) { + return `` }, - audio (url, config) { - return `` + audio (url, title) { + return `` }, - 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 (