Forum

Thread tagged as: Question

Anchor links to Blocks - page Navigation

Hi, Does anyone know a method for generating anchor links to individual blocks on a single page. e.g. example.com

I would like the user to create multiple blocks on a page. Part of the block template would be creating a meaningful anchor link name. Then I would like to take all those names and turn them into individual anchor links for each block. So It would end up something like this:

<nav>
<a href="#Info">Info</a>
<a href="#Details">Details</a>
<a href="#Specifications">Specifications</a>
</nav>

<div name="Info" > lorum ipsum </div>
<div name="Details" > lorum ipsum </div>
<div name="Specifications" > lorum ipsum </div>

In this way the Navigation could be modular along with the content.

Thanks in advance

Dylan
Dylan Rynhart

Dylan Rynhart 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You'd need to create a simplified duplicate of your blocks template for outputting the navigation links. Then just redisplay the region using that template.
Dylan Rynhart

Dylan Rynhart 0 points

6 years ago

Thanks so much Drew, That really helped, though I've found a PHP solution which I have used to take the content array and display the anchor. Here it is in case anyone else needs it:

<div class="nav-affix-right-container"> <ul class="nav nav-pills nav-affix-right" data-spy="affix" data-offset-top="100" data-offset-bottom="200">
    <?PHP
    $blocks_nav = perch_content_custom('Main', array('skip-template'=>true )); 
    foreach($blocks_nav[0]['_blocks'] as $block){
        ?><li role="presentation"><a href="#<?=$block['anchor']?>"><?=$block['anchor']?></a></li><?PHP
    }
    ?>
</ul></div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Make sure you HTML-encode the output.
Benjamin Coleman

Benjamin Coleman 0 points

6 years ago

Hi Drew,

Rather than using Dylan's PHP method, how exactly would your's work? I have numerous kinds of block in a blocks template but they each start with a unique section tag:

<section id="article-<perch:content id="perch_item_index" type="hidden" />">...</section>

Would I use a navigation template for this and what would the code look like for creating a set of buttons that will go to each section ID within the page?

Also what from-path would I use in the perch_pages_navigation array so it only related to that page?

Or are you suggesting that it's not done using perch_pages_navigation?

Drew McLellan said:

You'd need to create a simplified duplicate of your blocks template for outputting the navigation links. Then just redisplay the region using that template.

Many thanks Ben