Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huhu/juice
🍹 An intuitive, elegant, and responsive Zola theme for product sites.
https://github.com/huhu/juice
product-site zola zola-theme
Last synced: 4 days ago
JSON representation
🍹 An intuitive, elegant, and responsive Zola theme for product sites.
- Host: GitHub
- URL: https://github.com/huhu/juice
- Owner: huhu
- License: mit
- Created: 2020-06-21T07:31:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-01T07:33:12.000Z (6 months ago)
- Last Synced: 2024-08-03T09:08:34.511Z (3 months ago)
- Topics: product-site, zola, zola-theme
- Language: HTML
- Homepage: https://juice.huhu.io
- Size: 2.83 MB
- Stars: 164
- Watchers: 6
- Forks: 33
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Juice
**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
https://juice.huhu.io
# Installation
First download this theme to your `themes` directory:
```bash
$ cd themes
$ git clone https://github.com/huhu/juice.git
```
or add as a submodule
```bash
$ git submodule add https://github.com/huhu/juice themes/juice
```
and then enable it in your `config.toml`:
```toml
theme = "juice"
```
# Structure
### Hero
**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`.
```html
{% extends "juice/templates/index.html" %}
{% block hero %}
Your cool hero html...
{% endblock hero %}
```
### Page
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](./templates/_variables.html)
### Favicon
The same way as changing the `hero` block in the `templates/index.html`, you can change the **favicon**.
```html
{% extends "juice/templates/index.html" %}
{% block favicon %}
{% endblock favicon %}
```
### Fonts
If you changed the `--xy-font-family`-variable in `_variables.html`, you have to load the mentioned fonts in the `templates/index.html`.
```html
{% extends "juice/templates/index.html" %}
{% block fonts %}
{% endblock fonts %}
```
# Configuration
You can customize some builtin property in `config.toml` file:
```toml
[extra]
juice_logo_name = "Juice"
juice_logo_path = "juice.svg"
juice_extra_menu = [
{ title = "Github", link = "https://github.com/huhu/juice"}
]
juice_exclude_menu = [
"exclude_from_nav"
]
repository_url = "https://github.com/huhu/juice"
```
# Shortcodes
**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.
# Showcases
Please see the [showcases page](https://juice.huhu.io/showcases).
# Contributing
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, ...)