Hugo static site generator doesn't render data template - hugo

I am trying to display list of users, which is saved in data/staff.json
[
{
"name":"John",
"email": "john#example.com"
},
{
"name":"Ringo",
"email": "ringo#example.com"
}
]
This data suppose to be displayed in content/posts/staff.md
{{ range .Site.Data.staff }}
<h2>{{ .name }}</h2>
<p>{{ .email }}</p>
{{end}}
But from some reason All I can see is unrendered code
img
I reproduced the problem on live demo and this is my source code on Github
Any idea why I cannot loop through list and render?
Hugo version 0.100.1 (latest)


Based on Hugo docs
You have to add a $ sign before accessing resource file
{{ range $.Site.Data.staff }}
<h2>{{ .name }}</h2>
<p>{{ .email }}</p>
{{end}}

Related

Sorting JSON data by date in HUGO

I have the following data structure working in a HUGO site
Data in local appearances.json file:
{
"events":[ {
"name": "title three",
"date": "7/02/2022",
"url": "http://some.com"
},
{
"name": "title one",
"date": "5/01/2022",
"url": "http://some.com"
},
{
"name": "title two",
"date": "7/01/2022",
"url": "http://some.com"
}]
}
Partial page:
<div class="row listrecent">
{{ range .Site.Data.appearances.events }}
{{- partial "list-partials/appearancebox.html" . -}}
{{end}}
</div>
output:
However, I would like to sort the contents of the array by "date", preferably with the newest event at the top - i.e the first block visible should be "title three"
I have tried various sort methods with some success but I cannot seem to combine sorting by date and converting the stringified date.
I could ensure the JSON is in the correct order but that seems fragile to me.

The solution in the end was this:
{{ $events := slice }}
{{ range .Site.Data.appearances.events }}
{{ $event := . }}
{{ $parsedEvent := dict }}
{{ range $k, $v := $event }}
{{ if eq $k "date" }}
{{ $parsedEvent = merge $parsedEvent (dict $k (time $v)) }}
{{ else }}
{{ $parsedEvent = merge $parsedEvent (dict $k $v) }}
{{ end }}
{{ end }}
{{ $events = $events | append $parsedEvent }}
{{ end }}
<div class="row listrecent">
{{ range sort $events "date" "desc" }}
{{ if (.date.After now) }}
{{- partial "list-partials/appearancebox.html" . -}}
{{ end }}
{{end}}
</div>
If anyone has a cleaner way then I am all ears!

Presuming that your json is "events.json", then go for the code below:
<ul>
{{ range sort $json.events "date" "desc" }}
<li>
<b>
{{ .name }}
</b>
<br>
{{ .date }}
</li>
{{ end }}
</ul>
The above solution is working check my branch repo

I'm not near my dev set-up, so this will be psuedo code and concepts, but:
https://gohugo.io/functions/range/#readout <- not very detailed.
https://gohugo.io/functions/sort/#readout <- Much more data.
So, something like:
Authors: {{ range sort .Site.Params.authors }}{{ .firstName }} {{ end }}
(example given in link 2 above).
So concept/psuedo, I believe:
{{ range sort .Site.Data.etc.etc. "date" }}
This would sort by ascending (again, not sure the final output for a date field, also due to the fact I believe you have date as a string, which I understand, it's json, but meaning, it's not going to give you expected output. so you might have to convert that field to a date object or data sortable concept as opposed to a string.
https://gohugo.io/functions/format/#use-local-and-utc
Might be of assistance for that.
Again, not near my compu/dev setup, but the above should work. The key being the sort command.

Display 3 most recent blog posts in Hugo (but not other pages)

I have a site with a bunch of static pages, plus a blog, in Hugo.
On the front page, I'd like to create short links to the three most recent blog posts (but not to any possibly recently modified static page). The blog posts are all in directory blog/.
I'm failing to figure out the syntax for this. So far, I have:
{{- range (.Paginate ( first 3 .Pages.ByDate )).Pages }}
<li>{{ .Title }}</li>
{{- end}}
but I need to also filter by directory blog/. This is in my layouts/index.html template.

I'm using Hugo 0.74.3 and this is my solution:
{{ range ( where .Site.RegularPages "Type" "posts" | first 3 ) }}
<li>{{ .Title }}</li>
{{end}}
Note that blog posts with draft: true in their frontmatter are not included.
I started by just iterating over .Site.RegularPages without the where to figure it out
{{ range .Site.RegularPages }}
<h2>{{ . }}</h2>
{{end}}

Hugo is tricky to get the filtering working, but this may work for you
{{ range ( first 3 ( where .Site.Pages "Type" "blog" ).ByDate ) }}
<li>{{ .Title }}</li>
{{ end }}

Hugo cannot convert type page.PagesGroup to Pages

I have a Hugo list template like this:
{{ range (.Paginate (.Data.Pages.GroupByDate "2006")).PageGroups }}
<h3>{{ .Key }}</h3>
<ul>
{{ range .Pages.ByWeight }}
<li>
{{ if .Draft }}{{ T "draft" }}: {{end}}{{ .Title | markdownify }}
<time class="date-meta">{{ .Date.Format "Jan 2" }}</time>
</li>
{{ end }}
</ul>
{{ end }}
When I run the site like this hugo server -D it works fine.
When I build the site I get:
execute of template failed: template: _default/list.html:15:14: executing "main" at <.Paginate>: error calling Paginate: cannot convert type page.PagesGroup to Pages
Turning on debug and verbose do not help. I have:
content
content/web
content/web/one.md
content/web/two.md
content/web/_index.md
content/web/three.md
content/about
content/about/index.md
What gives?

I encountered this error while writing a custom theme except it happened when running hugo -D or hugo server -D. As a workaround try wrapping it in an if condition to check .Data.Pages.
{{ if .Data.Pages }}
{{ range (.Paginate (.Data.Pages.GroupByDate "2006")).PageGroups }}
...
{{ end }}
{{ end }}

How to get the first three posts of a specific section in Hugo v0.59?

In Hugo v0.52 I had the following template code that worked to get the posts of the "blog" section on my home page (simplified example):
{{ range where .Pages "Section" "blog"}}
{{ .Title }}
{{ end }}
However, I upgraded to v0.59 and now the functionality is broken. It now only loads my base "blog" page, not the articles. I've looked through the docs and can't find anything to indicate it's changed.

I figured it out right after posting. In v0.59, it needs to be
{{ range where .Site.Pages "Section" "blog"}}
{{ .Title }}
{{ end }}

Angular code show up when sharing on a social media

I was going to share my site on google+ and realized that it displays my Angular code instead of my content, as such:
{{ item.time.end }}. {{ item.title }}. {{ item.company }}. {{ item.skill }}.
{{ detail }}. {{ more }}. {{ item.time.start }}. Education:
{{ item.course }}.{{ item.school }}. {{ item.subjects }}
I also noticed that when the page load, the code pops up for a half second before content gets rendered.
How could I fix these issues?
Thanks!

Resources