Blog: Unable to extend with custom HTML

[S-Groening]

Hi all,

I know this is a very specific use case, but my question is that I'm unable to extend the blog with a FAB "scroll to top" button that otherwise works as intended by extending main.html for regular sites.

Whatever I've done, e.g. trying to override partials for the blog, does not seem to work.

Basically, I'm trying to add a structure like this:

<div><button></div>

I include my JavaScript to control the button's action to the scripts block, which gets added across my different sites, but I've been unable to get anything to override the presentation of the blog altogether. How would this be done properly?

Best,

Søren G.

[kamilkrzyskow]

Hi @S-Groening,
have you considered using the built in back to top button?
https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#back-to-top-button

For normal pages, main.html gets loaded, which extends base.html, and you can override snippet blocks in main.html
Blog index and blog posts use 2 different templates, blog.html and blog-post.html, which extend main.html itself.

Both of the blog templates override the container block, so if your plan was to modify the same container block then your changes get overridden instead.

You can override whole template files, replace the files with your own and manage them just like another main.html.
This adds a bit of maintenance in case the template gets updated and you'd need to sync the structure, but this doesn't happen much.

https://github.com/squidfunk/mkdocs-material/tree/master/src/templates

[S-Groening]

Hi @kamilkrzyskow ,

Of course there'd be a feature for this, hahahaha, but unfortunately I just got the idea of adding this button without having looked for a built-in solution to this thought!

I'll try and give it a go to see how it fares!

-But if I'd choose to add my own button, where would I place it to make it show on the blog as well as regular pages? I thought of putting it into the footer, but that didn't work properly...

[S-Groening]

My problem stems from the fact that my CSS didn't make the FAB show above the rest of the footer, instead it would be covered by the footer when used with the blog, whereas the original placement within the content block of regular site pages show up as intended.

I'll go over my CSS and make it work properly. -Thanks for your help @kamilkrzyskow !