Skip to content

customize sidebar and navbar via markdown file, #6 #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 28, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
## 0.5.0
### Features
- Custom sidebars and navbars by markdown file

## 0.4.2
## Bug fixes
### Bug fixes
- Correct catch ajax error

## 0.4.1
## Bug fixes
### Bug fixes
- catch ajax error

## 0.4.0
Expand Down
5 changes: 4 additions & 1 deletion build/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,14 @@ var build = function (opts) {

console.log(dest)
bundle.write({
format: 'umd',
format: 'iife',
moduleName: opts.moduleName || 'Docsify',
dest: dest
})
})
.catch(function (err) {
console.error(err)
})
}

build({
Expand Down
57 changes: 57 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,3 +144,60 @@ Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on th
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
```


#### load-sidebar

Load sidebar markdown file. If it is configured, load the current directory `_sidebar.md` by default. If the file isn't exist, sidebar will appear TOC.

```html
<script src="/lib/docsify.js" data-load-sidebar></script>
```

You can specify a file:

```html
<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
```

The contents of the file can be:

```markdown
- [Home](/)
- [Installation](/installation)
- Essentials
- [Getting Started](/getting-started)
- [Dynamic Route Matching](/dynamic-matching)
- [Nested Routes](/nested-routes)
- [Programmatic Navigation](/navigation)
- [Named Routes](/named-routes)
- [Named Views](/named-views)
- [Redirect and Alias](/redirect-and-alias)
- [HTML5 History Mode](/history-mode)
```

#### load-navbar

Load navbar markdown file. If it is configured, load the current directory `_navbar.md` by default.

```html
<script src="/lib/docsify.js" data-load-navbar></script>
```

You can specify a file:

```html
<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
```

The contents of the file can be:

```markdown
- [en](/)
- [chinese](/zh-cn)
```

## FAQ

### Why use `404.html` instead of `index.html`

[issues/7](https://github.com/QingWei-Li/docsify/issues/7)
60 changes: 60 additions & 0 deletions docs/zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,3 +142,63 @@ docsify serve docs
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
```

#### load-sidebar

读取侧边栏配置文件,如果配置,默认加载当前目录下的 `_sidebar.md`。如果文件不存在,会显示 TOC 作为侧边栏内容。如果你有二级目录,也应该放置一份配置文件。

```html
<script src="/lib/docsify.js" data-load-sidebar></script>
```

你可以指定侧边栏文件名

```html
<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
```

`_sidebar.md` 的内容可以是这样的

```markdown
- [Home](/)
- [Installation](/installation)
- Essentials
- [Getting Started](/getting-started)
- [Dynamic Route Matching](/dynamic-matching)
- [Nested Routes](/nested-routes)
- [Programmatic Navigation](/navigation)
- [Named Routes](/named-routes)
- [Named Views](/named-views)
- [Redirect and Alias](/redirect-and-alias)
- [HTML5 History Mode](/history-mode)
```

#### load-navbar

读取导航配置文件,如果配置,默认加载当前目录下的 `_navbar.md`。如果文件不存在,会显示 html 里定义的导航栏。

```html
<script src="/lib/docsify.js" data-load-navbar></script>
```

你可以指定导航栏文件名

```html
<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
```

`_navbar.md` 的内容可以是这样

```markdown
- [en](/)
- [中文](/zh-cn)
```

## FAQ

### 为什么是 `404.html` 而不用 `index.html`

docsify 想要实现的是用最简单的方式 **动态渲染内容**。

例如我有两个文档分别为 `README.md` 和 `guide.md`,如果我用 `index.html` 作为文件名,`README.md` 可以被正确的渲染因为我们已经规定它为首页文件,但是如果我们访问 `my-domain.com/guide` 想要得到的结果是 `guide.md` 的内容,它将无法工作,因为目录下并不存在一个 `guide.html` 的文件。

但是 GitHub Pages 服务器找不到资源, 就会回退并渲染 `404.html` 文件。😄
Loading