Improved customization guide

This commit is contained in:
squidfunk 2020-08-30 17:37:49 +02:00
parent 71544e4479
commit 69148107d6
2 changed files with 48 additions and 22 deletions

View File

@ -5,14 +5,14 @@ template: overrides/main.html
# Customization # Customization
Project documentation is as diverse as the projects themselves and Material for Project documentation is as diverse as the projects themselves and Material for
MkDocs is a good starting point for making it look great. However, as you write MkDocs is a great starting point for making it look beautiful. However, as you
your documentation, you may reach a point where some small adjustments are write your documentation, you may reach a point where small adjustments are
necessary to preserve your brand's style. necessary to preserve your brand's style.
## Adding assets ## Adding assets
[MkDocs][1] provides several ways to customize a theme. In order to make a few [MkDocs][1] provides several ways to customize a theme. In order to make a few
tweaks to an existing theme, you can just add your stylesheets and JavaScript tweaks to Material for MkDocs, you can just add your stylesheets and JavaScript
files to the `docs` directory. files to the `docs` directory.
[1]: https://www.mkdocs.org [1]: https://www.mkdocs.org
@ -23,9 +23,12 @@ If you want to tweak some colors or change the spacing of certain elements,
you can do this in a separate stylesheet. The easiest way is by creating a you can do this in a separate stylesheet. The easiest way is by creating a
new stylesheet file in the `docs` directory: new stylesheet file in the `docs` directory:
``` ``` sh
mkdir docs/stylesheets .
touch docs/stylesheets/extra.css ├─ docs/
│ └─ stylesheets/
│ └─ extra.css
└─ mkdocs.yml
``` ```
Then, add the following line to `mkdocs.yml`: Then, add the following line to `mkdocs.yml`:
@ -46,9 +49,12 @@ The same is true for additional JavaScript. If you want to integrate another
syntax highlighter or add some custom logic to your theme, create a new syntax highlighter or add some custom logic to your theme, create a new
JavaScript file in the `docs` directory: JavaScript file in the `docs` directory:
``` ``` sh
mkdir docs/javascripts .
touch docs/javascripts/extra.js ├─ docs/
│ └─ javascripts/
│ └─ extra.js
└─ mkdocs.yml
``` ```
Then, add the following line to `mkdocs.yml`: Then, add the following line to `mkdocs.yml`:
@ -64,16 +70,17 @@ Further assistance can be found in the [MkDocs documentation][3].
## Extending the theme ## Extending the theme
If you want to alter the HTML source (e.g. add or remove some part), you can If you want to alter the HTML source (e.g. add or remove some parts), you can
extend the theme. MkDocs supports [theme extension][4], an easy way to override extend the theme. MkDocs supports [theme extension][4], an easy way to override
parts of a theme without forking and changing the main theme. parts of Material for MkDocs without forking from git. This ensures that you
can update to the latest version more easily.
[4]: https://www.mkdocs.org/user-guide/styling-your-docs/#using-the-theme-custom_dir [4]: https://www.mkdocs.org/user-guide/styling-your-docs/#using-the-theme-custom_dir
### Setup and theme structure ### Setup and theme structure
Reference the original theme as usual in `mkdocs.yml`, and create a new folder Enable Material for MkDocs as usual in `mkdocs.yml`, and create a new folder
for `overrides` which you reference using `custom_dir`: for `overrides` which you then reference using the `custom_dir` key:
``` yaml ``` yaml
theme: theme:
@ -130,17 +137,37 @@ The directory layout of the theme is as follows:
### Overriding partials ### Overriding partials
In order to override the footer, we can replace the `footer.html` partial with In order to override a partial, we can replace it with a file of the same name
our own partial. To do this, create the file `partials/footer.html` in the and location in the `overrides` directory. For example. to replace the original
`overrides` directory. MkDocs will now use the new partial when rendering the `footer.html`, create a `footer.html` file in the `overrides/partials`
theme. This can be done with any file. directory:
``` sh
.
├─ overrides/
│ └─ partials/
│ └─ footer.html
└─ mkdocs.yml
```
MkDocs will now use the new partial when rendering the theme. This can be done
with any file.
### Overriding blocks ### Overriding blocks
Besides overriding partials, it's also possible to override (and extend) so Besides overriding partials, it's also possible to override (and extend)
called _blocks_, which are defined inside the templates and wrap specific _template blocks_, which are defined inside the templates and wrap specific
features. To override a block, create a `main.html` inside the `overrides` features. To override a block, create a `main.html` file inside the `overrides`
directory and define the block, e.g.: directory:
``` sh
.
├─ overrides/
│ └─ main.html
└─ mkdocs.yml
```
Then, e.g. to override the site title, add the following line to `main.html`:
``` html ``` html
{% extends "base.html" %} {% extends "base.html" %}

View File

@ -164,7 +164,6 @@ nav:
- Adding social links: setup/adding-social-links.md - Adding social links: setup/adding-social-links.md
- Adding a git repository: setup/adding-a-git-repository.md - Adding a git repository: setup/adding-a-git-repository.md
- Adding a comment system: setup/adding-a-comment-system.md - Adding a comment system: setup/adding-a-comment-system.md
#- Adding an announcement bar: setup/adding-an-announcement-bar.md
#- Adding a landing page: setup/adding-a-landing-page.md #- Adding a landing page: setup/adding-a-landing-page.md
- Reference: - Reference:
- Admonitions: reference/admonitions.md - Admonitions: reference/admonitions.md