mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
5e078383a7
49809a03 Merge commit '20a631b4964fc0ab9137cce1e41774cbc17de044' 20a631b4 Squashed 'themes/gohugoioTheme/' changes from b8202f539..dafc91ff1 8b58f565 Re-generate CLI docs 4653a724 Add Netlify deployment badge 2d6246bc Remove some deprecated site variables e6777153 Improve Algolia Search Display Styling 1570999f Add missing "." in front of gitlab-ci.yaml example b922ae7d This adds documentation to the new configDir/Environment logic from .53 (#729) 7cff379f Correctly escape multi-word taxonomy terms in example 2dfeeda4 fix typo by removing stray paren 0870bd9a Fix typo in `paginate` description 91e8be85 Fixes https://github.com/gohugoio/hugo/issues/5609 c1db65ec Make the dummy URL more obvious b4589ff0 Fix a link b73dcb9a Consistently use "posts" as section name in examples 7a56abbc Format definitions a9c6fd9b Minor clarification over the last commit 5c86bdc8 Add alternative instructions for Quick Start for non-git users dafe7ee9 Add Visual Studio Code plug-ins 110ed19e Update HUGO_VERSION 2abd031a Update page.md b332f7b9 Update page.md f5a8c9d4 Update static-files.md 6d0c155c Add note about relative protocol URLs a13751ac Theme Warning: Remove note about unquoted URLs 4c8f7d68 Incorporate feedback 6f2b9cf0 Update Creating Themes Warning 40d88d98 Fix ToC example to use binary true/false 4a11f3f1 Fix typo 2dbfc0a4 Fix a typo in taxonomies d63790ef Do not mark UndocumentedFeature issues as stale d7aff095 Regenerate docs.json 71c0826f Update transform.Unmarshal.md git-subtree-dir: docs git-subtree-split: 49809a038b2691637bab7f3f2e385dde654a88b8
75 lines
2.7 KiB
Markdown
75 lines
2.7 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 Absolute Links" %}}
|
|
If you're creating a theme with plans to share it on the [Hugo Themes website](https://themes.gohugo.io/) please note the following:
|
|
- If using inline styles you will need to use absolute URLs, for the linked assets to be served properly, e.g. `<div style="background: url('{{ "images/background.jpg" | absURL }}')">`
|
|
- Make sure not to use a forward slash `/` in the beginning of a `URL`, because it will point to the host root. Your theme's demo will be available in a subdirectory of the Hugo website and in this scenario Hugo will not generate the correct `URL` for theme assets.
|
|
- If using external CSS and JS from a CDN, make sure to load these assets over `https`. Please do not use relative protocol URLs in your theme's templates.
|
|
{{% /warning %}}
|
|
|
|
Hugo can initialize a new blank theme directory within your existing `themes` using the `hugo new` command:
|
|
|
|
```
|
|
hugo new theme [name]
|
|
```
|
|
|
|
## Theme Folders
|
|
|
|
A theme component can provide files in one or more of the following standard Hugo folders:
|
|
|
|
layouts
|
|
: Templates used to render content in Hugo. Also see [Templates Lookup Order](/templates/lookup-order/).
|
|
|
|
static
|
|
: Static files, such as logos, CSS and JavaScript.
|
|
|
|
i18n
|
|
: Language bundles.
|
|
|
|
data
|
|
: Data files.
|
|
|
|
archetypes
|
|
: Content templates used in `hugo new`.
|
|
|
|
|
|
## Theme Configuration File
|
|
|
|
A theme component can also provide its own [Configuration File](/getting-started/configuration/), e.g. `config.toml`. There are some restrictions to what can be configured in a theme component, and it is not possible to overwrite settings in the project.
|
|
|
|
The following settings can be set:
|
|
|
|
* `params` (global and per language)
|
|
* `menu` (global and per language)
|
|
* `outputformats` and `mediatypes`
|
|
|
|
|
|
## Theme Description File
|
|
|
|
In addition to the configuration file, a theme can also provide a `theme.toml` file that describes the theme, the author and origin etc. See [Add Your Hugo Theme to the Showcase](/contribute/themes/).
|
|
|
|
|
|
{{% 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 %}}
|
|
|
|
|