Cabecera y Pie¶

Las páginas generadas por Material for MkDocs muestran una barra superior de cabecera, con el título de la página, la caja de búsqueda e iconos varios, y una barra inferior. Tenemos algunas opciones de personalización de estos elementos.

Ocultar cabecera¶

Podemos hacer que el encabezado se oculta automáticamente cuando el usuario se desplaza más allá de un cierto umbral, dejando más espacio para el contenido. Activar añadiendo las siguientes líneas a mkdocs.yml:

theme:
  features:
    - header.autohide

Barra de anuncios¶

Material for MkDocs incluye una barra de anuncios sobre la de cabecera, donde podemos poner información sobre novedades o información importante para el usuario. Al desplegar la página, desaparecerá.

Para añadir una barra de anuncios, tenemos que extender el tema, y en el archivo main.html incluir un bloque announce:

{% extends "base.html" %}

{% block announce %}

    ... incluir aquí lo que deseamos mostrar ...

{% endblock %}

Podemos incluir en la barra un botón de cierre para hacer que los anuncios se identifiquen como "leidos". Añadir a mkdocs.yml:

theme:
  features:
    - announce.dismiss

Al pulsar sobre el botón, los anuncios no se vuelven a mostrar a menos que sean modificados.

Botones de navegación¶

El pie de página puede incluir dos enlaces a la página siguiente o anterior. Tenemos que activarlo con:

theme:
  features:
    - navigation.footer

Ocultar barra de botones¶

Podemos ocultar la barra de botones siguiente/anterior en determinadas páginas. En el front matter poner lo siguiente:

---
hide:
  - footer
---

Enlaces a redes sociales¶

Junto al copyright que aparece en el pie de página, podemos poner enlaces a redes sociales. Añadir una lista a mkdocs.yml:

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/squidfunk
    - icon: fontawesome/brands/docker
      link: https://hub.docker.com/r/squidfunk/mkdocs-material/
    - icon: fontawesome/brands/python
      link: https://pypi.org/project/mkdocs-material/
    - icon: fontawesome/brands/bluesky
      link: https://bsky.app/profile/squidfunk.bsky.social
    - icon: fontawesome/brands/mastodon
      link: https://fosstodon.org/@squidfunk
    - icon: fontawesome/brands/x-twitter
      link: https://x.com/squidfunk

La propiedad icon debe ser uno de los iconos suministrados con el tema. Algunos ejemplos:

fontawesome/brands/github
fontawesome/brands/gitlab
fontawesome/brands/x-twitter
fontawesome/brands/docker
fontawesome/brands/facebook
fontawesome/brands/instagram
fontawesome/brands/linkedin
fontawesome/brands/slack
fontawesome/brands/discord

La propiedad link es el enlace al que se acude tras pulsar en el icono. Puede ser una dirección de correo:

extra:
  social:
    - icon: fontawesome/solid/paper-plane
      link: mailto:<email-address>

Podemos añadir un nombre a mostrar:

extra:
  social:
    - icon: fontawesome/brands/mastodon
      link: https://fosstodon.org/@squidfunk
      name: squidfunk on Fosstodon

Copyright¶

Podemos incluir un texto de copyright como parte del pie de página. Incluir en mkdocs.yml

copyright: Copyright &copy; 2016 - 2020 Nombre del autor

Por defecto, el pie de página muestra un texto "Made with Material for MkDocs" que podemos ocultar con:

extra:
  generator: false

Considerando que Made with Material for MkDocs es un software Open Source que se distribuye para ser utilizado de forma gratuita, parece lógico pensar que la eliminación de este pequeño texto no ayuda mucho a la continuidad del proyecto...