Skip to content

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

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.

Sign up for GitHub

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

Open
wants to merge 15 commits into
base: develop
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c12c68e
allow user configured navbar selection
Evidlo Mar 10, 2021
2b0db83
Merge branch 'develop' into develop
sy-records Mar 11, 2021
bb46a88
Merge branch 'develop' into develop
sy-records Mar 12, 2021
69def1c
Merge branch 'develop' into develop
sy-records Mar 28, 2021
a989914
Merge branch 'develop' into develop
Koooooo-7 Apr 12, 2021
f830976
Merge branch 'develop' into develop
sy-records Jun 23, 2021
fe30b70
add tests for nav_el option
Evidlo Jun 23, 2021
cf05a6f
fix tests to use innerHTML
Evidlo Jun 23, 2021
74a0af0
Merge branch 'develop' into develop
Evidlo Jul 31, 2021
8e5f080
Merge branch 'develop' into develop
trusktr Aug 2, 2021
d9871e1
Merge branch 'develop' into develop
Koooooo-7 Aug 5, 2021
738c39a
rename to camel case
Evidlo Jan 12, 2022
cdde500
dont merge nav when using custom nav element
Evidlo Jan 13, 2022
288d05d
Merge branch 'develop' into develop
Evidlo Jan 13, 2022
02daac4
use navEl when rendering
Evidlo Jan 13, 2022
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
13 changes: 13 additions & 0 deletions docs/configuration.md
View file
Open in desktop
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
View file
Open in desktop
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));
if (this.config.loadNavbar) {
getAndActive(this.router, 'nav');
}
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');

const el = dom.find(id);
let html = '';
Expand Down Expand Up @@ -444,7 +445,7 @@ export function initRender(vm) {
}

// Add nav
if (config.loadNavbar) {
if (config.loadNavbar && !config.nav_el) {
dom.before(navAppendToTarget, navEl);
}

Expand Down
38 changes: 38 additions & 0 deletions test/e2e/nav.test.js
View file
Open in desktop
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>');
});
});