Giter VIP home page Giter VIP logo

juice's Introduction

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:

$ 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"

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 index.html.

{% extends "juice/templates/index.html" %}
{% block hero %}
    <div>
        Your cool hero html...
    </div>
{% 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.

<style>
    :root {
        /* Primary theme color */
        --primary-color: #FED43F;
        /* Primary theme text color */
        --primary-text-color: #543631;
        /* Primary theme link color */
        --primary-link-color: #F9BB2D;
        /* Secondary color: the background body color */
        --secondary-color: #fcfaf6;
        --secondary-text-color: #303030;
        /* Highlight text color of table of content */
        --toc-highlight-text-color: #d46e13;
    }
</style>

Configuration

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

[extra]
juice_logo_name = "Juice"
juice_logo_path = "juice.svg"
juice_extra_menu = [
    { title = "Github", link = "https://github.com/huhu/juice"}
]
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.

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, ...)

juice's People

Contributors

codedust avatar folyd avatar lukehsiao avatar sporif avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.