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

docsifyjs · Mar 6, 2018 · bfd0d18 · bfd0d18
1 parent 74ff68a
commit bfd0d18
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 23 deletions.
diff --git a/docs/de-de/custom-navbar.md b/docs/de-de/custom-navbar.md
@@ -68,7 +68,7 @@ Du kannst untergeordnete Listen erstellen, indem du untergeordnete Punkte einem
 
 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
 

diff --git a/docs/de-de/deploy.md b/docs/de-de/deploy.md
@@ -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.
 
-![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.
 

diff --git a/docs/de-de/embed-files.md b/docs/de-de/embed-files.md
@@ -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:
 
 ```markdown
-[filename](_media/example.md ':include')
+[filename](../_media/example.md ':include')
 ```
 
 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.
 
@@ -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.
 
 ```markdown
-[filename](_media/example.md ':include :type=code')
+[filename](../_media/example.md ':include :type=code')
 ```
 
 You will get it
 
-[filename](_media/example.md ':include :type=code')
+[filename](../_media/example.md ':include :type=code')
 
 ## 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.
 
 ```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).
diff --git a/docs/zh-cn/custom-navbar.md b/docs/zh-cn/custom-navbar.md
@@ -61,4 +61,4 @@ _\_navbar.md_
 
 效果图
 
-![嵌套导航栏](_images/zh-cn/nested-navbar.png '嵌套导航栏')
+![嵌套导航栏](../_images/zh-cn/nested-navbar.png '嵌套导航栏')
diff --git a/docs/zh-cn/deploy.md b/docs/zh-cn/deploy.md
@@ -11,7 +11,7 @@ GitHub Pages 支持从三个地方读取文件
 
 我们推荐直接将文档放在 `docs/` 目录下，在设置页面开启 **GitHub Pages** 功能并选择 `master branch /docs folder` 选项。
 
-![github pages](_images/deploy-github-pages.png)
+![github pages](../_images/deploy-github-pages.png)
 
 !> 可以将文档放在根目录下，然后选择 **master 分支** 作为文档目录。
 

diff --git a/docs/zh-cn/embed-files.md b/docs/zh-cn/embed-files.md
@@ -5,14 +5,14 @@ docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将
 这是一个嵌入 Markdown 文件的例子。
 
 ```markdown
-[filename](_media/example.md ':include')
+[filename](../_media/example.md ':include')
 ```
 
 `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` 选项，它就会被当作文件嵌入。
 
@@ -29,12 +29,12 @@ docsify 4.6 开始支持嵌入任何类型的文件到文档里。你可以将
 当然，你也可以强制设置嵌入类型。例如你想将 Markdown 文件当作一个 `code block` 嵌入。
 
 ```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
-[](_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).
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
@@ -4,7 +4,7 @@ import {helper as helperTpl, tree as treeTpl} from './tpl'
 import {genTree} from './gen-tree'
 import {slugify} from './slugify'
 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'
 
 const cachedLinks = {}
@@ -112,7 +112,11 @@ export class Compiler {
 
     if (config.include) {
       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
@@ -254,7 +258,7 @@ export class Compiler {
       }
 
       if (!isAbsolutePath(href)) {
-        url = getPath(contentBase, href)
+        url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
       }
 
       return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`