Modular anchors url and page urls in same menu

Hi,

At the moment I have modular anchor links in my menu to each modular page. I would also like blog to be included. When I click on blog I can no longer access the modular pages.

I would get
https://www.botanicalhealing.co.za/blog#about

instead of
https://www.botanicalhealing.co.za/#about

Is there a simple solution for this to click back to the modular pages from the blog pages. I am using the hola theme skeleton.

Many thanks

@daniel, The wish to mix modular urls and page urls in a single menu is a recurring topic. Did you search the forum on this topic?

@pamtbaau:
Did you search the forum on this topic?

Hi @pamtbaau. Thanks for replying. Yes, I did search the forums and I found answers from a couple of years or more. The most relevant was on the quark theme and one where you gave the solution of editing the twig files. I was a little out of my depth here to be honest. Would this also apply to hola theme? No easy workaround?

@daniel, As far as I know, there is no easy fix to combine a modular menu with page menu items.

I haven't looked at it for quite some time, so if things have changed, maybe someone else can shed some fresh light on it.

Apart from the technical issues, IMHO I think it is not the best user-experience to combine the two because they behave differently.

Why use a modular page anyway?

• First of all, I'm not a fan of pages with needless/unexpected animations (eg. scrolling).
• Single page layouts often suffer in performance because all html/js/css/images are loaded in one go.
• When using multiple pages, scripts/css can be cached/reused for subsequent pages and extra scripts/css can be loaded when needed.
• When showing menu items for a modular page, the designer probably suspects the user is not interested in the entire page, but parts of it. So why loading the entire page instead of loading smaller/lighter/faster separate pages?
• ...

So my question is: What is the gain of a modular page? Except for the fancy scrolling it comes with and overlaying panels?

@pamtbaau I completely agree with you. Definitely from a technical and development perspective it makes complete sense to separate the pages. Where the conflict comes is from the user perspective. I have asked several people, including the client (who is my partner), what they think and all prefer the modular with its fancy scrolling. It is easier to work through the information without clicking links and makes it a continuous experience. The scrolling on clicking a link is also popular and works well for jumping to a topic. As it is a small amount of information, each section is small and the images are not too demanding I am OK with that and have to bend with the whim of the client (if I want to carry on sharing a bed).

This now leaves me with 3 options:

1. I use another website for a blog
2. I find a way to link back to the home page from the blog switching off the menus when the blog is running (which I understand is possible)
3. Use more links on the home page to each module / anchor

If there are other options I would be happy to hear them.

The first is possible, but inconvenient and time-consuming to run 2 sites.
The second I feel is messy
The third should be possible and the theme already has 2 links for this purpose.

Any thoughts?

@daniel, I have downloaded the Hola skeleton to have a look at it...

• Added user account
• Upgraded Grav + all packages
• In page 02.blog/blog.en.md, I commented out visible: false
  • The 'Blog' menu-item becomes visible on the modular page's menu.
• Click on 'Blog' menu-item
  • Blog page is shown
• Click on 'About' menu-item
  • 'About' sub-module is shown and the url is http://localhost/grav/hola/#about

Isn't that what you're after...

If you click on Blog and then and click on About does it return you to the about page?

@daniel, Yep, that's what I wrote... On the Home page, clicked on the Blog menu-item to open the blog page. On the blog page, clicked the About menu-item to open the home page and showing the About child module...

Switching back to the About child-module isn't that nice and smooth though...

See animation and look at the url in address bar.

@pamtbaau Thank you so much for taking the time to set up hola. I really appreciate it.

Above is exactly the behaviour I want, but when I click back to the about page it links to
https://www.botanicalhealing.co.za/blog#about

You can see this on the website.

Here is my 02.blog/blog.en.md

title: Blog
published: true
menu: blog
visible: true
admin:
    children_display_order: collection
hero_classes: 'page-header page-header--single page-hero'
content:
    items:
        - '@self.children'
    limit: 7
    order:
        by: date
        dir: desc
    pagination: true
    url_taxonomy_filters: true
blog_url: blog
sitemap:
    changefreq: monthly
    priority: 1.03
feed:
    description: 'Blog news'
    limit: 0
pagination: true

@daniel, Copied your frontmatter into the Blog page and behaviour is still as expected.

Can you reproduce your issue using the steps from post#6 on a fresh install of the skeleton?

@pamtbaau I've set this up this evening on
http://grav2.hostchestnut.com
and still getting the same behaviour after following your steps. After accessing the blog page and then trying to access about, the URL below is given:

http://grav2.hostchestnut.com/blog#about

Can I confirm you downloaded the skeleton from https://getgrav.org/download/skeletons/hola-site/1.1.2?

@pmoreno thanks for the tips. Nice site and cool pics. I'll follow this up if I can't get it as default behaviour.

@daniel, Suddenly it dawned on me... You installed in the root of the domain, while I installed in a subdirectory.

Did a reinstall as before, did the test and all worked fine. Moved the installation into the root, and it failed...

I tried the solution offered by @pmoreno and it seems to be working fine.

Hi
@daniel, I have the skeleton from official grav skeletons (Hola-Site). Did you do the changes I said?

Look at this screenshot of your page (usin Chrome Inspector):

And look at this screenshot of my page:

If you look at it well, in your page the link points to #contact, meanwhile in my site the link points to /#contacto.

The "/" is the difference. The "#" character points to some section in the same page (identified by "id"), meanwhile the "/#" characters points to some section in the root page.

I'm going to leave all the code of navigation.html.twig, to help you:

{% macro loop(page) %}
    {% for p in page.children.visible %}
        {% set current_page = (p.active or p.activeChild) ? 'current' : '' %}
        {% if p.children.visible.count > 0 %}
            <li class="has-children {{ current_page }}">
                <a href="{{ p.url }}">
                    {% if p.header.icon %}
                        <i class="fa fa-{{ p.header.icon }}"></i>
                    {% endif %}
                    {{ p.menu }}
                    <span></span>
                </a>
                <ul>
                    {{ _self.loop(p) }}
                </ul>
            </li>
        {% else %}
            <li class="{{ current_page }}">
                <a href="{{ p.url }}">
                    {% if p.header.icon %}
                        <i class="fa fa-{{ p.header.icon }}"></i>
                    {% endif %}
                    {{ p.menu }}
                </a>
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}
<ul class="header-nav">
    {% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}
    {% endmacro %}
    {% set home = page.find('/') %}
    {% for module in home.collection %}
        {% set current_module = (module.active or module.activeChild) ? 'current' : '' %}

        {{ dump(module.redirect) }}

        {% if module.header.visible %}
            {% if page.slug == 'inicio' and module.modular_link %}
                <li class=" {{ current_module }} ">
                    <a class="smoothscroll menu-hover"  
                       href="#{% if module.redirect %}{{ module.redirect }}{% else %}{{ module.modular_link }}{% endif %}">{{ module.item_name }}</a>
                </li>
            {% elseif page.slug == 'inicio' and not module.modular_link %}
                <li class=" {{ current_module }} ">
                    <a class="smoothscroll menu-hover"
                       href="#{% if module.redirect %}{{ module.redirect }}{% else %}{{ (module.menu) }}{% endif %}">{{ module.menu }}</a>
                </li>
            {% else %}
                <li class=" {{ current_module }} ">
                    <a href="{{ home_url }}#{{ module.redirect }}" class="menu-hover">
                        {{ module.menu }}
                    </a>
                </li>
            {% endif %}
        {% endif %}
    {% endfor %}

    {% for page in pages.children.visible %}
        {% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
        <li class="{{ current_page }}">
            <a href="{{ page.url }}" class="menu-hover">
                {% if page.header.icon %}
                    <i class="fa fa-{{ page.header.icon }}"></i>
                {% endif %}
                {{ page.menu }}
            </a>
        </li>
    {% endfor %}
</ul>

Find the line that I said at first of post and change it.

Good luck.

All working fine. Thanks so much for your help @pmoreno @pamtbaau 😀 👍