{{root}} not working at all!

jasonlmann commented 7 years ago

I have a weird issue in which {{root}} is being displayed as an empty string. I noticed it because I was trying to use a partial to contain the primary navigation for my site

Example:

I have a partial called "primary-nav.html". It's included in another partial called "nav", which is called by the default template like this:

Default.html

  <body>

    {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
    {{> nav}}

    <div class="off-canvas-wrapper">

nav.html

<div class="title-bar">
  <span class="title-bar-title"><a href="/"><strong><h4>Pull-Start Pictures</h4></strong></a></span>
  <div class="top-bar-right show-for-large">
    <ul class="menu">
      {{>primary-nav }}
      {{>social-links }}
    </ul>
  </div>

  <div class="title-bar-right hide-for-large">
    <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
  </div>
</div>

primary-nav.html

 <li><a href="{{root}}#portfolio">Work</a></li>
 <li><a href="{{root}}#about">About</a></li>
 <li><a href="{{root}}#contact">Contact</a></li>
 <li><span>{{../root}}</span></li>

Result: This is what I get for those links when I run npm start

           <li><a href="#portfolio">Work</a></li>
           <li><a href="#about">About</a></li>
           <li><a href="#contact">Contact</a></li>
           <li><span></span></li>

That last <li> was just a test to see if {{root}} would print.

Any idea what's going on?

gakimball commented 7 years ago

{{ root }} is for creating relative paths to the root of your site. So if you have a link like this:

<link rel="stylesheet" href="{{ root }}style.css">

On a page at the root level of the site, the path will be just style.css. {{ root }} prints an empty string because no change in the path is needed. On a page in a subdirectory one level down, you'd get ../style.css.

In your nav, it looks like you're navigating to anchors within a page, not other pages, so {{ root }} wouldn't be useful there. What are you trying to accomplish?

jasonlmann commented 7 years ago

Thanks. My main navigation links are to sections of the homepage (#about, #contact, etc.)

I have two different partials with navigation, and they're nested. The outer one is "nav", the inner one is "primary-nav". All the links to the sections of the homepage are in "primary nav."

I did it this way so I could make changes to the links in the navigation in one place and have them change in

The off-canvas menu that shows up for small and medium screens
The title-bar that shows up on large screens

Here's my default layout:

  <body>

    {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
    {{> nav}}

    <div class="off-canvas-wrapper">

      <div class="off-canvas-absolute position-top" id="offCanvasLeft" data-off-canvas>
        <nav>
          <ul class="menu vertical" data-close-on-click="true">
            {{>primary-nav }}
            <li>
              <ul class="submenu menu">
                {{>social-links }}
              </ul>
            </li>
          </ul>
        </nav>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>

      {{> body}}

And nav.html:

<div class="title-bar">
  <span class="title-bar-title"><a href="/"><strong><h4>Pull-Start Pictures</h4></strong></a></span>
  <div class="top-bar-right show-for-large">
    <ul class="menu">
      {{>primary-nav }}
      {{>social-links }}
    </ul>
  </div>

  <div class="title-bar-right hide-for-large">
    <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
  </div>
</div>

And primary-nav.html

 <li><a href="{{root}}#portfolio">Work</a></li>
 <li><a href="{{root}}#about">About</a></li>
 <li><a href="{{root}}#contact">Contact</a></li>
 <li><span>{{../root}}</span></li>

Here's what it looks like now

This may be a stupid way to do this, and if so, tell me. But I was trying to apply some D.R.Y. to my self-taught coding.

gakimball commented 7 years ago

Okay, I think I figured out what you're looking for.

You want links like this on the homepage:

<a href="#portfolio">

But you want links like this everywhere else:

<a href="index.html#portfolio">

This will look a little weird, but stick with me.

<a href="{{#unlesspage 'index'}}{{root}}index.html{{/unlesspage}}#portfolio">

Panini has two helpers called ifpage and unlesspage, which allow you to print content only on certain pages. Here, we're using it to add a path to index.html, unless we're already on index.html, in which case we don't need it.

Going to close this as its not a bug, but let me know if this is what you're after.

jasonlmann commented 7 years ago

Yes! I don't know why I didn't think of that, but that is exactly what I was trying to do.

Thanks for taking the time to help.

gakimball commented 7 years ago

No worries, friend! 🆒

foundation / panini