Conditionally Displaying Data

Earlier in this chapter, you added a <meta> tag for the description of the page, but it’s good practice to have that description reflect what’s actually on the page. You can add conditional logic to your layouts to control how you display data. For example, you can check to see if there’s a description field set on the page, and if there isn’t, you can fall back to the site-level description.

Hugo has an isset function which, at first glance, looks like a great way to check whether a variable has a value. Unfortunately, it has limitations that aren’t intuitive. It doesn’t handle situations where values are always defined but are empty, like default values. The Description field on a page is actually a default field. If you don’t define it in your page, its value will be defined, but empty, and isset won’t work.

To handle cases where you’re checking for a value in a default variable like this, use Hugo’s with function. Replace the existing meta description in themes/basic/layouts/partials/head.html with this block of code, which conditionally sets the description:

The with function rebinds the context. Using with, you can switch the current context to .Page.Description. Then within that block, a single period prints out the value. But the with function has a nice side effect: if the value of the context is empty, then the block gets skipped and nothing gets rendered. To handle the case where there’s no description, you pair the with function with an else statement.

Save the head partial. To test this new behavior, open the content file for the project list page at content/projects/_index.md and add a description field:

Save the changes and visit the projects list page at http://localhost:1313/projects. Inspect the source and you’ll see that the description meta tag now shows the more specific description. You can now add the description field to other content pages’ front matter.

Joe asks:

What’s the Difference Between summary and description in Front Matter?

The difference is mostly up to you. In some cases, they might be the same content. However, the description field is great for providing a description of the page optimized for search engines or social sharing, while the summary field gives you a chance to create a short summary of the content you’ll display on other parts of the site. As you’ll see later in this chapter, Hugo can automatically generate a page’s summary, but the summary field in the front matter overrides that, giving you more control.

The <title> element currently uses the title of the site and doesn’t accurately reflect the title of an individual page. This can be bad for search engine ranking, but it’s also bad from a usability standpoint. The value of the <title> tag is what appears in the browser title or bookmark tab, as well as a bookmark someone creates.

Let’s use the default site title on the home page, and use the more specific page title everywhere else. To do this, use an if statement with the built-in .Site.IsHome variable to check to see if you’re on the home page or not and display the site title or the more specific page title. Modify the head partial and replace the existing <title> tag with this code:

Notice that this code appends the site title to the page title, which is a common practice when optimizing your site for search engines, as the page title shows up as the title in search results. With these changes in place, your page’s data more accurately reflects the specific page.

Sometimes you might want to drive sections of your site from other data sources. Let’s look at how to do that.