Trouble with .Site.Data [solved]

support
1

Hi,

Having trouble with a pretty simple issue. Basically just playing with Hugo to understand flow. Trying to implement H5BP in Hugo template. Structure below:

image

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
relativeURLs = true
publishDir = "../docs"

home.json

{
  "meta": {
    "title": "AwesomeTitle",
    "author": "AwesomeName"
  },
}

All I’m trying to do is get the meta.title from home.json in a partial, but this is not working? Partial below: heat.html

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>{{ .Site.Data.Home.Meta.Title }}</title>

<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<script src="/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="/js/plugins.js"></script>
<script src="/js/main.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
    window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
    ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>

Why is {{ .Site.Data.Home.Meta.Title }} not working?

Thanks in advance

2

Ok, so worked out that the line I want is: <title>{{ with .Site.Data.home.meta.title }}{{ . | markdownify }}{{ end }}</title>

Why does a single field have to be treated as a range - I am missing something simple?

3

So back to square one - added a topNav.html as a new partial:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">{{ with .Site.Data.home.title }}{{ . | markdownify }}{{ end }}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Again, {{ with .Site.Data.home.title }}{{ . | markdownify }}{{ end }} is not working.

  • Any ideas as to why?
  • How do other people debug go template errors - its like try different shit for a while, and no way to know what is going on?

Assistance is appreciated.

4

Solved… was missing context dot at the end. my bad.

5

Not sure if you figured it out, but, with is kind of like a simple if statement, and it’s useful because it doesn’t choke when the param doesn’t exist. If you put a bare param, when Hugo iterates over the pages, if the param is not present, it fails.

See @kaushalmodi 's repo/site for a useful “debug” partial that might help you get some insights.

1 Like
6

Here is that debug partial for those interested: debugprint.html.

2 Likes