fix: resolve path of image and embed files, fixed #412

This commit is contained in:
qingwei.li 2018-03-06 11:57:48 +08:00
commit bfd0d18e48
8 changed files with 29 additions and 23 deletions

View file

@ -68,7 +68,7 @@ Du kannst untergeordnete Listen erstellen, indem du untergeordnete Punkte einem
wird also wie folgt aussehen wird also wie folgt aussehen
![Nesting navbar](_images/nested-navbar.png 'Nesting navbar') ![Nesting navbar](../_images/nested-navbar.png 'Nesting navbar')
## Angepasste Navigationsleisten in Verbindung mit dem emoji Erweiterung ## Angepasste Navigationsleisten in Verbindung mit dem emoji Erweiterung

View file

@ -12,7 +12,7 @@ Du kannst folgende drei Orte verwenden, um die Dokumentation für dein Github re
Es wird empfohlen, deine Dateien im `./docs` Unterordner im `master` branch deines repository zu speichern. Wechsle dann zu den Einstellungen deines repository und wähle `master branch /docs folder` als deine Github Pages Quelle. Es wird empfohlen, deine Dateien im `./docs` Unterordner im `master` branch deines repository zu speichern. Wechsle dann zu den Einstellungen deines repository und wähle `master branch /docs folder` als deine Github Pages Quelle.
![github pages](_images/deploy-github-pages.png) ![github pages](../_images/deploy-github-pages.png)
!> Du kannst die Dateien auch im Hauptverzeichnis speichern und dann `master branch` in den Einstellungen auswählen. !> Du kannst die Dateien auch im Hauptverzeichnis speichern und dann `master branch` in den Einstellungen auswählen.

View file

@ -6,14 +6,14 @@ You can embed these files as video, audio, iframes, or code blocks, and even Mar
For example, here embedded a Markdown file. You only need to do this: For example, here embedded a Markdown file. You only need to do this:
```markdown ```markdown
[filename](_media/example.md ':include') [filename](../_media/example.md ':include')
``` ```
Then the content of `example.md` will be displayed directly here Then the content of `example.md` will be displayed directly here
[filename](_media/example.md ':include') [filename](../_media/example.md ':include')
You can check the original content for [example.md](_media/example.md ':ignore'). 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. Normally, this will compiled into a link, but in docsify, if you add `:include` it will be embedded.
@ -32,12 +32,12 @@ This is a supported embedding type:
Of course, you can force the specified. For example, you want to Markdown file as code block embedded. Of course, you can force the specified. For example, you want to Markdown file as code block embedded.
```markdown ```markdown
[filename](_media/example.md ':include :type=code') [filename](../_media/example.md ':include :type=code')
``` ```
You will get it You will get it
[filename](_media/example.md ':include :type=code') [filename](../_media/example.md ':include :type=code')
## Tag attribute ## Tag attribute
@ -56,11 +56,11 @@ Did you see it? You only need to write directly. You can check [MDN](https://dev
Embedding any type of source code file, you can specify the highlighted language or automatically identify. Embedding any type of source code file, you can specify the highlighted language or automatically identify.
```markdown ```markdown
[](_media/example.html ':include :type=code text') [](../_media/example.html ':include :type=code text')
``` ```
⬇️ ⬇️
[](_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). ?> How to set highlight? You can see [here](language-highlight.md).

View file

@ -61,4 +61,4 @@ _\_navbar.md_
效果图 效果图
![嵌套导航栏](_images/zh-cn/nested-navbar.png '嵌套导航栏') ![嵌套导航栏](../_images/zh-cn/nested-navbar.png '嵌套导航栏')

View file

@ -11,7 +11,7 @@ GitHub Pages 支持从三个地方读取文件
我们推荐直接将文档放在 `docs/` 目录下,在设置页面开启 **GitHub Pages** 功能并选择 `master branch /docs folder` 选项。 我们推荐直接将文档放在 `docs/` 目录下,在设置页面开启 **GitHub Pages** 功能并选择 `master branch /docs folder` 选项。
![github pages](_images/deploy-github-pages.png) ![github pages](../_images/deploy-github-pages.png)
!> 可以将文档放在根目录下,然后选择 **master 分支** 作为文档目录。 !> 可以将文档放在根目录下,然后选择 **master 分支** 作为文档目录。

View file

@ -5,14 +5,14 @@ docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将
这是一个嵌入 Markdown 文件的例子。 这是一个嵌入 Markdown 文件的例子。
```markdown ```markdown
[filename](_media/example.md ':include') [filename](../_media/example.md ':include')
``` ```
`example.md` 文件的内容将会直接显示在这里 `example.md` 文件的内容将会直接显示在这里
[filename](_media/example.md ':include') [filename](../_media/example.md ':include')
你可以查看 [example.md](_media/example.md ':ignore') 原始内容对比效果。 你可以查看 [example.md](../_media/example.md ':ignore') 原始内容对比效果。
通常情况下,这样的语法将会被当作链接处理。但是在 docsify 里,如果你添加一个 `:include` 选项,它就会被当作文件嵌入。 通常情况下,这样的语法将会被当作链接处理。但是在 docsify 里,如果你添加一个 `:include` 选项,它就会被当作文件嵌入。
@ -29,12 +29,12 @@ docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将
当然,你也可以强制设置嵌入类型。例如你想将 Markdown 文件当作一个 `code block` 嵌入。 当然,你也可以强制设置嵌入类型。例如你想将 Markdown 文件当作一个 `code block` 嵌入。
```markdown ```markdown
[filename](_media/example.md ':include :type=code') [filename](../_media/example.md ':include :type=code')
``` ```
你将得到 你将得到
[filename](_media/example.md ':include :type=code') [filename](../_media/example.md ':include :type=code')
## 标签属性 ## 标签属性
@ -53,11 +53,11 @@ docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将
如果是嵌入一个代码块,你可以设置高亮的语言,或者让它自动识别。这里是手动设置高亮语言 如果是嵌入一个代码块,你可以设置高亮的语言,或者让它自动识别。这里是手动设置高亮语言
```markdown ```markdown
[](_media/example.html ':include :type=code text') [](../_media/example.html ':include :type=code text')
``` ```
⬇️ ⬇️
[](_media/example.html ':include :type=code text') [](../_media/example.html ':include :type=code text')
?> 如何高亮代码?你可以查看[这份文档](language-highlight.md). ?> 如何高亮代码?你可以查看[这份文档](language-highlight.md).

6
package-lock.json generated
View file

@ -2915,7 +2915,8 @@
"jsbn": { "jsbn": {
"version": "0.1.1", "version": "0.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"json-schema": { "json-schema": {
"version": "0.2.3", "version": "0.2.3",
@ -3333,7 +3334,8 @@
"tweetnacl": { "tweetnacl": {
"version": "0.14.5", "version": "0.14.5",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"uid-number": { "uid-number": {
"version": "0.0.6", "version": "0.0.6",

View file

@ -4,7 +4,7 @@ import {helper as helperTpl, tree as treeTpl} from './tpl'
import {genTree} from './gen-tree' import {genTree} from './gen-tree'
import {slugify} from './slugify' import {slugify} from './slugify'
import {emojify} from './emojify' import {emojify} from './emojify'
import {isAbsolutePath, getPath} from '../router/util' import {isAbsolutePath, getPath, getParentPath} from '../router/util'
import {isFn, merge, cached, isPrimitive} from '../util/core' import {isFn, merge, cached, isPrimitive} from '../util/core'
const cachedLinks = {} const cachedLinks = {}
@ -112,7 +112,11 @@ export class Compiler {
if (config.include) { if (config.include) {
if (!isAbsolutePath(href)) { if (!isAbsolutePath(href)) {
href = getPath(process.env.SSR ? '' : this.contentBase, href) href = getPath(
process.env.SSR ? '' : this.contentBase,
getParentPath(this.router.getCurrentPath()),
href
)
} }
let media let media
@ -254,7 +258,7 @@ export class Compiler {
} }
if (!isAbsolutePath(href)) { if (!isAbsolutePath(href)) {
url = getPath(contentBase, href) url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
} }
return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>` return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`