3 ms·
I realize JS might not be to everyone's taste, but I think I've found the absolute minimal JS solution to reuse headers and footers: https://vladimirslepnev.me/
by cousin_it 1y ago
I realize JS might not be to everyone's taste, but I think I've found the absolute minimal JS solution to reuse headers and footers: https://vladimirslepnev.me/write https://vladimirslepnev.me/write It's almost exactly like PHP but client side, there's no "flash of content" at all.
- em-bee 1y agothat's neat. i don't like inline js though. i'd like to be able to load it from a separate file so that i can reuse it on multiple pages. i am thinking of something like index.html <div><navigation/></div> index.js function navigation() { document.querySelector('navigation').replaceWith('<a href="...">...') } or maybe let customnodes = { navigation: '<a href="...">...', ... } then add a function that iterates over customnodes and makes the replacements. even better if i could just iterate over all defined functions. (there is a way, i just didn't take the time to look it up) then the functions could be: function navigation() { return '<a href="...">...' } and the iterator would wrap that function with the appropriate document.querySelector('navigation').replaceWith call.
- cousin_it 1y agoThat'll work but you'll get flash of content I think. (Or layout shift, idk what's the right name for it.) The way I did it, the common elements are defined in common.js and inserted in individual pages, but the insert point is an inline script calling a function, not a div with specific id. Then the scripts run during page load and the page shows correctly right away.
- nothrabannosir 1y agoAs the article states, this is analogous to php echo. But this thread is about php include: how does it help there? Edit: I see; you use it as a template further down. My bad for not reading through.