Multi-language navbars

[liulex]

The top navbar and the newly supported sidebar seem to be static only, which is bad if we have pages for different languages while the titles of the navbar items can only have one language.

As to the top navbar, being static is fine if we arrange the items like "En, 中文".
However, if we arrange them like "Download, Language (En, 中文)", where the items in parentheses mean they are contained in a dropdown list. When we switched to the Chinese page, the English navbar will be undesirable.

Maybe we can offer a way to bind each page with its navbars?

For example, we have four navbars: nav-top-1, nav-top-2, nav-left-1, nav-left-2.
If a page does not explicitly specify its navbars, the defualt ones will be used for it. If a page says it wants nav-top-2 and nav-left-2, these two will be used.

But how do we bind a page with a navbar? Sorry I have little knowledge about css or javascript...

Another possible improvement may be to allow the user to write their custom sidebars using markdown, just like Github Wiki does. They put it in _Sidebar.md.

Sorry if I am asking for too much. 😅

[QingWei-Li]

Maybe we can copy GitBook directory structure, such as

-| zh-cn\
-| en\
  -| article1.md
  -| article2.md
  -| README.md
  -| _sidebar.md
  -| _navbar.md
-| README.md
-| 404.html

The README.md in the root can be used as gitbook LANG.md what to choose language. Or can be used as the default language directory, such as

-| zh-cn\
    -| article1.md
    -| article2.md
    -| _sidebar.md
    -| _navbar.md
    -| README.md
-| article1.md
-| article2.md
-| _sidebar.md
-| _navbar.md
-| README.md
-| 404.html

What do you think? I can work it tonight.

[liulex]

I would prefer the latter one, so that there would be no 'en' in the urls of English pages.
Your solution is great. Thanks!

[QingWei-Li]

Both will be implemented. 😄

[liulex]

Even better 👍

[QingWei-Li]

Custom sidebars is be implemented in 0.5.0, You can refer to https://docsify.js.org/zh-cn#load-sidebar
😄

[liulex]

Excellent! I've tried it out, everything works well, except one thing missing...

_navbar.md doesn't support sub-level, i.e. lines like these cannot be parsed as a dropdown list:

- [Dowload](https://example.com/)
- [Language](/)
  - [English](/)
  - [中文](/zh-cn)

I know it can be achieved via css (you told me 😄 ), and I made it. However, this way I can only have one navbar, which means the English and Chinese pages cannot have different navbars.

Therefore, maybe it's better to support dropdown list natively?

[QingWei-Li]

I have no idea about dropdown list, but I'll try it tonight.

We can have different navbars, such as

-| zh-cn\
    -| article1.md
    -| article2.md
    -| _sidebar.md
    -| _navbar.md
    -| README.md
-| article1.md
-| article2.md
-| _sidebar.md
-| _navbar.md
-| README.md
-| 404.html

[liulex]

Yes I know that. Only when we write it in .md, but that way I lost my dropdown list. For dropdown list, I need to write it in 404.html, then I lost different navbars... 😂

[QingWei-Li]

Ok, i see. How do you achieve the dropdown list , you can show me the code for reference? thanks~

[liulex]

Sure.

In 404.html:

  <nav>
    <div class="nav-dropdown-container">
    	<a>Language</a>
    	<div class="nav-dropdown">
      		<a href="/">En</a>
      		<a href="/zh-cn">中文</a>
    	</div>
  </div>
  </nav>

Custom css:

nav .nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #ddd;
    border-bottom-color: #ccc;
    text-align: left;
    border-radius: 4px;
    white-space: nowrap;
}

.nav-dropdown-container:hover .nav-dropdown {
        display: block;
}

.nav-dropdown-container {
    position: relative;
    display: inline-block;
}

.nav-dropdown-container a {
    display: block;
}

.nav-dropdown-container a.active {
    border-bottom: none;
}

[liulex]

Good news!
As I just found out in #9, I can also write html in_navbar.md, like:

- [Dowload](https://example.com/)
- <div class="nav-dropdown-container">
      <a>语言</a>
      <div class="nav-dropdown">
          <a href="/">En</a>
          <a href="/zh-cn">中文</a>
      </div>
  </div>

Such a navbar works! With an expected dropdown list!

[QingWei-Li]

haha, I have implemented the dropdown list.

[liulex]

Good job, it seems I'm a bit late... 😂
But I think such html support deserves to be mentioned as one of docsify's features. It certainly allows for more flexibility.

[QingWei-Li]

0.6.0 has been released, I will close the issue.