How to show updated date in blog post?

[nicfv]

What do I need to do to enable what's at the bottom of this screenshot?

Thanks!

[kamilkrzyskow]

Hello @nicfv,
everything is explained here: https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/#revisioning
You need to install the mkdocs-git-revision-date-localized-plugin Python plugin, and add it mkdocs.yml.
The theme then uses the information provided by the plugin and then renders the info when building the page:
https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/partials/source-file.html

[kamilkrzyskow]

is there not a way to simply display the last updated date from the page's metadata?

An already built-in solution does not exist according to my knowledge. Also I guess you probably want it to be displayed in the format from the screenshot like 1 month ago. So the date_updated would need to be converted into a relative time format.

However, you could override the partials/source-file.html yourself and implement a hook that exposes a date converter to the Jinja2 environment. So in the partial you'd access your custom date_updated value and use that exposed date converter.
https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme
https://www.mkdocs.org/user-guide/configuration/#hooks

🤔💡 Having written that, perhaps there is a time converter already available from the Blog plugin, so there wouldn't be a need for your custom hook. I shall investigate.
Nonetheless, modifying the partial is required, so I wouldn't call it simple and straightforward, as for example installing a plugin and enabling it in mkdocs.yml

[nicfv]

The relative format is nice but not necessary. The metadata shown on the left bar of the page would also be a great place to show the last updated date.

I checked in blog-post.html and it appears that there actually is code to render the updated date.

<!-- Post date updated -->
{% if page.config.date.updated %}
  <li class="md-nav__item">
    <div class="md-nav__link">
      {% include ".icons/material/calendar-clock.svg" %}
      <time
        datetime="{{ page.config.date.updated }}"
        class="md-ellipsis"
      >
        {{- page.config.date.updated | date -}}
      </time>
    </div>
  </li>
{% endif %}

So I did some more digging. From looking up "updated" in the docs website, I found this, which matches the path page.config.date.updated from above:

(Try actually visiting writing your first post. That example actually isn't there, but that's a different issue.)

So I tried changing my page metadata to the following, but I still don't get the updated date. Any ideas?

---
date:
  created: 2021-05-08
  updated: 2022-05-09
...
---

Actually, I just needed to wait a few minutes for it to propagate on my GH pages... That's all I really needed to do, I guess! I just had the wrong metadata format for the date updated.

[kamilkrzyskow]

After some investigation I can say that unfortunately, the blog plugin doesn't expose a date converter that would meet your needs.
It exposes a date filter that converts the date in the format seen in the side panel of a blog post.

mkdocs-material/src/plugins/blog/plugin.py

Lines 300 to 326 in 246266f

	def on_env(self, env, *, config, files):
	if not self.config.enabled:
	return
	# Filter for formatting dates related to posts
	def date_filter(date: datetime):
	return self._format_date_for_post(date, config)
	# Patch URL template filter to add support for paginated views, i.e.,
	# that paginated views never link to themselves but to the main view
	@pass_context
	def url_filter_with_pagination(context: Context, url: str | None):
	page = context["page"]
	# If the current page is a view, check if the URL links to the page
	# itself, and replace it with the URL of the main view
	if isinstance(page, View):
	view = self._resolve_original(page)
	if page.url == url:
	url = view.url
	# Forward to original template filter
	return url_filter(context, url)
	# Register custom template filters
	env.filters["date"] = date_filter
	env.filters["url"] = url_filter_with_pagination

mkdocs-material/src/templates/blog-post.html

Lines 88 to 99 in 246266f

	<!-- Post date -->
	<li class="md-nav__item">
	<div class="md-nav__link">
	{% include ".icons/material/calendar.svg" %}
	<time
	datetime="{{ page.config.date.created }}"
	class="md-ellipsis"
	>
	{{- page.config.date.created | date -}}
	</time>
	</div>
	</li>

So you can mimic this to create your own hook that exposes a custom date filter which converts your date_updated into a format like 1 month ago.

[nicfv]

Thanks for checking this out. My main issue was just that I had date_updated instead of date.updated. It would be interesting to have a builtin relative date converter. For now I'll just try out the plugin you suggested.

[kamilkrzyskow]

Oh, nice find @nicfv. I didn't find the updated since I mostly looked at the code side of things.
So if you found what you wanted then mark your answer as your answer 😉, as I hit a wall with this one.

[jaywhj]

@nicfv

This new plugin solves your problem perfectly mkdocs-document-dates, try it!

[Wcowin]

I think this is a good choice, I've already used it in https://wcowin.work/ thanks.