Nav items in forLoop with Section Ids in multiple languages

Hi, I’m new to working with one-pagers and multiple languages and have a question that I’m sure is relatively simple. I began with the Kirby boiler plate one-page structure. I need to create section ids corresponding to a navigation that pull from each $pages title, (this way allowing language toggling between Korean and English.

I have a nav anchored to assigned for each $page.

<ul class="nav">
	<li><a href="#about">About</a></li>
	<li><a href="#events">Events</a></li>
	<li><a href="#artists">Artists</a></li>
</ul>

Each section accordingly assigned an id.

<section id="about">
	<h1 class="make-block decompose-lines">
		<?php echo $data->text()->html() ?>
		<?php echo $data->year()->html() ?>
	</h1>
</section><!--END ABOUT-->

If I use the forLoop to call the $pages titles,

<ul class="nav">	
   <?php foreach($pages->visible() as $item): ?>
	<li><a href="<?php echo $item->url() ?>"><?php echo html($item->title()) ?></a></li>
   <?php endforeach ?>
</ul>

I’m not sure how to call the corresponding $pages title for each section id.

Thanks very much.

<ul class="nav">	
   <?php foreach($pages->visible() as $item): ?>
	<li><a href="<?= $site->url() . '/#' . str::slug($item->title()) ; ?>"><?= $item->title()->html() ?></a></li>
   <?php endforeach ?>
</ul>

Note that I use str::slug() here to make the title URL compatible. Please also note that this won’t work if you use hardcoded IDs in your sections, you would have to use the language specific IDs there as well.

Yes, with multiple languages, I’m trying to discern how to call the section IDs from the $page, opposed to hardcoded IDs (since I have both .kr.txt and .en.txt files for all $pages).

Thanks!

In your sections, you would have to define the ID using the item title as well:

<section id="<?= str::slug($data->title()) ?>">

The site is set to default to Korean in the config.php

c::set('languages', array(
  array(
    'code'    => 'en',
    'name'    => 'English',
    'locale'  => 'en_US',
    'url'     => '/en',
  ),
  array(
    'code'    => 'kr',
    'name'    => '한국어',
		'default' => true,
    'locale'  => 'kr_KR',
    'url'     => '/kr',
  ),
));

So, with the addition of the language specific url, would the string read like this?

<ul class="nav">	
   <?php foreach($pages->visible() as $item): ?>
	<li><a href="<?= $site->url() . '/lang' . '#' . str::slug($item->title()) ; ?>"><?= $item->title()->html() ?></a></li>
   <?php endforeach ?>
</ul>

Unfortunately this solution doesn’t seem to work. The nav items appear in the proper language, but the links do not work. The URL returns empty for all the nav items.

Is it something to do with how my languages are configured?

c::set('lang.detect', true);
c::set('lang.support', true);
c::set('lang.default', 'kr');
c::set('lang.available', array('en', 'kr'));

c::set('languages', array(
  array(
    'code'    => 'kr',
    'name'    => '한국어',
	'default' => true,
    'locale'  => 'kr_KR',
    'url'     => '/kr',
  ),
  array(
    'code'    => 'en',
    'name'    => 'English',
    'locale'  => 'en_US',
    'url'     => '/en',
  ),
));

It seems that if the nav is displaying properly for each language as an $item, then its a problem with the way the is linked. But it just seems like the item does not link properly:

<section id="<?= str::slug($data->title()) ?>">

Please remove these options:

c::set('lang.support', true);
c::set('lang.default', 'kr');
c::set('lang.available', array('en', 'kr'));

They don’t exist.

Also, in your link you are using a lang string, that does not make sense.

In your navigation, do this instead:

<ul class="nav">	
   <?php foreach($pages->visible() as $item): ?>
	<li><a href="<?= $site->language()->url() . '/#' . str::slug($item->title()) ; ?>"><?= $item->title()->html() ?></a></li>
   <?php endforeach ?>
</ul>

Thank you for your ongoing help with this, and sorry for my confusion.

Would the section IDs then also need the language specific item title as well?
Because this still does not seem to be working.

<section id="<?= str::slug($data->title()) ?>">

In other words, clicking each of the three nav item link only yields this in the url:

localhost:8888/kr#

And when I switch to the /en site, clicking the nav links take me to the default /kr.

That’s a bit weird, apart from the title, there’s also the slash missing. Are you sure you pasted the code exactly as above? (note that there was a > before url(), I have corrected it above)

The English is now working properly, linked to the nav items!

Stranger still, the Korean links are still all yielding an empty url as before.

localhost:8888/kr/#

Every $page has a .en.txt and .kr.txt file, with corresponding titles. Can you think of anything at all I might be overlooking?

I did a quick test with an arbitrary Korean string, and looks like str::slug() does not work with Korean…

Ah, I see. Could I include a Site->Languages folder with a kr.php file and just run some site-wide translations for those three nav items?

<?php

l::set('about', '소개');
l::set('events', '이벤트');
l::set('artists', '아티스트');

?>

And then call them when needed in the snippet?

<?php echo l::get('events') ?>

If you are just using one word titles, you might as well remove the str::slug() part.

I could remove the str::slug() from both the nav ul and the corresponding sectiond ids?

<ul class="nav">	
			   <?php foreach($pages->visible() as $item): ?>
				<li><a href="<?= $site->language()->url() . '/#' . $item->title() ; ?>"><?= $item->title()->html() ?></a></li>
			   <?php endforeach ?>
</ul>

And the section ids would just read:
<section id="<?php echo $data->title() ?>"> ?

Yes, but as I said, only if you use one-word titles and only if your titles only contain characters that are allowed in IDs (HTML5’s only restriction is spaces, though), otherwise you could end up with IDs like about us, and that’s not possible.

Yes of course, I understand. Everything is populating correctly and linked up, both for Korean and English.
Thanks so much for your patience and help with this.

You are welcome :slightly_smiling_face: