zola/docs/content/documentation/themes/installing-and-using-themes.md
photong 51d4b6bd6a Simple clean up of documentation. (#849)
* Update installation.md

* Update cli-usage.md

* Update installation.md

* Update directory-structure.md

* Update configuration.md

* Update overview.md

* Update section.md

* Update page.md

* Update section.md

* Update configuration.md

* Update page.md

* Update section.md

* Update page.md

* Update shortcodes.md

* Update linking.md

* Update table-of-contents.md

* Update syntax-highlighting.md

* Update taxonomies.md

* Update search.md

* Update sass.md

* Update index.md

* Update multilingual.md

* Update overview.md

* Update pages-sections.md

* Update pagination.md

* Update taxonomies.md

* Update rss.md

* Update sitemap.md

* Update robots.md

* Update 404.md

* Update archive.md

* Update overview.md

* Update installing-and-using-themes.md

* Update creating-a-theme.md

* Update netlify.md

* Update github-pages.md

* Update gitlab-pages.md

* Update index.md

* Update page.md

* Update section.md

* Updates.
2020-02-02 17:48:42 -08:00

2.2 KiB

+++ title = "Installing & using themes" weight = 20 +++

Installing a theme

The easiest way to install a theme is to clone its repository in the themes directory.

$ cd themes
$ git clone THEME_REPO_URL

Cloning the repository using Git or another VCS will allow you to easily update. Alternatively, you can download the files manually and place them in a folder.

You can find a list of themes here.

Using a theme

Now that you have the theme in your themes directory, you need to tell Zola to use it by setting the theme variable in the configuration file. The theme name has to be the name of the directory you cloned the theme in. For example, if you cloned a theme in themes/simple-blog, the theme name to use in the configuration file is simple-blog.

Customizing a theme

Any file from the theme can be overriden by creating a file with the same path and name in your templates or static directory. Here are a few examples of that, assuming that the theme name is simple-blog:

templates/pages/post.html -> replace themes/simple-blog/templates/pages/post.html
templates/macros.html -> replace themes/simple-blog/templates/macros.html
static/js/site.js -> replace themes/simple-blog/static/js/site.js

You can also choose to only override parts of a page if a theme defines some blocks by extending it. If we wanted to only change a single block from the post.html page in the example above, we could do the following:

{% extends "simple-blog/templates/pages/post.html" %}

{% block some_block %}
Some custom data
{% endblock %}

Most themes will also provide some variables that are meant to be overriden. This happens in the extra section of the configuration file. Let's say a theme uses a show_twitter variable and sets it to false by default. If you want to set it to true, you can update your config.toml like so:

[extra]
show_twitter = false

You can modify files directly in the themes directory but this will make updating the theme harder and live reload won't work with these files.