Need to include something in every page

support
1

I’m doing my blog with Hugo and would like to include this “stats” section floating on every page. Sort of a progress bar for several projects I have going on.

I was wondering how to accomplish that without recurring to server side includes.

See, having a single .php file to update with the project stats would be really cost effective. Update one file, upload, boom.

Now with Hugo every time I update my progress, I would have to upload the entire blog! Each .html file where this floating stats with the progress bar its shown.

Say my blog has 1000 entries. I will have to upload 1000 HTML files when I only need to update one file.

That’s a bit excessive, even for my strange tastes.

So what are my options? jQuery.load call? An iframe?

I like the jQuery.load idea, but (as far as I understand) I will be forcing people to download the page they are seeing, plus the page in the jQuery.load only to show a stats#div from that page.

Not really cost effective for the user.

That jQuery.load would be a “dirty” way to make a Hugo HTML include.

Another way of doing it would consist in having the stats data in an external .js file I can easily update without uploading the entire site again.

I could also use a data TOML file, but that only works to generate data, I would still need to upload the entire thing again with each change.

Not really sure which way to go here.

Perhaps I should just… upload the entire blog each time I want to update my progress?

2

Check out ajax with jquery. You could put some HTML into a file and then inject that file into a defined div.

Something like that:

in the 1000 HTML pages

<div id="thedivwhereyouwantyourstatstogo"></div>

the script

$(document).ready(function(){
    $.ajax({
      url: "test.html",
      context: document.body,
      success: function(response){
        $('#thedivwhereyouwantyourstatstogo').html(response);
      }
    });
});

test.html being the HTML excerpt you want to load. not tested. test.html is not a full HTML file, do not add <html><head><body> tags, just the content you want to add.

3

check your http server, most support SSI (server side includes)
here how Apache does it

https://httpd.apache.org/docs/2.4/howto/ssi.html

4

I did something similar to this (minus the tidy coding) last night with jQuery, the concept it is pretty much the same! Wow, we arrived to the same solution!

5

Sadly (well, not so much) I’m using amazon s3 to host it!

6

Another non-JS way considers your traffic patterns: only render that partial on posts that are a certain age. Or if you track traffic, only on pages that were visited in the last week.

You seem to have figured out a solution, so let me just wax poetic on IA for a sec: I wouldn’t load that on every page. Instead, I’d describe the page in the sidebar, and link to it.

I ask myself: why would anyone want to see my progress updates, unless that interest them? Does every person visiting want to see those statuses?

In my case that is never gonna be true. So for my case, I can skip over that.

I encourage others to do these little exercises, because it cuts down on a lot of dev time! :slight_smile: It is my form of web essentialism.