docsify/docs/configuration.md

578 lines
9.7 KiB
Markdown
Raw Normal View History

2017-02-13 22:43:58 +08:00
# Configuration
2018-02-11 19:49:50 +08:00
You can configure the `window.$docsify`.
2017-02-13 22:43:58 +08:00
```html
<script>
window.$docsify = {
repo: 'docsifyjs/docsify',
2017-02-13 22:43:58 +08:00
maxLevel: 3,
coverpage: true,
};
2017-02-13 22:43:58 +08:00
</script>
```
## el
2018-06-19 08:19:21 +08:00
- Type: `String`
- Default: `#app`
2017-02-13 22:43:58 +08:00
The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement.
```js
window.$docsify = {
el: '#app',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
## repo
2018-06-19 08:19:21 +08:00
- Type: `String`
- Default: `null`
2017-02-13 22:43:58 +08:00
Configure the repository url or a string of `username/repo` can add the [GitHub Corner](http://tholman.com/github-corners/) widget in the top right corner of the site.
```js
window.$docsify = {
repo: 'docsifyjs/docsify',
2017-02-13 22:43:58 +08:00
// or
repo: 'https://github.com/docsifyjs/docsify/',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-02-11 19:49:50 +08:00
## maxLevel
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `Number`
- Default: `6`
2017-02-13 22:43:58 +08:00
Maximum Table of content level.
```js
window.$docsify = {
maxLevel: 4,
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-02-11 19:49:50 +08:00
## loadNavbar
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `Boolean|String`
- Default: `false`
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
Loads navbar from the Markdown file `_navbar.md` if **true**, or else from the path specified.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
// load from _navbar.md
loadNavbar: true,
// load from nav.md
loadNavbar: 'nav.md',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-02-11 19:49:50 +08:00
## loadSidebar
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `Boolean|String`
- Default: `false`
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
Loads sidebar from the Markdown file `_sidebar.md` if **true**, or else from the path specified.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
// load from _sidebar.md
loadSidebar: true,
// load from summary.md
loadSidebar: 'summary.md',
};
```
## hideSidebar
- Type : `Boolean`
- Default: `true`
This option will completely hide your sidebar and wont render any content of the side even .
```js
window.$docsify = {
hideSidebar: true,
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-02-11 19:49:50 +08:00
## subMaxLevel
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `Number`
- Default: `0`
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
Add table of contents (TOC) in custom sidebar.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
subMaxLevel: 2,
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
## auto2top
2018-06-19 08:19:21 +08:00
- Type: `Boolean`
- Default: `false`
2017-02-13 22:43:58 +08:00
Scrolls to the top of the screen when the route is changed.
```js
window.$docsify = {
auto2top: true,
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
## homepage
2018-06-19 08:19:21 +08:00
- Type: `String`
- Default: `README.md`
2017-02-13 22:43:58 +08:00
`README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage.
```js
window.$docsify = {
// Change to /home.md
homepage: 'home.md',
// Or use the readme in your repo
2018-02-11 19:49:50 +08:00
homepage:
'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-02-11 19:49:50 +08:00
## basePath
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `String`
2017-02-13 22:43:58 +08:00
Base path of the website. You can set it to another directory or another domain name.
```js
window.$docsify = {
basePath: '/path/',
// Load the files from another site
basePath: 'https://docsify.js.org/',
// Even can load files from other repo
2018-02-11 19:49:50 +08:00
basePath:
'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-12-06 22:30:58 +08:00
## relativePath
- Type: `Boolean`
- Default: `false`
If **true** links are relative to the current context.
For example, the directory structure is as follows:
```text
.
└── docs
├── README.md
├── guide.md
└── zh-cn
├── README.md
├── guide.md
└── config
└── example.md
```
With relative path **enabled** and current URL `http://domain.com/zh-cn/README`, given links will resolve to:
```text
guide.md => http://domain.com/zh-cn/guide
config/example.md => http://domain.com/zh-cn/config/example
../README.md => http://domain.com/README
/README.md => http://domain.com/README
```
```js
window.$docsify = {
// Relative path enabled
relativePath: true,
// Relative path disabled (default value)
relativePath: false,
2018-12-06 22:30:58 +08:00
};
```
2017-02-13 22:43:58 +08:00
## coverpage
2018-06-19 08:19:21 +08:00
- Type: `Boolean|String|String[]|Object`
- Default: `false`
2017-02-13 22:43:58 +08:00
2017-03-25 15:52:21 +08:00
Activate the [cover feature](cover.md). If true, it will load from `_coverpage.md`.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
coverpage: true,
// Custom file name
2018-02-11 20:12:07 +08:00
coverpage: 'cover.md',
// mutiple covers
coverpage: ['/', '/zh-cn/'],
// mutiple covers and custom file name
coverpage: {
'/': 'cover.md',
'/zh-cn/': 'cover.md',
},
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-06-19 08:19:21 +08:00
## logo
- Type: `String`
Website logo as it appears in the sidebar, you can resize by CSS.
```js
window.$docsify = {
logo: '/_media/icon.svg',
2018-06-19 08:19:21 +08:00
};
```
2017-02-13 22:43:58 +08:00
## name
2018-06-19 08:19:21 +08:00
- Type: `String`
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
Website name as it appears in the sidebar.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
name: 'docsify',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
The name field can also contain custom HTML for easier customization:
```js
window.$docsify = {
name: '<span>docsify</span>',
};
```
2018-02-11 19:49:50 +08:00
## nameLink
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `String`
- Default: `window.location.pathname`
2017-02-13 22:43:58 +08:00
The name of the link.
```js
window.$docsify = {
2017-02-28 20:57:32 +08:00
nameLink: '/',
// For each route
nameLink: {
'/zh-cn/': '/zh-cn/',
'/': '/',
},
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
## markdown
2018-06-19 08:19:21 +08:00
- Type: `Function`
2017-02-13 22:43:58 +08:00
2017-03-25 15:52:21 +08:00
See [Markdown configuration](markdown.md).
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
2017-02-19 00:11:16 +08:00
// object
markdown: {
smartypants: true,
renderer: {
link: function() {
// ...
},
},
2017-02-19 00:11:16 +08:00
},
// function
2018-02-11 19:49:50 +08:00
markdown: function(marked, renderer) {
2017-02-13 22:43:58 +08:00
// ...
2018-02-11 19:49:50 +08:00
return marked;
},
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2018-02-11 19:49:50 +08:00
## themeColor
2017-02-13 22:43:58 +08:00
2018-06-19 08:19:21 +08:00
- Type: `String`
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
themeColor: '#3F51B5',
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
## alias
2018-06-19 08:19:21 +08:00
- Type: `Object`
2017-02-13 22:43:58 +08:00
2017-07-10 22:23:09 +08:00
Set the route alias. You can freely manage routing rules. Supports RegExp.
2017-02-13 22:43:58 +08:00
```js
window.$docsify = {
alias: {
2017-07-10 22:23:09 +08:00
'/foo/(+*)': '/bar/$1', // supports regexp
2017-02-13 22:43:58 +08:00
'/zh-cn/changelog': '/changelog',
2018-02-11 19:49:50 +08:00
'/changelog':
'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
'/.*/_sidebar.md': '/_sidebar.md', // See #301
},
2018-02-11 19:49:50 +08:00
};
2017-02-13 22:43:58 +08:00
```
2017-02-18 22:12:17 +08:00
2018-02-11 19:49:50 +08:00
## autoHeader
2017-02-18 22:12:17 +08:00
2018-06-19 08:19:21 +08:00
- type: `Boolean`
2017-02-18 22:12:17 +08:00
If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.md`, prepend a header to the page before converting it to html. Compare [#78](https://github.com/docsifyjs/docsify/issues/78).
2017-02-18 22:12:17 +08:00
```js
window.$docsify = {
loadSidebar: true,
autoHeader: true,
2018-02-11 19:49:50 +08:00
};
2017-02-18 22:12:17 +08:00
```
2017-02-18 23:04:52 +08:00
2018-02-11 19:49:50 +08:00
## executeScript
2017-02-18 23:04:52 +08:00
2018-06-19 08:19:21 +08:00
- type: `Boolean`
2017-02-18 23:04:52 +08:00
2018-02-11 19:49:50 +08:00
Execute the script on the page. Only parse the first script tag([demo](themes)). If Vue is present, it is turned on by default.
2017-02-18 23:04:52 +08:00
```js
window.$docsify = {
executeScript: true,
2018-02-11 19:49:50 +08:00
};
2017-02-18 23:04:52 +08:00
```
```markdown
## This is test
<script>
console.log(2333)
</script>
```
2017-03-25 15:52:21 +08:00
Note that if you are running an external script, e.g. an embedded jsfiddle demo, make sure to include the [external-script](plugins.md?id=external-script) plugin.
2017-03-11 19:30:38 +08:00
2018-02-11 19:49:50 +08:00
## noEmoji
2017-03-11 19:30:38 +08:00
2018-06-19 08:19:21 +08:00
- type: `Boolean`
2017-07-10 22:23:09 +08:00
2017-03-11 19:30:38 +08:00
Disabled emoji parse.
```js
window.$docsify = {
noEmoji: true,
2018-02-11 19:49:50 +08:00
};
2017-03-11 19:30:38 +08:00
```
?> If this options is `false` but you dont want to emojify some specific colons , [Refer this](https://github.com/docsifyjs/docsify/issues/742#issuecomment-586313143)
2018-02-11 19:49:50 +08:00
## mergeNavbar
2018-06-19 08:19:21 +08:00
- type: `Boolean`
2017-07-10 22:23:09 +08:00
Navbar will be merged with the sidebar on smaller screens.
```js
window.$docsify = {
mergeNavbar: true,
2018-02-11 19:49:50 +08:00
};
```
2017-05-16 23:03:22 +08:00
2018-02-11 19:49:50 +08:00
## formatUpdated
2017-07-10 22:23:09 +08:00
2018-06-19 08:19:21 +08:00
- type: `String|Function`
2017-07-10 22:23:09 +08:00
2017-05-30 12:05:25 +08:00
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
2017-05-16 23:03:22 +08:00
See https://github.com/lukeed/tinydate#patterns
2018-02-11 19:49:50 +08:00
2017-05-16 23:03:22 +08:00
```js
window.$docsify = {
formatUpdated: '{MM}/{DD} {HH}:{mm}',
2018-02-11 19:49:50 +08:00
formatUpdated: function(time) {
2017-05-16 23:03:22 +08:00
// ...
2018-02-11 19:49:50 +08:00
return time;
},
2018-02-11 19:49:50 +08:00
};
2017-05-16 23:03:22 +08:00
```
2018-02-11 19:49:50 +08:00
## externalLinkTarget
2018-06-19 08:19:21 +08:00
- type: `String`
- default: `_blank`
2017-07-10 22:23:09 +08:00
Target to open external links inside the markdown. Default `'_blank'` (new window/tab)
```js
window.$docsify = {
externalLinkTarget: '_self', // default: '_blank'
2018-02-11 19:49:50 +08:00
};
```
2017-05-30 12:05:25 +08:00
## cornerExternalLinkTarget
- type:`String`
- default:`_blank`
Target to open external link at the top right corner. Default `'_blank'` (new window/tab)
```js
window.$docsify = {
cornerExternalLinkTarget: '_self', // default: '_blank'
};
```
2019-09-06 13:43:40 +08:00
## externalLinkRel
- type: `String`
- default: `noopener`
Default `'noopener'` (no opener) prevents the newly opened external page (when [externalLinkTarget](#externallinktarget) is `'_blank'`) from having the ability to control our page. No `rel` is set when its not `'_blank'`.
```js
window.$docsify = {
externalLinkTarget: '', // default: 'noopener'
2019-09-06 13:43:40 +08:00
};
```
2018-02-11 19:49:50 +08:00
## routerMode
2017-07-10 22:23:09 +08:00
2018-06-19 08:19:21 +08:00
- type: `String`
- default: `hash`
2017-07-10 22:23:09 +08:00
2017-05-30 12:05:25 +08:00
```js
window.$docsify = {
routerMode: 'history', // default: 'hash'
2018-02-11 19:49:50 +08:00
};
2017-05-30 12:05:25 +08:00
```
## noCompileLinks
2018-06-19 08:19:21 +08:00
- type: `Array`
Sometimes we do not want docsify to handle our links. See [#203](https://github.com/docsifyjs/docsify/issues/203)
```js
window.$docsify = {
noCompileLinks: ['/foo', '/bar/.*'],
2018-02-11 19:49:50 +08:00
};
```
2018-02-11 20:12:07 +08:00
## onlyCover
2018-06-19 08:19:21 +08:00
- type: `Boolean`
2018-02-11 20:12:07 +08:00
Only coverpage is loaded when visiting the home page.
2018-02-11 20:12:07 +08:00
```js
window.$docsify = {
onlyCover: false,
2018-02-11 20:12:07 +08:00
};
```
2018-02-11 20:15:04 +08:00
## requestHeaders
2018-06-19 08:19:21 +08:00
- type: `Object`
2018-02-11 20:15:04 +08:00
Set the request resource headers.
```js
window.$docsify = {
requestHeaders: {
'x-token': 'xxx',
},
2018-02-11 20:15:04 +08:00
};
```
2019-12-22 19:46:23 +08:00
Such as setting the cache
```js
window.$docsify = {
requestHeaders: {
'cache-control': 'max-age=600',
},
2019-12-22 19:46:23 +08:00
};
```
2018-02-11 20:15:04 +08:00
## ext
2018-06-19 08:19:21 +08:00
- type: `String`
2018-02-11 20:15:04 +08:00
Request file extension.
```js
window.$docsify = {
ext: '.md',
2018-02-11 20:15:04 +08:00
};
```
## fallbackLanguages
2018-06-19 08:19:21 +08:00
- type: `Array<string>`
List of languages that will fallback to the default language when a page is request and didn't exists for the given local.
Example:
2018-06-19 08:19:21 +08:00
- try to fetch the page of `/de/overview`. If this page exists, it'll be displayed
- then try to fetch the default page `/overview` (depending on the default language). If this page exists, it'll be displayed
- then display 404 page.
```js
window.$docsify = {
fallbackLanguages: ['fr', 'de'],
};
```
## notFoundPage
2018-06-19 08:19:21 +08:00
- type: `Boolean` | `String` | `Object`
Load the `_404.md` file:
2018-06-19 08:19:21 +08:00
```js
window.$docsify = {
notFoundPage: true,
};
```
Load the customised path of the 404 page:
2018-06-19 08:19:21 +08:00
```js
window.$docsify = {
notFoundPage: 'my404.md',
};
```
Load the right 404 page according to the localisation:
2018-06-19 08:19:21 +08:00
```js
window.$docsify = {
notFoundPage: {
'/': '_404.md',
'/de': 'de/_404.md',
},
};
```
2018-06-19 08:19:21 +08:00
> Note: The options with fallbackLanguages didn't work with the `notFoundPage` options.