Reusable elements for web pages, or a single page with content fetched from elsewhere?

Forums › IT Pro and developers › Reusable elements for web pages, or a single page with content fetched from elsewhere?

turb

880 posts

Ultimate Geek
+1 received by user: 135

#289454 7-Sep-2021 12:18

Sorry bear with me...

I'm a web developer at hobbyist/side gig level. I can do stuff with HTML/CSS, create a WP theme with php content and usually make JS work when I've nicked it off stackexchange. I have a part time job creating and maintaining a WP web app for an academic department.

I've just created a website for my son in law's plumbing business (brightsideplumbing.co.nz). I didn't use WP because it seem worth it for only five simple static pages, and I don't need any plugins. Also I'm a bit bored of it.

But...

I'd forgotten how much of a drag it is to make edits across even just a few pages, either manually, or using find/replace with the odd catastrophic mistake.

Here's my question:

Is there a platform (apart from WP) where I can have a common reusable header, side menu, footer etc and when I create a new page I just say "put the header here, the footer there" etc.

Is there a platform where I just have one page, and when I click on a menu item it just collects some content and puts it into the page?

Thanks for your patience. I felt I couldn't ask on stackexchange as it's not at all specific. Google hasn't helped for the same reason.

Interests: HTPC, Web App authoring.

marpada

487 posts

Ultimate Geek
+1 received by user: 182

#2773525 7-Sep-2021 12:32

You might want to use a static site generator like Hugo . It has a very simple templating system so you can re-use components and layouts across all pages.

djtOtago

1181 posts

Uber Geek
+1 received by user: 605

#2773536 7-Sep-2021 12:46

A quick, and some may say dirty way, use jQuery's load function to load content into a div place holder.

https://api.jquery.com/load/

https://www.w3schools.com/jquery/jquery_ajax_load.asp

But personally I would probably use a static site generator. See https://jamstack.org/generators/ for options.

Or even use ReactJs or VueJs to make a simple single page app.

Behodar

11094 posts

Uber Geek
+1 received by user: 6071

Trusted

Lifetime subscriber

#2773543 7-Sep-2021 13:01

Do you have PHP installed? As much as I dislike it, it does make it trivial to include another file:

<?php readfile("header.htm") ?>

turb

880 posts

Ultimate Geek
+1 received by user: 135

#2774643 8-Sep-2021 16:40

Thank you everyone, the gz community is the best. I appreciate you taking the time to help someone

I've tried out the php solution, which worked nicely, and appeals because it's so similar to WP.

I haven't tried out the others yet, but I definitely will, and I can see that I'll have to finally face my CLI-phobia!

Interests: HTPC, Web App authoring.