Giter Site home page Giter Site logo

no-style-please's Introduction

no style, please!

A (nearly) no-CSS, fast, minimalist Zola theme. Ported from from riggraz's no style, please! Jekyll theme, and you can find the demo here

screenshot

Installation

First download this theme to your themes directory:

cd themes
git clone https://gitlab.com/4bcx/no-style-please.git

and then enable it in your config.toml:

theme = "no-style-please"

Options

Default taxonomies

Special templates for tags, categories, and contexts taxonomies are provided. However, generic templates exist for custom taxonomies.

To use taxonomies, in a page metadata add

[taxonomies]
tags = [ 'tag1', 'tag2' ]
categories = [ 'category A', 'B class' ]
genre = [ 'rock', 'alternative' ]   # custom taxonomy

Pages list in homepage

To enable listing of pages in homepage add the following in config.toml

[extra]
list_pages = true

If you do not want the date of the post added next to the title in the list, add the following as well:

no_list_date = true

Header and footer nav links

Also in the extra section in config.toml

[extra]

header_nav = [
    { name = "~home", url = "/" },
    { name = "#tags", url = "/tags" },
    { name = "+categories", url = "/categories" },
    { name = "@contexts", url = "/contexts" },
    { name = "example", url = "http://example.com", new_tab=true },
]
footer_nav = [
    { name = "< previous", url = "#" },
    { name = "webring", url = "#" },
    { name = "next >", url = "#" },
]

Add TOC to pages

In a page frontmatter, set extra.add_toc to true

[extra]
add_toc = true

Extra data

  • author can be set in both main config and in pages metadata
  • image variable can be used in pages to add an image to HTML <meta> tags
  • Same for logo in main config, except this one is also used as the site icon

Horizontal rule shortcode hr()

Adds the option to insert text in the thematic break

{{ hr(data_content="footnotes") }}

is rendered

thematic break screenshot

Invertable image iimg()

Images are not inverted in darkmode by default. To add an invertable image use the following

{{ iimg(src="logo.png", alt="alt text") }}

In light mode

image in light mode

In dark mode

image in dark mode

Disable Twitter card

Twitter metatags are generated by default, to disable them set extra.twitter_card to false in in your config.toml

[extra]
twitter_card = true

TODO

  • Add RTL support
  • Write proper test pages

License

The theme is available as open source under the terms of the MIT License.

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.