search

getzola / zola

A fast static site generator in a single binary with everything built-in. https://www.getzola.org
https://www.getzola.org
MIT License
13.45k stars 944 forks source link

How to change html tags based on whether a variable exist in a page or not. #2594

Closed asibahi closed 1 month ago

asibahi commented 1 month ago

Hello.

I am exploring Zola for a personal blog that may include English and Arabic posts. I'd like the page's layout to change to RTL whenever the article itself is in Arabic. I already tested the theme and it flows fine RTL, but I am struggling with the correct incantations of making it work.

The template starts with this 

<html lang="en">

My page/article, in theory, can have this if it is Arabic:

+++
title = "بسم الله الرحمن الرحيم"
date = 2024-02-05
lang = "ar"
+++

And I would either add the "en" tag when it is in English or omit it. I do not really have a preference.

What do I replace the html snippet with?

My attempt was something like this

<html {% if page.lang=="ar" %} dir="rtl" {% else %} lang="en" {% endif %}>

What is the correct incantation to make this work?

(I apologize if an issue isn't the correct place to ask this but you dont seem to have a discord server I can ask in).

Keats commented 1 month ago

There's no lang param in the front-matter. If you name your file with the lang in it, eg mypage.en.html then you should be able to access the correct page.lang

asibahi commented 1 month ago

The files extension thing is for translated articles, apparently. I don't want to do that. I want separate articles to have separate directions based on a variable I set. whether it is lang or dir.

Note : (My previous draft of this comment had some code that turned out didn't work)

Keats commented 1 month ago

It's not only for translated content but that can also work via the front-matter.

+++
title = "بسم الله الرحمن الرحيم"
date = 2024-02-05

[extra]
lang = "ar"
+++

and then

<html {% if page.extra.lang == "ar" %} dir="rtl" {% else %} dir="ltr" {% endif %}>
asibahi commented 1 month ago

Ah perfect thanks.

Edit: it is failing to compile due to some pages not having it 

Error: Failed to build the site
Error: Failed to render page '/Users/abdulrahmansibahi/Documents/site/content/about.md'
Error: Reason: Failed to render 'page.html' (error happened in 'index.html').
Error: Reason: Variable `page.extra.lang` not found in context while rendering 'page.html'

Edit: I uploaded the repo if you'd like to look at it: https://github.com/asibahi/site .

This is the template.

Here are the two pages, where I am trying to make the Arabic page render RTL, but the English one render LTR You can see Github is actually rendering the Arabic correctly.

asibahi commented 1 month ago

Figured it out. 

<html {% if page.extra.arabic %} dir="rtl" {% else %} dir="ltr" {% endif %}>

while setting the appropriate setting in the page itself.