Duplicate header with autoHeader and loadSidebar set to true

[nicolas-goudry]

I found that there’s an odd bug with docsify-darklight-theme plugin, whether it’s used with or without docsify-themeable.

If you setup a raw docsify project:

npx docsify init ./test-docs

And edit docsify’s options in index.html:

window.$docsify = {
  loadSidebar: true,
  autoHeader: true
}

Then create the following _sidebar.md:

- [Title 1](/autotitle.md)
- [Title 2](/customtitle.md)

With the following pages:

autotitle.md

This page has an auto-generated title.

customtitle.md

# My custom title

This page has a custom title.

When loaded, the autotitle.md will have an auto-generated title matching its link text from _sidebar.md.

When loaded, the customtitle.md will keep its custom title.

---

However, after docsify-darklight-theme setup, the customtitle.md will have two main titles:

• the one from the sidebar
• the one from its content

I find this behavior very strange and can’t understand where it’s coming from… I heavily rely on the default behavior in order to have short links in my sidebar with more detailed page titles.

For now, I will disable the autoHeader feature and manually provide page titles, but I’d really like to use the default behavior with docsify-darklight-theme… If you could look into this, it would be greatly appreciated!

Thanks 🙂

[nicolas-goudry]

I found what’s triggering this behaviour.

On docsify’s afterEach hook, the div holding theme switch button is added before page content. This prevents docsify to detect that a custom page title has been set.

To solve this issue, the div needs to be added after page content. This doesn’t change the theme switch button position on page, given its absolute positioning.