How do I create a single paged layout without rewriting html blocks of code?

support
1

I’m creating a single paged portfolio website and I’m wondering how I can set it up so that I only need to define each html block once. Currently I’m having to rewrite my html blocks for however many projects or skills I have. I want to have it so that I only need 1 html block and for each project or skill, I can create its own .md file in content

See images below for better description:

example
example1152×764 118 KB

2

Use a partial or a content view.

3

Oh okay I’ll look into those, thanks! :).

Wait but if I use partials don’t they all go into the layouts folder? In that case, I’d have all my website content in the layouts folder and my content folder would be empty (like it is right now). Is this bad practice?

4

No, you would not.

Partials and content views are templates.
Templates contain template code, not content.

Here’s a simple example…

structure 
content
├── projects/
│   ├── project-1/
│   │   ├── a.jpg
│   │   └── index.md
│   ├── project-2/
│   │   └── index.md
│   └── project-3/
│       └── index.md
├── skills/
│   ├── skill-1/
│   │   ├── b.jpg
│   │   └── index.md
│   ├── skill-2/
│   │   └── index.md
│   └── skill-3/
│       └── index.md
└── _index.md

8 directories, 9 files

layouts/_default/index.html 
<h2>Skills</h2>
{{ range where .Site.RegularPages "Type" "skills" }}
  {{ .Render "summary" }}
{{ end }}

<h2>Projects</h2>
{{ range where .Site.RegularPages "Type" "projects" }}
  {{ .Render "summary" }}
{{ end }}

layouts/projects/summary.html 
<article class="project">
  <h3>{{ .Title }}</h3>
  <p>Foo: {{ .Params.foo }}</p>
  {{ with .Resources.GetMatch "*.jpg" }}
    {{ with .Resize "300x webp"}}
      <img src="{{ .RelPermalink }}" width="{{ .Width}}" height="{{ .Height }}">
    {{ end }}
  {{ end }}
  {{ .Content }}
</article>

layouts/skills/summary.html 
<article class="skill">
  <h3>{{ .Title }}</h3>
  <p>Bar: {{ .Params.bar }}</p>
  {{ with .Resources.GetMatch "*.jpg" }}
    {{ with .Resize "300x webp"}}
      <img src="{{ .RelPermalink }}" width="{{ .Width}}" height="{{ .Height }}">
    {{ end }}
  {{ end }}
  {{ .Content }}
</article>

try it 
git clone --single-branch -b hugo-forum-topic-34523 https://github.com/jmooring/hugo-testing hugo-forum-topic-34523
cd hugo-forum-topic-34523
hugo server

1 Like
5

Thanks so much, this is exactly what I was looking for. I really appreciate this!
Yeah I think I may need to go through Hugo tutorials again, because I didn’t realize you could do things like this.

Thanks again! :smiley:

6

So correct me if I’m wrong, but in this case, the list.html and single.html files don’t actually do anything because there is just 1 main home page (index.html). Is this correct?

7

That is correct.

1 Like
8

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