Yoan De Macedo [ Web & Frugalité ]

Template

Template is the link between content and final HTML pages. It's possible to prepare several templates for a website then select the one to be used.

It's probably the most technical part with Fruga. You must be confortable with HTML / CSS and have some knowledge of PHP.
No "meta language" as smarty or twig is used. Templates use plain PHP.

The tool outlines a few methods very simple. But those who master PHP and who want to go further will be able to push back the limits.

My website template is very sober. It is possible to create more graphic if you wish. I like to go for a lighter web.

First, you can study "example" template in sites/example/theme/simple. An example is sometimes better than a long speech.

General structure of templates

            mytemplate
                |
                |____ css
                |
                |____ templates
                         |
                         |_____ home.php
                         |
                         |_____ page.php

css folder will contain your stylesheets.
template folder will contain all your page templates. If you have a page.md content somewhere, you must have a page.php template. For home.md, you need home.php.

This php template will define how content will be displayed.
You can cut header, footer and make include if you want. You're free.

It's possible to add folders in templates root (js for example to add js code).

Configuration

To choose the template that will be used for the website, you have to edit sites/mywebsite/configuration/theme/theme.json

            {
                "name":"mytemplate"
            }

This file is likely to grow in the future. For now, we use it just to setup the templat ename. Fruga will look for the theme in sites/mywebsite/themes/mytemplate

Theme design

As you see before, it's possible to create several page templates. home.md, page.md, etc.

Imagine that you load /blog/post-a et and sites/mywebsite/pages/blog/post-a contains page.md file.
page.php template will be used when this page has to be generated.

This one will received markdown struture and content. It can then be used to display information.

To get and display content header :

        <?php echo $page->get('header_name'); ?>

Juste replace header_name (title for example).

To get and display content :

        <?php echo $page->get('content'); ?>

To get and display a link to a page :

        <a href="<?php echo $page->find('/my-work')->get('link'); ?>">My work</a>

To list pages :

        $posts = $page->find('/fruga/doc/en')->children->sort('pos', 'asc');

Here, we get childs of /fruga/doc/en (introduction, get started, etc). e sort it manually (with the number before folder name), ascending order. You can use desc for order decreasing (sorting options will be expanded).

Then, just make a loop :

                <ul id="archiveList">
                    <?php 
                        foreach($posts as $post){ 
                    ?>
                    <li><a href="<?php echo $post->get('link'); ?>"><?php echo $post->get('title'); ?></a> <a href="<?php echo $post->get('link'); ?>">[Read]</a></li>
                    <?php } ?>         
                </ul>

Back to table of contents

(Sorry for the sometimes approximate English. If you want me to correct something, please contact me.)

Mentions légales | Confidentialité | Ethique | Mémo | RSS

Généré par Fruga