Comment by cousin_it

20 hours 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 It's almost exactly like PHP but client side, there's no "flash of content" at all.

3 comments

cousin_it

em-bee 19 hours ago

that'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 19 hours ago

That'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 14 hours ago

As 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.