Does not work with local theme

[ghost]

If I add a local theme or overrides:

https://squidfunk.github.io/mkdocs-material/customization/#setup-and-theme-structure

The headings are not clickable anymore.

[oprypin]

Yeah, then you're discarding the patching that this plugin does.

The patching is needed here because this theme's author refused to include the edits into the theme itself.

You need to name your local theme "material" and/or use the patched content as the base for your edits, rather than the original content.
As of right now, the patched files are as follows:

mkdocs-section-index/tests/rewrites/material-tabs-item-2.yml

Lines 32 to 59 in 145ce69

	{#-
	This file was automatically generated - do not edit
	-#}
	{% if not class %}
	{% set class = "md-tabs__link" %}
	{% if nav_item.active %}
	{% set class = class ~ " md-tabs__link--active" %}
	{% endif %}
	{% endif %}
	{% if nav_item.children and not nav_item.url %}
	{% set title = title | d(nav_item.title) %}
	{% set nav_item = nav_item.children | first %}
	{% if nav_item.children and not nav_item.url %}
	{% include "partials/tabs-item.html" %}
	{% else %}
	<li class="md-tabs__item">
	<a href="{{ nav_item.url | url }}" class="{{ class }}">
	{{ title }}
	</a>
	</li>
	{% endif %}
	{% else %}
	<li class="md-tabs__item">
	<a href="{{ nav_item.url | url }}" class="{{ class }}">
	{{ nav_item.title }}
	</a>
	</li>
	{% endif %}

mkdocs-section-index/tests/rewrites/material-nav-item-3.yml

Lines 71 to 152 in 145ce69

	{#-
	This file was automatically generated - do not edit
	-#}
	{% set features = config.theme.features or [] %}
	{% set class = "md-nav__item" %}
	{% if nav_item.active %}
	{% set class = class ~ " md-nav__item--active" %}
	{% endif %}
	{% if nav_item.children %}
	{% if "navigation.sections" in features and level == 1 + (
	"navigation.tabs" in features
	) %}
	{% set class = class ~ " md-nav__item--section" %}
	{% endif %}
	<li class="{{ class }} md-nav__item--nested">
	{% set checked = "checked" if nav_item.active %}
	{% if "navigation.expand" in features and not checked %}
	<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" data-md-state="indeterminate" type="checkbox" id="{{ path }}" checked>
	{% else %}
	<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
	{% endif %}
	<label class="md-nav__link" for="{{ path }}">
	<span class="md-nav__icon md-icon"></span>
	{% if nav_item.url %}
	<a href="{{ nav_item.url | url }}" class="md-nav__link{% if nav_item == page %} md-nav__link--active{% endif %}"
	style="margin: initial; padding: initial; pointer-events: initial">
	{% endif %}
	{{ nav_item.title }}
	{% if nav_item.url %}</a>{% endif %}
	</label>
	<nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
	<label class="md-nav__title" for="{{ path }}">
	<span class="md-nav__icon md-icon"></span>
	{% if nav_item.url %}
	<a href="{{ nav_item.url | url }}" class="md-nav__link{% if nav_item == page %} md-nav__link--active{% endif %}"
	style="margin: initial; padding: initial; pointer-events: initial">
	{% endif %}
	{{ nav_item.title }}
	{% if nav_item.url %}</a>{% endif %}
	</label>
	<ul class="md-nav__list" data-md-scrollfix>
	{% set base = path %}
	{% for nav_item in nav_item.children %}
	{% set path = base ~ "-" ~ loop.index %}
	{% set level = level + 1 %}
	{% include "partials/nav-item.html" %}
	{% endfor %}
	</ul>
	</nav>
	</li>
	{% elif nav_item == page %}
	<li class="{{ class }}">
	{% set toc = page.toc %}
	<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
	{% if toc | first is defined and "\x3ch1 id=" in page.content %}
	{% set toc = (toc | first).children %}
	{% endif %}
	{% if toc | first is defined %}
	<label class="md-nav__link md-nav__link--active" for="__toc">
	<span class="md-nav__icon md-icon"></span>
	{% if nav_item.url %}
	<a href="{{ nav_item.url | url }}" class="md-nav__link{% if nav_item == page %} md-nav__link--active{% endif %}"
	style="margin: initial; padding: initial; pointer-events: initial">
	{% endif %}
	{{ nav_item.title }}
	{% if nav_item.url %}</a>{% endif %}
	</label>
	{% endif %}
	<a href="{{ nav_item.url | url }}" class="md-nav__link md-nav__link--active">
	{{ nav_item.title }}
	</a>
	{% if toc | first is defined %}
	{% include "partials/toc.html" %}
	{% endif %}
	</li>
	{% else %}
	<li class="{{ class }}">
	<a href="{{ nav_item.url | url }}" class="md-nav__link">
	{{ nav_item.title }}
	</a>
	</li>
	{% endif %}

---

And separately regarding local theme: if you're actually making an entirely new theme, then just implement it with support for this plugin, as per instructions: https://github.com/oprypin/mkdocs-section-index#implementation

[ghost]

Thanks, that explains it.

And I'm sorry, but I know next to nothing abou jinja, just wanted to use material and override some parts of it.

I tried to understand what you meant and assumed you meant I should replace

tabs-item.html
and
nav-item.html
in the partial folders in the custom folder, and it will override?

Or do I need to copy the entire material theme and replace files in that and use it?

[oprypin]

Follow whatever instructions you've been following, and if during that you encounter a part "copy the file from the theme, then edit it", instead copy it from the snippets I pasted here in the issue. (applies only to tab-item and nav-item).

Let me know if this is still unclear

[ghost]

Thanks, I didn't choose my nick by accident you know. I will try harder...

I was asking since when I tried to do it beore I got build error "Failed to adapt the theme file 'theme/material/partials/nav-item.html'. This is likely a bug in mkdocs-section-index, and things won't work as expected."

So was trying to understand where to put things so it would work.

No need to reply, just letting you know.

[oprypin]

Hmm I've never actually tried the overriding workflow, there are probably some rough edges. (and from what you're saying, possibly no way to silence that error message)