How to include section names, inside of page titles on the tag index page?

[jbelik]

I ran into a pretty specific issue with the tag index page. My documentation consists of many sections and most of the sections have an "Introduction" page. Some of the Introduction pages can be tagged with the same tag and the issue is that on the tag index page I cannot tell to which section does a page belong to. See image below.

Is there any way to include the section names with the page titles? So I can get for example "Writing Alt Text for Images - Introduction"?

I can only think of an ugly hack using CSS where I could force in the section name through pseudo :before tied to the links href value.
Like this:

Which does solve it, but it's not very maintainable. In case I rename the section or change the folder name, I will need to update the selector as well.
Update 5 minutes after posting: The issue with this hack is that I now get the prefix in all places where the links are, including the side navigation and main content column of pages that have these links. This would have to be further improved by adding the CSS through cusotm JS which would only add it when on the tag index page...
Update 15 minutes after posting: With the custom JS this can be made quite smart actually and remove the problem of having to maintain the correct naming manually. The JS could be written so that it finds the corresponding section name within the side navigation and adds it automatically as a prefix to each page link on the tag index page. Still a big hack, but actually pretty efficient now.

How would you solve for this problem?

@squidfunk sorry to bother, but I was hoping you could share your view on this. Maybe you have thought about this in the past?

[squidfunk]

This sounds like a good addition to the tags plugin. Should section names be added to each entry, or only if they need clarification? How should it work? Note that solving this with JS is not optimal – on slow connections it might not work at all or induce content shifts.

[jbelik]

Thank you for the quick reply!

It would definitly be the best solution if the plugin can solve for this itself. It should definitely be a mkdocs option as it might not be desired by all.

As for when to add the names ,I would always want them to be added to all links, not just those that need clarification. Simply for consistency. Like so:

This is what I did with custom JS, but I completely understand the possible issues when it comes to slow networks and also maintenance. I just got kinda carried away trying to see if I can hack something in that would add the functionallity right away :'D

[jbelik]

Just realized, this same naming convention issue also occurs in the <title> tag of each page.

Maybe this could be a feature as well? To include the section name inside the page title?
@squidfunk

[squidfunk]

Including the section name in general might be too opinionated, i.e. not a good on/off option. I think this greatly depends on specific cases. However, you can set an explicit title for a page with front matter, and this title should be picked up by the title tag, as well as the tags (and social) plugin:
https://squidfunk.github.io/mkdocs-material/reference/#setting-the-page-title

[jbelik]

Understood, but I still think that if it was made into a on/off option then it should be safe as long as its disabled by default. The alternative for me is setting the # Document Title for every single one of my child page which there will be plenty off...

[squidfunk]

Jup, maybe something to consider in the future 😊 For the time being setting discernable names via the title front-matter key is the way to go, as it allows for maximum flexibility. I understand that this may be extra work, but it's the most flexible approach. One of the major goals of Material for MkDocs is to keep things as flexible as possible and try to minimize the opinion that is forced upon users.

[squidfunk]

You can change the name of a page as rendered by the tags and social plugin via the title front matter property:

---
title: Lorem ipsum dolor sit amet 
---

# Document title
...