🍹 An intuitive, elegant, and responsive Zola theme for product sites.
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Folyd c6ad1fbe1c Fix sidebar mobile compatibility 2 weeks ago
content Release version 0.7.0 2 weeks ago
sass Fix sidebar mobile compatibility 2 weeks ago
static Adjust image directory 4 years ago
templates Add sidebar 2 weeks ago
.gitignore Fix sidebar mobile compatibility 2 weeks ago
LICENSE Initial commit 4 years ago
README.md make fonts changeable. Fixes #10 (#15) 1 year ago
config.toml Uses the language defined in the config file. (#17) 1 year ago
screenshot.png Update README, add screenshot image 4 years ago
theme.toml Remove unnecessary zola tardemark, update _index.md 4 years ago
vercel.json Remove zola env 2 years ago



Juice is an intuitive, elegant, and responsive Zola theme for product sites.

  • Build for product sites
  • Simple and intuitive structure
  • Clean and elegant design
  • Responsive and mobile device compatible
  • Customize and extend friendly



First download this theme to your themes directory:

$ cd themes
$ git clone https://github.com/huhu/juice.git

or add as a submodule

$ git submodule add https://github.com/huhu/juice  themes/juice

and then enable it in your config.toml:

theme = "juice"



Juice is designed for product websites, hence we let hero part fills whole of screen. You can customize your hero by using hero block in the templates/index.html.

{% extends "juice/templates/index.html" %}
{% block hero %}
        Your cool hero html...
{% endblock hero %}


Every markdown file located in content directory will become a Page. There also will display as a navigate link on the top-right corner. You can change the frontmatter's weight value to sort the order (ascending order).

title = "Changelog"
description = "Changelog"
weight = 2

CSS variables

You can override theme variable by creating a file named _variables.html in your templates directory.

See the default value here


The same way as changing the hero block in the templates/index.html, you can change the favicon.

{% extends "juice/templates/index.html" %}
{% block favicon %}
    <link rel="icon" type="image/png" href="/favicon.ico">
{% endblock favicon %}


If you changed the --xy-font-family-variable in _variables.html, you have to load the mentioned fonts in the templates/index.html.

{% extends "juice/templates/index.html" %}
{% block fonts %}
    <link href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Babylonica&display=swap" rel="stylesheet">
{% endblock fonts %}


You can customize some builtin property in config.toml file:

juice_logo_name = "Juice"
juice_logo_path = "juice.svg"
juice_extra_menu = [
    { title = "Github", link = "https://github.com/huhu/juice"}
juice_exclude_menu = [
repository_url = "https://github.com/huhu/juice"


Juice have some builtin shortcodes available in templates/shortcodes directory.

  • issue(id) - A shortcode to render issue url, e.g. issue(id=1) would render to the link https://github.com/huhu/juice/issue/1.

The repository_url is required.


Please see the showcases page.


Thank you very much for considering contributing to this project!

We appreciate any form of contribution:

  • New issues (feature requests, bug reports, questions, ideas, ...)
  • Pull requests (documentation improvements, code improvements, new features, ...)