When using 'related' pages (blueprint) - how to extend related page with anchors?

Kirby 3 Solved ✅
1

In my current project i have 3 entrypoints, that can be described as one-pager-like.
When rendering sections - i use subpages as container, to structure my content.

Now when it comes to building the menu I have troubles to jump to the right section. My options are now:

  • Change to type: url and enter the hard links with ‘#anchorid’, but I guess i will forget these when changing sections or content…
  • Go on with type: pages and extend the related page with an anchor option (field?) maybe or routing extension with anchors…

I would prefer the pages solution but I have not really an idea adn I am not really into vue.js to extend the control.

Happy to hear your thought or ideas. Thanks

2

So basically your just looping through all sub-pages of a parent page so it appears as all one page?

You don’t need to hard code the # - use $page->uid() in the ID and then your menu will match up with the sections of the page automatically. That should work for the other way too.

So on the container in your loop do:

<div id="<?= $page->uid()?>">
// sub page stuff here 
</div>

then your menu links are basically the same thing:

<a href="<?= $site->url()?>#<?= $page->uid()?>">

Obviously, change $page to whatever you called it in your for each loop.

The other way is to use a toc javascript that builds itself based on the headings, something like this

1 Like
3

Thanks - I felt to overlook something … and indeed the uid() suits my needs.

–> I can go on with the related type pages. :vulcan_salute: