mkdocs-material/docs/setup/setting-up-the-footer.md

188 lines
5.9 KiB
Markdown
Raw Normal View History

2020-10-11 13:20:36 +03:00
# Setting up the footer
2020-07-21 17:01:22 +03:00
2020-07-26 15:46:09 +03:00
The footer of your project documentation is a great place to add links to
2023-09-14 20:09:18 +03:00
websites or platforms you or your company are using as additional marketing
2023-02-03 19:43:14 +03:00
channels, e.g. :fontawesome-brands-mastodon:{ style="color: #5A4CE0" } or
2022-07-17 13:10:34 +03:00
:fontawesome-brands-youtube:{ style="color: #EE0F0F" }, which you can easily
configure via `mkdocs.yml`.
2020-07-21 17:01:22 +03:00
## Configuration
### Navigation
2023-09-14 20:09:18 +03:00
<!-- md:version 9.0.0 -->
<!-- md:feature -->
The footer can include links to the previous and next page of the current page.
If you wish to enable this behavior, add the following lines to `mkdocs.yml`:
``` yaml
theme:
features:
- navigation.footer
```
2020-07-22 10:54:17 +03:00
### Social links
2023-09-14 20:09:18 +03:00
<!-- md:version 1.0.0 -->
<!-- md:default none -->
2020-07-21 17:01:22 +03:00
2023-09-14 20:09:18 +03:00
Social links are rendered next to the copyright notice as part of the
footer of your project documentation. Add a list of social links in `mkdocs.yml`
2020-07-21 17:01:22 +03:00
with:
``` yaml
extra:
social:
2023-02-03 19:43:14 +03:00
- icon: fontawesome/brands/mastodon # (1)!
link: https://fosstodon.org/@squidfunk
2020-07-21 17:01:22 +03:00
```
1. Enter a few keywords to find the perfect icon using our [icon search] and
click on the shortcode to copy it to your clipboard:
<div class="mdx-iconsearch" data-mdx-component="iconsearch">
2023-02-03 19:43:14 +03:00
<input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="mastodon" />
<div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result" data-mdx-mode="file">
<div class="mdx-iconsearch-result__meta"></div>
<ol class="mdx-iconsearch-result__list"></ol>
</div>
</div>
2022-06-05 15:43:37 +03:00
The following properties are available for each link:
2020-07-21 17:01:22 +03:00
2023-09-14 20:09:18 +03:00
<!-- md:option social.icon -->
2020-07-21 17:01:22 +03:00
2023-09-14 20:09:18 +03:00
: <!-- md:default none --> <!-- md:flag required -->
2022-09-11 20:25:40 +03:00
This property must contain a valid path to any icon bundled with the theme,
or the build will not succeed. Some popular choices:
2020-10-31 19:15:33 +03:00
2023-11-04 10:37:31 +03:00
* :fontawesome-brands-github: `fontawesome/brands/github`
* :fontawesome-brands-gitlab: `fontawesome/brands/gitlab`
* :fontawesome-brands-x-twitter: `fontawesome/brands/x-twitter`
2023-02-03 19:43:14 +03:00
* :fontawesome-brands-mastodon: `fontawesome/brands/mastodon`
<small>automatically adds [`rel=me`][rel=me]</small>
2020-10-31 19:15:33 +03:00
* :fontawesome-brands-docker: `fontawesome/brands/docker`
2022-07-17 13:10:34 +03:00
* :fontawesome-brands-facebook: `fontawesome/brands/facebook`
2020-10-31 19:15:33 +03:00
* :fontawesome-brands-instagram: `fontawesome/brands/instagram`
* :fontawesome-brands-linkedin: `fontawesome/brands/linkedin`
* :fontawesome-brands-slack: `fontawesome/brands/slack`
* :fontawesome-brands-discord: `fontawesome/brands/discord`
2023-11-04 10:37:31 +03:00
* :fontawesome-brands-pied-piper-alt: `fontawesome/brands/pied-piper-alt`
2020-07-21 17:01:22 +03:00
2023-09-14 20:09:18 +03:00
<!-- md:option social.link -->
2020-07-21 17:01:22 +03:00
2023-09-14 20:09:18 +03:00
: <!-- md:default none --> <!-- md:flag required -->
This property must be set to a relative or absolute URL including the URI
2020-07-21 17:01:22 +03:00
scheme. All URI schemes are supported, including `mailto` and `bitcoin`:
2023-02-03 19:43:14 +03:00
=== ":fontawesome-brands-mastodon: Mastodon"
2020-07-21 17:01:22 +03:00
``` yaml
extra:
social:
2023-02-03 19:43:14 +03:00
- icon: fontawesome/brands/mastodon
link: https://fosstodon.org/@squidfunk
2020-07-21 17:01:22 +03:00
```
2021-10-10 22:04:22 +03:00
=== ":octicons-mail-16: Email"
2020-07-21 17:01:22 +03:00
``` yaml
extra:
social:
- icon: fontawesome/solid/paper-plane
2020-07-21 19:42:19 +03:00
link: mailto:<email-address>
2020-07-21 17:01:22 +03:00
```
2023-09-14 20:09:18 +03:00
<!-- md:option social.name -->
2020-07-21 17:01:22 +03:00
2023-09-14 20:09:18 +03:00
: <!-- md:default _domain name from_ `link`_, if available_ -->
This property is used as the link's `title` attribute and can be set to a
2022-09-11 20:25:40 +03:00
discernable name to improve accessibility:
2020-07-21 17:01:22 +03:00
``` yaml
extra:
social:
2023-02-03 19:43:14 +03:00
- icon: fontawesome/brands/mastodon
link: https://fosstodon.org/@squidfunk
name: squidfunk on Fosstodon
2020-07-21 17:01:22 +03:00
```
2022-07-07 10:05:37 +03:00
[icon search]: ../reference/icons-emojis.md#search
2023-02-03 19:43:14 +03:00
[rel=me]: https://docs.joinmastodon.org/user/profile/#verification
2021-10-11 14:38:03 +03:00
2020-10-31 19:15:33 +03:00
### Copyright notice
2023-09-14 20:09:18 +03:00
<!-- md:version 0.1.0 -->
<!-- md:default none -->
2020-10-31 19:15:33 +03:00
2021-10-03 21:28:52 +03:00
A custom copyright banner can be rendered as part of the footer, which is
2020-10-31 19:15:33 +03:00
displayed next to the social links. It can be defined as part of `mkdocs.yml`:
``` yaml
copyright: Copyright &copy; 2016 - 2020 Martin Donath
```
2021-10-03 21:28:52 +03:00
### Generator notice
2020-10-11 13:20:36 +03:00
2023-09-14 20:09:18 +03:00
<!-- md:version 7.3.0 -->
<!-- md:default `true` -->
2020-10-11 13:20:36 +03:00
2020-10-31 19:15:33 +03:00
The footer displays a _Made with Material for MkDocs_ notice to denote how
the site was generated. The notice can be removed with the following option
2020-10-11 13:20:36 +03:00
via `mkdocs.yml`:
``` yaml
extra:
generator: false
```
2021-09-23 10:23:42 +03:00
!!! info "Please read this before removing the generator notice"
The subtle __Made with Material for MkDocs__ hint in the footer is one of
the reasons why this project is so popular, as it tells the user how the
site is generated, helping new users to discover this project. Before
2021-10-10 22:04:22 +03:00
removing please consider that you're enjoying the benefits of @squidfunk's
work for free, as this project is Open Source and has a permissive license.
Thousands of hours went into this project, most of them
without any financial return.
Thus, if you remove this notice, please consider [sponsoring][Insiders] the
project. __Thank you__ :octicons-heart-fill-24:{ .mdx-heart .mdx-insiders }
2021-09-23 10:23:42 +03:00
2021-10-10 22:04:22 +03:00
[Insiders]: ../insiders/index.md
2020-10-11 13:20:36 +03:00
2022-06-04 14:29:47 +03:00
## Usage
### Hiding prev/next links
The footer navigation showing links to the previous and next page can be hidden
2023-09-14 20:09:18 +03:00
with the front matter `hide` property. Add the following lines at the top of a
Markdown file:
2022-06-04 14:29:47 +03:00
2022-09-11 20:25:40 +03:00
``` yaml
2022-06-04 14:29:47 +03:00
---
hide:
- footer
---
2023-09-14 20:09:18 +03:00
# Page title
2022-06-04 14:29:47 +03:00
...
```
## Customization
2021-11-28 17:59:54 +03:00
### Custom copyright
2023-09-14 20:09:18 +03:00
<!-- md:version 8.0.0 -->
<!-- md:flag customization -->
2021-11-28 17:59:54 +03:00
In order to customize and override the [copyright notice], [extend the theme]
2022-09-11 20:25:40 +03:00
and [override the `copyright.html` partial][overriding partials], which normally
2022-06-12 11:12:50 +03:00
includes the `copyright` property set in `mkdocs.yml`.
2021-11-28 17:59:54 +03:00
[copyright notice]: #copyright-notice
[generator notice]: #generator-notice
[extend the theme]: ../customization.md#extending-the-theme
2022-06-12 11:12:50 +03:00
[overriding partials]: ../customization.md#overriding-partials