How to display changing main content on a web page, keeping layout, menu and footer-CodePudding

My main web page (index.html) follows a common structure (simplified):

<html>
  <head>
    <title>...</title>
    <meta name=description content="...">
    <link rel=stylesheet href="main.css"/>
        [... including @font-face loads ]
  </head>
  <body>
    <div id=menu>...</div>

    <div id=mainContent>
      ...
    </div>

    <div id=footer>...</div>
    <script src="jquery.min.js"></script>
    ... more scripts
  <body>
</html>

The web server is well configured such that all the static files are cached and don't get reloaded on the client side if refreshing the page.

Upon choosing a link from the site, mainly from the 'menu' or the 'footer', I want to display different content within the div tag 'mainContent'. Page layout, CSS, fonts, scripts, menue, footer - all is the same. I have identified several means to achive this:

Construct a new subPage.html file copying everything from index.html, then rewrite the div 'mainContent' with the desired other stuff and change page specifics like title, description etc. Or use php to include the desired content in mainContent and to change the page specific values like 'title'. Link from index.html goes to href="subpage.html".

Drawbacks:
- Maintenance: when changing anything in the outside 'wrapper', I'll have to edit every subPage.
- no idea how to easily transport values from index.html to subPage.html, beside cookie (not always permitted) or URL parameters.
use a javascript onClick handler (event listener) to load requested content from server using XHttpsRequests and exchange the innerHtml of div mainContent.

Drawbacks:
- no noscript version possible.
- my changing content is probably not indexed by Google bot and alike, since it is not loaded with index.html. Would it change the situation if the 'alternativ content' was saved in .html files in the base directory, such that it would be browsable and discoverable?
Pre:
- keeps javascript variables
- no need to reload outer page, thus best user experience.
use a 2nd div 'mainContent2' with style="display: none". With a javascript onClick handler toggle display style of both mainContent divs to none <-> block.

Pre:
- easy to implement.
- all content loaded and thus SEO indexed.
Drawback:
- Everything has to be loaded at once, so the index.html might get pretty big.

[4. iframe probably not an option (as the src attribut is static)]

I tend to opt to alternative #2.

Any other technics recommended? What is the 'best practice'? How is this generally done by the pros? Suggestions? Please elaborate.

CodePudding user response：

I'll give you a few answers based on each option:

PHP

You can use PHP to import the header and footer instead of the main content, that way you have just one file with a header and another with a footer and all the pages that you create with different contents will import the header and footer, avoiding duplications.

Do you need a no-script version? I have never seen someone who disabled js but I don't know your app, it could be a pre-requirement.

You can use a modern js framework like Next React / Nuxt Vue / Remix / Svelte / ... There is a lot of options here that can provide you an SSR (Server Side Render) and make Google Bot happy

SPA

This seems to be a SPA. You can use some of the modern js frameworks that I mentioned in the second item. You need to think about lazing load the images too. I don't know how big is this content, but you can try google lighthouse to see if there is some problem with page size in this approach, also, you could enable the gzip on the server.

OR...

All of the above

You can use all of them together too. A frontend with a framework getting data from an API written with PHP, why not? PHP can validate the request type and delivery an HTML if it's the first request or a JSON if the application is already loaded.

CodePudding user response：

Most common solution probably a variant of your option 1. But different then you think. Create a header.php with the content

<html>
  <head>
    <title>...</title>
    <meta name=description content="...">
    <link rel=stylesheet href="main.css"/>
        [... including @font-face loads ]
  </head>
  <body>
    <div id=menu>...</div>

and create a footer.php with the content:

    <div id=footer>...</div>
    <script src="jquery.min.js"></script>
    ... more scripts
  <body>
</html>

Then create an index.php like

<?php include('header.php'); ?>

    <div id=mainContent>
      ...content index page...
    </div>

<?php include('footer.php'); ?>

And then create subpages like subpage.php

<?php include('header.php'); ?>

    <div id=mainContent>
      ...content subpage...
    </div>

<?php include('footer.php'); ?>

This way if anything in the header or footer needs to change you edit the header.php file and the changes will take effect on all pages because the header.php gets included on every page.