Updated documentation and changelog
@ -1,3 +1,7 @@
|
|||||||
|
mkdocs-material-6.1.4+insiders-1.10.0 (2020-11-15)
|
||||||
|
|
||||||
|
* Added support for integrating table of contents into navigation
|
||||||
|
|
||||||
mkdocs-material-6.1.4+insiders-1.9.0 (2020-11-07)
|
mkdocs-material-6.1.4+insiders-1.9.0 (2020-11-07)
|
||||||
|
|
||||||
* Added support for hiding navigation and table of contents on any page
|
* Added support for hiding navigation and table of contents on any page
|
||||||
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 128 KiB |
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 140 KiB |
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 173 KiB |
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
Before Width: | Height: | Size: 153 KiB After Width: | Height: | Size: 156 KiB |
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 168 KiB |
BIN
docs/assets/screenshots/toc-integrate.png
Normal file
After Width: | Height: | Size: 161 KiB |
@ -6,6 +6,10 @@ template: overrides/main.html
|
|||||||
|
|
||||||
## Material for MkDocs Insiders
|
## Material for MkDocs Insiders
|
||||||
|
|
||||||
|
### 1.10.0 <small>_ November 15, 2020</small>
|
||||||
|
|
||||||
|
* Added support for integrating table of contents into navigation
|
||||||
|
|
||||||
### 1.9.0 <small>_ November 7, 2020</small>
|
### 1.9.0 <small>_ November 7, 2020</small>
|
||||||
|
|
||||||
* Added support for hiding navigation and table of contents on any page
|
* Added support for hiding navigation and table of contents on any page
|
||||||
|
@ -78,7 +78,8 @@ for MkDocs Insiders. You can click on each feature to learn more about it:
|
|||||||
- [x] [Navigation can be grouped into sections][16]
|
- [x] [Navigation can be grouped into sections][16]
|
||||||
- [x] [Navigation can be always expanded][17]
|
- [x] [Navigation can be always expanded][17]
|
||||||
- [x] [Navigation and table of contents can be hidden][18]
|
- [x] [Navigation and table of contents can be hidden][18]
|
||||||
- [x] [Header can be automatically hidden on scrolling][19]
|
- [x] [Table of contents can be integrated into navigation][19]
|
||||||
|
- [x] [Header can be automatically hidden on scrolling][20]
|
||||||
|
|
||||||
[11]: setup/setting-up-the-footer.md#remove-generator
|
[11]: setup/setting-up-the-footer.md#remove-generator
|
||||||
[12]: setup/changing-the-colors.md#color-palette-toggle
|
[12]: setup/changing-the-colors.md#color-palette-toggle
|
||||||
@ -88,15 +89,16 @@ for MkDocs Insiders. You can click on each feature to learn more about it:
|
|||||||
[16]: setup/setting-up-navigation.md#navigation-sections
|
[16]: setup/setting-up-navigation.md#navigation-sections
|
||||||
[17]: setup/setting-up-navigation.md#navigation-expansion
|
[17]: setup/setting-up-navigation.md#navigation-expansion
|
||||||
[18]: setup/setting-up-navigation.md#hide-the-sidebars
|
[18]: setup/setting-up-navigation.md#hide-the-sidebars
|
||||||
[19]: setup/setting-up-the-header.md#automatic-hiding
|
[19]: setup/setting-up-navigation.md#navigation-integration
|
||||||
|
[20]: setup/setting-up-the-header.md#automatic-hiding
|
||||||
|
|
||||||
## Roadmap
|
## Roadmap
|
||||||
|
|
||||||
The following list of funding goals – named after varieties of chili peppers
|
The following list of funding goals – named after varieties of chili peppers
|
||||||
[I'm growing on my balcony][20] – shows which features are already available
|
[I'm growing on my balcony][21] – shows which features are already available
|
||||||
in Material for MkDocs Insiders.
|
in Material for MkDocs Insiders.
|
||||||
|
|
||||||
[20]: https://www.instagram.com/squidfunk/
|
[21]: https://www.instagram.com/squidfunk/
|
||||||
|
|
||||||
### Madame Jeanette
|
### Madame Jeanette
|
||||||
|
|
||||||
@ -115,9 +117,8 @@ in Material for MkDocs Insiders.
|
|||||||
- [x] [Navigation can be grouped into sections][16]
|
- [x] [Navigation can be grouped into sections][16]
|
||||||
- [x] [Navigation can be always expanded][17]
|
- [x] [Navigation can be always expanded][17]
|
||||||
- [x] [Navigation and table of contents can be hidden][18]
|
- [x] [Navigation and table of contents can be hidden][18]
|
||||||
- [x] [Header can be automatically hidden on scrolling][19]
|
- [x] [Table of contents can be integrated into navigation][19]
|
||||||
- [ ] Table of contents can be moved into navigation for more space
|
- [x] [Header can be automatically hidden on scrolling][20]
|
||||||
- [ ] Better support for wide screens, i.e. more horizontal space
|
|
||||||
|
|
||||||
### Bhut Jolokia
|
### Bhut Jolokia
|
||||||
|
|
||||||
@ -169,10 +170,10 @@ improvements (e.g. search) do not require any changes to existing configuration.
|
|||||||
This means that your users will be able to build the docs locally with the
|
This means that your users will be able to build the docs locally with the
|
||||||
regular version and when they push their changes to CI/CD, they will be built
|
regular version and when they push their changes to CI/CD, they will be built
|
||||||
with Material for MkDocs Insiders. For this reason, it's recommended to
|
with Material for MkDocs Insiders. For this reason, it's recommended to
|
||||||
[install Insiders][21] only in CI, as you don't want to expose your `GH_TOKEN`
|
[install Insiders][22] only in CI, as you don't want to expose your `GH_TOKEN`
|
||||||
to users.
|
to users.
|
||||||
|
|
||||||
[21]: publishing-your-site.md#github-pages
|
[22]: publishing-your-site.md#github-pages
|
||||||
|
|
||||||
### Terms
|
### Terms
|
||||||
|
|
||||||
@ -182,7 +183,7 @@ terms?_
|
|||||||
|
|
||||||
Yes. Whether you're an individual or a company, you may use _Material for MkDocs
|
Yes. Whether you're an individual or a company, you may use _Material for MkDocs
|
||||||
Insiders_ precisely under the same terms as Material for MkDocs, which are given
|
Insiders_ precisely under the same terms as Material for MkDocs, which are given
|
||||||
by the [MIT license][22]. However, we kindly ask you to respect the following
|
by the [MIT license][23]. However, we kindly ask you to respect the following
|
||||||
guidelines:
|
guidelines:
|
||||||
|
|
||||||
- Please __don't distribute the source code__ from Material for MkDocs Insiders.
|
- Please __don't distribute the source code__ from Material for MkDocs Insiders.
|
||||||
@ -193,7 +194,7 @@ guidelines:
|
|||||||
- If you cancel your subscription, you're removed as a collaborator and will
|
- If you cancel your subscription, you're removed as a collaborator and will
|
||||||
miss out on future updates of Material for MkDocs Insiders. However, you may
|
miss out on future updates of Material for MkDocs Insiders. However, you may
|
||||||
__use the latest version__ that's available to you __as long as you like__.
|
__use the latest version__ that's available to you __as long as you like__.
|
||||||
Just remember that __[GitHub deletes private forks][23]__.
|
Just remember that __[GitHub deletes private forks][24]__.
|
||||||
|
|
||||||
[22]: license.md
|
[23]: license.md
|
||||||
[23]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
|
[24]: https://docs.github.com/en/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository
|
||||||
|
@ -5,9 +5,9 @@ template: overrides/main.html
|
|||||||
# Setting up navigation
|
# Setting up navigation
|
||||||
|
|
||||||
A clear and concise navigation structure is an important aspect of good project
|
A clear and concise navigation structure is an important aspect of good project
|
||||||
documentation. Material for MkDocs provides several options to configure the
|
documentation. Material for MkDocs provides a multitude of options to configure
|
||||||
behavior of navigational elements, including [tabs][1] and [sections][2], and
|
the behavior of navigational elements, including [tabs][1] and [sections][2],
|
||||||
its flag-ship feature: [instant loading][3].
|
and its flag-ship feature: [instant loading][3].
|
||||||
|
|
||||||
[1]: #navigation-tabs
|
[1]: #navigation-tabs
|
||||||
[2]: #navigation-sections
|
[2]: #navigation-sections
|
||||||
@ -46,7 +46,7 @@ _Material for MkDocs is the only MkDocs theme offering this feature._
|
|||||||
[:octicons-file-code-24: Source][6] · :octicons-unlock-24: Feature flag
|
[:octicons-file-code-24: Source][6] · :octicons-unlock-24: Feature flag
|
||||||
|
|
||||||
When _tabs_ are enabled, top-level sections are rendered in a menu layer below
|
When _tabs_ are enabled, top-level sections are rendered in a menu layer below
|
||||||
the header on big screens (but not when the sidebar is hidden). They can be
|
the header for viewports above `1220px`, but remain as-is on mobile. They can be
|
||||||
enabled via `mkdocs.yml` with:
|
enabled via `mkdocs.yml` with:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
@ -118,8 +118,8 @@ navigation is plausible on mobile devices. As another example, see the
|
|||||||
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||||
|
|
||||||
When _sections_ are enabled, top-level sections are rendered as groups in the
|
When _sections_ are enabled, top-level sections are rendered as groups in the
|
||||||
sidebar on big screens (but not when the sidebar is hidden). It can be enabled
|
sidebar for viewports above `1220px`, but remain as-is on mobile. They can also
|
||||||
via `mkdocs.yml`:
|
be enabled via `mkdocs.yml`:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
theme:
|
theme:
|
||||||
@ -261,6 +261,36 @@ them at your own risk._
|
|||||||
[18]: #permalink
|
[18]: #permalink
|
||||||
[19]: #hide-the-sidebars
|
[19]: #hide-the-sidebars
|
||||||
|
|
||||||
|
#### Navigation integration
|
||||||
|
|
||||||
|
[:octicons-file-code-24: Source][11] ·
|
||||||
|
:octicons-unlock-24: Feature flag ·
|
||||||
|
[:octicons-heart-fill-24:{: .tx-heart } Insiders only][11]{: .tx-insiders }
|
||||||
|
|
||||||
|
When _integration_ is enabled, the table of contents is rendered as part of
|
||||||
|
the navigation for viewports above `1220px`, but remain as-is on mobile. This
|
||||||
|
can be enabled via `mkdocs.yml`:
|
||||||
|
|
||||||
|
``` yaml
|
||||||
|
theme:
|
||||||
|
features:
|
||||||
|
- toc.integrate
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Integrate table of contents"
|
||||||
|
|
||||||
|
[![Integrate table of contents][20]][20]
|
||||||
|
|
||||||
|
=== "Separate table of contents"
|
||||||
|
|
||||||
|
[![Separate table of contents][8]][8]
|
||||||
|
|
||||||
|
[20]: ../assets/screenshots/toc-integrate.png
|
||||||
|
|
||||||
|
The content section will now always stretch to the right side, resulting in
|
||||||
|
more space for your content. This feature flag can be combined with all other
|
||||||
|
feature flags, e.g. [tabs][1] and [sections][2].
|
||||||
|
|
||||||
### Hide the sidebars
|
### Hide the sidebars
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][11] ·
|
[:octicons-file-code-24: Source][11] ·
|
||||||
@ -268,7 +298,7 @@ them at your own risk._
|
|||||||
|
|
||||||
Sometimes it's desirable to hide the navigation and/or table of contents
|
Sometimes it's desirable to hide the navigation and/or table of contents
|
||||||
sidebar, especially when there's a single navigation item. This can be done for
|
sidebar, especially when there's a single navigation item. This can be done for
|
||||||
any page using the [Metadata][20] extension:
|
any page using the [Metadata][21] extension:
|
||||||
|
|
||||||
``` yaml
|
``` yaml
|
||||||
---
|
---
|
||||||
@ -282,26 +312,26 @@ hide:
|
|||||||
|
|
||||||
=== "Hide navigation"
|
=== "Hide navigation"
|
||||||
|
|
||||||
[![Hide navigation][21]][21]
|
[![Hide navigation][22]][22]
|
||||||
|
|
||||||
=== "Hide table of contents"
|
=== "Hide table of contents"
|
||||||
|
|
||||||
[![Hide table of contents][22]][22]
|
[![Hide table of contents][23]][23]
|
||||||
|
|
||||||
=== "Hide both"
|
=== "Hide both"
|
||||||
|
|
||||||
[![Hide navigation and table of contents][23]][23]
|
[![Hide navigation and table of contents][24]][24]
|
||||||
|
|
||||||
[20]: ../../reference/meta-tags/#metadata
|
[21]: ../../reference/meta-tags/#metadata
|
||||||
[21]: ../assets/screenshots/hide-navigation.png
|
[22]: ../assets/screenshots/hide-navigation.png
|
||||||
[22]: ../assets/screenshots/hide-toc.png
|
[23]: ../assets/screenshots/hide-toc.png
|
||||||
[23]: ../assets/screenshots/hide-navigation-toc.png
|
[24]: ../assets/screenshots/hide-navigation-toc.png
|
||||||
|
|
||||||
## Customization
|
## Customization
|
||||||
|
|
||||||
### Keyboard shortcuts
|
### Keyboard shortcuts
|
||||||
|
|
||||||
[:octicons-file-code-24: Source][24] ·
|
[:octicons-file-code-24: Source][25] ·
|
||||||
:octicons-mortar-board-24: Difficulty: _easy_
|
:octicons-mortar-board-24: Difficulty: _easy_
|
||||||
|
|
||||||
Material for MkDocs includes several keyboard shortcuts that make it possible
|
Material for MkDocs includes several keyboard shortcuts that make it possible
|
||||||
@ -327,7 +357,7 @@ to navigate your project documentation via keyboard. There're two modes:
|
|||||||
* ++n++ , ++period++ : go to next page
|
* ++n++ , ++period++ : go to next page
|
||||||
|
|
||||||
Let's say you want to bind some action to the ++x++ key. By using [additional
|
Let's say you want to bind some action to the ++x++ key. By using [additional
|
||||||
JavaScript][25], you can subscribe to the `keyboard$` observable and attach
|
JavaScript][26], you can subscribe to the `keyboard$` observable and attach
|
||||||
your custom event listener:
|
your custom event listener:
|
||||||
|
|
||||||
``` js
|
``` js
|
||||||
@ -343,5 +373,38 @@ The call to `#!js key.claim()` will essentially execute `#!js preventDefault()`
|
|||||||
on the underlying event, so the keypress will not propagate further and touch
|
on the underlying event, so the keypress will not propagate further and touch
|
||||||
other event listeners.
|
other event listeners.
|
||||||
|
|
||||||
[24]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
|
[25]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/keyboard/index.ts
|
||||||
[25]: ../customization.md#additional-javascript
|
[26]: ../customization.md#additional-javascript
|
||||||
|
|
||||||
|
### Content area width
|
||||||
|
|
||||||
|
[:octicons-file-code-24: Source][27] ·
|
||||||
|
:octicons-mortar-board-24: Difficulty: _easy_
|
||||||
|
|
||||||
|
The width of the content area is set so the length of each line doesn't exceed
|
||||||
|
80-100 characters, depending on the width of the characters. While this
|
||||||
|
is a reasonable default, as longer lines tend to be harder to read, it may be
|
||||||
|
desirable to increase the overall width of the content area, or even make it
|
||||||
|
stretch to the entire available space.
|
||||||
|
|
||||||
|
This can easily be achieved with an [additional stylesheet][28] and a few lines
|
||||||
|
of CSS:
|
||||||
|
|
||||||
|
=== "Increase width"
|
||||||
|
|
||||||
|
``` css
|
||||||
|
.md-grid {
|
||||||
|
max-width: 1440px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Stretch to fit"
|
||||||
|
|
||||||
|
``` css
|
||||||
|
.md-grid {
|
||||||
|
max-width: initial;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
[27]: https://github.com/squidfunk/mkdocs-material/blob/aeaa00a625abf952f355164de02c539b061e6127/src/assets/stylesheets/main/layout/_base.scss#L99-L104
|
||||||
|
[28]: ../customization.md#additional-css
|
||||||
|