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.
This commit is contained in:
parent
75570d041a
commit
51d4b6bd6a
|
@ -29,9 +29,9 @@ resize_image(path, width, height, op, format, quality)
|
||||||
- `"jpg"`
|
- `"jpg"`
|
||||||
- `"png"`
|
- `"png"`
|
||||||
|
|
||||||
The default is `"auto"`, this means the format is chosen based on input image format.
|
The default is `"auto"`, this means that the format is chosen based on input image format.
|
||||||
JPEG is chosen for JPEGs and other lossy formats, while PNG is chosen for PNGs and other lossless formats.
|
JPEG is chosen for JPEGs and other lossy formats, and PNG is chosen for PNGs and other lossless formats.
|
||||||
- `quality` (_optional_): JPEG quality of the resized image, in percents. Only used when encoding JPEGs, default value is `75`.
|
- `quality` (_optional_): JPEG quality of the resized image, in percent. Only used when encoding JPEGs; default value is `75`.
|
||||||
|
|
||||||
### Image processing and return value
|
### Image processing and return value
|
||||||
|
|
||||||
|
@ -41,7 +41,7 @@ Zola performs image processing during the build process and places the resized i
|
||||||
static/processed_images/
|
static/processed_images/
|
||||||
```
|
```
|
||||||
|
|
||||||
Filename of each resized image is a hash of the function arguments,
|
The filename of each resized image is a hash of the function arguments,
|
||||||
which means that once an image is resized in a certain way, it will be stored in the above directory and will not
|
which means that once an image is resized in a certain way, it will be stored in the above directory and will not
|
||||||
need to be resized again during subsequent builds (unless the image itself, the dimensions, or other arguments are changed).
|
need to be resized again during subsequent builds (unless the image itself, the dimensions, or other arguments are changed).
|
||||||
Therefore, if you have a large number of images, they will only need to be resized once.
|
Therefore, if you have a large number of images, they will only need to be resized once.
|
||||||
|
@ -50,7 +50,7 @@ The function returns a full URL to the resized image.
|
||||||
|
|
||||||
## Resize operations
|
## Resize operations
|
||||||
|
|
||||||
The source for all examples is this 300 × 380 pixels image:
|
The source for all examples is this 300 pixel × 380 pixel image:
|
||||||
|
|
||||||
![zola](01-zola.png)
|
![zola](01-zola.png)
|
||||||
|
|
||||||
|
@ -79,9 +79,11 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
### **`"fit"`**
|
### **`"fit"`**
|
||||||
Like `"fit_width"` and `"fit_height"` combined, but only resize if the image is bigger than any of the specified dimensions.
|
Like `"fit_width"` and `"fit_height"` combined, but only resize if the image is bigger than any of the specified dimensions.
|
||||||
This mode is handy, if e.g. images are automatically shrinked to certain sizes in a shortcode for mobile optimization.
|
This mode is handy, if for example images are automatically shrunk to certain sizes in a shortcode for
|
||||||
Resizes the image such that the result fits within `width` and `height` preserving aspect ratio. This means that both width or height
|
mobile optimization.
|
||||||
will be at max `width` and `height`, respectively, but possibly one of them smaller so as to preserve the aspect ratio.
|
Resizes the image such that the result fits within `width` and `height` while preserving the aspect ratio. This
|
||||||
|
means that both width or height will be at max `width` and `height`, respectively, but possibly one of them
|
||||||
|
smaller so as to preserve the aspect ratio.
|
||||||
|
|
||||||
|
|
||||||
`resize_image(..., width=5000, height=5000, op="fit")`
|
`resize_image(..., width=5000, height=5000, op="fit")`
|
||||||
|
@ -93,8 +95,9 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=150, height=150, op="fit") }}
|
{{ resize_image(path="documentation/content/image-processing/01-zola.png", width=150, height=150, op="fit") }}
|
||||||
|
|
||||||
### **`"fill"`**
|
### **`"fill"`**
|
||||||
This is the default operation. It takes the image's center part with the same aspect ratio as the `width` & `height` given and resizes that
|
This is the default operation. It takes the image's center part with the same aspect ratio as the `width` and
|
||||||
to `width` & `height`. This means that parts of the image that are outsize of the resized aspect ratio are cropped away.
|
`height` given and resizes that to `width` and `height`. This means that parts of the image that are outside
|
||||||
|
of the resized aspect ratio are cropped away.
|
||||||
|
|
||||||
`resize_image(..., width=150, height=150, op="fill")`
|
`resize_image(..., width=150, height=150, op="fill")`
|
||||||
|
|
||||||
|
@ -103,8 +106,8 @@ The source for all examples is this 300 × 380 pixels image:
|
||||||
|
|
||||||
## Using `resize_image` in markdown via shortcodes
|
## Using `resize_image` in markdown via shortcodes
|
||||||
|
|
||||||
`resize_image` is a built-in Tera global function (see the [Templates](@/documentation/templates/_index.md) chapter),
|
`resize_image` is a built-in Tera global function (see the [templates](@/documentation/templates/_index.md) chapter),
|
||||||
but it can be used in markdown, too, using [Shortcodes](@/documentation/content/shortcodes.md).
|
but it can be used in Markdown using [shortcodes](@/documentation/content/shortcodes.md).
|
||||||
|
|
||||||
The examples above were generated using a shortcode file named `resize_image.html` with this content:
|
The examples above were generated using a shortcode file named `resize_image.html` with this content:
|
||||||
|
|
||||||
|
@ -118,7 +121,7 @@ The `resize_image()` can be used multiple times and/or in loops. It is designed
|
||||||
|
|
||||||
This can be used along with `assets` [page metadata](@/documentation/templates/pages-sections.md) to create picture galleries.
|
This can be used along with `assets` [page metadata](@/documentation/templates/pages-sections.md) to create picture galleries.
|
||||||
The `assets` variable holds paths to all assets in the directory of a page with resources
|
The `assets` variable holds paths to all assets in the directory of a page with resources
|
||||||
(see [assets colocation](@/documentation/content/overview.md#assets-colocation)): if you have files other than images you
|
(see [asset co-location](@/documentation/content/overview.md#asset-co-location)); if you have files other than images you
|
||||||
will need to filter them out in the loop first like in the example below.
|
will need to filter them out in the loop first like in the example below.
|
||||||
|
|
||||||
This can be used in shortcodes. For example, we can create a very simple html-only clickable
|
This can be used in shortcodes. For example, we can create a very simple html-only clickable
|
||||||
|
@ -135,10 +138,10 @@ picture gallery with the following shortcode named `gallery.html`:
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
```
|
```
|
||||||
|
|
||||||
As you can notice, we didn't specify an `op` argument, which means it'll default to `"fill"`. Similarly, the format will default to
|
As you can notice, we didn't specify an `op` argument, which means that it'll default to `"fill"`. Similarly,
|
||||||
`"auto"` (choosing PNG or JPEG as appropriate) and the JPEG quality will default to `75`.
|
the format will default to `"auto"` (choosing PNG or JPEG as appropriate) and the JPEG quality will default to `75`.
|
||||||
|
|
||||||
To call it from a markdown file, simply do:
|
To call it from a Markdown file, simply do:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{{/* gallery() */}}
|
{{/* gallery() */}}
|
||||||
|
@ -156,4 +159,4 @@ Here is the result:
|
||||||
## Get image size
|
## Get image size
|
||||||
|
|
||||||
Sometimes when building a gallery it is useful to know the dimensions of each asset. You can get this information with
|
Sometimes when building a gallery it is useful to know the dimensions of each asset. You can get this information with
|
||||||
[get_image_metadata](@/documentation/templates/overview.md#get-image-metadata)
|
[get_image_metadata](@/documentation/templates/overview.md#get-image-metadata).
|
||||||
|
|
|
@ -4,9 +4,9 @@ weight = 50
|
||||||
+++
|
+++
|
||||||
|
|
||||||
## Heading id and anchor insertion
|
## Heading id and anchor insertion
|
||||||
While rendering the markdown content, a unique id will automatically be assigned to each heading. This id is created
|
While rendering the Markdown content, a unique id will automatically be assigned to each heading. This id is created
|
||||||
by converting the heading text to a [slug](https://en.wikipedia.org/wiki/Semantic_URL#Slug), appending numbers at the end
|
by converting the heading text to a [slug](https://en.wikipedia.org/wiki/Semantic_URL#Slug), and appending numbers at
|
||||||
if the slug already exists for that article. For example:
|
the end if the slug already exists for that article. For example:
|
||||||
|
|
||||||
```md
|
```md
|
||||||
# Something exciting! <- something-exciting
|
# Something exciting! <- something-exciting
|
||||||
|
@ -22,18 +22,21 @@ You can also manually specify an id with a `{#…}` suffix on the heading line:
|
||||||
# Something manual! {#manual}
|
# Something manual! {#manual}
|
||||||
```
|
```
|
||||||
|
|
||||||
This is useful for making deep links robust, either proactively (so that you can later change the text of a heading without breaking links to it) or retroactively (keeping the slug of the old header text, when changing the text). It can also be useful for migration of existing sites with different header id schemes, so that you can keep deep links working.
|
This is useful for making deep links robust, either proactively (so that you can later change the text of a heading
|
||||||
|
without breaking links to it) or retroactively (keeping the slug of the old header text when changing the text). It
|
||||||
|
can also be useful for migration of existing sites with different header id schemes, so that you can keep deep
|
||||||
|
links working.
|
||||||
|
|
||||||
## Anchor insertion
|
## Anchor insertion
|
||||||
It is possible to have Zola automatically insert anchor links next to the heading, as you can see on the site you are currently
|
It is possible to have Zola automatically insert anchor links next to the heading, as you can see on this site
|
||||||
reading if you hover a title.
|
if you hover a title.
|
||||||
|
|
||||||
This option is set at the section level: the `insert_anchor_links` variable on the
|
This option is set at the section level: the `insert_anchor_links` variable on the
|
||||||
[Section front-matter page](@/documentation/content/section.md#front-matter).
|
[section front matter page](@/documentation/content/section.md#front-matter).
|
||||||
|
|
||||||
The default template is very basic and will need CSS tweaks in your project to look decent.
|
The default template is very basic and will need CSS tweaks in your project to look decent.
|
||||||
If you want to change the anchor template, it can easily be overwritten by
|
If you want to change the anchor template, it can be easily overwritten by
|
||||||
creating a `anchor-link.html` file in the `templates` directory which gets an `id` variable.
|
creating an `anchor-link.html` file in the `templates` directory, which gets an `id` variable.
|
||||||
|
|
||||||
## Internal links
|
## Internal links
|
||||||
Linking to other pages and their headings is so common that Zola adds a
|
Linking to other pages and their headings is so common that Zola adds a
|
||||||
|
@ -41,4 +44,4 @@ special syntax to Markdown links to handle them: start the link with `@/` and po
|
||||||
to link to. The path to the file starts from the `content` directory.
|
to link to. The path to the file starts from the `content` directory.
|
||||||
|
|
||||||
For example, linking to a file located at `content/pages/about.md` would be `[my link](@/pages/about.md)`.
|
For example, linking to a file located at `content/pages/about.md` would be `[my link](@/pages/about.md)`.
|
||||||
You can still link to an anchor directly: `[my link](@/pages/about.md#example)` will work as expected.
|
You can still link to an anchor directly; `[my link](@/pages/about.md#example)` will work as expected.
|
||||||
|
|
|
@ -21,7 +21,7 @@ If you want to use per-language taxonomies, ensure you set the `lang` field in t
|
||||||
configuration.
|
configuration.
|
||||||
|
|
||||||
## Content
|
## Content
|
||||||
Once the languages are added in, you can start to translate your content. Zola
|
Once the languages have been added, you can start to translate your content. Zola
|
||||||
uses the filename to detect the language:
|
uses the filename to detect the language:
|
||||||
|
|
||||||
- `content/an-article.md`: this will be the default language
|
- `content/an-article.md`: this will be the default language
|
||||||
|
@ -30,9 +30,9 @@ uses the filename to detect the language:
|
||||||
If the language code in the filename does not correspond to one of the languages configured,
|
If the language code in the filename does not correspond to one of the languages configured,
|
||||||
an error will be shown.
|
an error will be shown.
|
||||||
|
|
||||||
If your default language has an `_index.md` in a directory, you will need to add a `_index.{code}.md`
|
If your default language has an `_index.md` in a directory, you will need to add an `_index.{code}.md`
|
||||||
file with the desired front-matter options as there is no language fallback.
|
file with the desired front-matter options as there is no language fallback.
|
||||||
|
|
||||||
## Output
|
## Output
|
||||||
Zola outputs the translated content with a base URL of `{base_url}/{code}/`.
|
Zola outputs the translated content with a base URL of `{base_url}/{code}/`.
|
||||||
The only exception to that is if you are setting a translated page `path` directly in the front-matter.
|
The only exception to this is if you are setting a translated page `path` directly in the front matter.
|
||||||
|
|
|
@ -4,9 +4,9 @@ weight = 10
|
||||||
+++
|
+++
|
||||||
|
|
||||||
|
|
||||||
Zola uses the folder structure to determine the site structure.
|
Zola uses the directory structure to determine the site structure.
|
||||||
Each folder in the `content` directory represents a [section](@/documentation/content/section.md)
|
Each child directory in the `content` directory represents a [section](@/documentation/content/section.md)
|
||||||
that contains [pages](@/documentation/content/page.md): your `.md` files.
|
that contains [pages](@/documentation/content/page.md) (your `.md` files).
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
.
|
.
|
||||||
|
@ -23,30 +23,30 @@ that contains [pages](@/documentation/content/page.md): your `.md` files.
|
||||||
└── _index.md // -> https://mywebsite.com/landing/
|
└── _index.md // -> https://mywebsite.com/landing/
|
||||||
```
|
```
|
||||||
|
|
||||||
Each page path (the part after the `base_url`, for example `blog/cli-usage/`) can be customised by changing the `path` or `slug`
|
Each page path (the part after `base_url`, for example `blog/cli-usage/`) can be customised by changing the `path` or
|
||||||
attribute of the [page front-matter](@/documentation/content/page.md#front-matter).
|
`slug` attribute of the [page front-matter](@/documentation/content/page.md#front-matter).
|
||||||
|
|
||||||
You might have noticed a file named `_index.md` in the example above.
|
You might have noticed a file named `_index.md` in the example above.
|
||||||
This file is used to store both metadata and content of the section itself and is not considered a page.
|
This file is used to store both the metadata and content of the section itself and is not considered a page.
|
||||||
|
|
||||||
To make sure the terminology used in the rest of the documentation is understood, let's go over the example above.
|
To ensure that the terminology used in the rest of the documentation is understood, let's go over the example above.
|
||||||
|
|
||||||
The `content` directory in this case has three `sections`: `content`, `blog` and `landing`. The `content` section has only
|
The `content` directory in this case has three `sections`: `content`, `blog` and `landing`. The `content` section has only
|
||||||
one page, `something.md`, the `landing` section has no page and the `blog` section has 4 pages: `cli-usage.md`, `configuration.md`, `directory-structure.md`
|
one page (`something.md`), the `landing` section has no pages and the `blog` section has 4 pages (`cli-usage.md`,
|
||||||
and `installation.md`.
|
`configuration.md`, `directory-structure.md` and `installation.md`).
|
||||||
|
|
||||||
While not shown in the example, sections can be nested indefinitely.
|
Sections can be nested indefinitely.
|
||||||
|
|
||||||
## Assets colocation
|
## Asset co-location
|
||||||
|
|
||||||
The `content` directory is not limited to markup files though: it's natural to want to co-locate a page and some related
|
The `content` directory is not limited to markup files. It's natural to want to co-locate a page and some related
|
||||||
assets, for instance images or spreadsheets. Zola supports that pattern out of the box for both sections and pages.
|
assets, such as images or spreadsheets. Zola supports this pattern out of the box for both sections and pages.
|
||||||
|
|
||||||
Any non-markdown file you add in the page/section folder will be copied alongside the generated page when building the site,
|
All non-Markdown files you add in a page/section directory will be copied alongside the generated page when the site is
|
||||||
which allows us to use a relative path to access them.
|
built, which allows us to use a relative path to access them.
|
||||||
|
|
||||||
For pages to use assets colocation, they should not be placed directly in their section folder (such as `latest-experiment.md`), but as an `index.md` file
|
Pages with co-located assets should not be placed directly in their section directory (such as `latest-experiment.md`), but
|
||||||
in a dedicated folder (`latest-experiment/index.md`), like so:
|
as an `index.md` file in a dedicated directory (`latest-experiment/index.md`), like so:
|
||||||
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
@ -58,23 +58,23 @@ in a dedicated folder (`latest-experiment/index.md`), like so:
|
||||||
└── research.jpg
|
└── research.jpg
|
||||||
```
|
```
|
||||||
|
|
||||||
In this setup, you may access `research.jpg` from your 'research' section,
|
With this setup, you may access `research.jpg` from your 'research' section
|
||||||
and `yavascript.js` from your 'latest-experiment' directly within the Markdown:
|
and `yavascript.js` from your 'latest-experiment' page directly within the Markdown:
|
||||||
|
|
||||||
```markdown
|
```Markdown
|
||||||
Check out the complete program [here](yavascript.js). It's **really cool free-software**!
|
Check out the complete program [here](yavascript.js). It's **really cool free-software**!
|
||||||
```
|
```
|
||||||
|
|
||||||
By default, this page will get the folder name as its slug. So its permalink would be in the form of `https://example.com/research/latest-experiment/`
|
By default, this page's slug will be the directory name and thus its permalink will be `https://example.com/research/latest-experiment/`.
|
||||||
|
|
||||||
### Excluding files from assets
|
### Excluding files from assets
|
||||||
|
|
||||||
It is possible to ignore selected asset files using the
|
It is possible to ignore selected asset files using the
|
||||||
[ignored_content](@/documentation/getting-started/configuration.md) setting in the config file.
|
[ignored_content](@/documentation/getting-started/configuration.md) setting in the config file.
|
||||||
For example, say you have an Excel spreadsheet from which you are taking several screenshots and
|
For example, say that you have an Excel spreadsheet from which you are taking several screenshots and
|
||||||
then linking to those image files on your website. For maintainability purposes, you want to keep
|
then linking to these image files on your website. For maintainability, you want to keep
|
||||||
the spreadsheet in the same folder as the markdown, but you don't want to copy the spreadsheet to
|
the spreadsheet in the same directory as the Markdown file, but you don't want to copy the spreadsheet to
|
||||||
the public web site. You can achieve this by simply setting `ignored_content` in the config file:
|
the public web site. You can achieve this by setting `ignored_content` in the config file:
|
||||||
|
|
||||||
```
|
```
|
||||||
ignored_content = ["*.xlsx"]
|
ignored_content = ["*.xlsx"]
|
||||||
|
@ -83,15 +83,15 @@ ignored_content = ["*.xlsx"]
|
||||||
## Static assets
|
## Static assets
|
||||||
|
|
||||||
In addition to placing content files in the `content` directory, you may also place content
|
In addition to placing content files in the `content` directory, you may also place content
|
||||||
files in the `static` directory. Any files/folders that you place in the `static` directory
|
files in the `static` directory. Any files/directories that you place in the `static` directory
|
||||||
will be copied, without modification, to the public directory.
|
will be copied, without modification, to the `public` directory.
|
||||||
|
|
||||||
Typically, you might put site-wide assets (such as the site favicon, site logos or site-wide
|
Typically, you might put site-wide assets (such as the site favicon, site logos or site-wide
|
||||||
JavaScript) in the root of the static directory. You can also place any HTML or other files that
|
JavaScript) in the root of the static directory. You can also place any HTML or other files that
|
||||||
you wish to be included without modification (that is, without being parsed as Markdown files)
|
you wish to be included without modification (that is, without being parsed as Markdown files)
|
||||||
into the static directory.
|
into the static directory.
|
||||||
|
|
||||||
Note that the static folder provides an _alternative_ to colocation. For example, imagine that you
|
Note that the static directory provides an _alternative_ to co-location. For example, imagine that you
|
||||||
had the following directory structure (a simplified version of the structure presented above):
|
had the following directory structure (a simplified version of the structure presented above):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
@ -103,18 +103,16 @@ had the following directory structure (a simplified version of the structure pre
|
||||||
└── _index.md // -> https://mywebsite.com/blog/
|
└── _index.md // -> https://mywebsite.com/blog/
|
||||||
```
|
```
|
||||||
|
|
||||||
If you wanted to add an image to the `https://mywebsite.com/blog/configuration` page, you would
|
To add an image to the `https://mywebsite.com/blog/configuration` page, you have three options:
|
||||||
have three options:
|
* You could save the image to the `content/blog/configuration` directory and then link to it with a
|
||||||
* You could save the image to the `content/blog/configuration` folder and then link it with a
|
relative path from the `index.md` page. This is the approach described under **co-location**
|
||||||
relative path from the `index.md` page. This is the approach described under **colocation**,
|
|
||||||
above.
|
above.
|
||||||
* You could save the image to a `static/blog/configuration` folder and link it in exactly the
|
* You could save the image to a `static/blog/configuration` directory and link to it in exactly the
|
||||||
same way as if you had colocated it. If you do this, the generated files will be identical to
|
same way as if you had co-located it. If you do this, the generated files will be identical to those
|
||||||
if you had colocated; the only difference will be that all static files will be saved in the
|
obtained if you had co-located the image; the only difference will be that all static files will be saved in the
|
||||||
static folder rather than in the content folder. Depending on your organizational needs, this
|
static directory rather than in the content directory. The choice depends on your organizational needs.
|
||||||
may be better or worse.
|
* Or you could save the image to some arbitrary directory within the static directory. For example,
|
||||||
* Or you could save the image to some arbitrary folder within the static folder. For example,
|
you could save all images to `static/images`. Using this approach, you can no longer use relative links. Instead,
|
||||||
you could save all images to `static/images`. Using this approach, you would no longer be able
|
you must use an absolute link to `images/[filename]` to access your
|
||||||
to use relative links, but could use an absolute link to `images/[filename]` to access your
|
image. This might be preferable for small sites or for sites that associate images with
|
||||||
image. This might be preferable for small sites or for sites that associate images with
|
|
||||||
multiple pages (e.g., logo images that appear on every page).
|
multiple pages (e.g., logo images that appear on every page).
|
||||||
|
|
|
@ -6,98 +6,98 @@ weight = 30
|
||||||
A page is any file ending with `.md` in the `content` directory, except files
|
A page is any file ending with `.md` in the `content` directory, except files
|
||||||
named `_index.md`.
|
named `_index.md`.
|
||||||
|
|
||||||
If a file ending with `.md` is named `index.md`, then it will generate a page
|
If a file ending with `.md` is named `index.md`, it will generate a page
|
||||||
with the name of the containing folder (for example, `/content/about/index.md` would
|
with the name of its directory (for example, `/content/about/index.md` would
|
||||||
create a page at `[base_url]/about`). (Note the lack of an underscore; if the file
|
create a page at `[base_url]/about`). (Note the lack of an underscore; if the file
|
||||||
were named `_index.md`, then it would create a **section** at `[base_url]/about`, as
|
were named `_index.md`, then it would create a **section** at `[base_url]/about`, as
|
||||||
discussed in the prior part of this documentation. But naming the file `index.md` will
|
discussed in a previous part of this documentation. In contrast, naming the file `index.md` will
|
||||||
create a **page** at `[base_url]/about`).
|
create a **page** at `[base_url]/about`).
|
||||||
|
|
||||||
If the file is given any name *other* than `index.md` or `_index.md`, then it will
|
If the file is given any name *other* than `index.md` or `_index.md`, then it will
|
||||||
create a page with that name (without the `.md`). So naming a file in the root of your
|
create a page with that name (without the `.md`). For example, naming a file in the root of your
|
||||||
content directory `about.md` would also create a page at `[base_url]/about`.
|
content directory `about.md` would create a page at `[base_url]/about`.
|
||||||
Another exception to that rule is that a filename starting with a datetime (YYYY-mm-dd or [a RFC3339 datetime](https://www.ietf.org/rfc/rfc3339.txt)) followed by
|
Another exception to this rule is that a filename starting with a datetime (YYYY-mm-dd or [an RFC3339 datetime](https://www.ietf.org/rfc/rfc3339.txt)) followed by
|
||||||
an underscore (`_`) or a dash (`-`) will use that date as the page date, unless already set
|
an underscore (`_`) or a dash (`-`) will use that date as the page date, unless already set
|
||||||
in the front-matter. The page name will be anything after `_`/`-` so a filename like `2018-10-10-hello-world.md` will
|
in the front matter. The page name will be anything after `_`/`-`, so the file `2018-10-10-hello-world.md` will
|
||||||
be available at `[base_url]/hello-world`. Note that the full RFC3339 datetime contains colons, which is not a valid
|
be available at `[base_url]/hello-world`. Note that the full RFC3339 datetime contains colons, which is not a valid
|
||||||
character in a filename on Windows.
|
character in a filename on Windows.
|
||||||
|
|
||||||
As you can see, creating an `about.md` file is exactly equivalent to creating an
|
As you can see, creating an `about.md` file is equivalent to creating an
|
||||||
`about/index.md` file. The only difference between the two methods is that creating
|
`about/index.md` file. The only difference between the two methods is that creating
|
||||||
the `about` folder allows you to use asset colocation, as discussed in the
|
the `about` directory allows you to use asset co-location, as discussed in the
|
||||||
[Overview](@/documentation/content/overview.md#assets-colocation) section of this documentation.
|
[overview](@/documentation/content/overview.md#asset-co-location) section.
|
||||||
|
|
||||||
## Front-matter
|
## Front matter
|
||||||
|
|
||||||
The front-matter is a set of metadata embedded in a file. In Zola,
|
The TOML front matter is a set of metadata embedded in a file at the beginning of the file enclosed
|
||||||
it is at the beginning of the file, surrounded by `+++` and uses TOML.
|
by triple pluses (`+++`).
|
||||||
|
|
||||||
While none of the front-matter variables are mandatory, the opening and closing `+++` are required.
|
Although none of the front matter variables are mandatory, the opening and closing `+++` are required.
|
||||||
|
|
||||||
Here is an example page with all the variables available. The values provided below are the default
|
Here is an example page with all the available variables. The values provided below are the
|
||||||
values.
|
default values.
|
||||||
|
|
||||||
```toml
|
```TOML
|
||||||
title = ""
|
title = ""
|
||||||
description = ""
|
description = ""
|
||||||
|
|
||||||
# The date of the post.
|
# The date of the post.
|
||||||
# 2 formats are allowed: YYYY-MM-DD (2012-10-02) and RFC3339 (2002-10-02T15:00:00Z)
|
# Two formats are allowed: YYYY-MM-DD (2012-10-02) and RFC3339 (2002-10-02T15:00:00Z).
|
||||||
# Do not wrap dates in quotes, the line below only indicates that there is no default date.
|
# Do not wrap dates in quotes; the line below only indicates that there is no default date.
|
||||||
# If the section variable `sort_by` is set to `date`, then any page that lacks a `date`
|
# If the section variable `sort_by` is set to `date`, then any page that lacks a `date`
|
||||||
# will not be rendered.
|
# will not be rendered.
|
||||||
# Setting this overrides a date set in the filename.
|
# Setting this overrides a date set in the filename.
|
||||||
date =
|
date =
|
||||||
|
|
||||||
# The weight as defined in the Section page
|
# The weight as defined on the Section page of the documentation.
|
||||||
# If the section variable `sort_by` is set to `weight`, then any page that lacks a `weight`
|
# If the section variable `sort_by` is set to `weight`, then any page that lacks a `weight`
|
||||||
# will not be rendered.
|
# will not be rendered.
|
||||||
weight = 0
|
weight = 0
|
||||||
|
|
||||||
# A draft page is only loaded if the `--drafts` flag is passed to `zola build`, `zola serve` or `zola check`
|
# A draft page is only loaded if the `--drafts` flag is passed to `zola build`, `zola serve` or `zola check`.
|
||||||
draft = false
|
draft = false
|
||||||
|
|
||||||
# If filled, it will use that slug instead of the filename to make up the URL
|
# If set, this slug will be instead of the filename to make the URL.
|
||||||
# It will still use the section path though
|
# The section path will still be used.
|
||||||
slug = ""
|
slug = ""
|
||||||
|
|
||||||
# The path the content will appear at
|
# The path the content will appear at.
|
||||||
# If set, it cannot be an empty string and will override both `slug` and the filename.
|
# If set, it cannot be an empty string and will override both `slug` and the filename.
|
||||||
# The sections' path won't be used.
|
# The sections' path won't be used.
|
||||||
# It should not start with a `/` and the slash will be removed if it does
|
# It should not start with a `/` and the slash will be removed if it does.
|
||||||
path = ""
|
path = ""
|
||||||
|
|
||||||
# Use aliases if you are moving content but want to redirect previous URLs to the
|
# Use aliases if you are moving content but want to redirect previous URLs to the
|
||||||
# current one. This takes an array of path, not URLs.
|
# current one. This takes an array of paths, not URLs.
|
||||||
aliases = []
|
aliases = []
|
||||||
|
|
||||||
# Whether the page should be in the search index. This is only used if
|
# When set to "true", the page will be in the search index. This is only used if
|
||||||
# `build_search_index` is set to true in the config and the parent section
|
# `build_search_index` is set to "true" in the Zola configuration and the parent section
|
||||||
# hasn't set `in_search_index` to false in its front-matter
|
# hasn't set `in_search_index` to "false" in its front matter.
|
||||||
in_search_index = true
|
in_search_index = true
|
||||||
|
|
||||||
# Template to use to render this page
|
# Template to use to render this page.
|
||||||
template = "page.html"
|
template = "page.html"
|
||||||
|
|
||||||
# The taxonomies for that page. The keys need to be the same as the taxonomies
|
# The taxonomies for this page. The keys need to be the same as the taxonomy
|
||||||
# name configured in `config.toml` and the values an array of String like
|
# names configured in `config.toml` and the values are an array of String objects. For example,
|
||||||
# tags = ["rust", "web"]
|
# tags = ["rust", "web"].
|
||||||
[taxonomies]
|
[taxonomies]
|
||||||
|
|
||||||
# Your own data
|
# Your own data.
|
||||||
[extra]
|
[extra]
|
||||||
```
|
```
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
You can ask Zola to create a summary if you only want to show the first
|
You can ask Zola to create a summary if, for example, you only want to show the first
|
||||||
paragraph of each page in a list for example.
|
paragraph of the page content in a list.
|
||||||
|
|
||||||
To do so, add <code><!-- more --></code> in your content at the point
|
To do so, add <code><!-- more --></code> in your content at the point
|
||||||
where you want the summary to end and the content up to that point will be also
|
where you want the summary to end. The content up to that point will be
|
||||||
available separately in the
|
available separately in the
|
||||||
[template](@/documentation/templates/pages-sections.md#page-variables).
|
[template](@/documentation/templates/pages-sections.md#page-variables).
|
||||||
|
|
||||||
An anchor link to this position named `continue-reading` is created, wrapped in a paragraph
|
An anchor link to this position named `continue-reading` is created, wrapped in a paragraph
|
||||||
with a `zola-continue-reading` id, so you can link directly to it if needed for example:
|
with a `zola-continue-reading` id, so you can link directly to it if needed. For example:
|
||||||
`<a href="{{ page.permalink }}#continue-reading">Continue Reading</a>`
|
`<a href="{{ page.permalink }}#continue-reading">Continue Reading</a>`.
|
||||||
|
|
|
@ -3,8 +3,8 @@ title = "Sass"
|
||||||
weight = 110
|
weight = 110
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Sass is a popular CSS extension language that approaches some of the harder
|
Sass is a popular CSS preprocessor that adds special features (e.g., variables, nested rules) to facilate the
|
||||||
parts of maintaining large sets of CSS rules. If you're curious about what Sass
|
maintenance of large sets of CSS rules. If you're curious about what Sass
|
||||||
is and why it might be useful for styling your static site, the following links
|
is and why it might be useful for styling your static site, the following links
|
||||||
may be of interest:
|
may be of interest:
|
||||||
|
|
||||||
|
@ -13,7 +13,7 @@ may be of interest:
|
||||||
|
|
||||||
## Using Sass in Zola
|
## Using Sass in Zola
|
||||||
|
|
||||||
Zola processes any files with the `sass` or `scss` extensions in the `sass`
|
Zola processes any files with the `sass` or `scss` extension in the `sass`
|
||||||
folder, and places the processed output into a `css` file with the same folder
|
folder, and places the processed output into a `css` file with the same folder
|
||||||
structure and base name into the `public` folder:
|
structure and base name into the `public` folder:
|
||||||
|
|
||||||
|
@ -38,5 +38,5 @@ folder, but can still be used as `@import` dependencies. For more information, s
|
||||||
|
|
||||||
Files with the `scss` extension use ["Sassy CSS" syntax](http://sass-lang.com/documentation/#Formatting),
|
Files with the `scss` extension use ["Sassy CSS" syntax](http://sass-lang.com/documentation/#Formatting),
|
||||||
while files with the `sass` extension use the ["indented" syntax](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html).
|
while files with the `sass` extension use the ["indented" syntax](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html).
|
||||||
Zola will return an error if a `scss` and `sass` file exist with the same
|
Zola will return an error if `scss` and `sass` files with the same
|
||||||
base name in the same folder to avoid confusion -- see the example above.
|
base name exist in the same folder to avoid confusion -- see the example above.
|
||||||
|
|
|
@ -4,19 +4,19 @@ weight = 100
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Zola can build a search index from the sections and pages content to
|
Zola can build a search index from the sections and pages content to
|
||||||
be used by a JavaScript library: [elasticlunr](http://elasticlunr.com/).
|
be used by a JavaScript library such as [elasticlunr](http://elasticlunr.com/).
|
||||||
|
|
||||||
To enable it, you only need to set `build_search_index = true` in your `config.toml` and Zola will
|
To enable it, you only need to set `build_search_index = true` in your `config.toml` and Zola will
|
||||||
generate an index for the `default_language` set for all pages not excluded from the search index.
|
generate an index for the `default_language` set for all pages not excluded from the search index.
|
||||||
|
|
||||||
It is very important to set the `default_language` in your `config.toml` if you are writing a site not in
|
It is very important to set the `default_language` in your `config.toml` if you are writing a site not in
|
||||||
English: the index building pipelines are very different depending on the language.
|
English; the index building pipelines are very different depending on the language.
|
||||||
|
|
||||||
After `zola build` or `zola serve`, you should see two files in your static directory:
|
After `zola build` or `zola serve`, you should see two files in your static directory:
|
||||||
|
|
||||||
- `search_index.${default_language}.js`: so `search_index.en.js` for a default setup
|
- `search_index.${default_language}.js`: so `search_index.en.js` for a default setup
|
||||||
- `elasticlunr.min.js`
|
- `elasticlunr.min.js`
|
||||||
|
|
||||||
As each site will be different, Zola makes no assumptions about how your search and doesn't provide
|
As each site will be different, Zola makes no assumptions about your search function and doesn't provide
|
||||||
the JavaScript/CSS code to do an actual search and display results. You can however look at how this very site
|
the JavaScript/CSS code to do an actual search and display results. You can look at how this site
|
||||||
is implementing it to have an idea: [search.js](https://github.com/getzola/zola/tree/master/docs/static/search.js).
|
implements it to get an idea: [search.js](https://github.com/getzola/zola/tree/master/docs/static/search.js).
|
||||||
|
|
|
@ -3,115 +3,116 @@ title = "Section"
|
||||||
weight = 20
|
weight = 20
|
||||||
+++
|
+++
|
||||||
|
|
||||||
A section is created whenever a folder (or subfolder) in the `content` section contains an
|
A section is created whenever a directory (or subdirectory) in the `content` section contains an
|
||||||
`_index.md` file. If a folder does not contain an `_index.md` file, no section will be
|
`_index.md` file. If a directory does not contain an `_index.md` file, no section will be
|
||||||
created, but markdown files within that folder will still create pages (known as orphan pages).
|
created, but Markdown files within that directory will still create pages (known as orphan pages).
|
||||||
|
|
||||||
The index page (i.e., the page displayed when a user browses to your `base_url`) is a section,
|
The index page (i.e., the page displayed when a user browses to your `base_url`) is a section,
|
||||||
which is created whether or not you add an `_index.md` file at the root of your `content` folder.
|
which is created whether or not you add an `_index.md` file at the root of your `content` directory.
|
||||||
If you do not create an `_index.md` file in your content directory, this main content section will
|
If you do not create an `_index.md` file in your content directory, this main content section will
|
||||||
not have any content or metadata. If you would like to add content or metadata, you can add an
|
not have any content or metadata. If you would like to add content or metadata, you can add an
|
||||||
`_index.md` file at the root of the `content` folder and edit it just as you would edit any other
|
`_index.md` file at the root of the `content` directory and edit it just as you would edit any other
|
||||||
`_index.md` file; your `index.html` template will then have access to that content and metadata.
|
`_index.md` file; your `index.html` template will then have access to that content and metadata.
|
||||||
|
|
||||||
Any non-Markdown file in the section folder is added to the `assets` collection of the section, as explained in the [Content Overview](@/documentation/content/overview.md#assets-colocation). These files are then available from the Markdown using relative links.
|
Any non-Markdown file in a section directory is added to the `assets` collection of the section, as explained in the
|
||||||
|
[content overview](@/documentation/content/overview.md#asset-co-location). These files are then available in the
|
||||||
|
Markdown file using relative links.
|
||||||
|
|
||||||
## Front-matter
|
## Front matter
|
||||||
|
|
||||||
The `_index.md` file within a folder defines the content and metadata for that section. To set
|
The `_index.md` file within a directory defines the content and metadata for that section. To set
|
||||||
the metadata, add front matter to the file.
|
the metadata, add front matter to the file.
|
||||||
|
|
||||||
The front-matter is a set of metadata embedded in a file. In Zola,
|
The TOML front matter is a set of metadata embedded in a file at the beginning of the file enclosed by triple pluses (`+++`).
|
||||||
it is at the beginning of the file, surrounded by `+++` and uses TOML.
|
|
||||||
|
|
||||||
After the closing `+++`, you can add content that will be parsed as markdown and will be available
|
After the closing `+++`, you can add content, which will be parsed as Markdown and made available
|
||||||
to your templates through the `section.content` variable.
|
to your templates through the `section.content` variable.
|
||||||
|
|
||||||
While none of the front-matter variables are mandatory, the opening and closing `+++` are required.
|
Although none of the front matter variables are mandatory, the opening and closing `+++` are required.
|
||||||
|
|
||||||
Here is an example `_index.md` with all the variables available. The values provided below are the
|
Here is an example `_index.md` with all the available variables. The values provided below are the
|
||||||
default values.
|
default values.
|
||||||
|
|
||||||
|
|
||||||
```toml
|
```TOML
|
||||||
title = ""
|
title = ""
|
||||||
|
|
||||||
description = ""
|
description = ""
|
||||||
|
|
||||||
# Whether to sort pages by "date", "weight", or "none". More on that below
|
# Used to sort pages by "date", "weight" or "none". See below for more information.
|
||||||
sort_by = "none"
|
sort_by = "none"
|
||||||
|
|
||||||
# Used by the parent section to order its subsections.
|
# Used by the parent section to order its subsections.
|
||||||
# Lower values have priority.
|
# Lower values have higher priority.
|
||||||
weight = 0
|
weight = 0
|
||||||
|
|
||||||
# Template to use to render this section page
|
# Template to use to render this section page.
|
||||||
template = "section.html"
|
template = "section.html"
|
||||||
|
|
||||||
# Apply the given template to ALL pages below the section, recursively.
|
# The given template is applied to ALL pages below the section, recursively.
|
||||||
# If you have several nested sections each with a page_template set, the page
|
# If you have several nested sections, each with a page_template set, the page
|
||||||
# will always use the closest to itself.
|
# will always use the closest to itself.
|
||||||
# However, a page own `template` variable will always have priority.
|
# However, a page's own `template` variable will always have priority.
|
||||||
# Not set by default
|
# Not set by default.
|
||||||
page_template =
|
page_template =
|
||||||
|
|
||||||
# How many pages to be displayed per paginated page.
|
# This sets the number of pages to be displayed per paginated page.
|
||||||
# No pagination will happen if this isn't set or if the value is 0
|
# No pagination will happen if this isn't set or if the value is 0.
|
||||||
paginate_by = 0
|
paginate_by = 0
|
||||||
|
|
||||||
# If set, will be the path used by paginated page and the page number will be appended after it.
|
# If set, this will be the path used by the paginated page. The page number will be appended after this path.
|
||||||
# For example the default would be page/1
|
# The default is page/1.
|
||||||
paginate_path = "page"
|
paginate_path = "page"
|
||||||
|
|
||||||
# Whether to insert a link for each header like the ones you can see in this site if you hover one
|
# This determines whether to insert a link for each header like the ones you can see on this site if you hover over
|
||||||
# The default template can be overridden by creating a `anchor-link.html` in the `templates` directory
|
# a header.
|
||||||
# Options are "left", "right" and "none"
|
# The default template can be overridden by creating an `anchor-link.html` file in the `templates` directory.
|
||||||
|
# This value can be "left", "right" or "none".
|
||||||
insert_anchor_links = "none"
|
insert_anchor_links = "none"
|
||||||
|
|
||||||
# Whether the section pages should be in the search index. This is only used if
|
# If set to "true", the section pages will be in the search index. This is only used if
|
||||||
# `build_search_index` is set to true in the config
|
# `build_search_index` is set to "true" in the Zola configuration file.
|
||||||
in_search_index = true
|
in_search_index = true
|
||||||
|
|
||||||
# Whether to render that section homepage or not.
|
# If set to "true", the section homepage is rendered.
|
||||||
# Useful when the section is only there to organize things but is not meant
|
# Useful when the section is used to organize pages (not used directly).
|
||||||
# to be used directly
|
|
||||||
render = true
|
render = true
|
||||||
|
|
||||||
# Whether to redirect when landing on that section. Defaults to not being set.
|
# This determines whether to redirect when a user lands on the section. Defaults to not being set.
|
||||||
# Useful for the same reason as `render` but when you don't want a 404 when
|
# Useful for the same reason as `render` but when you don't want a 404 when
|
||||||
# landing on the root section page.
|
# landing on the root section page.
|
||||||
# Example: redirect_to = "documentation/content/overview"
|
# Example: redirect_to = "documentation/content/overview"
|
||||||
redirect_to = ""
|
redirect_to = ""
|
||||||
|
|
||||||
# Whether the section should pass its pages on to the parent section. Defaults to `false`.
|
# If set to "true", the section will pass its pages on to the parent section. Defaults to `false`.
|
||||||
# Useful when the section shouldn't split up the parent section, like
|
# Useful when the section shouldn't split up the parent section, like
|
||||||
# sections for each year under a posts section.
|
# sections for each year under a posts section.
|
||||||
transparent = false
|
transparent = false
|
||||||
|
|
||||||
# Use aliases if you are moving content but want to redirect previous URLs to the
|
# Use aliases if you are moving content but want to redirect previous URLs to the
|
||||||
# current one. This takes an array of path, not URLs.
|
# current one. This takes an array of paths, not URLs.
|
||||||
aliases = []
|
aliases = []
|
||||||
|
|
||||||
# Your own data
|
# Your own data.
|
||||||
[extra]
|
[extra]
|
||||||
```
|
```
|
||||||
|
|
||||||
Keep in mind that any configuration apply only to the direct pages, not to the subsections' pages.
|
Keep in mind that any configuration options apply only to the direct pages, not to the subsections' pages.
|
||||||
|
|
||||||
## Pagination
|
## Pagination
|
||||||
|
|
||||||
To enable pagination for a section's pages, simply set `paginate_by` to a positive number and it will automatically
|
To enable pagination for a section's pages, set `paginate_by` to a positive number. See
|
||||||
paginate by this much. See [pagination template documentation](@/documentation/templates/pagination.md) for more information
|
[pagination template documentation](@/documentation/templates/pagination.md) for more information
|
||||||
on what will be available in the template.
|
on what variables are available in the template.
|
||||||
|
|
||||||
You can also change the pagination path (the word displayed while paginated in the URL, like `page/1`)
|
You can also change the pagination path (the word displayed while paginated in the URL, like `page/1`)
|
||||||
by setting the `paginate_path` variable, which defaults to `page`.
|
by setting the `paginate_path` variable, which defaults to `page`.
|
||||||
|
|
||||||
## Sorting
|
## Sorting
|
||||||
It is very common for Zola templates to iterate over pages or sections
|
It is very common for Zola templates to iterate over pages or sections
|
||||||
to display all pages/sections a given directory. Consider a very simple
|
to display all pages/sections in a given directory. Consider a very simple
|
||||||
example: a `blog` directory with three files: `blog/Post_1.md`,
|
example: a `blog` directory with three files: `blog/Post_1.md`,
|
||||||
`blog/Post_2.md`, and `blog/Post_3.md`. To iterate over these posts and
|
`blog/Post_2.md` and `blog/Post_3.md`. To iterate over these posts and
|
||||||
create a list of links to the posts, a simple template might look like this:
|
create a list of links to the posts, a simple template might look like this:
|
||||||
|
|
||||||
```j2
|
```j2
|
||||||
|
@ -120,21 +121,21 @@ create a list of links to the posts, a simple template might look like this:
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
```
|
```
|
||||||
|
|
||||||
This would iterate over the posts, and would do so in a specific order
|
This would iterate over the posts in the order specified
|
||||||
based on the `sort_by` variable set in the `_index.md` page for the
|
by the `sort_by` variable set in the `_index.md` page for the corresponding
|
||||||
containing section. The `sort_by` variable can be given three values: `date`,
|
section. The `sort_by` variable can be given one of three values: `date`,
|
||||||
`weight`, and `none`. If no `sort_by` method is set, the pages will be
|
`weight` or `none`. If `sort_by` is not set, the pages will be
|
||||||
sorted in the `none` order, which is not intended to be used for sorted content.
|
sorted in the `none` order, which is not intended for sorted content.
|
||||||
|
|
||||||
Any page that is missing the data it needs to be sorted will be ignored and
|
Any page that is missing the data it needs to be sorted will be ignored and
|
||||||
won't be rendered. For example, if a page is missing the date variable the
|
won't be rendered. For example, if a page is missing the date variable and its
|
||||||
containing section sets `sort_by = "date"`, then that page will be ignored.
|
section sets `sort_by = "date"`, then that page will be ignored.
|
||||||
The terminal will warn you if this is happening.
|
The terminal will warn you if this occurs.
|
||||||
|
|
||||||
If several pages have the same date/weight/order, their permalink will be used
|
If several pages have the same date/weight/order, their permalink will be used
|
||||||
to break the tie following an alphabetical order.
|
to break the tie based on alphabetical order.
|
||||||
|
|
||||||
## Sorting Pages
|
## Sorting pages
|
||||||
The `sort_by` front-matter variable can have the following values:
|
The `sort_by` front-matter variable can have the following values:
|
||||||
|
|
||||||
### `date`
|
### `date`
|
||||||
|
@ -150,24 +151,24 @@ page gets `page.lighter` and `page.heavier` variables that contain the
|
||||||
pages with lighter and heavier weights, respectively.
|
pages with lighter and heavier weights, respectively.
|
||||||
|
|
||||||
When iterating through pages, you may wish to use the Tera `reverse` filter,
|
When iterating through pages, you may wish to use the Tera `reverse` filter,
|
||||||
which reverses the order of the pages. Thus, after using the `reverse` filter,
|
which reverses the order of the pages. For example, after using the `reverse` filter,
|
||||||
pages sorted by weight will be sorted from lightest (at the top) to heaviest
|
pages sorted by weight will be sorted from lightest (at the top) to heaviest
|
||||||
(at the bottom); pages sorted by date will be sorted from oldest (at the top)
|
(at the bottom); pages sorted by date will be sorted from oldest (at the top)
|
||||||
to newest (at the bottom).
|
to newest (at the bottom).
|
||||||
|
|
||||||
`reverse` has no effect on `page.later`/`page.earlier`/`page.heavier`/`page.lighter`.
|
`reverse` has no effect on `page.later`/`page.earlier` or `page.heavier`/`page.lighter`.
|
||||||
|
|
||||||
## Sorting Subsections
|
## Sorting subsections
|
||||||
Sorting sections is a bit less flexible: sections are always sorted by `weight`,
|
Sorting sections is a bit less flexible: sections are always sorted by `weight`,
|
||||||
and do not have any variables that point to the next heavier/lighter sections.
|
and do not have variables that point to the heavier/lighter sections.
|
||||||
|
|
||||||
Based on this, by default the lightest (lowest `weight`) subsections will be at
|
By default, the lightest (lowest `weight`) subsections will be at
|
||||||
the top of the list and the heaviest (highest `weight`) will be at the bottom;
|
the top of the list and the heaviest (highest `weight`) will be at the bottom;
|
||||||
the `reverse` filter reverses this order.
|
the `reverse` filter reverses this order.
|
||||||
|
|
||||||
**Note**: Unlike pages, permalinks will **not** be used to break ties between
|
**Note**: Unlike pages, permalinks will **not** be used to break ties between
|
||||||
equally weighted sections. Thus, if the `weight` variable for your section is not set (or if it
|
equally weighted sections. Thus, if the `weight` variable for your section is not set (or if it
|
||||||
is set in a way that produces ties), then your sections will be sorted in
|
is set in a way that produces ties), then your sections will be sorted in
|
||||||
**random** order. Moreover, that order is determined at build time and will
|
**random** order. Moreover, that order is determined at build time and will
|
||||||
change with each site rebuild. Thus, if there is any chance that you will
|
change with each site rebuild. Thus, if there is any chance that you will
|
||||||
iterate over your sections, you should always assign them weight.
|
iterate over your sections, you should always assign them a weight.
|
||||||
|
|
|
@ -3,13 +3,14 @@ title = "Shortcodes"
|
||||||
weight = 40
|
weight = 40
|
||||||
+++
|
+++
|
||||||
|
|
||||||
While Markdown is good at writing, it isn't great when you need write inline
|
Although Markdown is good for writing, it isn't great when you need write inline
|
||||||
HTML to add some styling for example.
|
HTML to add some styling for example.
|
||||||
|
|
||||||
To solve this, Zola borrows the concept of [shortcodes](https://codex.wordpress.org/Shortcode_API)
|
To solve this, Zola borrows the concept of [shortcodes](https://codex.wordpress.org/Shortcode_API)
|
||||||
from WordPress.
|
from WordPress.
|
||||||
In our case, the shortcode corresponds to a template that is defined in the `templates/shortcodes` directory or a built-in one that can
|
In our case, a shortcode corresponds to a template defined in the `templates/shortcodes` directory or
|
||||||
be used in a Markdown file. If you want to use something similar to shortcodes in your templates, try [Tera macros](https://tera.netlify.com/docs#macros).
|
a built-in one that can be used in a Markdown file. If you want to use something similar to shortcodes in your templates, try [Tera macros](https://tera.netlify.com/docs/templates/#macros).
|
||||||
|
|
||||||
|
|
||||||
## Writing a shortcode
|
## Writing a shortcode
|
||||||
Let's write a shortcode to embed YouTube videos as an example.
|
Let's write a shortcode to embed YouTube videos as an example.
|
||||||
|
@ -28,44 +29,44 @@ following:
|
||||||
```
|
```
|
||||||
|
|
||||||
This template is very straightforward: an iframe pointing to the YouTube embed URL wrapped in a `<div>`.
|
This template is very straightforward: an iframe pointing to the YouTube embed URL wrapped in a `<div>`.
|
||||||
In terms of input, it expects at least one variable: `id`. Since the other variables
|
In terms of input, this shortcode expects at least one variable: `id`. Because the other variables
|
||||||
are in a `if` statement, we can assume they are optional.
|
are in an `if` statement, they are optional.
|
||||||
|
|
||||||
That's it, Zola will now recognise this template as a shortcode named `youtube` (the filename minus the `.html` extension).
|
That's it. Zola will now recognise this template as a shortcode named `youtube` (the filename minus the `.html` extension).
|
||||||
|
|
||||||
The markdown renderer will wrap an inline HTML node like `<a>` or `<span>` into a paragraph. If you want to disable that,
|
The Markdown renderer will wrap an inline HTML node such as `<a>` or `<span>` into a paragraph.
|
||||||
simply wrap your shortcode in a `div`.
|
If you want to disable this behaviour, wrap your shortcode in a `<div>`.
|
||||||
|
|
||||||
Shortcodes are rendered before parsing the markdown so it doesn't have access to the table of contents. Because of that,
|
Shortcodes are rendered before the Markdown is parsed so they don't have access to the table of contents. Because of that,
|
||||||
you also cannot use the `get_page`/`get_section`/`get_taxonomy` global function. It might work while running `zola serve` because
|
you also cannot use the `get_page`/`get_section`/`get_taxonomy` global functions. It might work while running
|
||||||
it has been loaded but it will fail during `zola build`.
|
`zola serve` because it has been loaded but it will fail during `zola build`.
|
||||||
|
|
||||||
## Using shortcodes
|
## Using shortcodes
|
||||||
|
|
||||||
There are two kinds of shortcodes:
|
There are two kinds of shortcodes:
|
||||||
|
|
||||||
- ones that do not take a body like the YouTube example above
|
- ones that do not take a body, such as the YouTube example above
|
||||||
- ones that do, a quote for example
|
- ones that do, such as one that styles a quote
|
||||||
|
|
||||||
In both cases, their arguments must be named and they will all be passed to the template.
|
In both cases, the arguments must be named and they will all be passed to the template.
|
||||||
|
|
||||||
Lastly, a shortcode name (and thus the corresponding `.html` file) as well as the arguments name
|
Lastly, a shortcode name (and thus the corresponding `.html` file) as well as the argument names
|
||||||
can only contain numbers, letters and underscores, or in Regex terms the following: `[0-9A-Za-z_]`.
|
can only contain numbers, letters and underscores, or in Regex terms `[0-9A-Za-z_]`.
|
||||||
While theoretically an argument name could be a number, it will not be possible to use it in the template in that case.
|
Although theoretically an argument name could be a number, it will not be possible to use such an argument in the template.
|
||||||
|
|
||||||
Argument values can be of 5 types:
|
Argument values can be of one of five types:
|
||||||
|
|
||||||
- string: surrounded by double quotes, single quotes or backticks
|
- string: surrounded by double quotes, single quotes or backticks
|
||||||
- bool: `true` or `false`
|
- bool: `true` or `false`
|
||||||
- float: a number with a `.` in it
|
- float: a number with a decimal point (e.g., 1.2)
|
||||||
- integer: a number without a `.` in it
|
- integer: a whole number or its negative counterpart (e.g., 3)
|
||||||
- array: an array of any kind of values, except arrays
|
- array: an array of any kind of value, except arrays
|
||||||
|
|
||||||
Malformed values will be silently ignored.
|
Malformed values will be silently ignored.
|
||||||
|
|
||||||
Both type of shortcodes will also get either a `page` or `section` variable depending on where they were used and a `config`
|
Both types of shortcode will also get either a `page` or `section` variable depending on where they were used
|
||||||
one. Those values will overwrite any arguments passed to a shortcode so shortcodes should not use arguments called like one
|
and a `config` variable. These values will overwrite any arguments passed to a shortcode so these variable names
|
||||||
of these.
|
should not be used as argument names in shortcodes.
|
||||||
|
|
||||||
### Shortcodes without body
|
### Shortcodes without body
|
||||||
|
|
||||||
|
@ -86,7 +87,7 @@ Note that if you want to have some content that looks like a shortcode but not h
|
||||||
you will need to escape it by using `{{/*` and `*/}}` instead of `{{` and `}}`.
|
you will need to escape it by using `{{/*` and `*/}}` instead of `{{` and `}}`.
|
||||||
|
|
||||||
### Shortcodes with body
|
### Shortcodes with body
|
||||||
For example, let's imagine we have the following shortcode `quote.html` template:
|
Let's imagine that we have the following shortcode `quote.html` template:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
<blockquote>
|
<blockquote>
|
||||||
|
@ -95,7 +96,7 @@ For example, let's imagine we have the following shortcode `quote.html` template
|
||||||
</blockquote>
|
</blockquote>
|
||||||
```
|
```
|
||||||
|
|
||||||
We could use it in our markup file like so:
|
We could use it in our Markdown file like so:
|
||||||
|
|
||||||
```md
|
```md
|
||||||
As someone said:
|
As someone said:
|
||||||
|
@ -106,7 +107,7 @@ A quote
|
||||||
```
|
```
|
||||||
|
|
||||||
The body of the shortcode will be automatically passed down to the rendering context as the `body` variable and needs
|
The body of the shortcode will be automatically passed down to the rendering context as the `body` variable and needs
|
||||||
to be in a newline.
|
to be on a new line.
|
||||||
|
|
||||||
If you want to have some content that looks like a shortcode but not have Zola try to render it,
|
If you want to have some content that looks like a shortcode but not have Zola try to render it,
|
||||||
you will need to escape it by using `{%/*` and `*/%}` instead of `{%` and `%}`. You won't need to escape
|
you will need to escape it by using `{%/*` and `*/%}` instead of `{%` and `%}`. You won't need to escape
|
||||||
|
@ -124,8 +125,8 @@ Embed a responsive player for a YouTube video.
|
||||||
The arguments are:
|
The arguments are:
|
||||||
|
|
||||||
- `id`: the video id (mandatory)
|
- `id`: the video id (mandatory)
|
||||||
- `class`: a class to add the `div` surrounding the iframe
|
- `class`: a class to add to the `<div>` surrounding the iframe
|
||||||
- `autoplay`: whether to autoplay the video on load
|
- `autoplay`: when set to "true", the video autoplays on load
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
|
@ -147,7 +148,7 @@ Embed a player for a Vimeo video.
|
||||||
The arguments are:
|
The arguments are:
|
||||||
|
|
||||||
- `id`: the video id (mandatory)
|
- `id`: the video id (mandatory)
|
||||||
- `class`: a class to add the `div` surrounding the iframe
|
- `class`: a class to add to the `<div>` surrounding the iframe
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
|
@ -167,7 +168,7 @@ Embed a player for a Streamable video.
|
||||||
The arguments are:
|
The arguments are:
|
||||||
|
|
||||||
- `id`: the video id (mandatory)
|
- `id`: the video id (mandatory)
|
||||||
- `class`: a class to add the `div` surrounding the iframe
|
- `class`: a class to add to the `<div>` surrounding the iframe
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
|
@ -188,7 +189,7 @@ The arguments are:
|
||||||
|
|
||||||
- `url`: the url to the gist (mandatory)
|
- `url`: the url to the gist (mandatory)
|
||||||
- `file`: by default, the shortcode will pull every file from the URL unless a specific filename is requested
|
- `file`: by default, the shortcode will pull every file from the URL unless a specific filename is requested
|
||||||
- `class`: a class to add the `div` surrounding the iframe
|
- `class`: a class to add to the `<div>` surrounding the iframe
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
|
|
||||||
|
|
|
@ -17,10 +17,10 @@ let highlight = true;
|
||||||
|
|
||||||
````
|
````
|
||||||
|
|
||||||
You can replace the `rust` by the language you want to highlight or not put anything to get it
|
You can replace `rust` with another language or not put anything to get the text
|
||||||
interpreted as plain text.
|
interpreted as plain text.
|
||||||
|
|
||||||
Here is a full list of the supported languages and the short names you can use:
|
Here is a full list of supported languages and their short names:
|
||||||
|
|
||||||
```
|
```
|
||||||
- ActionScript -> ["as"]
|
- ActionScript -> ["as"]
|
||||||
|
@ -123,8 +123,8 @@ Here is a full list of the supported languages and the short names you can use:
|
||||||
- YAML -> ["sublime-syntax", "yaml", "yml"]
|
- YAML -> ["sublime-syntax", "yaml", "yml"]
|
||||||
```
|
```
|
||||||
|
|
||||||
If you want to highlight a language not on that list, please open an issue or a pull request on the [Zola repo](https://github.com/getzola/zola).
|
If you want to highlight a language not on this list, please open an issue or a pull request on the [Zola repo](https://github.com/getzola/zola).
|
||||||
Alternatively, the `extra_syntaxes` config option can be used to add additional syntax files.
|
Alternatively, the `extra_syntaxes` configuration option can be used to add additional syntax files.
|
||||||
|
|
||||||
If your site source is laid out as follows:
|
If your site source is laid out as follows:
|
||||||
|
|
||||||
|
@ -143,4 +143,4 @@ If your site source is laid out as follows:
|
||||||
└── ...
|
└── ...
|
||||||
```
|
```
|
||||||
|
|
||||||
you would set your `extra_syntaxes` to `["syntaxes", "syntaxes/Sublime-Language1"]` in order to load `lang1.sublime-syntax` and `lang2.sublime-syntax`.
|
you would set your `extra_syntaxes` to `["syntaxes", "syntaxes/Sublime-Language1"]` to load `lang1.sublime-syntax` and `lang2.sublime-syntax`.
|
||||||
|
|
|
@ -9,7 +9,7 @@ It is available in the template through the `page.toc` or `section.toc` variable
|
||||||
You can view the [template variables](@/documentation/templates/pages-sections.md#table-of-contents)
|
You can view the [template variables](@/documentation/templates/pages-sections.md#table-of-contents)
|
||||||
documentation for information on its structure.
|
documentation for information on its structure.
|
||||||
|
|
||||||
Here is an example of using that field to render a 2-level table of contents:
|
Here is an example of using that field to render a two-level table of contents:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -30,7 +30,7 @@ Here is an example of using that field to render a 2-level table of contents:
|
||||||
</ul>
|
</ul>
|
||||||
```
|
```
|
||||||
|
|
||||||
While headers are neatly ordered in that example, it will work just as well with disjoint headers.
|
While headers are neatly ordered in this example, it will work just as well with disjoint headers.
|
||||||
|
|
||||||
Note that all existing HTML tags from the title will NOT be present in the table of contents to
|
Note that all existing HTML tags from the title will NOT be present in the table of contents to
|
||||||
avoid various issues.
|
avoid various issues.
|
||||||
|
|
|
@ -7,13 +7,13 @@ Zola has built-in support for taxonomies.
|
||||||
|
|
||||||
The first step is to define the taxonomies in your [config.toml](@/documentation/getting-started/configuration.md).
|
The first step is to define the taxonomies in your [config.toml](@/documentation/getting-started/configuration.md).
|
||||||
|
|
||||||
A taxonomy has 5 variables:
|
A taxonomy has five variables:
|
||||||
|
|
||||||
- `name`: a required string that will be used in the URLs, usually the plural version (i.e. tags, categories etc)
|
- `name`: a required string that will be used in the URLs, usually the plural version (i.e., tags, categories, etc.)
|
||||||
- `paginate_by`: if this is set to a number, each term page will be paginated by this much.
|
- `paginate_by`: if this is set to a number, each term page will be paginated by this much.
|
||||||
- `paginate_path`: if set, will be the path used by paginated page and the page number will be appended after it.
|
- `paginate_path`: if set, this path will be used by the paginated page and the page number will be appended after it.
|
||||||
For example the default would be page/1
|
For example the default would be page/1.
|
||||||
- `rss`: if set to `true`, a RSS feed will be generated for each individual term.
|
- `rss`: if set to `true`, an RSS feed will be generated for each term.
|
||||||
- `lang`: only set this if you are making a multilingual site and want to indicate which language this taxonomy is for
|
- `lang`: only set this if you are making a multilingual site and want to indicate which language this taxonomy is for
|
||||||
|
|
||||||
Once this is done, you can then set taxonomies in your content and Zola will pick
|
Once this is done, you can then set taxonomies in your content and Zola will pick
|
||||||
|
|
|
@ -3,25 +3,31 @@ title = "GitHub Pages"
|
||||||
weight = 30
|
weight = 30
|
||||||
+++
|
+++
|
||||||
|
|
||||||
By default, GitHub Pages uses Jekyll (A ruby based static site generator),
|
By default, GitHub Pages uses Jekyll (a ruby based static site generator),
|
||||||
but you can also publish any generated files provided you have an `index.html` file in the root of a branch called `gh-pages` or `master`, in addition you can also publish from a `docs` directory in your repository. That branch name can also be manually changed in the settings of a repository. **However** this only applies to publishing in a custom domain, i.e. if you want to publish to a GitHub provided web service under the `github.io` domain, you can **only** use the `master` branch of your repository as explained [here](https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages), so we will focus on the method which will work regardless of the domain.
|
but you can also publish any generated files provided you have an `index.html` file in the root of a branch called
|
||||||
|
`gh-pages` or `master`. In addition you can publish from a `docs` directory in your repository. That branch name can
|
||||||
|
also be manually changed in the settings of a repository. **However**, this only applies to publishing in a custom domain,
|
||||||
|
i.e., if you want to publish to a GitHub-provided web service under the `github.io` domain, you can **only** use the
|
||||||
|
`master` branch of your repository, as explained
|
||||||
|
[here](https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages),
|
||||||
|
so we will focus on the method that will work regardless of the domain.
|
||||||
|
|
||||||
We can use any CI server to build and deploy our site. For example:
|
We can use any continuous integration (CI) server to build and deploy our site. For example:
|
||||||
|
|
||||||
* [Github Actions](https://github.com/shalzz/zola-deploy-action)
|
* [Github Actions](https://github.com/shalzz/zola-deploy-action)
|
||||||
* [Travis CI](#travis-ci)
|
* [Travis CI](#travis-ci)
|
||||||
|
|
||||||
## Travis CI
|
## Travis CI
|
||||||
|
|
||||||
We are going to use [TravisCI](https://travis-ci.org) to automatically publish the site. If you are not using Travis already,
|
We are going to use [Travis CI](https://travis-ci.org) to automatically publish the site. If you are not using Travis
|
||||||
you will need to login with the GitHub OAuth and activate Travis for the repository.
|
already, you will need to login with the GitHub OAuth and activate Travis for the repository.
|
||||||
Don't forget to also check if your repository allows GitHub Pages in its settings.
|
Don't forget to also check if your repository allows GitHub Pages in its settings.
|
||||||
|
|
||||||
## Ensure Travis can access your theme
|
## Ensure that Travis can access your theme
|
||||||
|
|
||||||
Depending on how you added your theme Travis may not exactly know how to access
|
Depending on how you added your theme, Travis may not know how to access
|
||||||
it. The best way to ensure it will have full access to the theme is to use git
|
it. The best way to ensure that it will have full access to the theme is to use git
|
||||||
submodules. When doing this ensure you are using the `https` version of the URL.
|
submodules. When doing this, ensure that you are using the `https` version of the URL.
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ git submodule add {THEME_URL} themes/{THEME_NAME}
|
$ git submodule add {THEME_URL} themes/{THEME_NAME}
|
||||||
|
@ -29,16 +35,17 @@ $ git submodule add {THEME_URL} themes/{THEME_NAME}
|
||||||
|
|
||||||
## Allowing Travis to push to GitHub
|
## Allowing Travis to push to GitHub
|
||||||
|
|
||||||
Before pushing anything, Travis needs a Github private access key in order to make changes to your repository.
|
Before pushing anything, Travis needs a Github private access key to make changes to your repository.
|
||||||
If you're already logged in to your account, just click [here](https://github.com/settings/tokens) to go to your tokens page.
|
If you're already logged in to your account, just click [here](https://github.com/settings/tokens) to go to
|
||||||
|
your tokens page.
|
||||||
Otherwise, navigate to `Settings > Developer Settings > Personal Access Tokens`.
|
Otherwise, navigate to `Settings > Developer Settings > Personal Access Tokens`.
|
||||||
Generate a new token, and give it any description you'd like.
|
Generate a new token and give it any description you'd like.
|
||||||
Under the "Select Scopes" section, give it repo permissions. Click "Generate token" to finish up.
|
Under the "Select Scopes" section, give it repo permissions. Click "Generate token" to finish up.
|
||||||
|
|
||||||
Your token will now be visible!
|
Your token will now be visible.
|
||||||
Copy it into your clipboard and head back to Travis.
|
Copy it into your clipboard and head back to Travis.
|
||||||
Once on Travis, click on your project, and navigate to "Settings". Scroll down to "Environment Variables" and input a name of `GH_TOKEN` with a value of your access token.
|
Once on Travis, click on your project, and navigate to "Settings". Scroll down to "Environment Variables" and input a name of `GH_TOKEN` with a value of your access token.
|
||||||
Make sure "Display value in build log" is off, and then click add. Now Travis has access to your repository.
|
Make sure that "Display value in build log" is off, and then click add. Now Travis has access to your repository.
|
||||||
|
|
||||||
## Setting up Travis
|
## Setting up Travis
|
||||||
|
|
||||||
|
@ -68,7 +75,7 @@ after_success: |
|
||||||
git push -fq https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git master
|
git push -fq https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git master
|
||||||
```
|
```
|
||||||
|
|
||||||
If your site is using a custom domain, you will need to mention it in the `ghp-import` command: `ghp-import -c vaporsoft.net -n public`
|
If your site is using a custom domain, you will need to mention it in the `ghp-import` command:
|
||||||
for example.
|
`ghp-import -c vaporsoft.net -n public` for example.
|
||||||
|
|
||||||
Credits: this page is based on the article https://vaporsoft.net/publishing-gutenberg-to-github/
|
Credits: this page is based on the article https://vaporsoft.net/publishing-gutenberg-to-github/
|
||||||
|
|
|
@ -9,7 +9,7 @@ We are going to use the GitLab CI runner to automatically publish the site (this
|
||||||
|
|
||||||
Your repository needs to be set up to be a user or group website. This means the name of the repository has to be in the correct format.
|
Your repository needs to be set up to be a user or group website. This means the name of the repository has to be in the correct format.
|
||||||
|
|
||||||
For example, under your username, `john`, you have to create a project called `john.gitlab.io`. Your project URL will be `https://gitlab.com/john/john.gitlab.io`. Once you enable GitLab Pages for your project, your website will be published under `https://john.gitlab.io`.
|
For example, assuming that the username is `john`, you have to create a project called `john.gitlab.io`. Your project URL will be `https://gitlab.com/john/john.gitlab.io`. Once you enable GitLab Pages for your project, your website will be published under `https://john.gitlab.io`.
|
||||||
|
|
||||||
Under your group `websites`, you created a project called `websites.gitlab.io`. Your project’s URL will be `https://gitlab.com/websites/websites.gitlab.io`. Once you enable GitLab Pages for your project, your website will be published under `https://websites.gitlab.io`.
|
Under your group `websites`, you created a project called `websites.gitlab.io`. Your project’s URL will be `https://gitlab.com/websites/websites.gitlab.io`. Once you enable GitLab Pages for your project, your website will be published under `https://websites.gitlab.io`.
|
||||||
|
|
||||||
|
@ -18,23 +18,23 @@ This guide assumes that your zola project is located in the root of your reposit
|
||||||
|
|
||||||
## Ensuring that the CI runner can access your theme
|
## Ensuring that the CI runner can access your theme
|
||||||
|
|
||||||
Depending on how you added your theme your repository may not contain it. The best way to ensure the theme will be added is to use
|
Depending on how you added your theme, your repository may not contain it. The best way to ensure that the theme will
|
||||||
submodules. When doing this ensure you are using the `https` version of the URL.
|
be added is to use submodules. When doing this, ensure that you are using the `https` version of the URL.
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ git submodule add {THEME_URL} themes/{THEME_NAME}
|
$ git submodule add {THEME_URL} themes/{THEME_NAME}
|
||||||
```
|
```
|
||||||
|
|
||||||
For example, this could look like
|
For example, this could look like:
|
||||||
```shell
|
```shell
|
||||||
$ git submodule add https://github.com/getzola/hyde.git themes/hyde
|
$ git submodule add https://github.com/getzola/hyde.git themes/hyde
|
||||||
```
|
```
|
||||||
|
|
||||||
## Setting up the GitLab CI/CD Runner
|
## Setting up the GitLab CI/CD Runner
|
||||||
|
|
||||||
The second step is to tell the gitlab continous integration runner how to create the gitlab page.
|
The second step is to tell the GitLab continous integration runner how to create the GitLab page.
|
||||||
|
|
||||||
To do this, create a file called `.gitlab-ci.yml` in the root directory of your repository.
|
To do this, create a file called `.gitlab-ci.yml` in the root directory of your repository.
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
variables:
|
variables:
|
||||||
|
@ -62,7 +62,8 @@ pages:
|
||||||
- master
|
- master
|
||||||
```
|
```
|
||||||
|
|
||||||
Push this new file and... Tada! You're done! If you navigate to `settings > pages` you should be able to see something like this:
|
Push this new file and ... Tada! You're done! If you navigate to `settings > pages`, you should be able to see
|
||||||
|
something like this:
|
||||||
|
|
||||||
> Congratulations! Your pages are served under:
|
> Congratulations! Your pages are served under:
|
||||||
https://john.gitlab.io
|
https://john.gitlab.io
|
||||||
|
|
|
@ -4,12 +4,12 @@ weight = 20
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Netlify provides best practices like SSL, CDN distribution, caching and continuous deployment
|
Netlify provides best practices like SSL, CDN distribution, caching and continuous deployment
|
||||||
with no effort. This very site is hosted by Netlify and automatically deployed on commits.
|
with no effort. This site is hosted by Netlify and automatically deployed on commits.
|
||||||
|
|
||||||
If you don't have an account with Netlify, you can [sign up](https://app.netlify.com) for one.
|
If you don't have an account with Netlify, you can [sign up](https://app.netlify.com) for one.
|
||||||
|
|
||||||
|
|
||||||
## Automatic Deploys
|
## Automatic deploys
|
||||||
|
|
||||||
Once you are in the admin interface, you can add a site from a Git provider (GitHub, GitLab or Bitbucket). At the end
|
Once you are in the admin interface, you can add a site from a Git provider (GitHub, GitLab or Bitbucket). At the end
|
||||||
of this process, you can select the deploy settings for the project:
|
of this process, you can select the deploy settings for the project:
|
||||||
|
@ -20,27 +20,27 @@ Once you are in the admin interface, you can add a site from a Git provider (Git
|
||||||
- Environment variables: `ZOLA_VERSION` with for example `0.8.0` as value
|
- Environment variables: `ZOLA_VERSION` with for example `0.8.0` as value
|
||||||
|
|
||||||
With this setup, your site should be automatically deployed on every commit on master. For `ZOLA_VERSION`, you may
|
With this setup, your site should be automatically deployed on every commit on master. For `ZOLA_VERSION`, you may
|
||||||
use any of the tagged `release` versions in the GitHub repository — Netlify will automatically fetch the tagged version
|
use any of the tagged `release` versions in the GitHub repository. Netlify will automatically fetch the tagged version
|
||||||
and use it to build your site.
|
and use it to build your site.
|
||||||
|
|
||||||
However, if you want to use everything that Netlify gives you, you should also publish temporary sites for pull requests.
|
However, if you want to use everything that Netlify gives you, you should also publish temporary sites for pull requests.
|
||||||
|
|
||||||
This is done by adding the following `netlify.toml` file in your repository and removing the build command/publish directory in
|
This is done by adding the following `netlify.toml` file in your repository and removing the build command/publish
|
||||||
the admin interface.
|
directory in the admin interface.
|
||||||
|
|
||||||
```toml
|
```TOML
|
||||||
[build]
|
[build]
|
||||||
# assuming the Zola site is in a docs folder, if it isn't you don't need
|
# This assumes that the Zola site is in a docs folder. If it isn't, you don't need
|
||||||
# to have a `base` variable but you do need the `publish` and `command`
|
# to have a `base` variable but you do need the `publish` and `command` variables.
|
||||||
base = "docs"
|
base = "docs"
|
||||||
publish = "docs/public"
|
publish = "docs/public"
|
||||||
command = "zola build"
|
command = "zola build"
|
||||||
|
|
||||||
[build.environment]
|
[build.environment]
|
||||||
# Set the version name that you want to use and Netlify will automatically use it
|
# Set the version name that you want to use and Netlify will automatically use it.
|
||||||
ZOLA_VERSION = "0.9.0"
|
ZOLA_VERSION = "0.9.0"
|
||||||
|
|
||||||
# The magic for deploying previews of branches
|
# The magic for deploying previews of branches.
|
||||||
# We need to override the base url with whatever url Netlify assigns to our
|
# We need to override the base url with whatever url Netlify assigns to our
|
||||||
# preview site. We do this using the Netlify environment variable
|
# preview site. We do this using the Netlify environment variable
|
||||||
# `$DEPLOY_PRIME_URL`.
|
# `$DEPLOY_PRIME_URL`.
|
||||||
|
@ -49,17 +49,18 @@ ZOLA_VERSION = "0.9.0"
|
||||||
command = "zola build --base-url $DEPLOY_PRIME_URL"
|
command = "zola build --base-url $DEPLOY_PRIME_URL"
|
||||||
```
|
```
|
||||||
|
|
||||||
## Manual Deploys
|
## Manual deploys
|
||||||
If you would prefer to use a version of Zola that isn't a tagged release (for example, after having built Zola from
|
If you would prefer to use a version of Zola that isn't a tagged release (for example, after having built Zola from
|
||||||
source and made modifications), then you will need to manually deploy your `public` folder to Netlify. You can do this through
|
source and made modifications), then you will need to manually deploy your `public` folder to Netlify. You can do
|
||||||
Netlify's web GUI or via the command line.
|
this through Netlify's web GUI or via the command line.
|
||||||
|
|
||||||
For a command-line manual deploy, follow these steps:
|
For a command-line manual deploy, follow these steps:
|
||||||
1. Generate a `Personal Access Token` from the settings section of your Netlify account (*not* an OAuth Application)
|
1. Generate a `Personal Access Token` from the settings section of your Netlify account (*not* an OAuth Application).
|
||||||
2. Build your site with `zola build`
|
2. Build your site with `zola build`.
|
||||||
3. Create a zip folder containing the `public` directory
|
3. Create a zip folder containing the `public` directory.
|
||||||
4. Run the `curl` command below, filling in your values for PERSONAL_ACCESS_TOKEN_FROM_STEP_1, FILE_NAME.zip and SITE_NAME
|
4. Run the `curl` command below, filling in your values for PERSONAL_ACCESS_TOKEN_FROM_STEP_1, FILE_NAME.zip
|
||||||
5. (Optional) delete the zip folder
|
and SITE_NAME.
|
||||||
|
5. (Optional) delete the zip folder.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
curl -H "Content-Type: application/zip" \
|
curl -H "Content-Type: application/zip" \
|
||||||
|
|
|
@ -1,24 +1,24 @@
|
||||||
+++
|
+++
|
||||||
title = "CLI usage"
|
title = "CLI usage"
|
||||||
weight = 2
|
weight = 20
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Zola only has 4 commands: `init`, `build`, `serve` and `check`.
|
Zola only has 4 commands: `init`, `build`, `serve` and `check`.
|
||||||
|
|
||||||
You can view the help of the whole program by running `zola --help` and
|
You can view the help for the whole program by running `zola --help` and
|
||||||
the command help by running `zola <cmd> --help`.
|
that for a specific command by running `zola <cmd> --help`.
|
||||||
|
|
||||||
## init
|
## init
|
||||||
|
|
||||||
Creates the directory structure used by Zola at the given directory after asking a few basic configuration questions.
|
Creates the directory structure used by Zola at the given directory after asking a few basic configuration questions.
|
||||||
Any choices made during those prompts can easily be changed by modifying the `config.toml`.
|
Any choices made during these prompts can be easily changed by modifying `config.toml`.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ zola init my_site
|
$ zola init my_site
|
||||||
$ zola init
|
$ zola init
|
||||||
```
|
```
|
||||||
|
|
||||||
If the `my_site` folder already exists, Zola will only populate it if it does not contain non-hidden files (dotfiles are ignored). If no `my_site` argument is passed, Zola will try to populate the current directory.
|
If the `my_site` directory already exists, Zola will only populate it if it contains only hidden files (dotfiles are ignored). If no `my_site` argument is passed, Zola will try to populate the current directory.
|
||||||
|
|
||||||
You can initialize a git repository and a Zola site directly from within a new folder:
|
You can initialize a git repository and a Zola site directly from within a new folder:
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@ $ zola init
|
||||||
|
|
||||||
## build
|
## build
|
||||||
|
|
||||||
This will build the whole site in the `public` directory after deleting it.
|
This will build the whole site in the `public` directory (if this directory already exists, it is overwritten).
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ zola build
|
$ zola build
|
||||||
|
@ -44,34 +44,33 @@ $ zola build --base-url $DEPLOY_URL
|
||||||
This is useful for example when you want to deploy previews of a site to a dynamic URL, such as Netlify
|
This is useful for example when you want to deploy previews of a site to a dynamic URL, such as Netlify
|
||||||
deploy previews.
|
deploy previews.
|
||||||
|
|
||||||
You can override the default output directory 'public' by passing a other value to the `output-dir` flag.
|
You can override the default output directory `public` by passing another value to the `output-dir` flag.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ zola build --output-dir $DOCUMENT_ROOT
|
$ zola build --output-dir $DOCUMENT_ROOT
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also point to another config file than `config.toml` like so - the position of the `config` option is important:
|
You can also point to a config file other than `config.toml` like so (note that the position of the `config` option is important):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ zola --config config.staging.toml build
|
$ zola --config config.staging.toml build
|
||||||
```
|
```
|
||||||
|
|
||||||
By defaults, drafts are not loaded. If you wish to include them, pass the `--drafts` flag.
|
By default, drafts are not loaded. If you wish to include them, pass the `--drafts` flag.
|
||||||
|
|
||||||
## serve
|
## serve
|
||||||
|
|
||||||
This will build and serve the site using a local server. You can also specify
|
This will build and serve the site using a local server. You can also specify
|
||||||
the interface/port combination to use if you want something different than the default (`127.0.0.1:1111`).
|
the interface/port combination to use if you want something different than the default (`127.0.0.1:1111`).
|
||||||
|
|
||||||
You can also specify different addresses for the interface and base_url using `-u`/`--base-url`, for example
|
You can also specify different addresses for the interface and base_url using `--interface` and `-u`/`--base-url`, respectively, if for example you are running Zola in a Docker container.
|
||||||
if you are running zola in a Docker container.
|
|
||||||
|
|
||||||
Use the `--open` flag to automatically open the locally hosted instance in your
|
Use the `--open` flag to automatically open the locally hosted instance in your
|
||||||
web browser.
|
web browser.
|
||||||
|
|
||||||
In the event you don't want zola to run a local webserver, you can use the `--watch-only` flag.
|
In the event you don't want Zola to run a local webserver, you can use the `--watch-only` flag.
|
||||||
|
|
||||||
Before starting, it will delete the public directory to ensure it starts from a clean slate.
|
Before starting, Zola will delete the `public` directory to start from a clean slate.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ zola serve
|
$ zola serve
|
||||||
|
@ -84,40 +83,40 @@ $ zola serve --watch-only
|
||||||
$ zola serve --open
|
$ zola serve --open
|
||||||
```
|
```
|
||||||
|
|
||||||
The serve command will watch all your content and will provide live reload, without
|
The serve command will watch all your content and provide live reload without
|
||||||
hard refresh if possible.
|
a hard refresh if possible.
|
||||||
|
|
||||||
Zola does a best-effort to live reload but some changes cannot be handled automatically. If you
|
Some changes cannot be handled automatically and thus live reload may not always work. If you
|
||||||
fail to see your change or get a weird error, try to restart `zola serve`.
|
fail to see your change or get an error, try restarting `zola serve`.
|
||||||
|
|
||||||
|
|
||||||
You can also point to another config file than `config.toml` like so - the position of the `config` option is important:
|
You can also point to a config file other than `config.toml` like so (note that the position of the `config` option is important):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ zola --config config.staging.toml serve
|
$ zola --config config.staging.toml serve
|
||||||
```
|
```
|
||||||
|
|
||||||
By defaults, drafts are not loaded. If you wish to include them, pass the `--drafts` flag.
|
By default, drafts are not loaded. If you wish to include them, pass the `--drafts` flag.
|
||||||
|
|
||||||
### check
|
### check
|
||||||
|
|
||||||
The check subcommand will try to build all pages just like the build command would, but without writing any of the
|
The check subcommand will try to build all pages just like the build command would, but without writing any of the
|
||||||
results to disk. Additionally, it will also check all external links present in Markdown files by trying to fetch
|
results to disk. Additionally, it will also check all external links in Markdown files by trying to fetch
|
||||||
them (links present in the template files will not be checked).
|
them (links in the template files are not checked).
|
||||||
|
|
||||||
By defaults, drafts are not loaded. If you wish to include them, pass the `--drafts` flag.
|
By default, drafts are not loaded. If you wish to include them, pass the `--drafts` flag.
|
||||||
|
|
||||||
## Colored output
|
## Colored output
|
||||||
|
|
||||||
Any of the three commands will emit colored output if your terminal supports it.
|
Colored output is used if your terminal supports it.
|
||||||
|
|
||||||
*Note*: coloring is automatically disabled when the output is redirected to a pipe or a file (ie. when the standard output is not a TTY).
|
*Note*: coloring is automatically disabled when the output is redirected to a pipe or a file (i.e., when the standard output is not a TTY).
|
||||||
|
|
||||||
You can disable this behavior by exporting one of the two following environment variables:
|
You can disable this behavior by exporting one of the following two environment variables:
|
||||||
|
|
||||||
- `NO_COLOR` (the value does not matter)
|
- `NO_COLOR` (the value does not matter)
|
||||||
- `CLICOLOR=0`
|
- `CLICOLOR=0`
|
||||||
|
|
||||||
Should you want to force the use of colors, you can set the following environment variable:
|
To force the use of colors, you can set the following environment variable:
|
||||||
|
|
||||||
- `CLICOLOR_FORCE=1`
|
- `CLICOLOR_FORCE=1`
|
||||||
|
|
|
@ -3,51 +3,51 @@ title = "Configuration"
|
||||||
weight = 4
|
weight = 4
|
||||||
+++
|
+++
|
||||||
|
|
||||||
The default configuration will be enough to get Zola running locally but not more than that.
|
The default configuration is sufficient to get Zola running locally but not more than that.
|
||||||
It follows the philosophy of only paying for what you need: almost everything is turned off by default.
|
It follows the philosophy of paying for only what you need; almost everything is turned off by default.
|
||||||
|
|
||||||
To change the config, edit the `config.toml` file.
|
To change the configuration, edit the `config.toml` file.
|
||||||
If you are not familiar with TOML, have a look at [the TOML Spec](https://github.com/toml-lang/toml)
|
If you are not familiar with TOML, have a look at [the TOML spec](https://github.com/toml-lang/toml).
|
||||||
to learn about it.
|
|
||||||
|
|
||||||
Only one variable - `base_url` - is mandatory, everything else is optional. You can find all variables
|
Only the `base_url` variable is mandatory; everything else is optional. All configuration variables
|
||||||
used by Zola config as well as their default values below:
|
used by Zola as well as their default values are listed below:
|
||||||
|
|
||||||
|
|
||||||
```toml
|
```toml
|
||||||
# Base URL of the site, the only required config argument
|
# The base URL of the site; the only required configuration variable.
|
||||||
base_url = "mywebsite.com"
|
base_url = "mywebsite.com"
|
||||||
|
|
||||||
# Used in RSS by default
|
# The site title and description; used in RSS by default.
|
||||||
title = ""
|
title = ""
|
||||||
description = ""
|
description = ""
|
||||||
# The default language, used in RSS
|
|
||||||
|
# The default language; used in RSS.
|
||||||
default_language = "en"
|
default_language = "en"
|
||||||
|
|
||||||
# Theme name to use
|
# The site theme to use.
|
||||||
theme = ""
|
theme = ""
|
||||||
|
|
||||||
# Highlight all code blocks found
|
# When set to "true", all code blocks are highlighted.
|
||||||
highlight_code = false
|
highlight_code = false
|
||||||
|
|
||||||
# Which theme to use for the code highlighting.
|
# The theme to use for code highlighting.
|
||||||
# See below for list of accepted values
|
# See below for list of allowed values.
|
||||||
highlight_theme = "base16-ocean-dark"
|
highlight_theme = "base16-ocean-dark"
|
||||||
|
|
||||||
# Whether to generate a RSS feed automatically
|
# When set to "true", an RSS feed is automatically generated.
|
||||||
generate_rss = false
|
generate_rss = false
|
||||||
|
|
||||||
# The number of articles to include in the RSS feed. Will include all items if
|
# The number of articles to include in the RSS feed. All items are included if
|
||||||
# not set (the default).
|
# this limit is not set (the default).
|
||||||
# rss_limit = 20
|
# rss_limit = 20
|
||||||
|
|
||||||
# Whether to copy or hardlink files in static/ directory. Useful for sites
|
# When set to "true", files in the `static` directory are hard-linked. Useful for large
|
||||||
# whose static files are large. Note that for this to work, both static/ and
|
# static files. Note that for this to work, both `static` and the
|
||||||
# output directory need to be on the same filesystem. Also, theme's static/
|
# output directory need to be on the same filesystem. Note that the theme's `static`
|
||||||
# files are always copies, regardles of this setting. False by default.
|
# files are always copied, regardles of this setting.
|
||||||
# hard_link_static = false
|
# hard_link_static = false
|
||||||
|
|
||||||
# The taxonomies to be rendered for that site and their configuration
|
# The taxonomies to be rendered for the site and their configuration.
|
||||||
# Example:
|
# Example:
|
||||||
# taxonomies = [
|
# taxonomies = [
|
||||||
# {name = "tags", rss = true}, # each tag will have its own RSS feed
|
# {name = "tags", rss = true}, # each tag will have its own RSS feed
|
||||||
|
@ -58,7 +58,7 @@ generate_rss = false
|
||||||
#
|
#
|
||||||
taxonomies = []
|
taxonomies = []
|
||||||
|
|
||||||
# The additional languages for that site
|
# The additional languages for the site.
|
||||||
# Example:
|
# Example:
|
||||||
# languages = [
|
# languages = [
|
||||||
# {code = "fr", rss = true}, # there will be a RSS feed for French content
|
# {code = "fr", rss = true}, # there will be a RSS feed for French content
|
||||||
|
@ -68,23 +68,24 @@ taxonomies = []
|
||||||
#
|
#
|
||||||
languages = []
|
languages = []
|
||||||
|
|
||||||
# Whether to compile the Sass files found in the `sass` directory
|
# When set to "true", the Sass files in the `sass` directory are compiled.
|
||||||
compile_sass = false
|
compile_sass = false
|
||||||
|
|
||||||
# Whether to build a search index out of the pages and section
|
# When set to "true", a search index is built from the pages and section
|
||||||
# content for the `default_language`
|
# content for `default_language`.
|
||||||
build_search_index = false
|
build_search_index = false
|
||||||
|
|
||||||
# A list of glob patterns specifying asset files to ignore when
|
# A list of glob patterns specifying asset files to ignore when the content
|
||||||
# processing the content directory.
|
# directory is processed. Defaults to none, which means that all asset files are
|
||||||
# Defaults to none, which means all asset files are copied over to the public folder.
|
# copied over to the `public` directory.
|
||||||
# Example:
|
# Example:
|
||||||
# ignored_content = ["*.{graphml,xlsx}", "temp.*"]
|
# ignored_content = ["*.{graphml,xlsx}", "temp.*"]
|
||||||
ignored_content = []
|
ignored_content = []
|
||||||
|
|
||||||
# A list of directories to search for additional `.sublime-syntax` files in.
|
# A list of directories used to search for additional `.sublime-syntax` files.
|
||||||
extra_syntaxes = []
|
extra_syntaxes = []
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
# Optional translation object. The key if present should be a language code.
|
# Optional translation object. The key if present should be a language code.
|
||||||
# Example:
|
# Example:
|
||||||
# default_language = "fr"
|
# default_language = "fr"
|
||||||
|
@ -97,7 +98,7 @@ extra_syntaxes = []
|
||||||
# title = "A title"
|
# title = "A title"
|
||||||
|
|
||||||
|
|
||||||
# Configure the link checker
|
# Configuration of the link checker.
|
||||||
[link_checker]
|
[link_checker]
|
||||||
# Skip link checking for external URLs that start with these prefixes
|
# Skip link checking for external URLs that start with these prefixes
|
||||||
skip_prefixes = [
|
skip_prefixes = [
|
||||||
|
@ -109,8 +110,6 @@ skip_anchor_prefixes = [
|
||||||
"https://caniuse.com/",
|
"https://caniuse.com/",
|
||||||
]
|
]
|
||||||
|
|
||||||
# You can put any kind of data in there and it
|
|
||||||
# will be accessible in all templates
|
|
||||||
[extra]
|
[extra]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -155,4 +154,4 @@ Zola currently has the following highlight themes available:
|
||||||
- [zenburn](https://github.com/colinta/zenburn)
|
- [zenburn](https://github.com/colinta/zenburn)
|
||||||
|
|
||||||
Zola uses the Sublime Text themes, making it very easy to add more.
|
Zola uses the Sublime Text themes, making it very easy to add more.
|
||||||
If you want a theme not on that list, please open an issue or a pull request on the [Zola repo](https://github.com/getzola/zola).
|
If you want a theme not listed above, please open an issue or a pull request on the [Zola repo](https://github.com/getzola/zola).
|
||||||
|
|
|
@ -3,7 +3,7 @@ title = "Directory structure"
|
||||||
weight = 3
|
weight = 3
|
||||||
+++
|
+++
|
||||||
|
|
||||||
After running `zola init`, you should see the following structure in your folder:
|
After running `zola init`, you should see the following structure in your directory:
|
||||||
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
@ -18,34 +18,34 @@ After running `zola init`, you should see the following structure in your folder
|
||||||
5 directories, 1 file
|
5 directories, 1 file
|
||||||
```
|
```
|
||||||
|
|
||||||
Here's a high level overview of each of these folders and `config.toml`.
|
Here's a high-level overview of each of these directories and `config.toml`.
|
||||||
|
|
||||||
## `config.toml`
|
## `config.toml`
|
||||||
A mandatory configuration file of Zola in TOML format.
|
A mandatory Zola configuration file in TOML format.
|
||||||
It is explained in details in the [Configuration page](@/documentation/getting-started/configuration.md).
|
This file is explained in detail in the [configuration documentation](@/documentation/getting-started/configuration.md).
|
||||||
|
|
||||||
## `content`
|
## `content`
|
||||||
Where all your markup content lies: this will be mostly comprised of `.md` files.
|
Contains all your markup content (mostly `.md` files).
|
||||||
Each folder in the `content` directory represents a [section](@/documentation/content/section.md)
|
Each child directory of the `content` directory represents a [section](@/documentation/content/section.md)
|
||||||
that contains [pages](@/documentation/content/page.md) : your `.md` files.
|
that contains [pages](@/documentation/content/page.md) (your `.md` files).
|
||||||
|
|
||||||
To learn more, read [the content overview](@/documentation/content/overview.md).
|
To learn more, read the [content overview page](@/documentation/content/overview.md).
|
||||||
|
|
||||||
## `sass`
|
## `sass`
|
||||||
Contains the [Sass](http://sass-lang.com) files to be compiled. Non-Sass files will be ignored.
|
Contains the [Sass](http://sass-lang.com) files to be compiled. Non-Sass files will be ignored.
|
||||||
The directory structure of the `sass` folder will be preserved when copying over the compiled files: a file at
|
The directory structure of the `sass` folder will be preserved when copying over the compiled files; for example, a file at
|
||||||
`sass/something/site.scss` will be compiled to `public/something/site.css`.
|
`sass/something/site.scss` will be compiled to `public/something/site.css`.
|
||||||
|
|
||||||
## `static`
|
## `static`
|
||||||
Contains any kind of files. All the files/folders in the `static` folder will be copied as-is in the output directory.
|
Contains any kind of file. All the files/directories in the `static` directory will be copied as-is to the output directory.
|
||||||
If your static files are large you can configure Zola to [hard link](https://en.wikipedia.org/wiki/Hard_link) them
|
If your static files are large, you can configure Zola to [hard link](https://en.wikipedia.org/wiki/Hard_link) them
|
||||||
instead of copying by setting `hard_link_static = true` in the config file.
|
instead of copying them by setting `hard_link_static = true` in the config file.
|
||||||
|
|
||||||
## `templates`
|
## `templates`
|
||||||
Contains all the [Tera](https://tera.netlify.com) templates that will be used to render this site.
|
Contains all the [Tera](https://tera.netlify.com) templates that will be used to render your site.
|
||||||
Have a look at the [Templates](@/documentation/templates/_index.md) to learn more about default templates
|
Have a look at the [templates documentation](@/documentation/templates/_index.md) to learn more about default templates
|
||||||
and available variables.
|
and available variables.
|
||||||
|
|
||||||
## `themes`
|
## `themes`
|
||||||
Contains themes that can be used for that site. If you are not planning to use themes, leave this folder empty.
|
Contains themes that can be used for your site. If you are not planning to use themes, leave this directory empty.
|
||||||
If you want to learn about themes, head to the [themes documentation](@/documentation/themes/_index.md).
|
If you want to learn about themes, see the [themes documentation](@/documentation/themes/_index.md).
|
||||||
|
|
|
@ -24,7 +24,7 @@ $ yay -S zola-bin
|
||||||
|
|
||||||
### Fedora
|
### Fedora
|
||||||
|
|
||||||
Zola is available in official repositories since Fedora 29.
|
Zola has been available in the official repositories since Fedora 29.
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ sudo dnf install zola
|
$ sudo dnf install zola
|
||||||
|
@ -54,7 +54,7 @@ Zola is available on [Scoop](http://scoop.sh):
|
||||||
$ scoop install zola
|
$ scoop install zola
|
||||||
```
|
```
|
||||||
|
|
||||||
And [Chocolatey](https://chocolatey.org/):
|
and [Chocolatey](https://chocolatey.org/):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ choco install zola
|
$ choco install zola
|
||||||
|
@ -63,10 +63,10 @@ $ choco install zola
|
||||||
Zola does not work in PowerShell ISE.
|
Zola does not work in PowerShell ISE.
|
||||||
|
|
||||||
## From source
|
## From source
|
||||||
To build it from source, you will need to have Git, [Rust (at least 1.36) and Cargo](https://www.rust-lang.org/)
|
To build Zola from source, you will need to have Git, [Rust (at least 1.36) and Cargo](https://www.rust-lang.org/)
|
||||||
installed. You will also need additional dependencies to compile [libsass](https://github.com/sass/libsass):
|
installed. You will also need to meet additional dependencies to compile [libsass](https://github.com/sass/libsass):
|
||||||
|
|
||||||
- OSX, Linux and other Unix: `make` (`gmake` on BSDs), `g++`, `libssl-dev`
|
- OSX, Linux and other Unix-like operating systems: `make` (`gmake` on BSDs), `g++`, `libssl-dev`
|
||||||
- NixOS: Create a `shell.nix` file in the root of the cloned project with the following contents:
|
- NixOS: Create a `shell.nix` file in the root of the cloned project with the following contents:
|
||||||
```nix
|
```nix
|
||||||
with import <nixpkgs> {};
|
with import <nixpkgs> {};
|
||||||
|
@ -79,7 +79,7 @@ installed. You will also need additional dependencies to compile [libsass](https
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
- Then invoke `nix-shell`. This opens a shell with the above dependencies. You then run `cargo build --release` to build the project.
|
- Then, invoke `nix-shell`. This opens a shell with the above dependencies. Then, run `cargo build --release` to build the project.
|
||||||
- Windows (a bit trickier): updated `MSVC` and overall updated VS installation
|
- Windows (a bit trickier): updated `MSVC` and overall updated VS installation
|
||||||
|
|
||||||
From a terminal, you can now run the following command:
|
From a terminal, you can now run the following command:
|
||||||
|
@ -88,6 +88,6 @@ From a terminal, you can now run the following command:
|
||||||
$ cargo build --release
|
$ cargo build --release
|
||||||
```
|
```
|
||||||
|
|
||||||
The binary will be available in the `target/release` folder. You can move it in your `$PATH` to have the
|
The binary will be available in the `target/release` directory. You can move it in your `$PATH` to have the
|
||||||
`zola` command available globally or in a directory if you want for example to have the binary in the
|
`zola` command available globally or in a directory if you want for example to have the binary in the
|
||||||
same repository as the site.
|
same repository as the site.
|
||||||
|
|
|
@ -4,5 +4,4 @@ weight = 80
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Zola will look for a `404.html` file in the `templates` directory or
|
Zola will look for a `404.html` file in the `templates` directory or
|
||||||
use the built-in one. The default template is very basic and gets a simple
|
use the built-in one. The default template is very basic and gets `config` in its context.
|
||||||
variable in the context: the site `config`.
|
|
||||||
|
|
|
@ -3,8 +3,8 @@ title = "Archive"
|
||||||
weight = 90
|
weight = 90
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Zola doesn't have a built-in way to display an archive page, a page showing
|
Zola doesn't have a built-in way to display an archive page (a page showing
|
||||||
all post titles ordered by year. However, this can be accomplished directly in the templates:
|
all post titles ordered by year). However, this can be accomplished directly in the templates:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% for year, posts in section.pages | group_by(attribute="year") %}
|
{% for year, posts in section.pages | group_by(attribute="year") %}
|
||||||
|
@ -19,5 +19,5 @@ all post titles ordered by year. However, this can be accomplished directly in t
|
||||||
```
|
```
|
||||||
|
|
||||||
This snippet assumes that posts are sorted by date and that you want to display the archive
|
This snippet assumes that posts are sorted by date and that you want to display the archive
|
||||||
in a descending order. If you want to show articles in a ascending order, simply add a `reverse` filter
|
in descending order. If you want to show articles in ascending order, add a `reverse` filter
|
||||||
after the `group_by`.
|
after `group_by`.
|
||||||
|
|
|
@ -3,49 +3,49 @@ title = "Overview"
|
||||||
weight = 10
|
weight = 10
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Zola uses the [Tera](https://tera.netlify.com) template engine and is very similar
|
Zola uses the [Tera](https://tera.netlify.com) template engine, which is very similar
|
||||||
to Jinja2, Liquid or Twig.
|
to Jinja2, Liquid and Twig.
|
||||||
|
|
||||||
As this documentation will only talk about how templates work in Zola, please read
|
As this documentation will only talk about how templates work in Zola, please read
|
||||||
the [Tera template documentation](https://tera.netlify.com/docs#templates) if you want
|
the [Tera template documentation](https://tera.netlify.com/docs#templates) if you want
|
||||||
to learn more about it first.
|
to learn more about it first.
|
||||||
|
|
||||||
All templates live in the `templates` directory. If you are not sure what variables are available in a template, you can just stick `{{ __tera_context }}` in it
|
All templates live in the `templates` directory. If you are not sure what variables are available in a template,
|
||||||
to print the whole context.
|
you can place `{{ __tera_context }}` in the template to print the whole context.
|
||||||
|
|
||||||
A few variables are available on all templates minus RSS and sitemap:
|
A few variables are available on all templates except RSS and the sitemap:
|
||||||
|
|
||||||
- `config`: the [configuration](@/documentation/getting-started/configuration.md) without any modifications
|
- `config`: the [configuration](@/documentation/getting-started/configuration.md) without any modifications
|
||||||
- `current_path`: the path (full URL without the `base_url`) of the current page, never starting with a `/`
|
- `current_path`: the path (full URL without `base_url`) of the current page, never starting with a `/`
|
||||||
- `current_url`: the full URL for that page
|
- `current_url`: the full URL for the current page
|
||||||
- `lang`: the language for that page, `null` if the page/section doesn't have a language set
|
- `lang`: the language for the current page; `null` if the page/section doesn't have a language set
|
||||||
|
|
||||||
The 404 template does not get `current_path` and `current_url` as it cannot know it.
|
The 404 template does not get `current_path` and `current_url` (this information cannot be determined).
|
||||||
|
|
||||||
## Standard Templates
|
## Standard templates
|
||||||
By default, Zola will look for three templates: `index.html`, which is applied
|
By default, Zola will look for three templates: `index.html`, which is applied
|
||||||
to the site homepage; `section.html`, which is applied to all sections (any HTML
|
to the site homepage; `section.html`, which is applied to all sections (any HTML
|
||||||
page generated by creating a directory within your `content` directory); and
|
page generated by creating a directory within your `content` directory); and
|
||||||
`page.html`, which is applied to all pages (any HTML page generated by creating a
|
`page.html`, which is applied to all pages (any HTML page generated by creating an
|
||||||
`.md` file within your `content` directory).
|
`.md` file within your `content` directory).
|
||||||
|
|
||||||
The homepage is always a section (regardless of whether it contains other pages).
|
The homepage is always a section (regardless of whether it contains other pages).
|
||||||
Thus, the `index.html` and `section.html` templates both have access to the
|
Thus, the `index.html` and `section.html` templates both have access to the
|
||||||
section variables. The `page.html` template has access to the page variables.
|
section variables. The `page.html` template has access to the page variables.
|
||||||
The page and section variables are described in more detail in the next section of this documentation.
|
The page and section variables are described in more detail in the next section.
|
||||||
|
|
||||||
## Built-in Templates
|
## Built-in templates
|
||||||
Zola comes with three built-in templates: `rss.xml`, `sitemap.xml`, and
|
Zola comes with three built-in templates: `rss.xml`, `sitemap.xml` and
|
||||||
`robots.txt` (each described in their own section of this documentation).
|
`robots.txt` (each is described in its own section of this documentation).
|
||||||
Additionally, themes can add their own templates, which will be applied if not
|
Additionally, themes can add their own templates, which will be applied if not
|
||||||
overridden. You can override built-in or theme templates by creating a template with
|
overridden. You can override built-in or theme templates by creating a template with
|
||||||
same name in the correct path. For example, you can override the RSS template by
|
the same name in the correct path. For example, you can override the RSS template by
|
||||||
creating a `templates/rss.xml` file.
|
creating a `templates/rss.xml` file.
|
||||||
|
|
||||||
## Custom Templates
|
## Custom templates
|
||||||
In addition to the standard `index.html`, `section.html`, and `page.html` templates,
|
In addition to the standard `index.html`, `section.html` and `page.html` templates,
|
||||||
you may also create custom templates by creating a `.html` file in the `templates`
|
you may also create custom templates by creating an `.html` file in the `templates`
|
||||||
directory. These custom templates will not be used by default. Instead, the custom template will _only_ be used if you apply it by setting the `template` front-matter variable to the path for that template (or if you `include` it in another template that is applied). For example, if you created a custom template for your site's About page called `about.html`, you could apply it to your `about.md` page by including the following front matter in your `about.md` page:
|
directory. These custom templates will not be used by default. Instead, a custom template will _only_ be used if you apply it by setting the `template` front-matter variable to the path for that template (or if you `include` it in another template that is applied). For example, if you created a custom template for your site's About page called `about.html`, you could apply it to your `about.md` page by including the following front matter in your `about.md` page:
|
||||||
|
|
||||||
```md
|
```md
|
||||||
+++
|
+++
|
||||||
|
@ -58,13 +58,14 @@ Custom templates are not required to live at the root of your `templates` direct
|
||||||
For example, `product_pages/with_pictures.html` is a valid template.
|
For example, `product_pages/with_pictures.html` is a valid template.
|
||||||
|
|
||||||
## Built-in filters
|
## Built-in filters
|
||||||
Zola adds a few filters, in addition of the ones [ones already present](https://tera.netlify.com/docs#built-in-filters) in Tera.
|
Zola adds a few filters in addition to [those](https://tera.netlify.com/docs/templates/#built-in-filters) already present
|
||||||
|
in Tera.
|
||||||
|
|
||||||
### markdown
|
### markdown
|
||||||
Converts the given variable to HTML using Markdown. This doesn't apply any of the
|
Converts the given variable to HTML using Markdown. This doesn't apply any of the
|
||||||
features that Zola adds to Markdown: internal links, shortcodes etc won't work.
|
features that Zola adds to Markdown; for example, internal links and shortcodes won't work.
|
||||||
|
|
||||||
By default, the filter will wrap all text into a paragraph. To disable that, you can
|
By default, the filter will wrap all text in a paragraph. To disable this behaviour, you can
|
||||||
pass `true` to the inline argument:
|
pass `true` to the inline argument:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
|
@ -80,18 +81,23 @@ Decode the variable from base64.
|
||||||
|
|
||||||
## Built-in global functions
|
## Built-in global functions
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
Zola adds a few global functions to [those in Tera](https://tera.netlify.com/docs#built-in-functions) in order to make it easier to develop complex sites.
|
Zola adds a few global functions to [those in Tera](https://tera.netlify.com/docs#built-in-functions) in order to make it easier to develop complex sites.
|
||||||
|
=======
|
||||||
|
Zola adds a few global functions to [those in Tera](https://tera.netlify.com/docs/templates/#built-in-functions)
|
||||||
|
to make it easier to develop complex sites.
|
||||||
|
>>>>>>> Simple clean up of documentation. (#849)
|
||||||
|
|
||||||
|
|
||||||
### `get_page`
|
### `get_page`
|
||||||
Takes a path to a `.md` file and returns the associated page
|
Takes a path to an `.md` file and returns the associated page.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set page = get_page(path="blog/page2.md") %}
|
{% set page = get_page(path="blog/page2.md") %}
|
||||||
```
|
```
|
||||||
|
|
||||||
### `get_section`
|
### `get_section`
|
||||||
Takes a path to a `_index.md` file and returns the associated section
|
Takes a path to an `_index.md` file and returns the associated section.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set section = get_section(path="blog/_index.md") %}
|
{% set section = get_section(path="blog/_index.md") %}
|
||||||
|
@ -105,14 +111,14 @@ If you only need the metadata of the section, you can pass `metadata_only=true`
|
||||||
|
|
||||||
### ` get_url`
|
### ` get_url`
|
||||||
Gets the permalink for the given path.
|
Gets the permalink for the given path.
|
||||||
If the path starts with `@/`, it will be understood as an internal
|
If the path starts with `@/`, it will be treated as an internal
|
||||||
link like the ones used in markdown, starting from the root `content` directory.
|
link like the ones used in Markdown, starting from the root `content` directory.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set url = get_url(path="@/blog/_index.md") %}
|
{% set url = get_url(path="@/blog/_index.md") %}
|
||||||
```
|
```
|
||||||
|
|
||||||
This can also be used to get the permalinks for static assets for example if
|
This can also be used to get the permalinks for static assets, for example if
|
||||||
we want to link to the file that is located at `static/css/app.css`:
|
we want to link to the file that is located at `static/css/app.css`:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
|
@ -131,7 +137,7 @@ by passing `cachebust=true` to the `get_url` function.
|
||||||
|
|
||||||
|
|
||||||
### `get_image_metadata`
|
### `get_image_metadata`
|
||||||
Gets metadata for an image. Today the only supported keys are `width` and `height`.
|
Gets metadata for an image. Currently, the only supported keys are `width` and `height`.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set meta = get_image_metadata(path="...") %}
|
{% set meta = get_image_metadata(path="...") %}
|
||||||
|
@ -145,8 +151,8 @@ Gets the permalink for the taxonomy item found.
|
||||||
{% set url = get_taxonomy_url(kind="categories", name=page.taxonomies.category) %}
|
{% set url = get_taxonomy_url(kind="categories", name=page.taxonomies.category) %}
|
||||||
```
|
```
|
||||||
|
|
||||||
The `name` will almost come from a variable but in case you want to do it manually,
|
`name` will almost always come from a variable but in case you want to do it manually,
|
||||||
the value should be the same as the one in the front-matter, not the slugified version.
|
the value should be the same as the one in the front matter, not the slugified version.
|
||||||
|
|
||||||
### `get_taxonomy`
|
### `get_taxonomy`
|
||||||
Gets the whole taxonomy of a specific kind.
|
Gets the whole taxonomy of a specific kind.
|
||||||
|
@ -160,7 +166,7 @@ Loads data from a file or URL. Supported file types include *toml*, *json* and *
|
||||||
Any other file type will be loaded as plain text.
|
Any other file type will be loaded as plain text.
|
||||||
|
|
||||||
The `path` argument specifies the path to the data file relative to your base directory, where your `config.toml` is.
|
The `path` argument specifies the path to the data file relative to your base directory, where your `config.toml` is.
|
||||||
As a security precaution, If this file is outside of the main site directory, your site will fail to build.
|
As a security precaution, if this file is outside the main site directory, your site will fail to build.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set data = load_data(path="content/blog/story/data.toml") %}
|
{% set data = load_data(path="content/blog/story/data.toml") %}
|
||||||
|
@ -168,7 +174,7 @@ As a security precaution, If this file is outside of the main site directory, yo
|
||||||
|
|
||||||
The optional `format` argument allows you to specify and override which data type is contained
|
The optional `format` argument allows you to specify and override which data type is contained
|
||||||
within the file specified in the `path` argument. Valid entries are `toml`, `json`, `csv`
|
within the file specified in the `path` argument. Valid entries are `toml`, `json`, `csv`
|
||||||
or `plain`. If the `format` argument isn't specified, then the paths extension is used.
|
or `plain`. If the `format` argument isn't specified, then the path extension is used.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set data = load_data(path="content/blog/story/data.txt", format="json") %}
|
{% set data = load_data(path="content/blog/story/data.txt", format="json") %}
|
||||||
|
@ -176,8 +182,8 @@ or `plain`. If the `format` argument isn't specified, then the paths extension i
|
||||||
|
|
||||||
Use the `plain` format for when your file has a toml/json/csv extension but you want to load it as plain text.
|
Use the `plain` format for when your file has a toml/json/csv extension but you want to load it as plain text.
|
||||||
|
|
||||||
For *toml* and *json* the data is loaded into a structure matching the original data file,
|
For *toml* and *json*, the data is loaded into a structure matching the original data file;
|
||||||
however for *csv* there is no native notion of such a structure. Instead the data is separated
|
however, for *csv* there is no native notion of such a structure. Instead, the data is separated
|
||||||
into a data structure containing *headers* and *records*. See the example below to see
|
into a data structure containing *headers* and *records*. See the example below to see
|
||||||
how this works.
|
how this works.
|
||||||
|
|
||||||
|
@ -207,14 +213,16 @@ template:
|
||||||
|
|
||||||
#### Remote content
|
#### Remote content
|
||||||
|
|
||||||
Instead of using a file, you can load data from a remote URL. This can be done by specifying a `url` parameter to `load_data` rather than `path`.
|
Instead of using a file, you can load data from a remote URL. This can be done by specifying a `url` parameter
|
||||||
|
to `load_data` rather than `path`.
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
{% set response = load_data(url="https://api.github.com/repos/getzola/zola") %}
|
{% set response = load_data(url="https://api.github.com/repos/getzola/zola") %}
|
||||||
{{ response }}
|
{{ response }}
|
||||||
```
|
```
|
||||||
|
|
||||||
By default, the response body will be returned with no parsing. This can be changed by using the `format` argument as below.
|
By default, the response body will be returned with no parsing. This can be changed by using the `format` argument
|
||||||
|
as below.
|
||||||
|
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
|
@ -222,11 +230,13 @@ By default, the response body will be returned with no parsing. This can be chan
|
||||||
{{ response }}
|
{{ response }}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Data Caching
|
#### Data caching
|
||||||
|
|
||||||
Data file loading and remote requests are cached in memory during build, so multiple requests aren't made to the same endpoint.
|
Data file loading and remote requests are cached in memory during the build, so multiple requests aren't made
|
||||||
URLs are cached based on the URL, and data files are cached based on the files modified time.
|
to the same endpoint.
|
||||||
The format is also taken into account when caching, so a request will be sent twice if it's loaded with 2 different formats.
|
URLs are cached based on the URL, and data files are cached based on the file modified time.
|
||||||
|
The format is also taken into account when caching, so a request will be sent twice if it's loaded with two
|
||||||
|
different formats.
|
||||||
|
|
||||||
### `trans`
|
### `trans`
|
||||||
Gets the translation of the given `key`, for the `default_language` or the `lang`uage given
|
Gets the translation of the given `key`, for the `default_language` or the `lang`uage given
|
||||||
|
|
|
@ -3,11 +3,11 @@ title = "Sections and Pages"
|
||||||
weight = 20
|
weight = 20
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Pages and sections are actually very similar.
|
Templates for pages and sections are very similar.
|
||||||
|
|
||||||
## Page variables
|
## Page variables
|
||||||
Zola will try to load the `templates/page.html` template, the `page.html` template of the theme if one is used
|
Zola will try to load the `templates/page.html` template, the `page.html` template of the theme if one is used
|
||||||
or will render the built-in template: a blank page.
|
or render the built-in template (a blank page).
|
||||||
|
|
||||||
Whichever template you decide to render, you will get a `page` variable in your template
|
Whichever template you decide to render, you will get a `page` variable in your template
|
||||||
with the following fields:
|
with the following fields:
|
||||||
|
@ -60,8 +60,8 @@ translations: Array<TranslatedContent>;
|
||||||
|
|
||||||
## Section variables
|
## Section variables
|
||||||
By default, Zola will try to load `templates/index.html` for `content/_index.md`
|
By default, Zola will try to load `templates/index.html` for `content/_index.md`
|
||||||
and `templates/section.html` for others `_index.md` files. If there isn't
|
and `templates/section.html` for other `_index.md` files. If there isn't
|
||||||
one, it will render the built-in template: a blank page.
|
one, it will render the built-in template (a blank page).
|
||||||
|
|
||||||
Whichever template you decide to render, you will get a `section` variable in your template
|
Whichever template you decide to render, you will get a `section` variable in your template
|
||||||
with the following fields:
|
with the following fields:
|
||||||
|
@ -103,7 +103,7 @@ translations: Array<TranslatedContent>;
|
||||||
|
|
||||||
## Table of contents
|
## Table of contents
|
||||||
|
|
||||||
Both page and section templates have a `toc` variable which corresponds to an array of `Header`.
|
Both page and section templates have a `toc` variable that corresponds to an array of `Header`.
|
||||||
A `Header` has the following fields:
|
A `Header` has the following fields:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
|
@ -121,9 +121,9 @@ children: Array<Header>;
|
||||||
|
|
||||||
## Translated content
|
## Translated content
|
||||||
|
|
||||||
Both page and section have a `translations` field which corresponds to an array of `TranslatedContent`. If your site is not using multiple languages,
|
Both pages and sections have a `translations` field that corresponds to an array of `TranslatedContent`. If your
|
||||||
this will always be an empty array.
|
site is not using multiple languages, this will always be an empty array.
|
||||||
A `TranslatedContent` has the following fields:
|
`TranslatedContent` has the following fields:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
// The language code for that content, empty if it is the default language
|
// The language code for that content, empty if it is the default language
|
||||||
|
|
|
@ -32,8 +32,8 @@ current_index: Number;
|
||||||
total_pages: Number;
|
total_pages: Number;
|
||||||
```
|
```
|
||||||
|
|
||||||
A pager is a page of the pagination: if you have 100 pages and are paginating 10 by 10, you will have 10 pagers containing
|
A pager is a page of the pagination; if you have 100 pages and paginate_by is set to 10, you will have 10 pagers each
|
||||||
each 10 pages.
|
containing 10 pages.
|
||||||
|
|
||||||
## Section
|
## Section
|
||||||
|
|
||||||
|
|
|
@ -6,8 +6,8 @@ weight = 70
|
||||||
Zola will look for a `robots.txt` file in the `templates` directory or
|
Zola will look for a `robots.txt` file in the `templates` directory or
|
||||||
use the built-in one.
|
use the built-in one.
|
||||||
|
|
||||||
Robots.txt is the simplest of all templates: it only gets the config
|
Robots.txt is the simplest of all templates: it only gets `config`
|
||||||
and the default is what most site want:
|
and the default is what most sites want:
|
||||||
|
|
||||||
```jinja2
|
```jinja2
|
||||||
User-agent: *
|
User-agent: *
|
||||||
|
|
|
@ -5,14 +5,14 @@ weight = 50
|
||||||
|
|
||||||
If the site `config.toml` file sets `generate_rss = true`, then Zola will
|
If the site `config.toml` file sets `generate_rss = true`, then Zola will
|
||||||
generate an `rss.xml` page for the site, which will live at `base_url/rss.xml`. To
|
generate an `rss.xml` page for the site, which will live at `base_url/rss.xml`. To
|
||||||
generate the `rss.xml` page, Zola will look for a `rss.xml` file in the `templates`
|
generate the `rss.xml` page, Zola will look for an `rss.xml` file in the `templates`
|
||||||
directory or, if one does not exist, will use the use the built-in rss template.
|
directory or, if one does not exist, it will use the use the built-in rss template.
|
||||||
|
|
||||||
**Only pages with a date will be available.**
|
**Only pages with a date will be available.**
|
||||||
|
|
||||||
The RSS template gets three variables in addition of the config:
|
The RSS template gets three variables in addition to `config`:
|
||||||
|
|
||||||
- `feed_url`: the full url to that specific feed
|
- `feed_url`: the full url to that specific feed
|
||||||
- `last_build_date`: the date of the latest post
|
- `last_build_date`: the date of the latest post
|
||||||
- `pages`: see [the page variables](@/documentation/templates/pages-sections.md#page-variables) for
|
- `pages`: see [page variables](@/documentation/templates/pages-sections.md#page-variables) for
|
||||||
a detailed description of what this contains
|
a detailed description of what this contains
|
||||||
|
|
|
@ -7,11 +7,12 @@ Zola will look for a `sitemap.xml` file in the `templates` directory or
|
||||||
use the built-in one.
|
use the built-in one.
|
||||||
|
|
||||||
If your site has more than 30 000 pages, it will automatically split
|
If your site has more than 30 000 pages, it will automatically split
|
||||||
the links into multiple sitemaps as recommended by [Google](https://support.google.com/webmasters/answer/183668?hl=en):
|
the links into multiple sitemaps, as recommended by [Google](https://support.google.com/webmasters/answer/183668?hl=en):
|
||||||
|
|
||||||
> All formats limit a single sitemap to 50MB (uncompressed) and 50,000 URLs.
|
> All formats limit a single sitemap to 50MB (uncompressed) and 50,000 URLs.
|
||||||
> If you have a larger file or more URLs, you will have to break your list into multiple sitemaps.
|
> If you have a larger file or more URLs, you will have to break your list into multiple sitemaps.
|
||||||
> You can optionally create a sitemap index file (a file that points to a list of sitemaps) and submit that single index file to Google.
|
> You can optionally create a sitemap index file (a file that points to a list of sitemaps) and submit
|
||||||
|
> that single index file to Google.
|
||||||
|
|
||||||
In such a case, Zola will use a template called `split_sitemap_index.xml` to render the index sitemap.
|
In such a case, Zola will use a template called `split_sitemap_index.xml` to render the index sitemap.
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@ Zola will look up the following files in the `templates` directory:
|
||||||
- `$TAXONOMY_NAME/single.html`
|
- `$TAXONOMY_NAME/single.html`
|
||||||
- `$TAXONOMY_NAME/list.html`
|
- `$TAXONOMY_NAME/list.html`
|
||||||
|
|
||||||
First, a `TaxonomyTerm` has the following fields:
|
First, `TaxonomyTerm` has the following fields:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
name: String;
|
name: String;
|
||||||
|
@ -17,7 +17,7 @@ permalink: String;
|
||||||
pages: Array<Page>;
|
pages: Array<Page>;
|
||||||
```
|
```
|
||||||
|
|
||||||
and a `TaxonomyConfig`:
|
and `TaxonomyConfig` has the following fields:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
name: String,
|
name: String,
|
||||||
|
@ -30,7 +30,7 @@ rss: Bool;
|
||||||
|
|
||||||
### Taxonomy list (`list.html`)
|
### Taxonomy list (`list.html`)
|
||||||
|
|
||||||
This template is never paginated and therefore get the following variables in all cases.
|
This template is never paginated and therefore gets the following variables in all cases.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
// The site config
|
// The site config
|
||||||
|
@ -64,5 +64,5 @@ term: TaxonomyTerm;
|
||||||
lang: String;
|
lang: String;
|
||||||
```
|
```
|
||||||
|
|
||||||
A paginated taxonomy term will also get a `paginator` variable, see the [pagination page](@/documentation/templates/pagination.md)
|
A paginated taxonomy term will also get a `paginator` variable; see the [pagination page]
|
||||||
for more details on that.
|
(@/documentation/templates/pagination.md) for more details.
|
||||||
|
|
|
@ -8,9 +8,9 @@ will want to use many [Tera blocks](https://tera.netlify.com/docs#inheritance) t
|
||||||
allow users to easily modify it.
|
allow users to easily modify it.
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
As mentioned, a theme is just like any site: start with running `zola init MY_THEME_NAME`.
|
As mentioned, a theme is just like any site; start by running `zola init MY_THEME_NAME`.
|
||||||
|
|
||||||
The only thing needed to turn that site into a theme is to add `theme.toml` configuration file with the
|
The only thing needed to turn that site into a theme is to add a `theme.toml` configuration file with the
|
||||||
following fields:
|
following fields:
|
||||||
|
|
||||||
```toml
|
```toml
|
||||||
|
@ -42,11 +42,11 @@ homepage = "http://markdotto.com/"
|
||||||
repo = "https://www.github.com/mdo/hyde"
|
repo = "https://www.github.com/mdo/hyde"
|
||||||
```
|
```
|
||||||
|
|
||||||
A simple theme you can use as example is [Hyde](https://github.com/Keats/hyde).
|
A simple theme you can use as an example is [Hyde](https://github.com/Keats/hyde).
|
||||||
|
|
||||||
## Working on a theme
|
## Working on a theme
|
||||||
As a theme is just a site, you can simply use `zola serve` and make changes to your
|
As a theme is just a site, you can simply use `zola serve` and make changes to your
|
||||||
theme, with live reloading working as expected.
|
theme, with live reload working as expected.
|
||||||
|
|
||||||
Make sure to commit every directory (including `content`) in order for other people
|
Make sure to commit every directory (including `content`) in order for other people
|
||||||
to be able to build the theme from your repository.
|
to be able to build the theme from your repository.
|
||||||
|
@ -65,7 +65,7 @@ of this site, the theme will require two more things:
|
||||||
- `README.md`: a thorough README explaining how to use the theme and any other information
|
- `README.md`: a thorough README explaining how to use the theme and any other information
|
||||||
of importance
|
of importance
|
||||||
|
|
||||||
The first step is to make sure the theme is fulfilling those three requirements:
|
The first step is to make sure that the theme meets the following three requirements:
|
||||||
|
|
||||||
- have a `screenshot.png` of the theme in action with a max size of around 2000x1000
|
- have a `screenshot.png` of the theme in action with a max size of around 2000x1000
|
||||||
- have a thorough `README.md` explaining how to use the theme and any other information
|
- have a thorough `README.md` explaining how to use the theme and any other information
|
||||||
|
|
|
@ -15,24 +15,24 @@ $ git clone THEME_REPO_URL
|
||||||
```
|
```
|
||||||
|
|
||||||
Cloning the repository using Git or another VCS will allow you to easily
|
Cloning the repository using Git or another VCS will allow you to easily
|
||||||
update it but you can also simply download the files manually and paste
|
update. Alternatively, you can download the files manually and place
|
||||||
them in a folder.
|
them in a folder.
|
||||||
|
|
||||||
You can find a list of themes [on this very website](@/themes/_index.md).
|
You can find a list of themes [here](@/themes/_index.md).
|
||||||
|
|
||||||
## Using a theme
|
## Using a theme
|
||||||
|
|
||||||
Now that you have the theme in your `themes` directory, you only need to tell
|
Now that you have the theme in your `themes` directory, you need to tell
|
||||||
Zola to use it to get started by setting the `theme` variable of the
|
Zola to use it by setting the `theme` variable in the
|
||||||
[configuration file](@/documentation/getting-started/configuration.md). The theme
|
[configuration file](@/documentation/getting-started/configuration.md). The theme
|
||||||
name has to be name of the directory you cloned the theme in.
|
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
|
For example, if you cloned a theme in `themes/simple-blog`, the theme name to use
|
||||||
in the configuration file is `simple-blog`.
|
in the configuration file is `simple-blog`.
|
||||||
|
|
||||||
## Customizing a theme
|
## 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`
|
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 the theme name is `simple-blog`:
|
directory. Here are a few examples of that, assuming that the theme name is `simple-blog`:
|
||||||
|
|
||||||
```plain
|
```plain
|
||||||
templates/pages/post.html -> replace themes/simple-blog/templates/pages/post.html
|
templates/pages/post.html -> replace themes/simple-blog/templates/pages/post.html
|
||||||
|
@ -40,7 +40,7 @@ templates/macros.html -> replace themes/simple-blog/templates/macros.html
|
||||||
static/js/site.js -> replace themes/simple-blog/static/js/site.js
|
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 define some blocks by extending it. If we wanted
|
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:
|
to only change a single block from the `post.html` page in the example above, we could do the following:
|
||||||
|
|
||||||
```
|
```
|
||||||
|
@ -51,7 +51,7 @@ Some custom data
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
```
|
```
|
||||||
|
|
||||||
Most themes will also provide some variables that are meant to be overriden: this happens in the `extra` section
|
Most themes will also provide some variables that are meant to be overriden. This happens in the `extra` section
|
||||||
of the [configuration file](@/documentation/getting-started/configuration.md).
|
of the [configuration file](@/documentation/getting-started/configuration.md).
|
||||||
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`,
|
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:
|
you can update your `config.toml` like so:
|
||||||
|
@ -61,5 +61,5 @@ you can update your `config.toml` like so:
|
||||||
show_twitter = false
|
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 those
|
You can modify files directly in the `themes` directory but this will make updating the theme harder and live reload
|
||||||
files.
|
won't work with these files.
|
||||||
|
|
|
@ -3,10 +3,9 @@ title = "Overview"
|
||||||
weight = 10
|
weight = 10
|
||||||
+++
|
+++
|
||||||
|
|
||||||
Zola has built-in support for themes in a way that are easy to customise
|
Zola has built-in support for themes that makes it easy to customise and update them.
|
||||||
but still easy to update if needed.
|
|
||||||
|
|
||||||
All themes can use the full power of Zola, from shortcodes to Sass compilation.
|
All themes can use the full power of Zola, from shortcodes to Sass compilation.
|
||||||
|
|
||||||
A list of themes is available [on this very website](@/themes/_index.md).
|
A list of themes is available [here](@/themes/_index.md).
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue