Content adapters with an off-the-shelf theme

support
1

I have a question about using Content Adapters with off-the-shelf themes, but first, a short preamble:

In this post, I’m assuming there are two kinds of Hugo users: “Markdown Users,” who are folks who know they can produce great looking websites by writing Markdown files and selecting one of the many excellent themes that exist for Hugo; and “Power Users”, who are folks who maintain public themes or write their own custom theme. Although I have been using Hugo for nearly 10 years, I’ve almost exclusively been the first kind of Hugo user.

I was really excited to read about Content Adapters last year. But after reading the docs I concluded I’d need to know how to write Hugo templates, so I had to put off my plans to use Content Adapters until I had more time.

Then, I recently came across Content adapters: using local data on this support site and I started thinking, maybe it is possible to use Content Adapaters with an off-the-shelf theme.

At GitHub - odoublewen/hugo-theme-with-content-adapter-poc you can see my ultra-simple effort to create a Hugo site using the excellent PaperMod theme.

There are two pages: one generated from content/fowl/ducks.md:

---
title: 'Ducks'
date: '2025-02-20T13:17:48-08:00'
draft: false
cover:
  image: "/images/duck.jpg"
  caption: "Quack Quack"
---

Ducks have **short** necks.

…and one generated from content/fowl/_content.gotmpl:

{{ range .Site.Data.fowl }}

  {{/* Add page. */}}
  {{ $content := dict "mediaType" "text/markdown" "value" .content }}
  {{ $img := fmt.Printf "/images/%s" .image }}
  {{ $cover := dict "image" $img "caption" .title }}
  {{ $path := urls.URLize .title }}
  {{ $page := dict
    "title" .title
    "date" .date
    "draft" .draft
    "path" $path
    "content" $content
    "cover" $cover
  }}
  {{ $.AddPage $page }}

  {{/* page resource stuff here? */}}

{{ end }}

…and data/fowl.yaml as data source:

- title: 'Geese'
  date: '2025-02-20T13:28:01-08:00'
  draft: false
  image: 'goose.jpg'
  caption: 'Honk Honk'
  content: 'Geese have **long** necks.'

It seemed like that should work, since the $page map mirrors the markdown frontmatter. As you can see in the README, I got pretty close, but two thing are missing in the content-adpater-generated page (which both work in the markdown-generate page):

  • The date
  • The cover image

I think I get lost trying to understand what things need to go into the $page dict and what is a page resource?

From the docs, it looks like I should use dates.date instead of just date, but when I tried that, I still don’t get a date in the post.

Any help much appreciated! I feel like a worked example using an off-the-shelf theme could really help a broader audience (aka the “Markdown Users”) make use of Content Adapters. When I get it working, I’m happy to leave my repo up as an example.

2

PS. If the answer is simply “No, you really shouldn’t try to use Content Adapters without a solid understanding of the Hugo templating system”, then so be it, I will find time to learn Hugo templating. But I feel like I’m so close!

3

If you tell it like that - yes it’s a simple answer :wink:

And yes, you are:

Have a look at the Page map table and compare the content entry with the dates entry. you followed that for the content, so whatever you did with the dates, seems you did not create a dict for them

The cover is a custom parameter but you tried to set it in the top-level. You will have to move that the same way to a params dict (also shown in the table linked) - just one level deeper.

{{ $dates := dict "date" 20250601... }}

{{ $params := dict ...
   "cover" (dict "image" "image.jpg" "caption" "image title")
   ... )

{{/*  then */}}

$page := dict ( ...
   "dates" $dates
   "params" $params
   ...)

check out Step-3 in the docs to see an example.

just briefly checked the docs and your adapter code and that seem to be the two points you miss from the docs. late here :yawning_face:

4

Many thanks!

I moved the cover into params and voila! the cover photo now works :smile:

And I formatted the date like the docs demonstrate, and again voila!

I really appreciate the pointers! I hope this thread and the accompanying github repo will help others who haven’t yet taken the plunge into Hugo templating, but want to play around with Content Adapters.

1 Like