Use a content action button to link to the Comments h2

[rachel-rigdon-sp]

I am adding a comments system to our docs and want to use a content action button that will redirect the user to the Comments h2 at the bottom of the page.

This work is similar to #6850 (comment), but I'm not sure how to adapt it since I'm not linking a repository.

[squidfunk]

This can be achieve with some quick customizations ☺️ You could override the actions.html partial, which contains the buttons, and add a link to an h2 that you use in the comments.html partial. Maybe something like:

actions.html

<a href="#__comments">...</a>
<!-- ... rest of actions.html -->

comments.html

<h2 id="__comments">Comments</h2>
<!-- Comment system integration -->

[squidfunk]

Note that the underscores are just there so they don't clash with any slug that is created from the headlines that are used in Markdown files, as the default slug function will never prepend underscores. It's just a safety net.

[rachel-rigdon-sp]

Thank you! that worked!

Is there an if statement I can add to the actions.html that would exclude the actions button if comments: false is in the page meta tag?

I was able to hide the actions button using #6989, but I'd love if there was some logic to simultaneously exclude comments and the actions button.

[squidfunk]

Both can just be encapsulated in page.meta.comments conditions, like in our examples:

actions.html

{% if page.meta.comments %}
  <a href="#__comments">...</a>
{% endif %}
<!-- ... rest of actions.html -->

comments.html

{% if page.meta.comments %}
  <h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
  ...
{% endif %}

[rachel-rigdon-sp]

@squidfunk So I've been able to implement the copy code content.action.edit button, but I'm using instant navigation and I'm having issues making it so that every time you click the .md-typeset .md-content__button element, you're redirected to the meta.comments h2 at the bottom.

I know the solution is to add some javascript to my extra.js, but I'm struggling to figure out how to write it. 😞

I feel like the solution will be similar to #6849 (reply in thread), but less intense. Thank you in advance for your help!!

[kamilkrzyskow]

You're adding both the button with herf="#__comments" and the comments header with id="#__comments" in the overrides.
This means that the information doesn't rely on JavaScript, it should always work. However, from testing your remote website it looks like after selecting the comments button, changing site, and selecting comments button again, nothing happens, but the next click after that does work.

I consider this a bug with instant navigation where it for some reason blocks the default jump to the id 🤔

[rachel-rigdon-sp]

Thank you for looking into it!

Should I file this as a bug report? Or is this something that wouldn't fall under MkDocs-Material?

[kamilkrzyskow]

Yes, please file in a bug report, but don't use your example with the custom button, as that's in the customization realm.
The same issue happens if you select a specific heading in the ToC on the right, then change page, change back (all using the navigation on the left), and press that same heading with the same #id and it will also not work the first time, but will work the second time you click it.

[rachel-rigdon-sp]

#7183

[squidfunk]

Indeed, you stumbled upon a bug, thanks for reporting!