How to Customize the Archive Page for a Blog Plugin

[shenweiyan]

Hi mkdocs-material,
I want to customize the archive page of the mkdocs-material blog plugin, as shown in the screenshot below. Could anyone please advise on the steps to achieve this? Thank you.

[alexvoss]

It should be possible to achieve this with just CSS by changing display to inline or none for a bunch of things. Try this out using the web developed tools in your browser.

I managed to change the appearance on one of my pages. See the two different stylings for the two posts visible in the screenshot below. Changing the format of the date is a different question. You could need to tell the blog plugin to produce different text, which, I guess, can be done using the post_url_date_format setting?

[squidfunk]

This, or you can even set another template for archive pages and provide your own template. The blog plugin uses the same mechanics as the rest of Material for MkDocs: simple Jinja2 templating. I haven't tested it, but you should be able to do something like this using MkDocs' hooks:

from material.plugins.blog.structure import Archive
def on_page_markdown(markdown, *, page, config, files):
    if isinstance(page, Archive):
        page.meta["template"] = "my-custom-template.html"

[shenweiyan]

Thanks, this is a great method, but it seems doesn't work for pages beyond the second page if there is pagination.

[squidfunk]

You're right! If you want this fixed, you can create a bug report with a minimal reproduction – we're happy to look into it. I think we need to change this logic to take the type of the view into account:

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

Lines 622 to 623 in 9ff75d1

	if not isinstance(file.page, View):
	yield View(None, file, config)

[shenweiyan]

Thank you very much for your enthusiastic assistance. This is a minimal reproduction.

Repo: https://github.com/shenweiyan/mkdocs-blog
Link: https://shenweiyan.github.io/mkdocs-blog/blog/archive/2023/

[squidfunk]

Thanks. However, we need you to go through our bug reporting process. Please carefully read the guide and provide all the necessary information. This will enable us to help you as quickly as possible. Thank you!