Code like this must go in a template in your theme, blog posts will only interpret markdown and this is Go-template syntax for themes.
2 Likes
OK, so say I create a partial file… now I need to tell Hugo to find it and run it.
I use TinyTheme which does similar things with its microhooks I think.
How would I go around finding where in the theme to reference the partial HTML file I would create?
by convention, a partial is a normal looking layout in layouts/partials/mypartial.html.
Then anywhere you want to invoke that, you use:
{{ partial "path/to/file.html" . }} in your templates– only templates, not content.
If you put it in the standard layouts/partials/mypartial.html location, you can just say {{ partial "mypartial.html" . }}
This effectively “injects” the html in the partial layout in that location in your template. The .passes the context of the parent to the partial.
I created layouts/partials/on-this-day.html with this code:
<time
class = “date dt-published”
datetime = “{{ .Date.Format “January 02, 2006 15:04:05 -0700” }}” >
[
{{ .Date.Format “Monday January 2, 2006” }}]({{ .Permalink }})
Then, I created layouts/page/on-this-day.html
with:
{{ partial “layouts/partials/on-this-day.html” . }}
The webpage at https://taonaw.com/on-this-day/ is empty, I tried a full rebuild…
So what am I missing in this setup?
eventually I want the date to be ISO format (that’s why I had to go back to it now, the original script doesn’t work with ISO date - yyyy-mm-dd) but I can worry about that later.
That partial doesn’t do anything to filter posts to that day. That is just “get a date published and provide a link to the current page.” I’d have to see the full syntax of your page to have any idea of what’s going on– notably, I don’t see anywhere calling the javascript that powers On This Day– there’s no reference to https://micromemories.cleverdevil.io where the JS is hosted according to the link.
Sorry for the confusion.
The page at https://taonaw.com/on-this-day/
used to have this code:
<div id="on-this-day">
Loading...
</div>
<script src="https://micromemories.cleverdevil.io/js?tz=US/Eastern"></script>
I now restored it.
This code is JavaScript, and doesn’t relate to the discussion here.
I came here to use the code discussed since the JavaScript (above) present dates as “invalid date” after I changed the dates in my theme to ISO.
So ideally, what I would like is to have the code discussed here, above, creating the same “on this day” articles with an ISO date instead of the code I know have in place. I prefer to understand what I’m doing with Hugo if possible.
It’s not Hugo giving you the Invalid Date– it’s the javascript. It’s looking for publishedEl.datetime = post[‘properties’][‘published’][0]; – then grabs the first 19 characters and tries to recast it as a date in javascript. I think, but I’m not sure, the issue is that your post items in your jsonfeed are under date_published not published. I’m not positive though– the python seems to know to check date_published.
Regardless, Hugo is not being used to render the post content– the javascript is fetching your json feed and parsing it and inserting into the page the HTML elements including the date. And the javascript is responsible for the date format as well– it’s being set there:
var publishedEl = document.createElement('time');
publishedEl.className = 'dt-published';
publishedEl.datetime = post['properties']['published'][0];
var published = post['properties']['published'][0];
published = new Date(published.slice(0,19).replace(' ', 'T'));
publishedEl.innerText = published.toDateString();
permalinkEl.appendChild(publishedEl);
I understand there is an issue is with the JS, and thanks to what you explain I have a better understanding of what is going on there. I don’t want to fix this script.
What I’d like is to use the code you pasted above (as a Hugo template) to replace the JS code completely. That’s what I was attempting with the additional partial I was creating. The part that I’m missing is how to invoke it on my On This Day page.
Assuming the partial code is correct (what you provided previously) and I have placed it in a partial - what do I do so this partial is called for the On This Day page? That’s what I’m trying to understand. I hope this makes sense - or maybe I missed something you’re saying?
The partial won’t do anything to collect posts that are “on this day” it’s just how to show the date time (which is also how you could change the format).
You cannot make an “on this day” page using pure Hugo. Hugo only knows what “today” is at build time– so it’ll only be “on the day of the last post you wrote”. There’s no way to dynamically know that today is a different day than yesterday without a full site build. You have to use javascript for anything that isn’t “build time” information.
If you wanted to do a full “on this day” with the limitation that it will only update on days that you post, it would take quite a bit more Hugo template code to fetch all posts, truncate the date format, match on that format, etc. I have not written that code and no longer run my blog on Hugo to easily check. There may be some posts on the Hugo forums on how to do something like that. But the whole reason why the Javascript existed is to allow it to be dynamic when someone goes to the page versus at build time.
I see… well I’ll see what I can do, the JS works, just the dates are broken for now - I will try to work on that.
Thanks for trying to help me!
What I ended up doing is to use Claude to figure out and “fix” the original script to work for me.
I forked it, connected it to Render (where it’s hosted as a free tier), and then fixed a few bugs (which were mostly my fault for trying to use non-ASCII characters in my date, for decoration) to get it working.
And… it works. I’m now going back over what I learned with Claude and this conversation here to try to grasp at least most of what it did in the code. I am already working on my notes, and I hope this becomes a blog post sometime soon 