Umlauts not converted correctly to anchor-slug/custom slug will remove module from page and menu

Hey there,

I build a one pager with modules which include umlauts (“Über”, “Gründe”, …) in the menu-name. The links will then look like: mypage.de/g#r-nde. Don’t like it. It should be: mypage.de/#gruende.
I couldn’t figure out a way to change that behaviour of converting umlauts into “-” .

So I tried changing the slugs in the frontmatter. Which removed the modules completely from my one pager - the link in the menu as well as the content.
Probably just not the right way to go about it.
So can anyone help and tell me, how to have Grav convert “Über” to a #ueber link?

Best,
Nathalie

@NatLikon, By searching this forum on ‘umlaut’, I found the following post: Umlaute Ü ä in frontmatter

I’ve altered the solution a bit for theme Quark. The solution is quite generic, but you might have to make some changes to adapt to your theme.

  • For each page that has an umlaut in its title, add:
    ---
    title: Über
    anchor: ueber
    ---
    
  • Add a macro to top of template /user/themes/quark/templates/modular.html.twig:
    {% extends 'partials/base.html.twig' %}
    
    {% macro anchor(module) %}
      {{ module.header.anchor ?: (module.menu|hyphenize) }}
    {% endmacro %}
    
    This macro returns the value of anchor from the header of a page, or if not available, the original module.menu|hyphenize
  • In same template replace all occurrences of module.menu|hyphenize with _self.anchor(module)

Page with title Über will now have anchor #ueber.

1 Like

@pamtbaau Thank you very much for your answer!
I had found this post previously but unfortunately it couldn’t solve the problem.

Still the link is wrong. Instead of mypage.de/#ueber it’s mypage.de/#ber.
The “ü” from “Über” will just be dropped and I can’t figure out how to have Grav replace it by “ue”.

Any idea how to fix this?

@NatLikon, I have tested it using Quark and it worked fine.

You haven’t given much information:

  • Which theme are you using?
  • How did you implement the steps I’ve shown? Any code you could show?
1 Like

@pamtbaau
I’m sorry, I was being a little ignorant :see_no_evil:

So for anyone who stumbles upon the same problem, I fixed it this way:

No macro. But wherever your modular page navigation is being set, replace:

{{module.menu|hyphenize}}
by
#{{module.header.anchor ?: (module.menu|hyphenize)}}

The # is important because it’s an anchor link.

The theme is a custom theme.

Thanks @pamtbaau for your patience!

@NatLikon, I’m afraid your “solution” will not be of much help to other community members…

  • Please mention the theme you are using.
  • You create a macro, but you’re not using it… Instead, you use the code of the macro. Why?
  • In your replacement, you add an extra # character. Why?

Please provide a solution that is clear, accurate and reproduceable by others.

@pamtbaau thanks for your hints. You were right.

Since all I wanted to get done was finding a solution for my umlauts problem. I do think this is a solution.

@NatLikon, A community is a two-way effort… It is not only about solving ones own problem. It is also about giving back a properly described and reproduceable solution back to the community.

IMHO, your “solution” isn’t helpful to others. See my remarks.

@pamtbaau Yes, I definitly want this to be helpful to others.
I had edited my “solution”-post according to your remarks. At least I tried.
Please let me know what further information is needed to make this helpful to others. I am a little lost here.

@NatLikon, I wasn’t aware you have edited your reply. Thank you for that.

However… I still see two issues that might confuse readers. Yes, you may call me a nitpicker and please correct me if I’m wrong.

Please also know that many forum members are not developers…

Modular pages with on-page menu:
If a theme supports a modular page with an on-page menu, two things are required:

  • A menu with menu-items with an href starting with a #. Quark generates the menu-items as follows:
    <a class="{{ current_module }}" href="#{{ module.menu|hyphenize }}">{{ module.menu }}</a>
    
  • To be able to scroll/jump to a specific module, for each module, an element with a proper id needs to be created. Quark uses:
    <div id="{{ module.menu|hyphenize }}"></div>
    

The issues:

  • In your solution you only talk about the navigation, while also the target elements with the id needs to be updated.
  • In your replacement statement, you add a #. This is not needed. The menu-items already have a # prepended and the id of the target elements doesn’t need one.

@pamtbaau Naaah, I wouldn’t call you a nitpicker. I highly appreciate your efforts to keep quality up in this forum!

I’d mark your last post as solution because I think you summarize it very well.

I am sorry I couldn’t contribute in a better way. The community thing is very new to me and I am still learning/practising how to express myself in a way that’s helpful to others. Thanks again for your patience!