Pages, Templates¶
Les pages sont composées de zones et de blocs qui seront visibles par les utilisateurs en Front office. Une page est versionable, tradusible et soumis au workflow définis dans le Back office.
- Sur Open Orchestra, les templates disponibles utilisés par une page sont regroupés dans un conteneur,
- appelé templateSet.
Note
Un template set est sélectionné lors de la création d’un site. Ainsi toutes les pages de cd site peuvent utiliser les templates du template set sélectionné.
La création d’un nouveau template set se découpe en deux parties: Back office et Front office.
Configuration Back office¶
Configuration d’un template set¶
La configuration d’un template set ŝ’effectue simplement avec de la configuration YAML.
1 2 3 4 5 6 7 8 9 10 | # app/config.yml
# ...
open_orchestra_backoffice:
template_set:
default_template_set: # identifiant du template set
label: open_orchestra_backoffice.template_set.default.label # clé de traduction du label
styles: [] # Liste des styles qui peuvent être utilisés dans les blocs
templates: [] # Liste des templates appartenant au template set
|
Création d’un template¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | # app/config.yml
# ...
open_orchestra_backoffice:
template_set:
default_template_set: # Identifiant du template set
label: app.template_set.default.label # clé de traduction du label
styles: [] # Liste des styles qui peuvent être utilisés dans les blocs
templates:
my_custom_template: # Identifiant du template
areas: # Liste des aires du template contribuable
- main
label: app.template_set.default.template_name.my_custom_template # clé de traduction du label
# Chemin du fichier qui représente le template utilisé lors de la contribution d'un node
path: /bundles/app/templateSet/default_template_set/my_custom_template.html
|
Le fichier fournis par le path
est simplement un fichier HTML qui est utilisé afin d’avoir un rendu
visuelle du template lors de la contribution des pages utilisant ce template. Par exemple voici le fichier
utilisé pour my_custom_template qui est un template avec trois zones (header, main et footer) où
main est une zone contribuable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!-- src/AppBundle/Resources/public/templateSet/default_template_set/my_custom_template.html -->
<div class="row">
<div class="col-lg-12">
<!-- Ajout de la classe disabled pour désactiver la contribution de l'aire -->
<div class="area header disabled">
<span>Header</span>
<div class="block-container"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- data-aire-id obligatoire pour les zones contribuables -->
<div class="area " data-area-id="main">
<span>Main</span>
<div class="block-container"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="area footer disabled">
<span>Footer</span>
<div class="block-container"></div>
</div>
</div>
</div>
|
Note
Au sein de ce fichier, vous pouvez utiliser la représentation que vous désirez. Afin d’être reconnus
les conteneurs des aires contribuables doivent posséder l’attribut data-area-id
avec le nom de l’aire
comme valeur.
Voici le rendu Back office lorsque le template my_custom_template
est utilisé par une page :
Configuration Front office¶
Une fois la configuration Back office effectuée il faut réaliser le template qui sera utilisé pour le rendu front de la page.
Dans un premier temps, il faut créer un template twig ou d’un autre type suivant le moteur de template utilisé pour votre application Symfony.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | {# src/AppBundle/Resources/views/Template/Default/my_custom_template.html.twig #}
{% extends 'OpenOrchestraFrontBundle:Node:base_node.html.twig' %}
{% block body %}
<div class="container">
<header class="header">
Mon header
</header
<main class="row">
{{ render_area('main', node, {'parameters': parameters }) }}
</main>
<footer class="footer">
Mon footer
</footer>
</div>
{% endblock %}
|
Note
Il est recommandé d’étendre le template base_node.html.twig
qui permet de définir les
différentes balises contenues dans <head>
(title, meta, etc) en fonction de la page affichée.
Le template possède une zone contribuable en Back office, la zone main
. Afin d’afficher cette zone
et ces différents blocs contribués en Back Office, il existe la fonction twig render_area
.
Pour finir, il faut indiquer dans la configuration que le template my_custom_template
doit utiliser
le fichier my_custom_template.html.twig
pour effectuer son rendu.
1 2 3 4 5 6 7 8 9 | # app/config.yml
# ...
open_orchestra_front:
template_set:
default_template_set: # Identifiant du template set
templates:
my_custom_template: 'AppBundle:Template/Default:my_custom_template.html.twig'
|