Change the way Hugo and theme bearcub renders dates in static pages and blog posts

Using Themes
1

I’ve been building my website with Hugo for a few weeks now and it’s going great. Even though I’m at the very beginning, I love the flexibility, and for the same reason I’m getting a headache - too many options! :slight_smile: I’d be really grateful if someone with experience could help me out with the following.

I’m using bearcub as my theme.

My folder structure is
–content.en/
---- blog/
–content.de/
----blog/

I keep normal pages (i.e. “about” or “contact”) in the content.en/content.de folders, and all blog posts in the respective blog/ folders.

Hugo and bearcub shows the date to a visitor, as well as it puts <time datetime='2023-04-16' pubdate> and <time datetime='2024-09-14T15:11:00.000'> (last updated) in the HTML source code. Hugo does this on all pages, except the _index.md in my --content.de/ and content.en/ folder where none if it shows up.

What I would like hugo to do:
a) Output <time datetime='2023-04-16' pubdate> and <time datetime='2024-09-14T15:11:00.000'> in the HTML source code on all pages, including _index.md, but do not show the date or update date to the visitor outside of the HTML source;
b) output a) plus showing the publish time and updated time only for pages that are in the folder blog/

The theme bearcub uses {{ if not .Params.menu }} in conjunction with all the date outputs in its single.html, I don’t really understand what .Params.menu does, when I removed it I didn’t see a change.

I’ve come across a possible half-solution, but I don’t like it because it would add yet another parameter to the frontmatter of each page:

{{ if .Params.showthedate }}
<span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
{{ end }}

…and then setting the parameter in each frontmatter.

Needless to say, this wouldn’t make a difference between having the HTML tags and showing the dates to the actual user, hence “half-solution”.

2

To be exact, Bearcub uses

 <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
    {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }}
 </time>

to output the date. Hugo doesn’t output any date by itself.
If you don’t want the visitors of your site to see the date, use CSS and display:none for time elements. If needed, be more specific with the CSS selectors.

OTOH: Why would you put the date in the HTML but not show it to your visitors? If it’s about metadata, you should put it in your json+ld section. What do you want to achieve by having invisible HTML elements?

3

Why would you put the date in the HTML but not show it to your visitors?
What do you want to achieve by having invisible HTML elements?

Mainly because I like to have this information for myself so I can see when I wrote and updated it. Since I’d already have it, I don’t see any harm in others (i.e. search engines) having access to it as well. However, it doesn’t seem to be useful to me to put that information right in the face of a visitor for a page like “about me”.

If it’s about metadata […]

It is my understanding that the HTML tag <pubtime> is also a common (?) way of providing the publishing date of content to someone (e.g. search engines). In addition, I did a couple of small changes (IIRC that is not how bearcub works out of the box, but I can be wrong), so I also get

    <meta property="article:published_time" content="2017-09-13T22:38:00+02:00">
    <meta property="article:modified_time" content="2024-09-14T15:11:00+02:00">

and

  <meta itemprop="datePublished" content="2017-09-13T22:38:00+02:00">
  <meta itemprop="dateModified" content="2024-09-14T15:11:00+02:00">

in the rendered HTML source. IINM, this is used by search engines as well?

[…] you should put it in your json+ld section.

I do not know what JSON is, so I quickly skimmed the Wikipedia page about it. I don’t see why I would need an extra file with information when I can have it baked in? I also don’t want to learn JavaScript as I don’t think I’ll be using that anywhere.

If you don’t want the visitors of your site to see the date, use CSS and display:none for time elements. If needed, be more specific with the CSS selectors.

I don’t want to use CSS overrides. The concept of a web browser loading and rendering information only to not display it seems counterintuitive to me. I want to keep it (extremely) lean. In fact, I want my site to eventually come without any CSS at all. Bearcub uses minimal CSS and disabling it doesn’t really change much. :slight_smile:

4

The file system knows all about that. And GitHub does. Or whatever you use for versioning.
Your meta elements do the same as your date element does, with the difference that the meta elements are never visible. So you already have everything, twice (itemprop plus property), in your HTML.

Well, I wrote json+ld, which is JSON, but “baked in”. And JSON is not about “an extra file”, it’s just a format. json+ld is a JSON variant providing metadata inside HTML. Check out schema.org.

First you say that you want the date in the HTML, but the visitors shouldn’t see it. Then you say that you don’t want the browser to load your date element to keep your site “lean”? Then don’t put the date in the HTML in the first place.

5

It has been established that the pubtime field is not required in the HTML code, as the publish and update dates are already present in the metadata. However, guidance is still sought regarding the initial post, specifically the differentiation between “normal pages” and “blog posts” as described therein.