What tool to connect the header and footer of the site?

Alexey Nemirov2020-07-22 01:17:56

HTML

Alexey Nemirov, 2020-07-22 01:17:56

I study layout. In this regard, I ask you to suggest / help or share your experience, how and with what tool do you connect the header or footer to the body of the site?
What is my difficulty? When laying out a multi-page site, it becomes problematic to write any link in the footer or footer, and in general, any change becomes a pain, you have to change it everywhere. Surely there is a solution, please share it.
I am currently learning HTML and CSS.

Answer the question

In order to leave comments, you need to log in

6 answer(s)

Adam Jensen, 2020-07-23
@uid2695

gulp-file-include

jooru, 2020-07-23
@jooru

Start with SSI (Server Side Includes) - google it.
An example for you. The files must be in html, but with the .shtml extension:
1. Create the main file, header and footer files. For example, index.shtml, header.shtml, footer.shtml.
2. In the main file, right inside the html layout, we write:

...and the contents of the header file will be inserted there.
3. In the same place below:

...and the contents of the footer file will be inserted there.
At least for training on simple training sites - that's it.
Deadly fast and no programming)
Good luck!

Timur Khudiyev, 2020-07-30
@t_khudiyev

You can use nunjucks. There, in addition to include, there are variables, cycles and various other nice things. And the syntax stays the same

Roman Dvoryanov, 2020-07-22
@Raxen

Just like that, without additional tools, in a natural way, html cannot import other html into itself, But!
You can take some collector of your code, for example gulp , configure it to take your files from one folder and put them in another
. Also add the gulp-rigger package to the assembly , after that you can use the construction inside your html files, like:

<body>
  //= templates/header.html
  <div>
     ...
  </div>
    //= templates/footer.html
</body>

where templates is the folder with your reusable html, relative to the html in which the inset is used.
At run time, you can set Gulp to look for changes in your working html folder with html, such as src, and add inserts to them in real time to a separate folder, for example public
Or simply by running the build command in the gulp console, it will go through your files and make the necessary changes
More about building (with these tools) is available here

Alexey, 2020-07-22
@AleksRap

Just use the pug template engine and configure gulp to work with it

Yuri, 2020-07-30
@Vnevremen

I don't bother with faucets and use this method on js. It has its drawbacks, but in general it solves the problem.

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}
includeHTML();
</script>

<div w3-include-html="header.html"></div>