Templates

Cecil use Twig as template engine, so refer to the official documentation to know how to use it.

Files organization

Templates should be stored in layouts/ (default directory).

<mywebsite>
├─ content
├─ layouts
|  ├─ _default           <- Contains default templates
|  |  ├─ list.html.twig  <- Used by a "list" node type
|  |  └─ page.html.twig  <- Used by the "page" node type
|  └─ index.html.twig    <- Used by the "homepage" node type
└─ themes
   └─ <theme>            <- Custom theme
      ├─ layouts
      └─ ...

Lookup rules

Cecil searches for the layout to use for a given page in a defined order.

If page type is Homepage:

1. index.html.twig
2. _default/list.html.twig
3. _default/page.html.twig

If page type is Section:

1. section/<section>.html.twig
2. _default/section.html.twig
3. _default/list.html.twig

If page type is Taxonomy:

1. taxonomy/<singular>.html.twig
2. _default/taxonomy.html.twig
3. _default/list.html.twig

If page type is Terms:

1. taxonomy/<singular>.terms.html.twig
2. _default/terms.html.twig

Otherwise:

1. <section>/<layout>.html.twig
2. <layout>.html.twig
3. <section>/page.html.twig
4. page.html.twig
5. _default/page.html.twig

Variables

site

Contains all variables under site key in configuration, and those predefined variables:

Variable	Description
site.menus	All menus collections
site.pages	All pages collections

site.menus

Variable	Description
site.menus.ID.name	Menu entry name
site.menus.ID.url	Menu entry URL (relative or absolute)
site.menus.ID.weight	Menu entry weight (useful to order menu entries)

With ID is the identifier of the menu collection, ie: main.

page

Contains all Page variables and those set in the front matter.

Variable	Description	Example
page.id	Unique ID	blog/post-1
page.title	Title	Post 1
page.content	File page body converted in HTML	HTML
page.section	Section	blog
page.path	Path	blog
page.name	Name	post-1
page.pathname	Full path	blog/post-1
page.pages	Subpages	Collection
page.tags	Tags array	[Ta, Tb]
page.categories	Categories array	[Ca, Cb]
page.time	File modification (Unix timestamp)	1514992534

page.pagination

Variable	Description
page.pagination.pages	Paginated pages collection
page.pagination.prev	Path to the previous page
page.pagination.next	Path to the next page

Page taxonomy

Variable	Description
page.singular	Taxonomy name
page.plural	Taxonomy name (plural form)
page.terms	List of terms

Used in taxonomy and terms layouts.

cecil

Variable	Description
cecil.url	URL to the official website
cecil.version	Current version
cecil.poweredby	"Cecil v%s" with "%s" = current version

Example

<h1>{{ page.title }} | {{ site.title }}</h1>
<span>{{ page.date|date("j M Y") }}</span>
<p>{{ page.content }}</p>
<p>{{ page.customvar }}</p>

Functions

url()

Create an URL.

{{ url(page) }}
{{ url('tags/' ~ tag) }}
{{ url(menu.url) }}
{{ url('css/style.css') }}
{{ url('http://narno.org') }}

minify()

Minify a CSS or a Javascript file.

{{ minify('css/style.css') }}
{{ minify('js/script.js') }}

readtime()

Return read time, in minutes.

{{ readtime(page.content) }} min

toCSS()

Compile a SCSS file (Sass) to CSS.

{{ toCSS('style/style.scss') }}

Filters

filterBySection()

Filter a pages collection by section.

{{ pages|filterBySection('blog') }}

filterBy()

Filter a pages collection by variable name.

{{ pages|filterBy('section', 'blog') }}

sortByTitle

Sort a pages collection by title (alphabetically).

{{ pages|sortByTitle }}

sortByWeight

Sort a menu entries collection by weight (lighter first).

{{ menu|sortByWeight }}

sortByDate

Sort a pages collection by date (last first).

{{ pages|sortByDate }}

urlize

Converts a string to a slug.

{{ string|urlize }}

minifyCSS

Minify CSS.

{% filter minifyCSS %}
<style>
  html {
    background-color: #fcfcfc;
    color: #444;
    font: 100%/3rem 'Raleway', sans-serif;
  }
</style>
{% endfilter %}

minifyJS

Minify Javascript.

{% filter minifyJS %}
<script>
  (function(d) {
    var wf = d.createElement('script'), s = d.scripts[0];
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
    s.parentNode.insertBefore(wf, s);
 })(document);
</script>
{% endfilter %}

SCSStoCSS

Compile Sass to CSS.

{% filter SCSStoCSS %}
<style>
  $color: #abc;
  div { color: lighten($color, 20%); }
</style>
{% endfilter %}

excerpt

Truncate a string to 450 char and adds '…'.

{{ string|excerpt }}

excerptHtml

Read characters before <!-- excerpt -->.

{{ string|excerptHtml }}

Suggest a modification Next