Reversing the order of post title & metadata in blogs

[danielrosehill]

Hi everyone!

Wondering if anyone could help me out with a quick override question as I haven't had success configuring it manually.

I'm using the blogs plugin and so far so good.

The only thing I don't like about the out of the box config is the ordering within the index page.

In the screenshot, I'd like to reverse the order of 1 & 2 (ie, have the title come first, then the post metadata, then my excerpt):

Anyone have success setting this up and, if so, please share a snippet!

TIA!

[squidfunk]

Possible, but not simple. The metadata is structured data derived from front matter, and rendered in partials/post.html. The headline comes from the Markdown of a post and is part of page.content. There is no obligation to use an h1 headline in your blog post, which means that it's effectively user content that we do not control in template space. Thus, we can't be sure in template land that there actually is a headline. Here's the resulting HTML structure showing this split:

The blog plugin could theoretically always strip the title from the excerpt and make it available to the template in a structured way, but that would mandate another run of post processing the rendered HTML, as MkDocs already provides page.title, albeit, in page.title all HTML is stripped, so formatting that your headline contains (code blocks, bold, italic, etc.) is lost.

It would also mean even more hacking than the plugin already absolutely needs to do to add reasonable blogging functionality to a framework that is intended for a 1:1 correspondence of pages (= documentation) and does not provide canonical primitives for working with dynamic, generated content. All of this is not a limitation of Material for MkDocs, but MkDocs, i.e., the way page titles are handled when providing them to the template and plugins.

I've analyzed this in #7310 (comment). How this could be achieved is by writing a hook that removes the h1 from the post excerpt if one is present, and adjust the template to use page.title, which is extracted from various sources as described in .

cc @alexvoss – we should keep this in mind when working on page title deduction.

[kamilkrzyskow]

This was discussed in a previous Issue:

• Blog: Allow use of post.title in templates #6491

I didn't respond previously, because I couldn't find it initially and assumed it's a false memory, that it was in an Issue, and the information is somewhere else, found it in the end. 😅

So to confirm, this functionality requires extending how the blog plugin operates and "hacks" the data provided by Markdown / MkDocs. Currently Material isn't planning on hacking MkDocs any further, but while working on mkdocs-nype I've developed a custom cards view which is visible here on the Fiori Tracker page.

The title extraction uses a filter to process the post.content (where post is the Excerpt), which is later used in a custom template:

• post_card_title function which extracts the title from the anchor link, currently assumes there has to be a title, but this could be replaced with a fallback to post.post.title or fail quietly
• The filter is assigned in the on_env event function
• Then the filter is used in the custom partials/post-card.html template.

mkdocs-nype is currently in Alpha/Beta stage, there could be breaking changes at any moment, and it's unknown if it will be a theme maintained for the community. However, since the license is MIT you can extract the required functionality into a hook, like squidfunk mentioned above.

Additional reference:

• https://www.mkdocs.org/user-guide/configuration/#hooks
• https://squidfunk.github.io/mkdocs-material/customization/#extending-the-theme