CODEWITHSUNDEEP
hugo
James Allingham
James Allingham

Reputation: 726

Hugo pages not rendering when using layout

I am trying to add a page to my Hugo site, however, I am running into trouble getting the page to render the content (when using the layout - I can get the content to render without the layout). More specifically, I wanted to add a resume page to my site. Here is what I did:

  1. I added a resume.md file to my content directory, with the following contents: 
 ---
categories: ["resume"]
date: "2016-10-02T22:55:05-04:00"
tags: ["resume"]
title: "Resume"
showpagemeta: false
layout: "resume"
---
  1. I added a layout file in themes/mytheme/layouts/_default/resume.html, with the following contents: 
<section id="resume">
 <div class="container">
      <h3>{{ .Site.Data.resume.name }}</h3>
      <div class="panel panel-default">
      <div class="panel-body">
      {{ range $i, $el := .Site.Data.resume.source }}
          <h5>
          <i class="{{ .icon }}"></i>&nbsp;&nbsp;
          <strong><a href="{{ $el.url }}">{{ $el.name }}</a></strong>&nbsp;-&nbsp;{{ $el.description }}
          </h5>
      {{ end }}
      </div>
      </div>
  </div>
</section>
  1. I added the following to the data/resume.yml:
name: Resume
source:
  - icon: foo
    url: bar
    name: baz
    description: foo bar baz

Unfortunately when I go to the webpage, the page has no contents - to be specific, the header and footer defined in themes/mytheme/layouts/partials/{header.html,footer.html} as well as the css styling from themes/mytheme/static/css/main.css all show as expected but the resume does not!

Any help would be appreciated. I am using Hugo version: v0.40.1 linux/amd64.

Thanks!

Upvotes: 3

Views: 2036

Answers (1)

Sparsh
Sparsh

Reputation: 1498

Try inserting partials in your themes/mytheme/layouts/_default/resume.html file like this:

{{ $baseurl := .Site.BaseURL }}
{{ partial "header.html" . }}
{{ partial "footer.html" . }}

<section id="resume">
    <div class="container">
        <h3>{{range .Site.Data.Resume.name }}</h3>
        <div class="panel panel-default">
            <div class="panel-body">
                {{ range $i, $el := .Site.Data.Resume.source }}
                <h5>
                    <i class="{{ .icon }}"></i>&nbsp;&nbsp;
                    <strong><a href="{{ $el.url }}">{{ $el.name }}</a></strong>&nbsp;-&nbsp;{{ $el.description }}
                </h5>
                {{ end }}
            </div>
        </div>
        {{ end }}
    </div>
</section>

You should see some changes, then try editing accordingly. All partials are called within your templates using the following pattern: {{ partial "<PATH>/<PARTIAL>.html" . }} Please follow these specific GoHugo docs to tailor your code usage for Site.Data and Partials. If you need to load local files, use getJSON and getCSV, but the source files must reside within Hugo’s working directory.

Upvotes: 3

Related Questions