[SYNC TEMPLATE v2.1.0]: CSS Class

[Mara-Li]

Hello everyone!

I'm excited to share an idea I had and implemented a way to use cssClass (similar to Obsidian) on the website!

To achieve this, I have created a new template called css_class.html.

{% if page.meta %}
    {% if page.meta["cssClass"] and page.meta["cssClass"]|length > 0 %}
        {% if page.meta["cssClass"] is iterable %}
            {% for cssClass in page.meta["cssClass"] %}
                <script>
                    document.body.classList.add('{{ cssClass }}');
                    console.log('Added class {{ cssClass }} to body on page {{ page.title }}');
                </script>
            {% endfor %}
        {% else %}
            <script>
                document.body.classList.add('{{ page.meta["cssClass"] }}');
                console.log('Added class {{ page.meta["cssClass"] }} to body on page {{ page.title }}');
            </script>
        {% endif %}
    {% endif %}
{% endif %}

I have made an update to the main.html file by adding the following:

{% include "partials/css_class.html" %}

The new template will now check the metadata key cssClass and add the corresponding CSS class to the body of the page.

Note

The cssClass value can be either an array or a simple string.

Please make sure to synchronize your template with the latest release of sync_template (v2.1.0 for this update!).