Home → Velocity Formats →

Formatting hyperlinks for navigation

• Edit

Rob

01 Jul, 2015 05:22 PM

I'm working on a website where I need to have the full path to the page so I can have javascript append a current page class to the anchor. What I'm running into is that when I use .getChild('link').value for the href I'm left with a relative path which for my subpages could be ../index.html etc where as I would prefer either /somefolder/index.html or http://somewebsite.com/somefolder/index.html. Is there any way to format the links within velocity to follow that format?

Some Code:
<li><a href="$page.getChild('link').value">$page.getChild('display-name').value</a></li>
//I have this running within a loop and sorter to organize the list items. This code shows the basic structure of the list item and link.

My javascript code grabs the browser URL parses it and checks all the links in my main navigation to see if there's one that matches the url. For this to work correctly I need it to be able to be able to have the folder names in the link for it to search correctly.

1. 1 Posted by Ryan Griffith on 01 Jul, 2015 05:52 PM

   

   Hi Rob,

   Based on what you are looking for, I believe the only solution to this would be one of the following:

   • Enable the Maintain absolute links option on the page (under the System pane when editing). Note: this will affect all internal links on the page
   • Manually build out your link URLs within your Format

   Please let me know if you have any questions.

   Thanks!

   • Edit

2. 2 Posted by Rob on 01 Jul, 2015 06:01 PM

   

   Hi Ryan,

   I was actually looking around and had an idea get sparked. I found this question: http://help.hannonhill.com/discussions/how-do-i/9738-create-an-active-selected-navigation Which is actually the same thing that I am looking to implement. Pretty much looking at the same problem from different angles. I’m working with an index block that grabs all my pages and puts them into the navigation as needed. I’m struggling to get the right syntax down to do an if else statement that checks to see if the current page is a descendant of the page that is getting linked to in the page array I have.

   I’m running a #foreach function to search each page in an array of sorted pages. Sort of pseudo code below:

   #foreach($page in $sorted)
       #set($sort = $_XPathTool.selectSingleNode($page,"dynamic-metadata[name='sort']/value"))
       
       #if($_XPathTool.descendant::[@current])
        <li class=“active”><a href="$page.getChild('link').value">$page.getChild('display-name').value</a></li>
       #end

   //else do this below
       <li sort="$!sort.value"><a href="$page.getChild('link').value">$page.getChild('display-name').value</a></li>
       
       
       
   #end

   Do you think this is the way to go?

   • Edit

3. 3 Posted by Rob on 01 Jul, 2015 08:33 PM

   

   I think I have found a working solution.

   #set ( $parent = $page.getParent() )
       #if ($parent && $parent.getAttribute("current") )
           <li><a href="$page.getChild('link').value" class="active">$page.getChild('display-name').value</a></li>
       #else
           <li><a href="$page.getChild('link').value">$page.getChild('display-name').value</a></li>
       #end

   You can go ahead and close this thread.

   • Edit

4. 4 Posted by Ryan Griffith on 01 Jul, 2015 08:36 PM

   

   Thank you for following up, Rob. I am glad to hear you were able to come up with a working solution.

   I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

   Have a great day!

   • Edit

5. Ryan Griffith closed this discussion on 01 Jul, 2015 08:36 PM.