diff options
Diffstat (limited to 'content/themes')
| -rw-r--r-- | content/themes/creation.md | 73 | ||||
| -rw-r--r-- | content/themes/customizing.md | 57 | ||||
| -rw-r--r-- | content/themes/installing.md | 28 | ||||
| -rw-r--r-- | content/themes/overview.md | 31 | ||||
| -rw-r--r-- | content/themes/usage.md | 22 |
5 files changed, 211 insertions, 0 deletions
diff --git a/content/themes/creation.md b/content/themes/creation.md new file mode 100644 index 0000000..2277986 --- /dev/null +++ b/content/themes/creation.md @@ -0,0 +1,73 @@ +--- +date: 2014-05-12T10:09:17Z +menu: + main: + parent: themes +next: /templates/overview +prev: /themes/customizing +title: Creating a Theme +weight: 50 +--- + +Hugo has the ability to create a new theme in your themes directory for you +using the `hugo new` command. + +`hugo new theme [name]` + +This command will initialize all of the files and directories a basic theme +would need. Hugo themes are written in the Go template language. If you are new +to Go, the [Go template primer](/layout/go-templates/) will help you get started. + +## Theme Components + +A theme consists of templates and static assets such as javascript and css +files. Themes can also optionally provide [archetypes](/content/archetypes) +which are archetypal content types used by the `hugo new` command. + +### 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. Archetypes follow the +[guidelines provided](/content/archetypes). + diff --git a/content/themes/customizing.md b/content/themes/customizing.md new file mode 100644 index 0000000..2e65463 --- /dev/null +++ b/content/themes/customizing.md @@ -0,0 +1,57 @@ +--- +date: 2014-05-12T10:09:34Z +menu: + main: + parent: themes +next: /themes/creation +prev: /themes/usage +title: Customizing a Theme +weight: 40 +--- + +Hugo themes permit you to supplement or override any template or file +from within your working directory. + +## Replacing Static files + +If you would like to include a different file than the theme ships +with.. For example you would like to use a more recent version of jquery +then the theme happens to include simply place an identically name file in the same +relative location but in your working directory. For example if the +theme has jquery 1.6 in /themes/themename/static/js/jQuery.min.js, simply place your file +in the same relative path /static/js/jQuery.min.js. + +## Replace a single template file + +Anytime Hugo looks for a matching template it will first check the +working directory before looking in the theme directory. If you would +like to modify a template simply create that template in your local +layouts directory. In the [template documentation](/templates/overview) +each different template type explains the rules it uses to determine +which template to use. + +This is especially helpful when the theme creator used [partial +templates](/templates/partials). These partial templates are perfect for easy +injection into the theme with minimal maintenance to ensure future +compatibility. + +**warning.. This only works for templates that Hugo knows about. If the +theme imports template files in a creatively named directory +Hugo won’t know to look for the local /layouts first** + +## Replace an archetype + +If the archetype that ships with the theme for a given content type (or +all content types) doesn’t fit with how you are using the theme, feel +free to copy it to your /archetypes directory and make modifications as +you see fit. + +## Beware of the default + +**Default** is a very powerful force in Hugo... Especially as it pertains to +overwriting theme files. If a default is located in the local archetype +directory or /layouts/\_default/ directory it will be used instead of +any of the similar files in the theme. + +It is usually better to override specific files rather than using the +default in your working directory. diff --git a/content/themes/installing.md b/content/themes/installing.md new file mode 100644 index 0000000..4ad81a4 --- /dev/null +++ b/content/themes/installing.md @@ -0,0 +1,28 @@ +--- +date: 2014-05-12T10:09:49Z +menu: + main: + parent: themes +next: /themes/usage +prev: /themes/overview +title: Installing Themes +weight: 20 +--- + +Hugo themes are located in a centralized github repository. [Hugo Themes +Repo](http://github.com/spf13/hugoThemes) itself is really a meta +repository which contains pointers to set of contributed themes. + +## Installing all themes + +If you would like to install all of the available hugo themes, simply +clone the entire repository from within your working directory. + + git clone --recursive https://github.com/spf13/hugoThemes.git themes + + +## Installing a specific theme + + mkdir themes + cd themes + git clone URL_TO_THEME diff --git a/content/themes/overview.md b/content/themes/overview.md new file mode 100644 index 0000000..10ec16c --- /dev/null +++ b/content/themes/overview.md @@ -0,0 +1,31 @@ +--- +date: 2014-05-12T10:03:52Z +menu: + main: + parent: themes +next: /themes/installing +prev: /content/example +title: Themes Overview +weight: 10 +--- + +Hugo provides a robust theming system which is simple, yet capable of producing +even the most complicated websites. + +The Hugo community has created a set of themes ready for using in your own +site. + +Hugo themes have been designed to be the perfect balance between +simplicity and functionality. Hugo themes are powered by the excellent +go template library. If you are new to go templates, see our [primer on +go templates](/templates/go-templates). + +Hugo themes support all modern features you come to expect. They are +structured in such a way to eliminate code duplication. Themes are also +designed to be very easy to customize while retaining the ability to +maintain upgradeability as the upstream theme changes. + +Hugo currently doesn’t ship with a “default” theme, allowing the user to +pick whichever theme best suits their project. + +We hope you will find Hugo themes perfect for your site. diff --git a/content/themes/usage.md b/content/themes/usage.md new file mode 100644 index 0000000..71cf43a --- /dev/null +++ b/content/themes/usage.md @@ -0,0 +1,22 @@ +--- +date: 2014-05-12T10:09:27Z +menu: + main: + parent: themes +next: /themes/customizing +prev: /themes/installing +title: Using a Theme +weight: 30 +--- + +Please make certain you have installed the themes you want to use in the +/themes directory. + +To use a theme for a site: + + hugo -t ThemeName + +The ThemeName must match the name of the directory inside /themes + +Hugo will then apply the theme first, then apply anything that is in the local +directory. To learn more, goto [customizing themes](/themes/customizing) |
