|
1 | 1 | # Customize a theme
|
2 | 2 |
|
3 |
| -You can [customize an existing theme](https://www.mkdocs.org/user-guide/styling-your-docs/#customizing-a-theme) by overriding blocks or partials. You might want to do this because your theme is not natively supported, or you would like more control on the formatting. Below are two examples to help get you started. |
| 3 | +You can [customize an existing theme](https://www.mkdocs.org/user-guide/styling-your-docs/#customizing-a-theme) by overriding blocks or partials. You might want to do this because your theme is not natively supported, or you would like more control on the formatting. Below are some examples to help get you started. |
4 | 4 |
|
5 | 5 | ## Example: default `mkdocs` theme
|
6 | 6 |
|
@@ -86,3 +86,61 @@ If you want, you can customize further by [extending the mkdocs-material theme](
|
86 | 86 | ```
|
87 | 87 |
|
88 | 88 | [mkdocs-material](https://squidfunk.github.io/mkdocs-material/) also supports [custom translations](https://squidfunk.github.io/mkdocs-material/setup/changing-the-language/#custom-translations) that you can use to specify alternative translations for `source.file.date.updated` ("Last updated") and `source.file.date.created` ("Created").
|
| 89 | + |
| 90 | +## Example: List last updated pages |
| 91 | + |
| 92 | +Let's say we want to insert a list of the last 10 updated pages into our home page. |
| 93 | + |
| 94 | +We can use the [mkdocs template variables](https://www.mkdocs.org/dev-guide/themes/#template-variables) together with [jinja2 filters](https://jinja.palletsprojects.com/en/latest/templates/#filters) to |
| 95 | +[extend the mkdocs-material theme](https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme). [@simbo](https://github.com/simbo) provided this example that overrides `main.html`: |
| 96 | + |
| 97 | +=== ":octicons-file-code-16: mkdocs.yml" |
| 98 | + |
| 99 | + ```yaml |
| 100 | + theme: |
| 101 | + name: 'material' |
| 102 | + custom_dir: docs/overrides |
| 103 | + ``` |
| 104 | + |
| 105 | +=== ":octicons-file-code-16: docs/overrides/main.html" |
| 106 | + |
| 107 | + ```jinja2 |
| 108 | + {% extends "base.html" %} |
| 109 | + {% block site_nav %} |
| 110 | + {{ super() }} |
| 111 | + {% if page and page.file and page.file.src_path == "index.md" %} |
| 112 | + <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="navigation"> |
| 113 | + <div class="md-sidebar__scrollwrap"> |
| 114 | + <div class="md-sidebar__inner"> |
| 115 | + <nav class="md-nav md-nav--secondary md-nav--integrated" aria-label="Recently updated" data-md-level="0"> |
| 116 | + <div class="md-nav__title">Recently updated</div> |
| 117 | + <ul class="md-nav__list" data-md-scrollfix> |
| 118 | + {% for file in ( |
| 119 | + pages |
| 120 | + | selectattr("page.meta.git_revision_date_localized_raw_iso_datetime") |
| 121 | + | selectattr("page.meta.git_creation_date_localized_raw_iso_datetime") |
| 122 | + | sort(attribute="page.title") |
| 123 | + | sort(attribute="page.meta.git_creation_date_localized_raw_iso_datetime", reverse=true) |
| 124 | + | sort(attribute="page.meta.git_revision_date_localized_raw_iso_datetime", reverse=true) |
| 125 | + )[:10] |
| 126 | + %} |
| 127 | + <li class="md-nav__item"> |
| 128 | + <a class="md-nav__link" href="{{ file.url }}" style="display:block"> |
| 129 | + {{ file.page.title }} |
| 130 | + <br/> |
| 131 | + <small> |
| 132 | + <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago"> |
| 133 | + <span class="timeago" datetime="{{ file.page.meta.git_revision_date_localized_raw_iso_datetime }}" locale="en"></span> |
| 134 | + </span> |
| 135 | + </small> |
| 136 | + </a> |
| 137 | + </li> |
| 138 | + {% endfor %} |
| 139 | + </ul> |
| 140 | + </nav> |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + </div> |
| 144 | + {% endif %} |
| 145 | + {% endblock %} |
| 146 | + ``` |
0 commit comments