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?
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?
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:
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ā¦
02.blog/blog.en.md, I commented out visible: false
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?
Hi,
See you this page Iām making at the moment.
https://juanvillen.es/.
The Portfolio item is a non modular page, like a blog (I have the blog unpublished now)
Is this what you want?
Search this code fragment in the navigation.html.twig of your child theme:
<li class=" {{ current_module }} ">
<a href="{{ home_url }}#{{ module.redirect }}" class="menu-hover">{{ module.menu }
</a>
</li>
You need to add {{ home_url }}# before the {{module.redirect}}.
I hope help you
@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.
