Thématisation de votre projet de GeoNode¶

Logos et graphiques¶

GeoNode intentionnellement ne comprend pas un grand nombre de fichiers graphiques dans son interface. Cette garde temps de chargement de page au minimum et permet une interface plus réactive. Cela dit, vous êtes libre de personnaliser votre interface GeoNode en changeant simplement le logo par défaut, ou en ajoutant vos propres images et graphiques pour offrir une GeoNode experience la façon dont vous l’envisagez.

Votre projet de GeoNode a un répertoire déjà mis en place pour le stockage de vos images à <geonode_custom>/static/img. Vous devrez placer tous les fichiers image que vous souhaitez utiliser pour votre projet dans ce répertoire.

Passons en revue un exemple des étapes nécessaires pour changer le logo par défaut.

1. Mettre en place le img annuaire :

   $ cd /home/geonode/geonode_custom/geonode_custom/static/img
   

2. Si vous n’avez pas déjà fait, obtenez l’image de votre logo. L’URL ci-dessous est juste un exemple, donc vous devez changer cette URL pour correspondre à l’emplacement de votre fichier ou le copier à cet emplacement:

   $ sudo wget http://www2.sta.uwi.edu/~anikov/UWI-logo.JPG
   $ sudo chown -Rf geonode: .
   

3. Mettre en place le répertoire des css:

   $ cd /home/geonode/geonode_custom/geonode_custom/static/css
   

4. Substituer le CSS qui affiche le logo de l’édition <geonode_custom>/static/css/site_base.css avec votre éditeur favori et ajoutant les lignes suivantes, en veillant à mettre à jour la largeur, la hauteur et les URL pour correspondre aux spécifications de votre image.

   $ sudo vi site_base.css
   

   .navbar-brand {
       width: 373px;
       height: 79px;
       background: transparent url("../img/UWI-logo.JPG") no-repeat scroll 15px 0px;
   }
   

5. Redémarrez votre projet GeoNode et regardez la page dans votre navigateur:

   $ cd /home/geonode
   $ sudo rm -Rf geonode/geonode/static_root/*
   $ cd geonode_custom
   $ python manage.py collectstatic
   $ sudo service apache2 restart
   

Visitez votre site à l’adresse http://localhost/ ou l’URL pour votre site.

Custom logo

Vous pouvez voir que l’en-tête a été élargie pour adapter à votre graphique. Dans les sections suivantes, vous apprendrez comment personnaliser cet en-tête pour le faire ressembler et fonctionner comme vous le souhaitez.

Cascade de feuilles de style¶

Dans la dernière section, vous avez déjà appris comment remplacer les règles CSS par défaut de GeoNode pour inclure votre propre logo. Vous êtes en mesure de personnaliser tout aspect de l’apparence de GeoNode de cette façon. Dans la dernière capture d’écran, vous avez vu que la zone principale de la page d’accueil est couvert par la tête élargie.

Tout d’abord, nous marcherons à travers les étapes nécessaires pour le déplacer vers le bas de sorte qu’il est plus caché, puis on va changer la couleur de fond de l’en-tête pour correspondre à la couleur de notre logo graphique.

1. Réouverture <geonode_custom>/static/css/site_base.css dans votre éditeur et ajouter la règle suivante après celui ajouté à l’étape précédente :

   $ cd /home/geonode/geonode_custom/geonode_custom/static/css
   $ sudo vi site_base.css
   

   #wrap {
       margin: 75px 75px;
   }
   

2. Ajouter une règle pour changer la couleur de fond de l’en-tête pour assortir le graphique de logo qui nous avons utilisé:

   .navbar-inverse {
       background: #0e60c3;
   }
   

3. Votre fichier CSS de projet devrait maintenant ressembler à ceci:

   .navbar-brand {
       width: 373px;
       height: 79px;
       background: url(../img/UWI-logo.JPG) no-repeat;
   }
   
   #wrap {
       margin: 75px 75px;
   }
   
   .navbar-inverse {
       background: #0e60c3;
   }
   

4. Redémarrez le serveur de développement et rechargez la page:

   $ python manage.py collectstatic
   $ sudo service apache2 restart
   

   

   CSS overrides

Note

Vous pouvez continuer à ajouter des règles à ce fichier pour remplacer les styles qui sont dans le fichier CSS de base de GeoNode qui est construit à partir de base.less. Vous trouverez peut-être utile d’utiliser les outils de développement de votre navigateur pour inspecter les éléments de votre site que vous voulez remplacer pour déterminer quelles règles sont déjà appliquées. Voir la capture d’écran ci-dessous. Une autre section de cet workshop traite de ce sujet de manière plus détaillée.

Capture d’écran de l’utilisation de débogueur de Chrome pour inspecter les remplacements CSS

Modèles et pages statiques¶

Maintenant que nous avons changé le logo de défaut et ajusté notre zone de contenu principale pour adapter la tête élargie, la prochaine étape est de mettre à jour le contenu de la page d’accueil elle-même. Votre projet de GeoNode comprend deux modèles de base que vous allez utiliser pour changer le contenu de vos pages.

Le fichier site_base.html (en <geonode_custom>/templates/) est le modèle de base que tous les autres modèles héritent de et vous l’utiliser pour mettre à jour des choses comme l’en-tête, barre de navigation, site- grande annonce, pied de page, et aussi pour inclure vos propres JavaScript ou autre contenu statique inclus dans chaque page de votre site. Il vaut la peine de jeter un oeil à le fichier de base de GeoNode sur GitHub. Vous disposez de plusieurs blocs à votre disposition pour pour des raisons impérieuses, mais puisque nous allons réexaminer ce dossier dans les sections futures de cet atelier, nous allons simplement regarder pour l’instant et de le laisser non modifiée.

Ouvert <geonode_custom>/templates/site_base.html dans votre éditeur :

  $ cd /home/geonode/geonode_custom/geonode_custom/templates
  $ sudo vi site_base.html

.. code-block:: html

   {% extends "base.html" %}
   {% block extra_head %}
       <link href="{{ STATIC_URL }}css/site_base.css" rel="stylesheet"/>
   {% endblock %}

Vous verrez qu’il étend à partir de base.html, qui est le modèles de GeoNode mentionnés ci-dessus et il remplace seulment le bloc extra_head pour inclure site_base.css de notre projet que nous avons modifié dans la section précédente. Vous pouvez voir sur la ligne 22 du modèle base.html de GeoNode que ce bloc est inclus dans un étaient vides et est mis en place spécifiquement pour vous d’inclure des fichiers CSS supplémentaires que votre projet est déjà mis en place pour le faire.

Maintenant que nous avons examiné site_base.html, nous allons effectivement remplacer un modèle différent.

Le fichier site_index.html est le modèle utilisé pour définir la page d’accueil de votre projet de GeoNode. Il étend le model index.html par défaut de GeoNode, et vous donne la possibilité de remplacer des domaines spécifiques de la page d’accueil, comme la hero area, mais il vous permet également de laisser sections telles que “Latest Layers” et “Maps” et la “Contribute” comme ils sont. Vous êtes bien sûr libre de remplacer ces sections si vous voulez et cette section vous montre les étapes nécessaires pour le faire ci-dessous.

1. Ouvert <geonode_custom>/templates/site_index.html dans votre éditeur de.

2. Modifiez le <h1> élément sur la ligne 9 pour dire autre chose que “Welcome”:

   <h1>{% trans "UWI GeoNode" %}</h1>
   

3. Modifier le paragraphe d’introduction pour inclure quelque chose de spécifique au sujet de votre projet de GeoNode:

   <p>
       {% blocktrans %}
       UWI's GeoNode is setup for students and faculty to collaboratively
       create and share maps for their class projects. It is maintained by the
       UWI Geographical Society.
       {% endblocktrans %}
   </p>
   

4. Changez le Obtenir lien route pour pointer vers un autre site:

   <span>
       For more information about the UWI Geographical society,
       <a href="http://uwigsmona.weebly.com/">visit our website</a>
   </span>
   

5. Ajoutez un graphique à la zone de héros le paragraphe remplacé à l’étape 3 ci-dessus :

   <img src = 'http://uwigsmona.weebly.com/uploads/1/3/2/4/13241997/1345164334.png'>
   

6. Votre édité site_index.html devrait maintenant ressembler à ceci:

   {% extends 'index.html' %}
   {% load i18n %}
   {% comment %}
   This is where you can override the hero area block. You can simply modify the content below or replace it wholesale to meet your own needs.
   {% endcomment %}
     {% block hero %}
     <div class="jumbotron">
       <div class="container">
           <h1>{% trans "UWI GeoNode" %}</h1>
           <div class="hero-unit-content"/>
           <div class="intro">
               <img src = 'http://uwigsmona.weebly.com/uploads/1/3/2/4/13241997/1345164334.png'>
           </div>
           <p>
               {% blocktrans %}
               UWI's GeoNode is setup for students and faculty to collaboratively
               create and share maps for their class projects. It is maintained by the
               UWI Geographical Society.
               {% endblocktrans %}
           </p>
           <span>
               For more information about the UWI Geographical society,
               <a href="http://uwigsmona.weebly.com/">visit our website</a>
           </span>
       </div>
     </div>
     {% endblock %}
   

7. Rafraîchez votre GeoNode projet pour voir les changements dans votre navigateur à l’adresse http://localhost/ ou l’URL pour votre site:

   $ python manage.py collectstatic
   $ sudo service apache2 restart
   

   

De là, vous pouvez continuer à personnaliser votre site_index.html pour répondre à vos besoins. Cet workshop vous monstrera aussi comme vous pouvez ajouter de nouvelles pages à votre site du projet de GeoNode.

Autres options de thématisation¶

Vous pouvez changer chaque pièce spécifique de votre projet de GeoNode en ajoutant des règles de style CSS à site_base.css, mais depuis que GeoNode est basée sur Bootstrap, il ya beaucoup de thèmes prédéfinis que vous pouvez simplement déposer dans votre projet pour obtenir un tout nouveau look. Ceci est très similaire aux thèmes de WordPress et c’est un moyen puissant et facile à changer l’apparence de votre site sans trop d’effort.