Themes & Styling

Multilanguage in the Ceevee template?

Started by Brad Richards 8 years ago · 2 replies · 661 views

8 years ago

As a first attempt at Grav, I am trying to create a single page using the Ceevee template. However, I need this to be a multilingual page, and am having some troubles...

Multilingual support is enabled, and I can create the modular pages (xxx.en.md, etc) and this works fine. However, CeeVee makes use of the onpage_menu, and when I change the title of a page in one of the multilingual modular files, this change not only alters the text visible to the user - it also changes the text used in the link - which then no longer matches the anchor (section id) used by the twig template.

Example: In english, I have a first section called "history". The onpage menu displays "history" and links to the section called "history". When I create a german page "history.de.md" and change the title to "Geschichte", the text displayed changes to "Geschichte", but so does the link, while the anchor is still called "history" - so the link does not work.

Second, related problem: The text displayed in the header seems to be single-language. This is the text in site.yaml, for example, the "title" and the "description" in the header. The Ceevee template displays this at the top of the page. How can I make this text multilingual?

last edited 08/30/18 by Brad Richards

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3129 posts

8 years ago Solution

@brad

Multilingual anchor:
The problem arises because the anchor for each module is hard-coded like '<section id="about">'. However, the link in the navigation bar is based on the title of the page and converted into an id using the macro 'pageLinkName(text)'. So, even without using multilingual pages, you would run into problems when you change the title of the page.

Luckily there is an easy way to fix the issue...

Before you make any changes to a theme, you can do yourself a favour by making your own inherited theme. If not, you will loose all changes when the theme gets updated.

Steps to fix the issue:

Create inherited theme from 'ceevee' if not already.
Use either of the following two options:
- Manually, as explained in the docs on Theme Inheritance.
- Or run command $ bin/plugins devtools newtheme.
  See installation of devtools.
Copy file '/user/themes/ceevee/templates/modular.html.twig' into folder '/user/themes/mytheme/templates/'

In your own copy of 'modular.html.twig' modify the for-loop into:

TWIG

{% for module in page.collection() %}
 <div id="{{ _self.pageLinkName(module.menu) }}"></div>
 {{ module.content }}
{% endfor %}

Before every module an empty div is created with the proper anchor id.

Multilingual title:

Create file '/user/themes/mytheme/languages.yaml'

Add the following to the file:

YAML

en:
SITE:
  HEADER:
    TITLE: I'm Jonathan Doe.
de:
SITE:
  HEADER:
    TITLE: Ich bin der Jonathan Doe.

Change <h1> in file 'templates/partials/header.html.twig' from...

TWIG

<h1 class="responsive-headline">{{ site.header.title }}</h1>

... into:

TWIG

<h1 class="responsive-headline">{{ 'SITE.HEADER.TITLE'|t }}</h1>

last edited 08/31/18 by pamtbaau

8 years ago

Sorry for the delayed response - it's been kinda crazy... Many thanks for the incredibly detailed and helpful reply. Especially the comment about derived themes, and updates overwriting any changes I would otherwise make. Your answer solved all of my immediate problems - here, mainly because I need multilingual, but picked a template that wasn't designed with that in mind.

I still have a lot to figure out, but the documentation and forums are a lot of help. Thanks again for your helpful answer!

Topic	Replies	Views	Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin Themes & Styling · by Pedro M, 2 months ago	4	232	2 months ago
Change page background colour Themes & Styling · by Ian, 2 months ago	3	120	2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator" Themes & Styling · by Norbert, 2 years ago	11	485	3 months ago
Fork of the Knowledge Base theme Themes & Styling · by Lukáš Findeis, 3 months ago	0	74	3 months ago
Oxygen theme not working right Themes & Styling · by Sebadamus, 4 months ago	5	153	3 months ago

Suggested topics