Umlaute Ü ä in frontmatter

1

In the navigation i like to use “Über mich” with an umlaut, so in the frontmatter

title: Über mich
menu: Über mich

the problem is, the ID that is generated is of course

..../#über_mich

this is a problem for the JS smoothscroll.js i am using
is there a way to get

..../#ueber_mich

I tried several decoding in the frontmatter like ( “\u00dc”, “%C3%9Cber%20mich”) but this does not help. The hints from the forum like https://discourse.getgrav.org/t/set-encoding-to-utf-8/888 as well. Because i use

<meta charset="utf-8" />

in the header
Thanks in advance :slight_smile:

1 Like
2

U may look how the theme is initializing the smoothscroll.js. Maybe it already supports the slug: variable of the frontmatter which u can serve a different slug. So try to define a slug. If not u can easily add this support and use the title as a fallback.

{% if page.header.slug %} USE SLUG AS ID {% else %} USE TITLE AS ID {% endif %}
or create id from this statement
{{ page.header.slug? page.header.slug : page.header.title }}

Which theme u are using?

3

Hi npetri,
thanks for the hints i gonna try it and leave a comment. The theme im using is bootrap 4. There is no native smoothcroll.js included.
Thanks pgrav

4

hi npetri
when i place a slug: uebermich in the header so whole page is not shown. Strange :frowning:
I had a look in partials/base.html.twig as well in modular.html.twig (because its a onepager) and the navigation.html.twig but can’t find where/how the slug is created.

With your hint i changed in the modular.html.twig

{% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
      <li class="nav-item {{ current_module }}"><a class="nav-link" href="#{{ 
	_self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>

to

{% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
     <li class="nav-item {{ current_module }}"><a class="nav-link" href="#{{ 
	_self.pageLinkName(module.header.anchor)? _self.pageLinkName(module.header.anchor) : _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>

and placed in the header

anchor: uebermich

Now i get what i want! Although i dont now if this is the best solution :face_with_raised_eyebrow:

For anybody who wants to do it like this as well you have to change _self.pageLinkName(module.header.anchor)?.. as well at the end in the

{% block content %}

part. Thats where the “modular-anchor” is generated.

The whole (original) navigation part in the modular.html.twig, where you have to change things is

{% block header_navigation %}
    {% if show_onpage_menu %}
        <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" role="navigation">
            <div class="container">
                <a class="navbar-brand" href="{{ base_url == '' ? '/' : base_url }}">{{ site.title|e('html') }}</a>
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="navbar-collapse collapse justify-content-end">
                    <ul class="navbar-nav">
                        {% for module in page.collection() %}

                            {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
                            <li class="nav-item {{ current_module }}"><a class="nav-link" href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>

                        {% endfor %}
                    </ul>
                </div>
            </div>
        </nav>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block content %}
    {{ page.content }}
    {% for module in page.collection() %}
        <div class="modular-anchor" id="{{ _self.pageLinkName(module.menu) }}"></div>
        {{ module.content }}
    {% endfor %}
{% endblock %}

Thanks for any better recommendations
pgrav

1 Like
5

The description of ur problem was way too short. It lacks the part that u r in a context of a modular. But yea u found a solutiuon. U can create any variable in frontmatter and use it for ur purpose. The slug is a special one and u can refer a page by name and slug and i think a decent theme will take care of that. Thats why i suggest to try slug.

Btw, there was no need to change the twig file if u set the menu variable in the frontmatter like u set the anchor variable.

6

Sorry npetri about the shortness.
And yes your right, but with this change i could use either title or anchor…