Tutorials

This is a basic Automad tutorial theme using the Bulma CSS Framework. You can use the templates listed below to learn, how templates work in Automad and to get started with developing your own themes.


Navigation
A simple example for a tree navigation. Learn how to define recursive snippets of code to be used in loops and create dynamic menus of any depth.
More

Filtering & Sorting
A configurable pagelist is the basis for every navigation. This template illustrates the main concepts of filtering, sorting and searching in Automad ...
More

Plain PHP
While Automad ships with an built-in template language, experienced PHP developers might prefer to develop templates in plain PHP. This example ...
More

Working with Images
Images are an important part of the content of any website. This template shows the basic concept of how to work with images.
More

Multilingual Content
This template illustrates the use of session data to build a multilingual website. Click on a language button below to switch between English and ...
More

Source /packages/tutorial/tutorials.php
<?php defined('AUTOMAD') or die('Direct access not permitted!'); ?>
<@ snippets/header.php @>  
  <@ snippets/navbar.php @>
  <section class="section">    
    <@ snippets/content.php @>
  </section>
  <section class="section">
    <div class="columns is-multiline is-8 is-variable">
      <@ newPagelist { 
        type: 'children',
        excludeHidden: false 
      } @>
      <@ foreach in pagelist @>
        <div class="column is-one-third">
          <hr />
          <div class="field is-size-4 has-text-weight-bold">
            @{ title }
          </div>
          <div class="field is-size-6">@{ textTeaser | 150 }</div>
          <a href="@{ url }" class="button is-light">More</a>
        </div>
      <@ end @>
    </div>
  </section>
<@ snippets/footer.php @>
Made with Automad
Released under the MIT license
© 2024 by Marc Anton Dahmen