[NEWBIE] How to combine two expressions in one line hugo

support
1

Hey guys, I’m a beginner to hugo and I’m trying to make my site and learn basics of html and css from scratch. I have following question in my single.html in partials. (I’m using hugo x-min as base)

{{ with .Params.author }}<h2 class="author">{{ . }}</h2>{{ end }}
{{ if and (gt .Params.date 0) ( .Params.author ) }}<h5 class="date">{{ .Date.Format "2006/01/02" }} 
</h5>{{ end }}

As you can see in the second line, I want to display author name besides date like in the first line it is achieved by a simple ‘.’

How can I combine the two?

2

The first line is a with. With always has it’s “value” in the .. The second line is an if. If just is a conditional that is executed when it’s parameters are true.

What do you want to achieve?

Show the date if an author is set AND a date is set? Probably like this:

{{ with .Params.author }}
  <h2 class="author">{{ . }}</h2>
  {{ with $.Date }}
    <h5 class="date">{{ .Format "2006/01/02" }}</h5>
  {{ end }}
{{ end }}

The $ goes “back up to the page” and inside of the $ with $.Date it’s a . that refers to $.Date. So .Format will format the $.Date available.

3

Like in following screenshot but on same line :

4

That’s not a hugo issue, thats a CSS issue. Hx is always a block level element… so you probably need soemthing like

h2 {
display:inline-block;
} 
h5 {
display:inline-block;
}

to get them together… but that code might also touch other h2 and h5 tags. You might have another div around those tags and then do the following to target only the headers:

.class-around-the-section h2 {
display:inline-block;
}
.class-around-the-section h5 {
display: inline-block;
}
1 Like