Search code examples
javascripthtmljqueryxmlcontent-management-system

Best way to add dynamic features into an html website without a CMS or php?

I'm in charge of a large-ish company website that's built entirely on .html/css and is likely going to stay that way for a while. I'd love to build in some dynamic functionality in the following ways...

1.) Four of our pages have a "Featured Reports" section that show the three most recent reports we've published along with a synopsis. It would be great if this could be drawn from a master list.

2.) Similarly those four pages each link to a page that has the full list of every report published within that category. If possible I'd like to populate this page from the same master list.

The idea is that the master list, either one for all four categories or four lists, can be updated, either in html or plain or rich text and both the featured reports and full reports sections can be updated automatically. Is this something I can do with xml? Is there another option? I'm looking to avoid using a CMS or any sort of database- just a list that's manually updated periodically.

Solution

  • I have given a simple way to address your questions below making some assumptions:

    • These reports are accessible via a URL, like "http://yoursite.com/reports/report1" or something.
    • The featured reports list is code that should be reusable.
    • You are using jquery

    const reports = [
  {name:"Report 1", url:"https://yoursite.com/reports/reports1"},
  {name:"Report 2", url:"https://yoursite.com/reports/reports2"},
  {name:"Report 3", url:"https://yoursite.com/reports/reports3"}
]
$(document).ready(function(){
  $('#reports').html(reports.map(report => `
    <button onclick='alert("${report.url}")'>${report.name}</button>
  `))
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="reports"></div>

    Here's the breakdown:

    1. const reports...

    This is your data. Here I just made up a few reports, but this will probably come from a server as json. I also made this an array of objects since arrays are easier to loop over than objects.

    1. $(document).ready...

    After the html has been loaded on the web page, we want to run the following...

    1. $('#reports')

    Look for an html element with an id of reports

    1. .html(

    We are going to define the html inside the reports element.

    1. reports.map(

    .map is a function of arrays. It allows you to loop through the array. Every loop generates a new element of a new array.

    1. report

    This will be the current focus of the map. The first loop will be report 1, the second will be report 2 and so on. We can give this any name we want, and then refer to it inside the loop.

    1. =>

    A shorthand for function(). Generally more readable.

    1. `

    Known as Template literal. Inside the backtics, we're telling the compiler the following is a string with variables. Use ${} to print the value of a variable in a string.

    1. <button

    Our new array will generate html buttons

    1. onclick='alert("

    When the user clicks the button, show the user an alert. This is just a placeholder to make sure everything is working first. When you're finished this should instead take the user to the report.

    1. ${report.url}

    The first embedded expression of our template literal. Here we're saying "Show the user the url of the report." And it will change as we loop through the reports.

    12.${report.name}

    This is just for display purposes. We're showing the name of the report in the button.

    This is the reports html element that we are attaching the buttons to.