List of available template properties?

Support Themes & Styling
1

I can’t seem to find a link in the documentation that provides a full list of available properties when creating twig template files. When reviewing antimatter’s template files I can see they are using lots of different variables but I don’t know which are specific to their theme or what is part of the base cms.

2

Some docs useful :

TWIG FILTERS & FUNCTIONS

THEME VARIABLES

Twig Official

1 Like
3

Thank you, I found what I was looking for in the theme variables.

One more quick question if you have a moment. In the modular.html.twig there is a variable that is set using twig called show_onpage_menu, and it is set to true or false based on the modular.md file I believe, and if it does not exist then set to null. It does not exist in my modular.md file but the conditional twig blocks which check this variable are still executing for some reason. Any idea?

modular.html.twig
{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}

{% if show_onpage_menu %}
    <div class="onpage-working"></div>
    <ul class="navigation">
    {% for module in page.collection() %}
        {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
        <li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
    {% endfor %}
    {% for mitem in site.menu %}
        <li>
            <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}">
                {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                {{ mitem.text }}
            </a>
        </li>
    {% endfor %}
    </ul>
{% else %}
    {{  parent() }}
{% endif %}

modular.md

title: Home
content:
    items: '@self.modular'
    order:
        by: date
        dir: desc
body_classes: modular
4

Also I don’t get where this site.menu exists.

As per the documentation…

site object

An alias to the config.site object. This represents the configuration as set in the site.yaml file.

site.yaml

title: Site Title
author:
  name: Mystery Man
  email: 'someone@somewhere .com'
metadata:
    description: 'example'

modular.html.twig

{% for mitem in site.menu %}
            <li>
                <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}">
                    {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                    {{ mitem.text }}
                </a>
            </li>
        {% endfor %}

I check my site site.yaml file and it has no menu property, so where is this template file accessing site.menu from?

5

i’m not familiar with antimatter, but just test menu it works fine

see doc in Repo

menu:
    - text: Source
      url: https://github.com/getgrav/grav
    - icon: twitter
      url: http://twitter.com/getgrav
6

Thank you for your reply.

Despite jumping in with both feet I am beginning to understand everything quite well, and making good progress on this custom theme. I am onto creating some custom fields for different module page templates.

Which… brings me to another question :slight_smile:.

Question: What is a good way to render custom css set by a user using the admin gui within the page template?

I have created a custom menu using a blueprint for my page template that lets the user select font sizes, colors, and set a background image. I am not what the most graceful method to include these in the page template is. I know liquid lets you create css files with a liquid extension, and twig syntax feels similar. Can I do something like custom.css.twig?