OverCms Wiki

Un CMS simple et puissant

Thèmes

Wiki  »  Thèmes  »  Page type

Page type

Bien, la configuration terminée on va commencer par réaliser la page type, c'est à dire une page complète comprenant les emplacements pour le contenu de la page, l'en-tête, la barre latérale, mais aussi la navigation.

Toutes les ressources (CSS, JS, Fonts, ..) doivent être dans le dossier assets/ de votre thème.

Ensuite, la page type sera divisée en 4 parties, dans le dossier includes/:

  • overall.htm: contient le <head> + l'ouverture du <body>
  • navbar.htm: contient la navbar
  • container.htm: contient la page, incluant l'en-tête et la barre latérale
  • footer.htm: contient le footer et fin de page

Ce qui donne en image:

Ouvrez le dossier includes/, nous allons voir comment se composent ces fichiers.

Overall

overall.htm
<!DOCTYPE html>
<html lang="{HTML_LANG}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{DESCRIPTION}">
    <link rel="shortcut icon" href="{WEBROOT}favicon.ico">
    <title>{PAGE} &bull; {NAME}</title>
 
    <!-- Bootstrap -->
    <link href="{ASSETS}css/bootstrap.min.css" rel="stylesheet">
    <link href="{ASSETS}css/style.css" rel="stylesheet">
 
    <!-- Dynamic CSS -->
    <!-- %CSS% -->
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
    <!-- jQuery handler before loaded -->
    <script type="text/javascript">(function(a){if(a.$)return;var b=[];a.$=function(c){b.push(c)};a.jQueryFlush=function(){while(f=b.shift())$(f)}})(window);</script>
 
  </head>
  <body>
    <!-- %FULL_PAGE% -->

Les {TAG} sont des variables qui seront remplacées lors de l'affichage de la page. Ainsi, {ASSETS} sera un lien vers votre dossier assets/. Ces {TAG} sont globaux, ils peuvent être utilisés dans l'ensemble du CMS (par les plugins, ou même dans les pages custom). Pour voir la liste, c'est ici.

Les %tag% sont spécifiques, ils sont remplacés quand le CMS récupère vos fichiers, et ont un but spécifique. %CSS% sera remplacé par le CSS qui sera ajouté par des plugins par exemple, et le tag ne peux pas être utilisé autre part. Les %tag% peuvent aussi être des blocs, comme une balise <div></div> par exemple (voir plus bas).

De plus, les %tag% peuvent être entourés de commentaires HTML, mais c'est facultatif.

Les scripts javascript sont à la fin de la page, pour 2 raisons:
- Les scripts ne bloquent pas l'affichage de la page
- Quand les scripts seront exécutés, tous le HTML sera chargé

Mais certains plugins ont peut être du script à exécuté, c'est la qu'intervient le script jQueryHandler. En effet, grâce à ce petit script, les plugins peuvent au milieu de la page mettre du code Javascript pour qu'il soit exécuté plus tard, simplement comme ceci: 

$(function () {
    // Sera exécuté à la fin de la page
});

En bref, vous n'avez pas vraiment besoin de savoir pourquoi ni comment, simplement ce script doit être mis dans le <head>.

Et enfin, le tag %FULL_PAGE% est un bloc. Si un plugin a activé le mode "plein écran" pour une page, alors seul le contenu de ce plugin sera affiché, donc il n'y aura ni navbar, ni barre latérale, etc.. Vous devez placer ce tag de sorte juste après <body>, pour qu'il n'y ai rien d'affiché avant.

Note: le plugin Buycraft utilise ce mode, n'hésitez pas à le tester pour comprendre.

navbar.htm
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">{NAME}</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
          <!-- %NAVBAR% -->
            <!-- %SINGLE% -->
            <li class="{ACTIVE_CURRENT}"><a href="{HREF}">{TITLE}</a></li>
            <!-- %SINGLE% -->
            <!-- %CHILD_START% -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{TITLE} <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <!-- %CHILD_START% -->
              <!-- %CHILD_SINGLE% -->
              <li><a href="{HREF}">{TITLE}</a></li>
              <!-- %CHILD_SINGLE% -->
              <!-- %CHILD_END% -->
              </ul>
            </li>
            <!-- %CHILD_END% -->
          <!-- %NAVBAR% -->
          </ul>
          <!-- %USER_SYSTEM% -->
          <ul class="nav navbar-nav navbar-right">
            <li class="{USER_1_ACTIVE_CURRENT}"><a href="{USER_1_HREF}">{USER_1_TITLE}</a></li>
            <li class="{USER_2_ACTIVE_CURRENT}"><a href="{USER_2_HREF}">{USER_2_TITLE}</a></li>
          </ul>
          <!-- %USER_SYSTEM% -->
        </div>
      </div>
    </div>

Pour comprendre comment on en est arrivé la, c'est simple. Il s'agit en fait de faire une barre latérale avec un onglet normal, et un onglet dans un dossier. Puis à cela on rajoute 2 onglets, qui seront soit Mon Compte / Déconnexion, soit Connexion / Inscription. A cela on a ajouté des %blocs% pour que le CMS puisse dupliquer les onglets/dossier autant de fois que nécessaire. Les {VARIABLES} pour le coup sont locales, c'est à dire que {TITLE} ne sera pas le titre de la page courante, mais le titre de l'onglet.

Container

container.htm
    <!-- %HEADER% -->
 
    <div class="container" style="padding-top: 40px;">
      <div class="row">
 
        <!-- %SIDEBAR_ON% --><div class="col-sm-8"><!-- %SIDEBAR_ON% -->
        <!-- %SIDEBAR_OFF% --><div class="col-sm-12"><!-- %SIDEBAR_OFF% -->
 
          <div class="panel panel-default">
            <div class="panel-body" id="container">
            <!-- %INNER% -->
            </div>
          </div>
 
        </div>
        <!-- %SIDEBAR_ON% -->
        <div class="col-sm-4">
 
            <!-- %SIDEBAR% -->
            <div class="panel panel-default">
              <div class="panel-heading"><h3 class="panel-title">%TITLE%</h3></div>
              <div class="panel-body">%CONTENT%</div>
            </div>
            <!-- %SIDEBAR% -->
 
        </div>
        <!-- %SIDEBAR_ON% -->
      </div>
 
    </div>

%HEADER% sera l'endroit où l'en-tête sera placée.

Tout ce qui est entre deux %SIDEBAR_ON% sera affiché uniquement si la barre latérale sera activée. De la même manière, tout ce qui est entre deux %SIDEBAR_OFF% sera affiché uniquement si la barre latérale sera désactivée.

%INNER% sera l'endroit où le contenu de la page sera affiché.

Et enfin, ce qui il y a entre %SIDEBAR% est un module de la barre latérale.

footer.htm
    <div class="footer">
      <div class="container">
        <p class="text-muted pull-right"><a href="#" style="color: #777" onclick="return !$('html, body').animate({ scrollTop: 0 }, 400);"><span style="left: -3px;" class="glyphicon glyphicon-chevron-up"></span>{@BACK_TO_TOP}</a></p>
        <p class="text-muted">&copy; {YEAR} {NAME} &nbsp;&#183;&nbsp; {FOOTER}</p>
      </div>
    </div>
 
    <!-- %FULL_PAGE% -->
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{ASSETS}js/bootstrap.js"></script>
 
    <!-- Execute jQuery function that was stored -->
    <script type="text/javascript">jQueryFlush();</script>
 
    <!-- Now user's scripts -->
    <script src="{ASSETS}js/form-ajax.js"></script>
    <!-- %JAVASCRIPT% -->
 
  </body>
</html>

On retrouve %FULL_PAGE%, il faut le mettre lorsque tout le HTML a été mis.

On retrouve aussi comme prévu tous les scripts. Maintenant qu'on a notre page type, attaquons nous au plus intéressant: le style.

Le style

Dans votre dossier assets/css/, vous devriez déjà avoir bootstrap.min.css', qui correspond à Bootstrap évidemment. Celui la, pas la peine de le modifier. Ouvrez alors le fichier style.css, c'est la dedans que tous vos styles seront définis. Comme vous pouvez le voir, il y a déjà un peu de code à l'intérieur: surtout ne le supprimez pas, car il adapte Bootstrap aux besoin du CMS. Vous pouvez éventuellement supprimer la partie Below is the template style'', et ajoutez votre style en dessous.

Par exemple, si vous voulez que les boutons principaux soit bleus, définissez le: 

.btn-primary {
    background: blue;
}

Enfin bref, vous devriez savoir faire ça, enfin je l'espère. Comme vous devriez vous en douter, la majorité de votre travail sera de redéfinir les boutons, les paragraphes, les navbar, etc.. aux couleurs que vous le souhaitez.

Page suivante: Autres pages