15 | 
20 | 
24 | 
4 |
5 | **Juice** is an intuitive, elegant, and responsive Zola theme for product sites.
6 |
7 | - Build for product sites
8 | - Simple and intuitive structure
9 | - Clean and elegant design
10 | - Responsive and mobile device compatible
11 | - Customize and extend friendly
12 |
13 | https://juice.huhu.io
14 |
15 | # Installation
16 |
17 | First download this theme to your `themes` directory:
18 |
19 | ```bash
20 | $ cd themes
21 | $ git clone https://github.com/huhu/juice.git
22 | ```
23 |
24 | or add as a submodule
25 | ```bash
26 | $ git submodule add https://github.com/huhu/juice themes/juice
27 | ```
28 |
29 | and then enable it in your `config.toml`:
30 |
31 | ```toml
32 | theme = "juice"
33 | ```
34 |
35 | # Structure
36 |
37 | ### Hero
38 |
39 | **Juice** is designed for product websites, hence we let **hero** part fills whole of screen.
40 | You can customize your **hero** by using `hero` block in the `templates/index.html`.
41 |
42 | ```html
43 | {% extends "juice/templates/index.html" %}
44 | {% block hero %}
45 |
47 |
62 | {% endif %}
63 | {% endblock toc %}
64 |
65 |
48 | {% for h in toc %}
49 |
61 |
50 | {{ h.title }}
51 |
52 | {% if h.children %}
53 | {% for h2 in h.children %}
54 |
55 | - {{ h2.title }}
56 |
57 | {% endfor %}
58 | {% endif %}
59 | {% endfor %}
60 |
66 | {% block content %}
67 |
71 |
72 | {% block sidebar %}
73 |
75 | {% endblock sidebar %}
76 | Overview
68 | {{ section.content | safe }}
69 | {% endblock content %}
70 |