Twig

Twig.js is a pure JavaScript implementation of the Twig PHP templating language. The goal is to provide a library that is compatible with both browsers and server side containers such as node.js.

How to Use

Gameforest built with twig files and these sources are available in build/twig folder so open a twig file and save after you edited it. If you would like to compile to html don't forget to use the gulp task runner.

Run gulp build-html command to rebuild every single html file.

$ gulp build-html

Extends

It is required to include the layout.twig at the top of every twig page with the following command.Be careful because without layout.twig you are not able to compile html pages.

{% extends "views/layout.twig" %}

Blocks

Gameforest is using three kind of blocks: css, js and body. Write your html content into the body block and use your custom js or css just like in the example and compile the html page.

CSS

Add custom css files into css block like below. After you compiled the twig page then css files will be loaded from header section.

{% block css %}
<link href="plugins/**/*.css" rel="stylesheet">
{% endblock %}

JS

Add custom js files into js block like below. After you compiled the twig page then js files will be loaded from body after the footer and before theme.min.js script.

{% block js %}
<script src="plugins/**/*.js"></script>
{% endblock %}

HTML

Insert custom html code into body block like below. After you compiled the twig page then your html code will be added after the header section.

{% block body %}
<section></section>
{% endblock %}

Example

Use the code below if you would like to start your project with blank page. Add your custom html content, scripts and css files.

{% extends "views/layout.twig" %}

{% block css %}
<link href="plugins/example/example.css" rel="stylesheet">
{% endblock %}

{% block js %}
<script src="plugins/example/example.js"></script>
{% endblock %}

{% block body %}
<section class="breadcrumbs">
  <div class="container">
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
      <li class="active">Blank Page</li>
    </ol>
  </div>
</section>

<section class="blank">
  <!-- add content -->
</section>
{% endblock %}

Documentation