Skip to content

Commit b6a27cc

Browse files
committed
Add example with listing last updated pages, closes #97
1 parent 9cfce40 commit b6a27cc

File tree

1 file changed

+59
-1
lines changed

1 file changed

+59
-1
lines changed

docs/howto/override-a-theme.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Customize a theme
22

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.
44

55
## Example: default `mkdocs` theme
66

@@ -86,3 +86,61 @@ If you want, you can customize further by [extending the mkdocs-material theme](
8686
```
8787

8888
[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

Comments
 (0)