查看“Docsify 配置项”的源代码

你可以配置在 <code>window.$docsify</code> 里。

<pre lang="html"><script>
  window.$docsify = {
    repo: 'docsifyjs/docsify',
    maxLevel: 3,
    coverpage: true,
  };
</script></pre>
== el ==

* 类型：<code>String</code>
* 默认值：<code>#app</code>

docsify 初始化的挂载元素，可以是一个 CSS 选择器，默认为 <code>#app</code> 如果不存在就直接绑定在 <code>body</code> 上。

<pre lang="js">window.$docsify = {
  el: '#app',
};</pre>
== repo ==

* 类型：<code>String</code>
* 默认值: <code>null</code>

配置仓库地址或者 <code>username/repo</code> 的字符串，会在页面右上角渲染一个 [http://tholman.com/github-corners/ GitHub Corner] 挂件。

<pre lang="js">window.$docsify = {
  repo: 'docsifyjs/docsify',
  // or
  repo: 'https://github.com/docsifyjs/docsify/',
};</pre>
<span id="maxlevel"></span>
== maxLevel ==

* 类型：<code>Number</code>
* 默认值: <code>6</code>

默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。

<pre lang="js">window.$docsify = {
  maxLevel: 4,
};</pre>
<span id="loadnavbar"></span>
== loadNavbar ==

* 类型：<code>Boolean|String</code>
* 默认值: <code>false</code>

加载自定义导航栏设置为 <code>true</code> 后会加载 <code>_navbar.md</code> 文件，也可以自定义加载的文件名。

<pre lang="js">window.$docsify = {
  // 加载 _navbar.md
  loadNavbar: true,

  // 加载 nav.md
  loadNavbar: 'nav.md',
};</pre>
<span id="loadsidebar"></span>
== loadSidebar ==

* 类型：<code>Boolean|String</code>
* 默认值: <code>false</code>

加载自定义侧边栏。设置为 <code>true</code> 后会加载 <code>_sidebar.md</code> 文件，也可以自定义加载的文件名。

<pre lang="js">window.$docsify = {
  // 加载 _sidebar.md
  loadSidebar: true,

  // 加载 summary.md
  loadSidebar: 'summary.md',
};</pre>
<span id="hidesidebar"></span>
== hideSidebar ==

* 类型 : <code>Boolean</code>
* 默认值: <code>true</code>

这个选项用来完全隐藏侧边栏，侧边栏的任何内容都不会被渲染。

<pre lang="js">window.$docsify = {
  hideSidebar: true,
};</pre>
<span id="submaxlevel"></span>
== subMaxLevel ==

* 类型：<code>Number</code>
* 默认值: <code>0</code>

自定义侧边栏后默认不会再生成目录，你也可以通过设置生成目录的最大层级开启这个功能。

<pre lang="js">window.$docsify = {
  subMaxLevel: 2,
};</pre>
== auto2top ==

* 类型：<code>Boolean</code>
* 默认值: <code>false</code>

切换页面后是否自动跳转到页面顶部。

<pre lang="js">window.$docsify = {
  auto2top: true,
};</pre>
== homepage ==

* 类型：<code>String</code>
* 默认值: <code>README.md</code>

设置首页文件加载路径。适合不想将 <code>README.md</code> 作为入口文件渲染，或者是文档存放在其他位置的情况使用。

<pre lang="js">window.$docsify = {
  // 入口文件改为 /home.md
  homepage: 'home.md',

  // 文档和仓库根目录下的 README.md 内容一致
  homepage:
    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
};</pre>
<span id="basepath"></span>
== basePath ==

* 类型：<code>String</code>

文档加载的根路径，可以是二级路径或者是其他域名的路径。

<pre lang="js">window.$docsify = {
  basePath: '/path/',

  // 直接渲染其他域名的文档
  basePath: 'https://docsify.js.org/',

  // 甚至直接渲染其他仓库
  basePath:
    'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/',
};</pre>
<span id="relativepath"></span>
== relativePath ==

* 类型: <code>Boolean</code>
* 默认值: <code>false</code>

如果该选项设为 '''true''' ，那么链接会使用相对路径。

例如，像这样的目录结构：

<pre lang="text">.
└── docs
    ├── README.md
    ├── guide.md
    └── zh-cn
        ├── README.md
        ├── guide.md
        └── config
            └── example.md</pre>
如果 '''启用''' 了相对路径，当前链接是 <code>http://domain.com/zh-cn/README</code> ，对应的链接会解析为：

<pre lang="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</pre>
<pre lang="js">window.$docsify = {
  // 启用相对路径
  relativePath: true,

  // 禁用相对路径（默认值）
  relativePath: false,
};</pre>
== coverpage ==

* 类型：<code>Boolean|String</code>
* 默认值: <code>false</code>

启用封面页。开启后是加载 <code>_coverpage.md</code> 文件，也可以自定义文件名。

<pre lang="js">window.$docsify = {
  coverpage: true,

  // 自定义文件名
  coverpage: 'cover.md',

  // 多个封面页
  coverpage: ['/', '/zh-cn/'],

  // 多个封面页，并指定文件名
  coverpage: {
    '/': 'cover.md',
    '/zh-cn/': 'cover.md',
  },
};</pre>
== logo ==

* 类型: <code>String</code>

在侧边栏中出现的网站图标，你可以使用<code>CSS</code>来更改大小

<pre lang="js">window.$docsify = {
  logo: '/_media/icon.svg',
};</pre>
== name ==

* 类型：<code>String</code>

文档标题，会显示在侧边栏顶部。

<pre lang="js">window.$docsify = {
  name: 'docsify',
};</pre>
name 项也可以包含自定义 HTML 代码来方便地定制。

<pre lang="js">window.$docsify = {
  name: '<span>docsify</span>',
};</pre>
<span id="namelink"></span>
== nameLink ==

* 类型：<code>String</code>
* 默认值：<code>window.location.pathname</code>

点击文档标题后跳转的链接地址。

<pre lang="js">window.$docsify = {
  nameLink: '/',

  // 按照路由切换
  nameLink: {
    '/zh-cn/': '/zh-cn/',
    '/': '/',
  },
};</pre>
== markdown ==

* 类型: <code>Object|Function</code>



<pre lang="js">window.$docsify = {
  // object
  markdown: {
    smartypants: true,
    renderer: {
      link: function() {
        // ...
      },
    },
  },

  // function
  markdown: function(marked, renderer) {
    // ...
    return marked;
  },
};</pre>
<span id="themecolor"></span>
== themeColor ==

* 类型：<code>String</code>

替换主题色。利用 [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables CSS3 支持变量]的特性，对于老的浏览器有 polyfill 处理。

<pre lang="js">window.$docsify = {
  themeColor: '#3F51B5'
};</pre>
== alias ==

* 类型：<code>Object</code>

定义路由别名，可以更自由的定义路由规则。 支持正则。

<pre lang="js">window.$docsify = {
  alias: {
    '/foo/(.*)': '/bar/$1', // supports regexp
    '/zh-cn/changelog': '/changelog',
    '/changelog':
      'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
    '/.*/_sidebar.md': '/_sidebar.md', // See #301
  },
};</pre>
<span id="autoheader"></span>
== autoHeader ==

* 类型：<code>Boolean</code>

同时设置 <code>loadSidebar</code> 和 <code>autoHeader</code> 后，可以根据 <code>_sidebar.md</code> 的内容自动为每个页面增加标题。[https://github.com/docsifyjs/docsify/issues/78 #78]

<pre lang="js">window.$docsify = {
  loadSidebar: true,
  autoHeader: true,
};</pre>
<span id="executescript"></span>
== executeScript ==

* 类型：<code>Boolean</code>

执行文档里的 script 标签里的脚本，只执行第一个 script ([[zh-cn/themes.md|demo]])。 如果 Vue 存在，则自动开启。

<pre lang="js">window.$docsify = {
  executeScript: true,
};</pre>
<pre class="markdown">## This is test

&lt;script&gt;
  console.log(2333)
&lt;/script&gt;</pre>
注意如果执行的是一个外链脚本，比如 jsfiddle 的内嵌 demo，请确保引入外链脚本-external-script插件。

<span id="noemoji"></span>
== noEmoji ==

* 类型: <code>Boolean</code>

禁用 emoji 解析。

<pre lang="js">window.$docsify = {
  noEmoji: true,
};</pre>
?&gt; 如果该选项设为 <code>false</code> ，但是你不想解析一些特别的表情符，[https://github.com/docsifyjs/docsify/issues/742#issuecomment-586313143 参考这里]

<span id="mergenavbar"></span>
== mergeNavbar ==

* 类型: <code>Boolean</code>

小屏设备下合并导航栏到侧边栏。

<pre lang="js">window.$docsify = {
  mergeNavbar: true,
};</pre>
<span id="formatupdated"></span>
== formatUpdated ==

* 类型: <code>String|Function</code>

我们可以通过 '''{docsify-updated<span>}</span>''' 变量显示文档更新日期. 并且通过 <code>formatUpdated</code>配置日期格式。参考 https://github.com/lukeed/tinydate#patterns

<pre lang="js">window.$docsify = {
  formatUpdated: '{MM}/{DD} {HH}:{mm}',

  formatUpdated: function(time) {
    // ...

    return time;
  },
};</pre>
<span id="externallinktarget"></span>
== externalLinkTarget ==

* 类型: <code>String</code>
* 默认: <code>_blank</code>

外部链接的打开方式。默认为 <code>_blank</code> （在新窗口或者标签页中打开）

<pre lang="js">window.$docsify = {
  externalLinkTarget: '_self', // default: '_blank'
};</pre>
<span id="cornerexternallinktarget"></span>
== cornerExternalLinkTarget ==

* 类型:<code>String</code>
* 默认值:<code>_blank</code>

右上角链接的打开方式。默认为 <code>_blank</code> （在新窗口或者标签页中打开）

<pre lang="js">window.$docsify = {
  cornerExternalLinkTarget: '_self', // default: '_blank'
};</pre>
<span id="externallinkrel"></span>
== externalLinkRel ==

* 类型: <code>String</code>
* 默认值: <code>noopener</code>

默认为 <code>noopener</code> (no opener) 可以防止新打开的外部页面（当 externalLinkTarget 设为 <code>_blank</code> 时）能够控制我们的页面，没有设为 <code>_blank</code> 的话就不需要设置这个选项了。

<pre lang="js">window.$docsify = {
  externalLinkRel: '', // default: 'noopener'
};</pre>
<span id="routermode"></span>
== routerMode ==

* 类型: <code>String</code>
* 默认: <code>hash</code>

<pre lang="js">window.$docsify = {
  routerMode: 'history', // default: 'hash'
};</pre>
<span id="crossoriginlinks"></span>
== crossOriginLinks ==

* type: <code>Array</code>

当设置了<code>routerMode:'history'</code>时，你可能会面临跨域的问题，参见 [https://github.com/docsifyjs/docsify/issues/1379 #1379] 。在 Markdown 内容中，有一个简单的方法可以解决，参见跨域链接。

<pre lang="js">window.$docsify = {
  crossOriginLinks: ['https://example.com/cross-origin-link'],
};</pre>
<span id="nocompilelinks"></span>
== noCompileLinks ==

* 类型: <code>Array</code>

有时我们不希望 docsify 处理我们的链接。 参考 [https://github.com/docsifyjs/docsify/issues/203 #203]

<pre lang="js">window.$docsify = {
  noCompileLinks: ['/foo', '/bar/.*'],
};</pre>
<span id="onlycover"></span>
== onlyCover ==

* 类型: <code>Boolean</code>

只在访问主页时加载封面。

<pre lang="js">window.$docsify = {
  onlyCover: false,
};</pre>
<span id="requestheaders"></span>
== requestHeaders ==

* 类型: <code>Object</code>

设置请求资源的请求头。

<pre lang="js">window.$docsify = {
  requestHeaders: {
    'x-token': 'xxx',
  },
};</pre>
例如设置缓存

<pre lang="js">window.$docsify = {
  requestHeaders: {
    'cache-control': 'max-age=600',
  },
};</pre>
== ext ==

* 类型: <code>String</code>

资源的文件扩展名。

<pre lang="js">window.$docsify = {
  ext: '.md',
};</pre>
<span id="fallbacklanguages"></span>
== fallbackLanguages ==

* 类型: <code>Array&lt;string&gt;</code>

一个语言列表。在浏览这个列表中的语言的翻译文档时都会在请求到一个对应语言的翻译文档，不存在时显示默认语言的同名文档

Example:

* 尝试访问<code>/de/overview</code>，如果存在则显示
* 如果不存在则尝试<code>/overview</code>（取决于默认语言），如果存在即显示
* 如果也不存在，显示404页面

<pre lang="js">window.$docsify = {
  fallbackLanguages: ['fr', 'de'],
};</pre>
<span id="notfoundpage"></span>
== notFoundPage ==

* 类型: <code>Boolean</code> | <code>String</code> | <code>Object</code>

在找不到指定页面时加载<code>_404.md</code>:

<pre lang="js">window.$docsify = {
  notFoundPage: true,
};</pre>
加载自定义404页面:

<pre lang="js">window.$docsify = {
  notFoundPage: 'my404.md',
};</pre>
加载正确的本地化过的404页面:

<pre lang="js">window.$docsify = {
  notFoundPage: {
    '/': '_404.md',
    '/de': 'de/_404.md',
  },
};</pre>
<blockquote>注意: 配置过<code>fallbackLanguages</code>这个选项的页面与这个选项<code>notFoundPage</code>冲突。
</blockquote>
<span id="topmargin"></span>
== topMargin ==

* 类型: <code>Number</code>
* 默认值: <code>0</code>

让你的内容页在滚动到指定的锚点时，距离页面顶部有一定空间。当你使用 <code>固定页头</code> 布局时这个选项很有用，可以让你的锚点对齐标题栏。

<pre lang="js">window.$docsify = {
  topMargin: 90, // default: 0
};</pre>
<span id="vuecomponents"></span>
== vueComponents ==

* type: <code>Object</code>

创建并注册全局 [https://vuejs.org/v2/guide/components.html Vue组件] 。组件是以组件名称为键，以包含 Vue 选项的对象为值来指定的。组件<code>data</code>对每个实例都是唯一的，并且在用户浏览网站时不会持久。

<pre lang="js">window.$docsify = {
  vueComponents: {
    'button-counter': {
      template: `
        <button @click="count += 1">
          You clicked me {{ count }} times
        </button>
      `,
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};</pre>
<pre class="markdown">&lt;button-counter&gt;&lt;/button-counter&gt;
<output data-lang="output">
<button-counter></button-counter>
</output>
</pre>
<span id="vueglobaloptions"></span>
== vueGlobalOptions ==

* type: <code>Object</code>

指定 [https://vuejs.org/v2/api/#Options-Data Vue选项] ，用于未明确使用vueMounts、vueComponents或markdown脚本挂载的 Vue 内容。对全局<code>data</code>的更改将持续存在，并在任何使用全局引用的地方得到反映。

<pre lang="js">window.$docsify = {
  vueGlobalOptions: {
    data() {
      return {
        count: 0,
      };
    },
  },
};</pre>
<pre class="markdown">&lt;p&gt;
  &lt;button @click=&quot;count -= 1&quot;&gt;-&lt;/button&gt;
  {{ count }}
  &lt;button @click=&quot;count += 1&quot;&gt;+&lt;/button&gt;
&lt;/p&gt;
<output data-lang="output">
<p>
&lt;button @click=“count -= 1”&gt;-</button> {{ count }} &lt;button @click=“count += 1”&gt;+</button>
</p>
</output>
</pre>
<span id="vuemounts"></span>
== vueMounts ==

* type: <code>Object</code>

指定要挂载为 [https://vuejs.org/v2/guide/instance.html Vue实例] 的 DOM 元素及其相关选项。挂载元素使用 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors CSS选择器] 作为键，并使用包含 Vue 选项的对象作为其值。每次加载新页面时，Docsify 将挂载主内容区域中第一个匹配的元素。挂载元素<code>data</code>对每个实例来说都是唯一的，并且不会在用户浏览网站时持久存在。

<pre lang="js">window.$docsify = {
  vueMounts: {
    '#counter': {
      data() {
        return {
          count: 0,
        };
      },
    },
  },
};</pre>
<pre class="markdown">&lt;div id=&quot;counter&quot;&gt;
  &lt;button @click=&quot;count -= 1&quot;&gt;-&lt;/button&gt;
  {{ count }}
  &lt;button @click=&quot;count += 1&quot;&gt;+&lt;/button&gt;
&lt;/div&gt;
<output id="counter">
&lt;button @click=“count -= 1”&gt;-</button> {{ count }} &lt;button @click=“count += 1”&gt;+</button>
</output>
</pre>