Skip to content
Grav 2.0 is officially stable. Read the announcement →
Support

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

Solved by pamtbaau View solution

Started by Nathalie 5 years ago · 10 replies · 583 views
5 years ago

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

5 years ago

@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:
    YAML
    ---
    title: Über
    anchor: ueber
    ---
    
  • Add a macro to top of template /user/themes/quark/templates/modular.html.twig:

    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
5 years ago

@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?

5 years ago

@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
last edited 11/05/21 by pamtbaau
5 years ago

@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!

last edited 11/05/21 by Nathalie
5 years ago

@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.

5 years ago

@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.

last edited 11/05/21 by Nathalie
5 years ago

@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.

5 years ago

@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.

5 years ago Solution

@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:
    TWIG
    <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:
    HTML
    <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.
last edited 11/05/21 by pamtbaau
5 years ago

@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!

Suggested topics

Topic Participants Replies Views Activity
Support · by Duc , 10 hours ago
1 34 10 hours ago
Support · by Thomas, 1 week ago
3 109 19 hours ago
Support · by Anna, 4 days ago
2 101 2 days ago
Support · by Justin Young, 2 days ago
1 68 2 days ago
Support · by Duc , 1 week ago
2 106 6 days ago