Including parts of a content page in a home page

support
1

Hugo newbie here. I have some content in the form of a list of items (think a list of single sentences) that gets updated regularly (manually). I’d like my template system to extract the first 5 of these items and display them in my home page. Is there functionality within the templating system to extract these items if I can suitably annotate the content? or will I need to restructure my content?

thanks!

1 Like
2

It sounds like you will have a list of sentences (more than 5), but on the home page you wish to display the first 5. What about the other sentences—will you display them anywhere? Is there any reason to store more than 5 sentences?

I ask because there are a few ways to accomplish this…

Also, what determines the “first” 5? Sorted by date created? By custom sort parameter?

1 Like
3

Thanks! The other sentences are in their own page that will be displayed separately. the order is merely order in the list of items itself.

For example, I have a page containing a list of news items that I update manually. Call it /home/news/.
I want the first 5 items to be listed in the main page at /home/ (as a set of ‘most recent news items’)

4

Create each news item as a content page.

content/
├── news/
│   ├── news-1.md
│   ├── news-2.md
│   ├── news-3.md
│   ├── news-4.md
│   ├── news-5.md
│   ├── news-6.md
│   └── news-7.md
└── _index.md

Then create a home page template.

layouts/_default/home.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range first 5 (where .Site.RegularPages "Type" "news") }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

And that page will be visible at http://example.org/news/

2 Likes
5

Yes, this makes sense. It was one of the options I was considering. I’m not sure I’m a fan of having a separate page for each item though, and was hoping to avoid needing to do that.

Separately, the layout you define in layouts/_default/home.html will generate the content at index.html, but you also said that the page of news items will be generated at example/news. I don’t understand how that latter page gets generated automatically?

6

For the structure I’m describing, the layouts directory would look like:

layouts/
└── _default/
    ├── baseof.html
    ├── home.html
    ├── list.html
    └── single.html

The content visible at /news/ is generated by list.html.

See https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-section-pages

1 Like
7

A separate page for each item is:

  1. Logical (each item is a piece of content, within a content type called “news”)
  2. Easy to create (hugo new news/foo.md)
  3. Easy to maintain
  4. Flexible

#4 is the most important.

And if you don’t want each “item” to be visible on its own page, we can configure the news section to behave differently from other sections. See https://gohugo.io/content-management/build-options.

1 Like
8

Ah got it. thanks. Still hoping I can find/create a better solution for the original question, but this is very helpful.

9

If I can’t convince you to do the right thing, you might consider storing the “items” in a data file (toml, json, or yaml) in the data directory.

data/news.json

[
  {
    "text": "Esse velit sint eu voluptate magna ipsum aute excepteur commodo.",
    "title": "News 1"
  },
  {
    "text": "Magna elit et laboris do sunt amet occaecat cillum cupidatat.",
    "title": "News 2"
  }
]

Then your home page template would have something like:

{{ range first 5 site.Data.news }}
  <h2>{{ .title }}</h2>
  <p>{{ .text }}</p>
{{ end }}

But I woudn’t do it.

1 Like
10

I actually like this idea. any reason why you don’t like it?

11

I find long, multi-line strings are easier to create and maintain in markdown files, but that’s a subjective assessment.

The primary reason I don’t like this approach is that it limits what I can do with the content in the future.

Let’s say today you just want a sentence or two, and you don’t want the user to see anything else about a particular item.

A month from now you decide that the sentence or two is just a teaser, and you want to provide a full article that they can view. Now you’ll have to convert your site.Data file to content pages and change your template logic.

Or, a month from now, you decide that you want to display an image to go along with each item. So you stick those in the static directory, and then add an "image": "/foo.jpg" to each item in your json array, then adjust your template. Yes, it will work, but you lose all the benefits of page resources.

In my view, there is no upside to the site.Data approach, but the content pages approach provides a solid foundation for the future without any downside.

2 Likes
12

yeah. I see what you mean. I will ponder some more. Thanks for the detailed explanations!

2 Likes
13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.