HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

  • What is a Content Type
  • Assign a Content Type
  • Create New Content of a Specific Type
  • Define a Content Type
    • Create a Type Layout Directory
    • Create Views
    • Custom Content Type Template Lookup Order
    • Create a Corresponding Archetype
CONTENT MANAGEMENT

Content Types

Hugo supports sites with multiple content types and assumes your site will be organized into sections, where each section represents the corresponding type.

A content type can have a unique set of metadata (i.e., front matter) or customized template and can be created by the hugo new command via archetypes.

What is a Content Type

Tumblr is a good example of a website with multiple content types. A piece of “content” could be a photo, quote, or a post, each with different sets of metadata and different visual rendering.

Assign a Content Type

Hugo assumes that your site will be organized into sections and each section represents a corresponding type. This is to reduce the amount of configuration necessary for new Hugo projects.

If you are taking advantage of this default behavior, each new piece of content you place into a section will automatically inherit the type. Therefore a new file created at content/posts/new-post.md will automatically be assigned the type posts. Alternatively, you can set the content type in a content file's front matter in the field “type”.

Create New Content of a Specific Type

You can manually add files to your content directories, but Hugo can create and populate a new content file with preconfigured front matter via archetypes.

Define a Content Type

Creating a new content type is easy. You simply define the templates and archetype unique to your new content type, or Hugo will use defaults.

Remember, all of the following are optional. If you do not specifically declare content types in your front matter or develop specific layouts for content types, Hugo is smart enough to assume the content type from the file path and section. (See Content Sections for more information.)

The following examples take you stepwise through creating a new type layout for a content file that contains the following front matter:

content/events/my-first-event.md

+++
title = My First Event
date = "2016-06-24T19:20:04-07:00"
description = "Today is my 36th birthday. How time flies."
type = "event"
layout = "birthday"
+++

By default, Hugo assumes *.md under events is of the events content type. However, we have specified that this particular file at content/events/my-first-event.md is of type event and should render using the birthday layout.

Create a Type Layout Directory

Create a directory with the name of the type in /layouts. For creating these custom layouts, type is always singular; e.g., events => event and posts => post.

For this example, you need to create layouts/event/birthday.html.

If you have multiple content files in your events directory that are of the special type and you don't want to define the layout specifically for each piece of content, you can create a layout at layouts/special/single.html to observe the single page template lookup order.

With the “everything is a page” data model introduced in v0.18 (see Content Organization), you can use _index.md in content directories to add both content and front matter to list pages.

Create Views

Many sites support rendering content in a few different ways; e.g., a single page view and a summary view to be used when displaying a list of section contents.

Hugo limits assumptions about how you want to display your content to an intuitive set of sane defaults and will support as many different views of a content type as your site requires. All that is required for these additional views is that a template exists in each /layouts/<TYPE> directory with the same name.

Custom Content Type Template Lookup Order

The lookup order for the content/events/my-first-event.md templates would be as follows:

  • layouts/event/birthday.html
  • layouts/event/single.html
  • layouts/events/single.html
  • layouts/_default/single.html

Create a Corresponding Archetype

We can then create a custom archetype with preconfigured front matter at event.md in the /archetypes directory; i.e. archetypes/event.md.

Read Archetypes for more information on archetype usage with hugo new.

See Also

  • Content Sections
  • .GetPage
  • Comments
  • Content Organization
  • Lists of Content in Hugo
  • About Hugo
    • Overview
    • Hugo and GDPR
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
    • External Learning Resources
  • Hugo Modules
    • Hugo Modules Overview
    • Configure Modules
    • Use Hugo Modules
    • Theme Components
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Content Formats
    • Front Matter
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Static Files
    • Table of Contents
    • Comments
    • Multilingual and i18n
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .HasMenuCurrent
    • .IsMenuCurrent
    • .Param
    • .Render
    • .Scratch
    • .Unix
    • absLangURL
    • absURL
    • after
    • anchorize
    • append
    • apply
    • base64
    • chomp
    • complement
    • cond
    • countrunes
    • countwords
    • dateFormat
    • default
    • delimit
    • dict
    • echoParam
    • emojify
    • eq
    • errorf
    • fileExists
    • findRE
    • first
    • float
    • ge
    • getenv
    • group
    • gt
    • hasPrefix
    • highlight
    • htmlEscape
    • htmlUnescape
    • humanize
    • i18n
    • Image Functions
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang.Merge
    • lang.NumFmt
    • last
    • le
    • lower
    • lt
    • markdownify
    • Math
    • md5
    • merge
    • ne
    • now
    • os.Stat
    • partialCached
    • path.Base
    • path.Dir
    • path.Ext
    • path.Join
    • path.Split
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • reflect.IsMap
    • reflect.IsSlice
    • relLangURL
    • relref
    • relURL
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.HasSuffix
    • strings.Repeat
    • strings.RuneCount
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • symdiff
    • templates.Exists
    • time
    • title
    • transform.Unmarshal
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Pages Methods
    • Taxonomy Variables
    • File Variables
    • Menu Entry Properties
    • Hugo Variables
    • Git Variables
    • Sitemap Variables
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes Introduction
    • SASS / SCSS
    • PostCSS
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Hugo Deploy
    • Host-Agnostic Deploys with Nanobox
    • Host on AWS Amplify
    • Host on Netlify
    • Host on Render
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Hosting on KeyCDN
    • Host on Bitbucket
    • Deployment with Wercker
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
“Content Types” was last updated: October 6, 2019: Update types.md. closes #897 (231b2f094)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 
 

Hugo Sponsors

Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Getting Started
  • Hugo Modules
  • Content Management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance