Question 135564 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – How do you make a single header and footer on separate HTML pages that then are displayed on each subsequent page?

At a beginner level I am trying to make a frontend page that has a header and a footer on all pages. Each page can have an identical header and footer. In the header, I’d like to add a Bootstrap navbar (or similar) and in the footer, something similar. But rather than just copying that header and footer to each page I’d like to just make that a separate thing and insert it into each page when it loads. This way if I update the header or footer it updates on all pages.

In the past, I have done this with Python, but I am only using frontend for this project and I am only going to publish on GitHub (it’s mostly for my own purposes).

I am using Visual Studio Code as my editor if this makes it any easier.

I will have CSS and JS folders too (if this makes any difference).

**Update Edit:

I have tried to do this, but I am missing something here.

This is what I attempted (after a quick Google search now I know what I am after):

<!--JQuery CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--Include Content-->
    <script>
        $(function () {
        var includes = $('[data-include]')
        $.each(includes, function () {
        var file = 'views/' + $(this).data('include') + '.html'
        $(this).load(file)
        })
        })
    </script>
</head>

<body>
    <header>
        <div data-include="header"></div>
    </header>

It has been a while since I have done this, so I am rusty, but this doesn’t seem to be working for some strange reason.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I used the W3 method: https://www.w3schools.com/HOWTO/howto_html_include.asp

    So far it is not working with both header and footer, only header is working. I am unsure why. Will be the next problem solve.


  2. 0

    There are several ways to follow it, at a beginner level you can have a scheme where the content is dynamic, that is, the Header and Footer sections are filled with a variable or code insertion, at an advanced level there are template engines, if you want to start, with php is configured very easily

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search