Skip to content
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

[embedding] feat: allow user configured navbar site #1535

Open
wants to merge 15 commits into
base: develop
Choose a base branch
from
Open
13 changes: 13 additions & 0 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,19 @@ window.$docsify = {
};
```

## nav_el

- Type: `String`
- Default: `null`

The DOM element to use for rendering the navbar. It can be a CSS selector string or an actual [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). If `null`, the first `<nav>` element on the page is used. If it doesn't exist, it is created at the top of the DOM.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the source, this option accepts a string only (not an HTMLElement). Either the description or the source needs to be updated to match.


```js
window.$docsify = {
nav_el: '#navbar,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The configuration option would be navEl, not nav_el.

};
```

## loadSidebar

- Type: `Boolean|String`
Expand Down
7 changes: 4 additions & 3 deletions src/core/render/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,8 @@ export function renderMixin(proto) {
};

proto._renderNav = function(text) {
text && this._renderTo('nav', this.compiler.compile(text));
text &&
this._renderTo(this.config.nav_el || 'nav', this.compiler.compile(text));
Evidlo marked this conversation as resolved.
Show resolved Hide resolved
if (this.config.loadNavbar) {
getAndActive(this.router, 'nav');
Evidlo marked this conversation as resolved.
Show resolved Hide resolved
}
Expand Down Expand Up @@ -401,7 +402,7 @@ export function initRender(vm) {
}

const id = config.el || '#app';
const navEl = dom.find('nav') || dom.create('nav');
const navEl = dom.find(config.nav_el || 'nav') || dom.create('nav');
Evidlo marked this conversation as resolved.
Show resolved Hide resolved

const el = dom.find(id);
let html = '';
Expand Down Expand Up @@ -444,7 +445,7 @@ export function initRender(vm) {
}
Evidlo marked this conversation as resolved.
Show resolved Hide resolved

// Add nav
if (config.loadNavbar) {
if (config.loadNavbar && !config.nav_el) {
Evidlo marked this conversation as resolved.
Show resolved Hide resolved
dom.before(navAppendToTarget, navEl);
}

Expand Down
38 changes: 38 additions & 0 deletions test/e2e/nav.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
const docsifyInit = require('../helpers/docsify-init');

describe(`Navbar tests`, function() {
test('specify custom navbar element in config with nav_el', async () => {
const docsifyInitConfig = {
html: `
<html>
<body>
<nav id="mynav"></nav>
<div id="app"></nav>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are closing <div id="app"> with </nav>. This should close with </div>.

</body>
</html>
`,
markdown: {
navbar: `
- [Foo](foo)
- [Bar](bar)
`,
homepage: `
# hello world
foo
`,
},
config: {
nav_el: '#mynav',
},
};

await docsifyInit(docsifyInitConfig);

// Check that our custom <nav> element contains nav links
let navHTML;
navHTML = await page.$eval('#mynav', el => el.innerHTML);
expect(navHTML).toMatch('<li><a href="#/foo" title="Foo">Foo</a></li>');
navHTML = await page.$eval('#mynav', el => el.innerHTML);
expect(navHTML).toMatch('<li><a href="#/bar" title="Bar">Bar</a></li>');
});
});