mirror
/
zola
mirror of https://github.com/getzola/zola
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
zola/docs/content/themes/zplit/index.md

5.8 KiB
Raw Permalink Blame History

+++ title = "Zplit" description = "A single page theme for a professional online presence." template = "theme.html" date = 2024-09-02T05:58:27Z

[extra] created = 2024-09-02T05:58:27Z updated = 2024-09-02T05:58:27Z repository = "https://github.com/gicrisf/zplit.git" homepage = "https://github.com/gicrisf/zplit" minimum_version = "0.15.0" license = "Creative Commons Attribution 3.0 License" demo = "https://zplit.netlify.app"

[extra.author] name = "Giovanni Crisalfi" homepage = "https://github.com/gicrisf" +++

Zplit

Zplit is a single-page, centrally-divided layout designed for a professional online presence. It features a large image or video on the left, accompanied by content on the right. Zplit is a port of Split by One Page Love for Zola.

Zola Zplit Theme screenshot

DEMO: https://zplit.netlify.app/

Installation

Download the theme to your themes directory:

$ cd themes
$ git clone https://github.com/gicrisf/zplit.git

Then, enable the theme editing your config.toml:

theme = "zplit"

Getting started

The most important file of the theme is located in the root directory and is named =config.toml=. Edit this file to customize your preferences. Look for sections like [extra] to set variables like author, or [extra.content] to modify intro_tagline.

If something is unclear or not obvious, you might have missed the "configuration" section of the Zola official documentation. Even if you're new to static site generators, don't worry and take some time to go through the documentation, as it covers fundamental concepts.

Here after, we will discuss two specific sections in more detail, because those are unique for the Zplit theme:

  • Background image
  • Lists (of links)

Background image

Edit the [extra.visual] section to set your background image of choice.

[extra.visual]

background = "<your-image-file-path-goes-here>"

You can find this example already written as the default:

[extra.visual]

background = "images/background.jpg"
position = "center center"

As you can see, you can edit the relative position of the image, which is centered by default.

Lists

You can set up to 3 lists of links in the [extra.lists] section of the config.toml file:

  • connect
  • social
  • network

Manipulating them is very easy: just add/remove elements in the TOML list, as showed in this example (also already present in the default file):

social = [
    {url = "https://t.me/zwitterio", text = "Telegram"},
    {url = "https://twitter.com/gicrisf", text = "Twitter"},
    {url = "https://github.com/gicrisf", text = "Github"},
]

Do you want another item? Just throw it up to the pile. You have no limits. Remember to set the url field with the link itself you want to direct your user at and a text to show in the page for the corrisponding URL.

Posts

To add new posts, simply place markdown files in the content directory. In order to sort the post index by date, you need to enable the sort_by option in the content/_index.md file within the index section.

sort_by = "date"

This theme was not specifically designed for blogging, but rather as a landing page for professionals. However, if you wish to blog using this theme, you certainly can. To do so, simply add a new section in the content directory and include it in the main menu through the config file. This will make it readily accessible to the user.

The theme does not offer support for taxonomies or other advanced features. It is focused on providing simple pages. If you wish to enhance the blogging functionality, you are welcome to customize the code or submit a specific request as an issue.

Custom CSS

To make custom changes to the original stylesheets, you can create a custom.css file in the static directory. In this file, you can add any modifications or additions you desire.

Custom colors

If you need to make adjustments to the colors or grid dimensions, it may be easier to modify the frontmatter of the _01-content.scss file directly. In this file, you will find variables conveniently located at the top:

//-------------------------------------------------------------------------------
// Variables
//-------------------------------------------------------------------------------

// Colors
$color-background : #061C30;
$color-text       : #848d96;
$color-link       : #848d96;
$color-link-hover : #CA486d;
$color-maverick   : #47bec7;
$color-tagline    : #CCCCCC;

// Breakpoints
$bp-smallish      : 1200px;
$bp-tablet        : 800px;
$bp-mobile        : 500px;

Features

  • Lightweight and minimal
  • Responsive (mobile support)
  • Social links
  • Deploy via Netlify (config already included)
  • Easily extendable menus
  • De-googled (local assets are faster and more secure)
  • Netlify support
  • Custom CSS
  • Custom colors
  • 404 page
  • Basic blogging features
  • Open Graph and Twitter Cards support
  • Multilanguage support

Support me!

Do you love Zplit? Did you find it enjoyable and useful? If so, consider showing your support by making a donation. Your contribution will help fund the development of new features and improvements for this theme.

ko-fi

License

The original template is released under the Creative Commons Attribution 3.0 License. Please keep the original attribution link when using for your own project. If you'd like to use the template without the attribution, you can check out the license option via the template author's website.