mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
ba45da9d03
32356e4e Fix typo in header of shortcode-templates.md c8f1a2d2 Correct code example for index template function bfa6a55d Escape code fencing ff8b2f99 Fix typos in deployment with wercker tutorial 557c36e8 theme: Merge commit '7fbb4bed25001182bfeb91f79db0f0c1936582ee' 7fbb4bed Squashed 'themes/gohugoioTheme/' changes from 7dd8a302..ca53082d ce31cee0 Add "See Also" config 158cee1b Make the tags into keywords 61600be6 Add a note to the related section 49edb5a2 Relase 0.27.1 c9bbc001 releaser: Add release notes to /docs for release of 0.27.1 213c6c3b Add bugs poster 8b4590cd Add KeyCDN integration tutorial 2b277859 Add tutorial videos to several docs pages 950fef1f Update roadmap to link to the correct milestones page 496f5bf6 Rename relnotes d6f9378d Bump Netlify versions to 0.27 087fde7f Update 0.27 release notes 603f94ae docs: Document Related Content 3790f6a3 releaser: Bump versions for release of 0.27 0948868c releaser: Add release notes to /docs for release of 0.27 git-subtree-dir: docs git-subtree-split: 32356e4eabe357ae914f4d1d59e8ae31ce936723
87 lines
3.2 KiB
Markdown
87 lines
3.2 KiB
Markdown
---
|
|
title: Create a Theme
|
|
linktitle: Create a Theme
|
|
description: The `hugo new theme` command will scaffold the beginnings of a new theme for you to get you on your way.
|
|
date: 2017-02-01
|
|
publishdate: 2017-02-01
|
|
lastmod: 2017-02-01
|
|
categories: [themes]
|
|
keywords: [themes, source, organization, directories]
|
|
menu:
|
|
docs:
|
|
parent: "themes"
|
|
weight: 30
|
|
weight: 30
|
|
sections_weight: 30
|
|
draft: false
|
|
aliases: [/themes/creation/,/tutorials/creating-a-new-theme/]
|
|
toc: true
|
|
wip: true
|
|
---
|
|
|
|
{{% warning "Use Relative Links" %}}
|
|
If you're creating a theme with plans to share it with the community, use relative URLs since users of your theme may not publish from the root of their website. See [relURL](/functions/relurl) and [absURL](/functions/absurl).
|
|
{{% /warning %}}
|
|
|
|
Hugo can initialize a new blank theme directory within your existing `themes` using the `hugo new` command:
|
|
|
|
```
|
|
hugo new theme [name]
|
|
```
|
|
|
|
## Theme Components
|
|
|
|
A theme consists of templates and static assets such as javascript and css files. Themes can also provide [archetypes][], which are archetypal content types used by the `hugo new` command to scaffold new content files with preconfigured front matter.
|
|
|
|
|
|
{{% note "Use the Hugo Generator Tag" %}}
|
|
The [`.Hugo.Generator`](/variables/hugo/) tag is included in all themes featured in the [Hugo Themes Showcase](http://themes.gohugo.io). We ask that you include the generator tag in all sites and themes you create with Hugo to help the core team track Hugo's usage and popularity.
|
|
{{% /note %}}
|
|
|
|
## Layouts
|
|
|
|
Hugo is built around the concept that things should be as simple as possible.
|
|
Fundamentally, website content is displayed in two different ways, a single
|
|
piece of content and a list of content items. With Hugo, a theme layout starts
|
|
with the defaults. As additional layouts are defined, they are used for the
|
|
content type or section they apply to. This keeps layouts simple, but permits
|
|
a large amount of flexibility.
|
|
|
|
## Single Content
|
|
|
|
The default single file layout is located at `layouts/_default/single.html`.
|
|
|
|
## List of Contents
|
|
|
|
The default list file layout is located at `layouts/_default/list.html`.
|
|
|
|
## Partial Templates
|
|
|
|
Theme creators should liberally use [partial templates](/templates/partials/)
|
|
throughout their theme files. Not only is a good DRY practice to include shared
|
|
code, but partials are a special template type that enables the themes end user
|
|
to be able to overwrite just a small piece of a file or inject code into the
|
|
theme from their local /layouts. These partial templates are perfect for easy
|
|
injection into the theme with minimal maintenance to ensure future
|
|
compatibility.
|
|
|
|
## Static
|
|
|
|
Everything in the static directory will be copied directly into the final site
|
|
when rendered. No structure is provided here to enable complete freedom. It is
|
|
common to organize the static content into:
|
|
|
|
```
|
|
/css
|
|
/js
|
|
/img
|
|
```
|
|
|
|
The actual structure is entirely up to you, the theme creator, on how you would like to organize your files.
|
|
|
|
## Archetypes
|
|
|
|
If your theme makes use of specific keys in the front matter, it is a good idea
|
|
to provide an archetype for each content type you have. [Read more about archetypes][archetypes].
|
|
|
|
[archetypes]: /content-management/archetypes/
|