add an option to render the navbar when onlyCover is true

docs/configuration.md

@@ -16,7 +16,7 @@ The config can also be defined as a function, in which case the first argument i
 
 ```html
 <script>
-  window.$docsify = function(vm) {
+  window.$docsify = function (vm) {
     return {
       markdown: {
         renderer: {
@@ -88,6 +88,22 @@ window.$docsify = {
 };
 ```
 
+## onlyCoverNavbar
+
+- Type: `Boolean`
+- Default: `false`
+
+By default the cover page will not show the navbar when
+[`onlyCover`](./configuration.md#onlycover) is `true`. Set `onlyCoverNavbar`
+to `true` to always show the nav bar.
+
+```js
+window.$docsify = {
+  onlyCover: true,
+  onlyCoverNavbar: true,
+};
+```
+
 ## loadSidebar
 
 - Type: `Boolean|String`
@@ -319,14 +335,14 @@ window.$docsify = {
   markdown: {
     smartypants: true,
     renderer: {
-      link: function() {
+      link: function () {
         // ...
       },
     },
   },
 
   // function
-  markdown: function(marked, renderer) {
+  markdown: function (marked, renderer) {
     // ...
     return marked;
   },
@@ -435,7 +451,7 @@ See https://github.com/lukeed/tinydate#patterns
 window.$docsify = {
   formatUpdated: '{MM}/{DD} {HH}:{mm}',
 
-  formatUpdated: function(time) {
+  formatUpdated: function (time) {
     // ...
 
     return time;
@@ -522,7 +538,7 @@ window.$docsify = {
 
 - type: `Boolean`
 
-Only coverpage is loaded when visiting the home page.
+Only coverpage is loaded when visiting the home page. Users will have to click a link to visit other pages instead of scrolling down.
 
 ```js
 window.$docsify = {
@@ -530,6 +546,8 @@ window.$docsify = {
 };
 ```
 
+By default, the nav bar is not loaded on the cover page. See the [`onlyCoverNavbar`](./configuration.md#onlycovernavbar) option.
+
 ## requestHeaders
 
 - type: `Object`

src/core/fetch/index.js

@@ -29,7 +29,9 @@ export function Fetch(Base) {
   let last;
 
   const abort = () => last && last.abort && last.abort();
+
   const request = (url, hasbar, requestHeaders) => {
+    // Abort last request
     abort();
     last = get(url, true, requestHeaders);
     return last;
@@ -81,7 +83,7 @@ export function Fetch(Base) {
       };
     }
 
-    _fetch(cb = noop) {
+    _fetch(cb = noop, onlyCover = false) {
       const { query } = this.route;
       let { path } = this.route;
 
@@ -92,40 +94,66 @@ export function Fetch(Base) {
         this.router.normalize();
       } else {
         const qs = stringifyQuery(query, ['id']);
-        const { loadNavbar, requestHeaders, loadSidebar } = this.config;
-        // Abort last request
 
-        const file = this.router.getFile(path);
-        const req = request(file + qs, true, requestHeaders);
+        const actions = [];
 
-        this.isRemoteUrl = isExternal(file);
-        // Current page is html
-        this.isHTML = /\.html$/g.test(file);
+        if (!onlyCover) {
+          let resolve;
+          const promise = new Promise(res => (resolve = res));
+          actions.push(promise);
 
-        // Load main content
-        req.then(
-          (text, opt) =>
-            this._renderMain(
-              text,
-              opt,
-              this._loadSideAndNav(path, qs, loadSidebar, cb)
-            ),
-          _ => {
-            this._fetchFallbackPage(path, qs, cb) ||
-              this._fetch404(file, qs, cb);
-          }
-        );
+          const { requestHeaders, loadSidebar } = this.config;
+
+          const file = this.router.getFile(path);
+          const req = request(file + qs, true, requestHeaders);
+
+          this.isRemoteUrl = isExternal(file);
+          // Current page is html
+          this.isHTML = /\.html$/g.test(file);
+
+          // Load main content
+          req.then(
+            (text, opt) =>
+              this._renderMain(
+                text,
+                opt,
+                this._loadSideAndNav(path, qs, loadSidebar, resolve)
+              ),
+            _ => {
+              this._fetchFallbackPage(path, qs, resolve) ||
+                this._fetch404(file, qs, resolve);
+            }
+          );
+        }
+
+        const { loadNavbar, loadNavbarOnCover } = this.config;
 
         // Load nav
-        loadNavbar &&
+        while (loadNavbar) {
+          // If we're on the cover page, don't load the navbar if loadNavbarOnCover is false.
+          if (onlyCover && !loadNavbarOnCover) break; // eslint-disable-line
+
+          let resolve;
+          const promise = new Promise(res => (resolve = res));
+          actions.push(promise);
+
           loadNested(
             path,
             qs,
             loadNavbar,
-            text => this._renderNav(text),
+            text => {
+              this._renderNav(text);
+              resolve();
+            },
             this,
             true
           );
+
+          break;
+        }
+
+        // Wait for all actions to finish before calling the callback.
+        Promise.all(actions).then(cb);
       }
     }
 
@@ -173,14 +201,10 @@ export function Fetch(Base) {
 
       const onlyCover = this._fetchCover();
 
-      if (onlyCover) {
+      this._fetch(() => {
+        $resetEvents();
         done();
-      } else {
-        this._fetch(() => {
-          $resetEvents();
-          done();
-        });
-      }
+      }, onlyCover);
     }
 
     _fetchFallbackPage(path, qs, cb = noop) {

src/core/render/index.js

@@ -6,7 +6,7 @@ import cssVars from '../util/polyfill/css-vars';
 import { getAndActive, sticky } from '../event/sidebar';
 import { getPath, isAbsolutePath } from '../router/util';
 import { isMobile, inBrowser } from '../util/env';
-import { isPrimitive, merge } from '../util/core';
+import { isPrimitive, merge, noop } from '../util/core';
 import { scrollActiveSidebar } from '../event/scroll';
 import { Compiler } from './compiler';
 import * as tpl from './tpl';