How to use a common header (eg a nav bar) or a footer on multiple html pages
Hello guys, can someone explain how I should proceed to use a common nav bar on multiple html pages, like I don't need to define them, like having their individual mark up and style, I only want 1 mark up and 1 style sheet which could be use.
69 Replies
what's your tech stack?
HTML template languages or a UI framework
hmmm I'm lost, I only know about simple HTML/CSS/JS... from what I've seen, people use "jQuerry" to do it
no don't use jQuery
thats cursed af š
Vituum
Small and fast static site generator for Vite
what do you propose please.. I'm a beginner, I'm kinda lost right now how to do it
again look up HTML template languages
a static site generator is also an option
Yea things like Astro/11ty
and then there's the cursed stuff................
but they are also using html template languages or their own
yup, but they function differently
11ty I think lets you bring your own but uses Nunjucks by default
ive never tried it, but i should
I still think this is the best modern way I've found to make static sites with html template/preprocessing
ive never tried it either
Parcel is an option but imo its "ez use" just bites you in the arse
hmm consider this nav bar for example, so what I wanted is when I navigate through another link , say game for eg, this nav bar is also displayed their
I should use vite to do it ?
Its note vite
This is the time you will want to start to learn stuff like it though.
Vite is just the buildtool/dev env
and there is a lot of stuff that just uses vite, because vite is good
Like "back in teh day" you had Gulp and that other one š
Yea Vite is the modern tooling that most everything is using now.
gatsby?
or whatever it is?
na gastby is a SSG (for react)
there is yarn, but thats just npm+
pnpm > yarn š
webpack?
yea Webpack now moving to Turbopack
or something older?
oh Grunt was the other one
how do you guys do to become so good at whatever things you practice š„²
Gulp and Grunt
I'm not good at anyof it just been around awhile LOL
well, im just ok at nodejs stuff
but working with this stuff everyday will get it all engraved in your mind
But back on topic the link I sent is away to use html template languages with Vite for MPA static sites.
https://vituum.dev/guide/template-engines.html i.e.
I use it for Pug and love it
yep I will have a look ty !
there's also svelte, but it is a completely different thing
Yea once you decide to start using JS UI frameworks you want to look at Svelte(kit)/Vue(nuxt)/React(remix/next)
Angular etc.
I would only recommend using them if you use their meta frameworks though too (imo)
but in short, you're starting to dip your whole hand in a never-ending hole of tools and options
oh guys I have a question (this is not related to the topic)... you guys are in say web dev for years now, well before the introduction of generative AI like chatGPT, my question is, do you guys use chatGPT?
Because, I feel that I use it too much, I learn things but sometimes I don't learn them fast enough or just out of laziness, just write a chatGPT prompt to generate my idea
I don't use chatGPT but I use others now and then when I just don't have the brain space... Issue is its really bad at giving you crap code/answers.
Beyond anything basic or anything that does not have 1000 examples it copied from it is just plain ass
"AI" is just coping answers
it has not logic or intelligence to help you.
if you dont know the language, DO NOT TRUST AI
Yea like if you need it to explain some code to you? fine its not bad just make sure you check the references.
ai is made to be convincingly convincing at giving you something semi-coherent
Oh it tells you with such confidense š¤£
but it may be a load of muffled garbage, or a working script
when it just makes up shit
I've had it make up methods in libraries far to many times to trust it
or just make up libs
š¤£
and when you ask it to correct the script, it hallucinates more than all the people at a rave, combined
and since you are new and dont know much of the language, you cant tell whats wrong
This will go way off topic though š
yeah I see, the thing is, I'm currently at university level and the funny thing is in my modules, the module leader said that we can use AI to help us in our coursework, I don't know why they encourage such things and the problem is just to not be "out-paced" by the other students using gen AI I use it but then feel guilty
lazy ass teacher
sorry not sorry
use it for boilerplate
use it for repetitive tasks
use it for formatting
its so bad at css/html š
use it to translate
dont ask it to solve anything, because it usually doesnt
because most all its examples of html/css are shit so it just repeats the bad practices š
yeah I see, I need to get rid of that bad habit of using AI now and then
Use it just don't rely on it, and know better than it.
you need to get rid of using ai as a 2nd brain
ai is the dumbest you can find
This. It's a tool, learn its weaknesses, and then use it for its strengths.
yep I see
Idk how a teacher would tell someone to use something that is only correct 60% of the time though.
that is such bs imo
you're being generous š¤£
I guess we got off-topic, sorry guys but thanks for the answer, really appreciate
I needed to get some advice from experienced person :c
GL on your html template venture. Make a new post if you have issues with Vituum I don't know it that well but probably can help.
yep will do so if I struggle, thanks once more !
Because, you said you are entry level, the best way would be to add the same navigation elements on each page. Also, you can link every page with css where you style those nav elements. The same goes for every other repeating element.
that only accounts for the styles not the markup/content
html template* languages are a great first step into frameworks and other build tooling
You have to make the leap at some point.
Every JS/UI framework uses some type/form of them, every Fullstack web framework uses one too. Most really don't differ that much for writing but more how they compile templates/reusables. So when you learn one you can understand others really easy.
Agreed
I tried a simple way. As if I am at the beginning and all these messages I read, I would be totally confused. If for example, I do not know SaSS/SCSS why talk about more complicated stuff.
No one mentioned sass
š¤·āāļø just talking about html templating (well and ai rant lol)