No description
Find a file
Thomas Chartron b23cbf8938 update theme
2021-12-04 15:03:58 +01:00
content update 2021-11-12 20:34:56 +01:00
src update theme 2021-12-04 15:03:37 +01:00
static update theme 2021-12-04 15:03:58 +01:00
templates 💄 change footer 2021-11-30 21:28:54 +01:00
.gitignore 📝 add screenshot update gitignore 2021-11-30 21:33:20 +01:00
config.toml 🔧 update config 2021-12-04 14:57:39 +01:00
deploy-github.sh update 2021-11-17 22:43:51 +01:00
package-lock.json add uglifyjs in build process 2021-11-11 14:24:04 +01:00
package.json update 2021-11-14 14:00:10 +01:00
postcss.config.js postcss, tailwind config, autoprefixer and cssnano plugins and package.json file with scripts 2021-11-06 15:03:40 +01:00
README.md 📝 Update readme 2021-12-01 21:36:55 +01:00
screenshot.png update screenshot 2021-12-01 19:27:56 +01:00
tailwind.config.js update 2021-11-17 20:04:30 +01:00
theme.toml 🔧 update conf 2021-11-30 20:47:06 +01:00

Blow

A Zola theme built with tailwindcss

(WIP) Example : Here

Preview

preview

Usage

You should follow the official documentation about installing a Zola theme.

I recommend adding the theme as a git submodule :

cd my-zola-website
git submodule add -b main git@github.com:tchartron/blow.git themes/blow

Edit the theme used in your config.toml file

# The site theme to use.
theme = "blow"

Then edit your config.toml file to override values from the theme :

[extra]
zt.enable_search = true
zt.enable_sidebar = true
zt.enable_adsense = true
zt.enable_multilingue = true
zt.adsense_link = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=myclientid"

[extra.lang]
items = [
    { lang = "en", links = [
        { base_url = "/", name = "English" },
        { base_url = "/fr", name = "French" },
    ] },
    { lang = "fr", links = [
        { base_url = "/", name = "Anglais" },
        { base_url = "/fr", name = "Français" },
    ] },
]

[extra.navbar]
items = [
    { lang = "en", links = [
        { url = "/", name = "Home" },
        { url = "/categories", name = "Categories" },
        { url = "/tags", name = "Tags" },
    ] },
    { lang = "fr", links = [
        { url = "/fr", name = "Accueil" },
        { url = "/fr/categories", name = "Categories" },
        { url = "/fr/tags", name = "Tags" },
    ] },
]
title = "title"

[extra.sidebar]
items = [
    { lang = "en", links = [
        { url = "/markdown", name = "Markdown" },
        { url = "/blog", name = "Blog" },
    ] },
    { lang = "fr", links = [
        { url = "/fr/markdown", name = "Markdown" },
        { url = "/fr/blog", name = "Blog" },
    ] },
]

# Index page
[extra.index]
title = "Main title"
image = "https://via.placeholder.com/200"

[extra.default_author]
name = "John Doe"
avatar = "https://via.placeholder.com/200"

[extra.social]
github = "https://github.com/johndoe"
gitlab = "https://gitlab.com/johndoe"
twitter = "https://twitter.com/johndoe"
linkedin = "https://www.linkedin.com/in/john-doe-b1234567/"
email = "john.doe@gmail.com"

[extra.favicon]
favicon = "/icons/favicon.ico"
favicon_16x16 = "/icons/favicon-16x16.png"
favicon_32x32 = "/icons/favicon-32x32.png"
apple_touch_icon = "/icons/apple-touch-icon.png"
android_chrome_512 = "/icons/android-chrome-512x512.png"
android_chrome_192 = "/icons/android-chrome-192x192.png"
manifest = "/icons/site.webmanifest"

You can now run zola serve and visit : http://127.0.0.1:1111/ to see your site

Features

  • Dark mode
  • Customizable navbar links
  • Tags and Categories taxonomies
  • Search functionality supporting Command + K shortcut
  • Social links (github, gitlab, twitter, linkedin, email)
  • Postcss build process with cssnano (and tailwindcss tree shaking to reduce final bundle size)
  • Uglifyjs build process with minification
  • Example script to deploy to Github Pages
  • Pagination
  • Sidemenu menu with sections links
  • Table of content (2 levels and currently viewed part highlighted)
  • Multilingue
  • 404
  • Mobile responsive
  • Favicon
  • Adsense

Deployment

There is a section about deployment in Zola documentation but you'll find an example to deploy your site to github pages