Navbar on all pages

I want to have a navigation bar on all my pages, and I’m not sure of the best way to do it. Right now, I have javascript on every page that loads in the navbar and inserts it. This obviously has a big downfall because sometimes the page visibly loads before the navbar does, causing the page to jerk down.

I’ve heard that using a simple php script is the best way to do this, and although none of my site uses php, I guess I could use it. But I’d like a little more dynamic control over the nav bar. For example, I have some dynamic image/text viewers, and I want to be able to add certain buttons for them on specific pages.I make these pages on the fly using node and handlebars, so I’m not sure how I would make it play nice with the PHP.

All suggestions are appreciated.

1 Like

For my website (klayz.com) I used this code on everypage:

     <!-- Start kBar Include -->
     <?php require_once('includes/kbar_sitewide.php'); ?>
     <!-- ### -->

In the kbar_sitewide.php I have a Bootstrap navbar code.
Including this on every page that I want it I’m now able to edit it for more pages in one shot.
For displaying some specific codes just for some pages, I think you should be able to use some conditionals… but I’m not sure about it.

Would the conditionals have to be in php? Like I said, I don’t use PHP, so I’d rather avoid that if possible.

Yes, I suppose they should be in PHP, but I’m not an expert here, so it’s really better to wait for a reply from those who knows more than me.

Okay, thanks for your suggestion anyway!

1 Like

Well, if you don’t want to “include” using JavaScript and you don’t want to “include” using PHP,
What sever-side language is the site using?

Ah, well, I kind of dove into this website before I knew what I was doing. I still don’t really know what I’m doing. Here’s how it works:

  1. I upload data from ShareX, like text, to a specific URL
  2. I use Node.js and express to listen for the incoming data, and store it accordingly
  3. I return a URL to the content, but this URL doesn’t actually reference any page. Instead it goes to a URL like nom.codes/t/abc123 where abc123 is the ID of the file I uploaded.
  4. I use Node.js and express to listen for GET requests on any nom.codes/t/* URL. I use nginx to forward to a port so my express instance can snag it.
  5. I create a new page using handlebars, and return that to the requester.

At this point, I could use handlebars to insert the navbar, but not everywhere on my site uses this system. My home page and other pages are just plain HTML… And I’m pretty sure this is a bad way to do things to begin with (taking suggestions for a better system)

ps I recognize you from discourse meta :smile:

That sounds like a messy situation.
Some using {{handlebars}}, some not.

I think what I would do is leave it like it is, but as time allowed convert the plain HTML pages into using handlebars.

As for the “jumping” if you know what the final size will be after the script loads in the menu links, you might be able to use CSS to “reserve” the space and prevent the repaint from being as bad…

I suppose using handlebars on all pages would be my best option. I’ve started doing that, but I can’t figure out how to embed my navigation bar, which is stored in navbar.html. I tried using partials to no avail:

this.navbar = this.fs.readFileSync('/navbar.html', 'utf-8');
this.hb.registerPartial('nav', this.navbar);

Then, on the html (that is compiled with handlebars, obviously):

{{> nav}}

I’ll keep poking at it.


EDIT
Nvm, partials was not the solution. I needed to do {{{nav}}}.So far this looks like it will be the best solution, but I’m not sure how I’ll hook in the other buttons…

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.