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