1

TLDR: What is the standard/best practice to organize the different HTML sites/files, when using a navigation bar, that should be visible on every site?

Background: I'm starting for the first time to create a website. It should run on an ESP and I got some good results with Bootstrap 4. I've defined a Bootstrap navbar, just like in all the examples (for example here on w3schools). Though the examples only use do-nothing links; they don't show how these links are commonly used with the navbar and the different files (this must be a general principle, that I don't know).

The navbar should of course be visible on every site, while the content below it should change according to the clicked link. When I simply use a link in the navbar to a different html file without a navbar included it is of course not visible.

How are the different sites normally organized in relation to the navbar?

I have thought of different possibilities:

  • Having a navbar in every file (obviously a nightmare to maintain)
  • Having the navbar in an extra file, including it somehow in every other file
  • Managing all the content in the main file together with the navbar, including the other content files somehow

At my current knowledge I just don't know enough, so I also don't know what to search for. If there are already good information about this on the web, can you please provide me with search words or links?

chrisl
  • 393
  • 3
  • 16

2 Answers2

1

If you are planning to use HTML then there is no other choice. You need to add a navigation bar to each page which is a nightmare as you have mentioned. But if you are planning to use server-side programming languages like PHP then they provide a keyword called include. Its syntax is include 'filename' now you can add a file like header.php inside include folder and you can use across multiple pages. You can have a look in this documentation .But if you are using NodeJS, ExpressJS then they have their own templating-engines like ejs, handlebars, pug. They consist of partials So, that partials can be use across multiple pages. Here is the link for partials

kedar sedai
  • 1,687
  • 3
  • 16
  • 25
  • 1
    Great, thank you. I will go with PHP here. I found a good example website at github, that I can change for my purpose. I will add an answer with my chosen way. – chrisl Apr 05 '20 at 12:20
  • Ok, command back. Found out, that I cannot run PHP on an ESP (all the results, that I've seen previously only where about doing a web request to a PHP site, that runs elsewhere). That means, that I'm stuck with client site programming, so javascript. I guess I could load other HTML files via javascript into the main site, basically creating the same structure, but managed client site. – chrisl Apr 05 '20 at 19:50
  • I will leave this answer marked as correct. It answered my question. Will add the answer with the further information, when I have confirmed, that I can really do this via javascript – chrisl Apr 05 '20 at 19:53
1

Though the answer of kedar sedai is the correct one, I want to add my chosen way and further information as documentation for future readers.

kedar sedai is right, that I need to use some programming language. One problem is, that I cannot use server side programming languages, because the ESP does not support them. So I needed to move to client site programming, thus javascript.

I used the solution of this SO question to include another HTML file. I now serve only the main HTML file, which contains the navbar and the following part to load the correct HTML file dependent on the page parameter in the URL:

<div class="container-fluid" id="content" style="display:block;overflow:visible"><br>
  <script>
    $(function(){
      var url = new URL(window.location.href);
      var c = url.searchParams.get("page");
      if(c != null){
        $("#content").load(c+".html");
      }
    });
  </script>
</div>

This works like a charm and I now have notion how I can organize my html files to be displayed with the navigation bar.

chrisl
  • 393
  • 3
  • 16