← Back to context

Comment by rsolva

13 hours ago

Oh, that would be something! All I want is to be able to make a website with some reusable elements and simple styling and keep adding content for decades, without having to think about keeping up with upgrades, dependencies and shifting framework paradigms.

I have made a couple of simple websites using PHP to bolt on reusable elements (header, footer, navigation), just because it is the solution that probably will work for ~decades without much churn. But XSLT would be even better!

8 comments

rsolva

Reply
themafia  12 hours ago

The <template> element combined with the `cloneNode` works quite well for this. I've got a simple function which can take templates, clone them, fill in nodes with data from a structure, then prepare it to be added to the page.

Works a treat and makes most frameworks for the same seem completely pointless.

cosmic_cheese  12 hours ago

Includes are the feature of PHP that made it catch my eye many years ago. Suddenly not having to duplicate shared headers, footers, etc and keep it all up to date across my sites was magical. I could only barely write code at all back then but mixing PHP includes into otherwise plain HTML felt natural and intuitive.

cousin_it  12 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.

  • nothrabannosir  7 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.

  • em-bee  11 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  11 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.

ocdtrekkie  13 hours ago

PHP is a bit more fragile than it used to be. It is probably a bit for the best but I've had to fix a lot of my 2010-era PHP code to work on PHP 8.x. Though... like, it wasn't super hard. The days you could just start using a variable passed in a URL without setting a default if it wasn't...