Anchors with special character causes error in singlePageNav.js

Support
1

I’m customizing my first creation with Grav using One Page skeleton (quark theme).

I’m stuck on JS errors thrown when using navigation/topmenu that links anchors on my “one-page” landing page. The error thrown in singlepagenav.min.js is a Error: Syntax error, unrecognized expression: due to the modular page using special characters Å Ä or Ö. The smooth scroll to that anchor is also broken.

What should I do, I’ve tried to change menu name, title of the modular page and so on without success. Is there a possibility to get Grav to output an encoded anchor without spec.characters or do I have to change the JS (I’ve got minimal knowledge about this sort of JS).

js_error

The link is formatted like this: “http://localhost:port/webroot/#våra_tjänster”

2

I found a super simple solution.

Given you are using the Quark theme and “one-page” skeleton you can make these changes:

In modular.html.twig on line 38 i changed the creation of the link:

From
<li><a class="{{ current_module }}" href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>

To
<li><a class="{{ current_module }}" href="#{{ _self.pageLinkName(module.title) }}">{{ module.menu }}</a></li>

Furthermore In modular.html.twig on line 51 and 58 i changed the creation of the anchor in the html:

From
<div id="{{ _self.pageLinkName(module.menu) }}"></div>

To
<div id="{{ _self.pageLinkName(module.title) }}"></div>

This giving me the option to set the title of the modular page without special characters while having a “Menu” override option with my special characters that is presented in the navigation.

1 Like