I have used Wordpress a lot to develop websites but wanted to try and make my own website from scratch for fun and learning. I have so many questions because when I google around and look on YouTube there seems to be thousands of ways of doing things. Anyway, I settled for using Vite in Visual Studio Code to create a project which starts of with an index.html, main.js, style.css and some other helper files. I tried to build with NPM and I get a nice localhost which hosts my content to e.g. http://127.0.0.1:5555.
Now I ran into the "issue" of creating a header template file, e.g. header.html, that I want to import on top of all pages (and same with footer on bottom). In Wordpress I would create a header.php and then include it with get_header() which would include my header.php file on that place. When creating my own website it doesn't seem to be a standard though and there are lots of solutions, the most promising I found so far without any real knowledge was:
- https://www.youtube.com/watch?v=j5Sl6vx_l1s, which creates his own html tags and defines them in a JS file. This seems to work fine, however when editing the header I can't use nice helper snippets/auto completes and such since the html code is in a string, which is a big minus for more commplicated headers and footers.
- Use .php files instead of .html files and then use
<?php include('header.php'); ?>where I want the header to be. This looks more like the Wordpress approach to me, but is there any performance issues with using php instead of html files, or any other issues I need to think about? - Someone here suggests putting in the line
<!--#include file="header.html" -->but this (with or without comment signs) doesn't include anything from my header.html.
How can I accomplish the simple task of having some html code that I want to put on top and bottom of each page? :)
