Hugo Templating Tutorial

Hugo's templating system is a powerful tool for creating dynamic websites. Here's a quick guide to get you started:

Basics of Hugo Templates

• Syntax: Hugo uses Go's templating engine with some custom additions. Basic syntax includes {{ }} for variables and {{{ }}} for raw text.
• Variables: Access content variables using {{ .Site.Params.example }} or {{ .Page.Params.example }}.
• Conditions: Use {{ if }} and {{ else }} for conditional rendering. Example:

  {{ if .Params.featured }}
  <h2>Featured Content</h2>
  {{ end }}
  

• Loops: Iterate over data with {{ range }}. Example:

  {{ range .Site.RegularPages }}
  <li>{{ .Title }}</li>
  {{ end }}
  

Advanced Features

• Partial Templates: Reuse code with {{ partial "header.html" }}.
• Shortcodes: Create reusable blocks with {{< shortcode-name >}}.
• Layouts: Define page structures using layouts/ directory. Example: {{ define "main" }}{{ end }}.

Resources

For deeper exploration, check out our official documentation on variables or content organization guide.