1
2+++
3title = "juice"
4description = "An intuitive, elegant, and lightweight Zola theme for product sites."
5template = "theme.html"
6date = 2021-12-02T23:22:24+01:00
7
8[extra]
9created = 2021-12-02T23:22:24+01:00
10updated = 2021-12-02T23:22:24+01:00
11repository = "https://github.com/huhu/juice"
12homepage = "https://github.com/huhu/juice"
13minimum_version = "0.11.0"
14license = "MIT"
15demo = "https://juice.huhu.io"
16
17[extra.author]
18name = "Huhu teams"
19homepage = "https://huhu.io"
20+++
21
22# Juice
23
24<img align="right" width="150" height="150" src="/content/juice.svg">
25
26**Juice** is an intuitive, elegant, and responsive Zola theme for product sites.
27
28- Build for product sites
29- Simple and intuitive structure
30- Clean and elegant design
31- Responsive and mobile device compatible
32- Customize and extend friendly
33
34https://juice.huhu.io
35
36# Installation
37
38First download this theme to your `themes` directory:
39
40```bash
41$ cd themes
42$ git clone https://github.com/huhu/juice.git
43```
44
45or add as a submodule
46```bash
47$ git submodule add https://github.com/huhu/juice  themes/juice
48```
49
50and then enable it in your `config.toml`:
51
52```toml
53theme = "juice"
54```
55
56# Structure
57
58### Hero
59
60**Juice** is designed for product websites, hence we let **hero** part fills whole of screen.
61You can customize your **hero** by using `hero` block in the `index.html`.
62
63```html
64{%/* extends "juice/templates/index.html" */%}
65{%/* block hero */%}
66    <div>
67        Your cool hero html...
68    </div>
69{%/* endblock hero */%}
70```
71
72### Page
73
74Every markdown file located in `content` directory will become a **Page**. There also will display as
75a navigate link on the top-right corner.
76You can change the frontmatter's `weight` value to sort the order (ascending order).
77
78```
79+++
80title = "Changelog"
81description = "Changelog"
82weight = 2
83+++
84
85```
86
87### CSS variables
88
89You can override theme variable by creating a file named `_variables.html` in your `templates` directory.
90
91```html
92<style>
93    :root {
94        /* Primary theme color */
95        --primary-color: #FED43F;
96        /* Primary theme text color */
97        --primary-text-color: #543631;
98        /* Primary theme link color */
99        --primary-link-color: #F9BB2D;
100        /* Secondary color: the background body color */
101        --secondary-color: #fcfaf6;
102        --secondary-text-color: #303030;
103        /* Highlight text color of table of content */
104        --toc-highlight-text-color: #d46e13;
105    }
106</style>
107```
108
109# Configuration
110
111You can customize some builtin property in `config.toml` file:
112
113```toml
114[extra]
115juice_logo_name = "Juice"
116juice_logo_path = "juice.svg"
117juice_extra_menu = [
118    { title = "Github", link = "https://github.com/huhu/juice"}
119]
120repository_url = "https://github.com/huhu/juice"
121```
122
123# Shortcodes
124
125**Juice** have some builtin shortcodes available in `templates/shortcodes` directory.
126
127- `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`.
128
129> The `repository_url` is required.
130
131# Showcases
132
133Please see the [showcases page](https://juice.huhu.io/showcases).
134
135# Contributing
136
137Thank you very much for considering contributing to this project!
138
139We appreciate any form of contribution:
140
141- New issues (feature requests, bug reports, questions, ideas, ...)
142- Pull requests (documentation improvements, code improvements, new features, ...)
143
144