Help with improving theme extension

[Andre601]

Want to improve the theme extension I currently have on my blog repository, which also includes improving the comment system integration.

Thing is, that I really don't understand stuff like the template: frontmatter attribute.
I set a giscus.html file in theme/comments/ (theme is defined as a custom_dir for theme extension), but even tho I set template: theme/comments/giscus.html does the build error with (I suppose) the file not being found?

Repo in question: https://github.com/Andre601/blog
Current PR: Andre601/blog#36
Theme extension folder: https://github.com/Andre601/blog/tree/master/theme

Note:
css/, fonts/, img/ and js/ are part of the lightgallery.js stuff I use, blog/ has overrides for the blog plugin and snippets/ contains files for the Snippets extension.
Only main.html, comments/ and partials/ are part of the actual theme extension I use.

As mentioned is my goal to improve extensions as a whole, so if there is anything else I can improve, I would be happy to know.

[squidfunk]

The front matter template attribute must refer to a template, not a partial. If you want to create a new template, mirror the structure from the theme and put it next to where the main.html file lives:

theme/         # Your overrides folder
├─ custom.html # Your custom template with comments, possibly extending main.html
└─ main.html   # Your main template

[Andre601]

So mkdocs doesn't support nested custom files for the theme extension?
Or how exactly should I understand this now?

[squidfunk]

I'm not sure what you mean by "nested custom files". You can override partials, but they will be overridden for all templates. The advice is to just add a new template and override the content block as I laid out in the new comment system documentation.

[Andre601]

Also, not sure if we are on the same page here?
Like I don't quite get what you mean here... I basically copied what you use for your blog pages, which is the stuff on the updated docs, yet mine doesn't work as it should...

[squidfunk]

Might be related to 2231aab. I forgot to add the extension pragma to the code block. Other than that it's probably a good idea if you check out the theme, see how it works and work from there.

[Andre601]

Again, I feel like we both talk about completely different stuff.

This is the entirety of the giscus.html file as of right now:

{% extends "base.html" %}

{% block content %}
  {{ super() }}
  
  <h2 id="__comments">
    <span class="twemoji">
      {% include ".icons/octicons/comment-discussion-24.svg" %}
    </span>
    {{ lang.t("meta.comments") }}
  </h2>
  <div class="giscus"></div>
  
  <script
    src="https://giscus.app/client.js"
    data-repo="Andre601/blog"
    data-repo-id="MDEwOlJlcG9zaXRvcnkzMjMxMjM0MjQ="
    data-category="Comments"
    data-category-id="DIC_kwDOE0J44M4B_2e-"
    data-mapping="title"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-theme="https://www.andre601.ch/blog/assets/css/style/giscus.css"
    data-lang="en"
    crossorigin="anonymous"
    async
  >
  </script>
{% endblock %}

I previously used main.html to extend, since I also edit the main one to alter the meta tags of the pages.
But other than that is this the same I used before now in the linked PR...

[Andre601]

I found the issue, which was a wrong template path...
Now however, am I seeing the chat in every page, even those not using the HTML template itself... Not entirely sure why that is...

It's not a caching issue, as I cleared the cache and re-deployed on netlify, yet all pages (Except for the posts page) have the comment part.

[squidfunk]

From the documentation:

You can either integrate Giscus on every page by overriding the main.html template, or create a new template (e.g. blog.html) to extend from main.html which includes the comment system, so you can decide for each page whether you want to allow comments or not.

[Andre601]

This works. But now I'm confused... Why does extending base.html, which you you use in your documentation btw, cause comments to show on every page, while extending main.html doesn't?
Or was this really some weird browser caching? I honestly doubt it, but can also not proof otherwise...

[squidfunk]

main.html is just a no-op extension of base.html by default:

mkdocs-material/src/main.html

Line 23 in bfba846

{% extends "base.html" %}