Vous devez au préalable installer NodeJS sur votre machine : https://nodejs.org

Installation

Via la console, il vous suffit de simplement cloner le repository de FOX Website, de changer le remote GIT sur votre propre repository, de lancer la commande d'installation des packages NodeJS et d'exécuter la commande gulp !

git clone https://github.com/de-sign/fox-website my-project
cd my-project
git remote set-url origin git@your.git.repo.example.com:user/my-project.git
npm i
gulp

FOX Website utilise l'outils de templating Nunjucks afin de générer vos pages statiques : https://mozilla.github.io/nunjucks/

Templates

La tâche Gulp appellée njk génère chaque templates présents dans un dossier qui lui est propre situé dans pages/_templates/.

Pour créer votre propre template, il est recommandé de suivre les consignes suivantes :

<!doctype {{FW.doctype}}>
<html lang="{{FW.lang}}">
    <head>
        //=include ../_head.njk
    </head>
    <body>
        //=include _part.njk
    </body>
</html>

{% block part %}
    // Contenu générique du bloc part
{% endblock %}

Dans ce cas, la tâche va générer un fichier my-template.njk dans le dossier pages/_templates/. C'est ce dernier que vous devrez utiliser comme template de référence pour vos pages statiques.

Si vous souhaitez modifier cette logique, n'oubliez pas de modifier le fichier gulp/config.js en conséquence !

Pages

La tâche Gulp appellée html génère chaques pages page.html présentes dans un dossier qui lui est propre situé dans pages/ à l'emplacement indiqué dans son fichier de configuration page.json.

Les informations présentes dans votre page sont restituées avec l'aide du fichier de configuration global data/website.json, étendue avec le fichier de configuration page.json propre à cette dernière si existant.

Pour créer votre propre page, il est recommandé de suivre les consignes suivantes :

<!-- Extension du Layout -->
{% extends '_templates/' + FW.template.name + '.njk' %}

<!-- Extension des Blocks -->
{% block part %}
    <p>
        {{ FW.content.text | safe }}
    </p>
{% endblock %}

{
    "url": {
        "path": "my-page.html"
    },

    "meta": {
        "title": "My Page",
        "description": "Un page statique"
    },

    "template": {
        "name": "my-template",
    },

    "content": {
        "text": "Ceci est le contenu de <b>part</b>"
    }
}

Dans ce cas, la tâche va générer un fichier my-page.html à la racine de votre site statique.

Si vous souhaitez modifier cette logique, n'oubliez pas de modifier le fichier gulp/config.js en conséquence !

FOX Website utilise Javascript Vanilla afin de créer vos propres scripts : http://vanilla-js.com

La tâche Gulp appellée js unifie les fichiers présents dans un dossier qui lui est propre situé dans assets/js/.

Pour créer vos fichiers de scripts, il est recommandé de suivre les consignes suivantes :

//=require ../require.js
//=include _part.js

window.eddEventListener(
    'load',
    my_function,
    false
);

function my_function() {
    console.log('my_function');
}

Libre à vous d'utiliser TypeScript ou de modifier cette logique mais n'oubliez pas de modifier le fichier de configuration gulp en conséquence !