Skip to content

Theming

Jump to bottom
Sebastian Kolind Sørensen edited this page Feb 1, 2021 · 11 revisions

This is a work in progress. More information will arrive soon!

👆 This document expects that you copied the starter bundled with Volcano:

cd ~/path/to/project
cp -r vendor/sebastianks/volcano/* .

To start working with Volcano you need a theme. A theme in Volcano is at it's simplest just a index.php file in the /site/theme directory.

Volcano will now serve your app from site/theme/index.php which at it's lightest can be as slim as:

<?php
# site/theme/index.php

# Get our App instance
$app = require __DIR__ . '/../../app.php';

# This is where the magic happens 🧙‍♂️
echo $app->render();

If you are looking for a more realistic real-life example take a look at The Simple Starter.

Templates

A template is a file that lets you create a custom layout for a specific page on your site. Let's say that you want your /about-me page to look in a certain way, you simply just add an about-me.php file in site/templates and make it look exactly how you want it to look.

An example could be a page which lists all your Posts:

# site/theme/templates/posts.php
<?php
$app = require __DIR__ . '/../../app.php';

foreach ($app->getEntries('posts') as $post) {
    # posts/hello-world.md -> <a href="/hello-world">Hello World</a>
    echo '<a href="' . $post->link() . '">' . $post->getMeta('title') . '</a>';
}

Assets

You can add images, CSS and Javascript inside of your theme in a site/theme/assets directory and add those to your app as you normally would. Volcano does not have any opinions on how you structure your theme files - apart from the index.php requirement.

A CSS file located in the site/theme/assets directory could be included in a site/theme/header.php like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- This part is just a regular HTML link -->
    <link rel="stylesheet" href="/site/theme/assets/styles.css" />
  </head>
</html>
Clone this wiki locally