New Installation - Navigation Menu and Table Styling

Support Content & Markdown
1

Greetings! I just installed Grav on my web server yesterday in an attempt to make a quick personal web site. I took the advice on the download page and installed v1.8.0-beta.3 - Admin v1.10.48. I tried another theme which looked promising, but decided to stick with Quark. Overall, this has been a great experience; however, I have encountered a couple of quirks. After searching for solutions, I decided to ask a question in the forum.

The first thing I encountered was unexpected behavior with the navigation menu. I created two folders: a primary navigation folder and then subfolders for content links.
However, when I click on the folder entries, the browser goes to a blank page.
I attempted to disable routing for the “pages” related to the folder entries; however, doing that just causes the browser to go to the first page contained within the folder instead of doing nothing. So, as an example, I have the following menu structure: Primary Folder → Secondary Folder → 01 - First Page | 02 - Second Page | 03 - Third Page. Clicking on Secondary Folder goes to 01 - First Page. Clicking on Primary Folder goes to the Secondary Folder page.

When I searched this problem, I found a few related forum posts which at first seemed promising. This is one: Menu item is clickable for folders with subpages leading to 404 · Issue #103 · getgrav/grav-theme-antimatter · GitHub.
However, when I opened the file user/themes/quark/templates/partials/navigation.html.twig, its contents were completely different from what was described:

{% import 'macros/macros.html.twig' as macros %}

<ul {{ tree ? 'class="tree"' : '' }}>
    {{ macros.nav_loop(pages) }}
</ul>

There is no

 <a href="{{ p.url }}">

to modify. I considered just adding it in there, but I wasn’t sure that would have the desired effect.

Additionally, I added a markdown table on one page. Within the admin portal editor’s preview, the table appeared to be formatted adequately. However, when I visited the page in another browser, the table had no formatting at all. I also searched for some solutions to this problem, but I wasn’t able to find anything that worked. This post, in particular, looked promising: Add striped, hover tables without wrapping tables in DIV tags (Quark Theme).

Unfortunately, wrapping the table in the same, or similar,

tag didn’t do anything but cause the
tag text to appear on the page.

Are there some relatively simple solutions to these problems, or should I just use a different theme other than Quark?

I apologize if this has already been addressed elsewhere. It seemed like most of the discussions related to these problems were at least four years old.
Thanks for indulging the questions of a Grav newbie!

2

I also attempted to make the modification described in Menu item is clickable for folders with subpages leading to 404 · Issue #103 · getgrav/grav-theme-antimatter · GitHub to the /user/themes/quark/templates/macros/macros.html.twig file.

Original:

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
    <li>
      <a href="{{ p.url }}" class="{{ active_page }}">
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

Modified:

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
    <li>
      <a href="{% if p.routable %}{{ p.url }}{% else %}#{% endif %}" class="{{ active_page }}">
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

Unfortunately, the menu behavior persisted.

3

I seem to have resolved the problem regarding table formatting.
On another page I had used the following tags to put some text in a code block:

<pre><code>
     ...
</code></pre>

I looked at the page a few minutes ago and noticed that the tags were visible on the live page. Since editing that page last, I changed some configuration settings while attempting to get the table formatting to work. Specifically, I enabled all of the options in the Markdown settings.

One of these was “Escape markup,” which I figured caused all HTML markup on pages to be escaped and appear as text. I disabled that, but left Markdown extras enabled, and the table now has the correct formatting.

Markdown configuration options:

image
image489×263 3.76 KB

The table formatting problem has been resolved with one of the previously mentioned work-arounds (linked above).

Now, if only I could resolve the navigation menu problem regarding linkable menu objects, I’d be all set.

4

Alright, I think I’ve resolved the navigation menu behavior problem.
I found some information about creating an inherited theme for the site, and modifying the macros.html.twig file. The post is located here: Quark: Dropdown menu, make top-level 'non-clickable' - #2 by anon76427325

I followed the steps on the theme tutorial page to create a new inherited theme:

bin/gpm install devtools
bin/plugin devtools new-theme

I then created a macros directory in the new theme directory, then copied the macros.html.twig file from the Quark theme to the new theme:

mkdir user/themes/quark-inherited/templates/macros
cp user/themes/quark/templates/macros/macros.html.twig user/themes/quark-inherited/templates/macros/macros.html.twig

After creating the directory, I also had to set the correct ownership and permissions:

chown -R root.www-data quark-inherited
chmod -R g+w quark-inherited/

I then ensured that the options in user/themes/quark/quark.yaml and user/themes/quark-inherited/quark-inherited.yaml matched.

Then I copied the form section (lines 20 through EOF) from user/themes/quark/blueprints.yaml to the user/themes/quark-inherited/blueprints.yaml file.

Once those steps were completed, I then made the recommended modification to user/themes/quark-inherited/templates/macros/macros.html.twig by replacing the contents of lines 6 - 13:

<a href="{{ p.url }}" class="{{ active_page }}">
    {{ p.menu }}
</a>
{% if p.children.visible.count > 0 %}
<ul>
    {{ macros.nav_loop(p) }}
</ul>
{% endif %}

With the following:

{% if p.children.visible.count > 0 %}
	<a class="{{ active_page }}"> {# Without 'href' it doesn't do anything #}
		{{ p.menu }}
 	</a>

 	<ul>
		{{ macros.nav_loop(p) }}
	</ul>
{% else %}
	<a href="{{ p.url }}" class="{{ active_page }}">
		{{ p.menu }}
	</a>
{% endif %}

Once that was done, I saved the macros.html.twig file and activated the new theme through the admin panel. Despite being an inherited theme, it did not inherit the logo image files I’d uploaded to the original theme, so I had to upload those again.
Once that was done, everything looked identical to the old theme.

Testing the navigation menu behavior confirmed that menu items were no longer “clickable” and behaved as expected.

5

Despite the information I found through web searches being four years old, or older, I was able to use the information to resolve the problems I originally described. This thread ended up being a few hours of self-rambling while I solved the problem; however, maybe it will be beneficial to other Grav users, at least for the confirmation that the seemingly old information is still applicable. If there’s no value in this, then please feel free to delete this thread.

References: