GeoNode personnalisation et le code source de contrôle de révision¶

La Communauté¶

Des projets ont souvent une communauté autour d’eux, composé d’autres utilisateurs dans des rôles différents (formelles ou informelles) :

• Propriétaire est l’utilisateur ou organisation qui a créé le projet le projet a-t-il sur leur compte.

• Maintainers et collaborateurs sont les utilisateurs principalement faire le travail sur un projet et la direction d’entraînement. Souvent, le propriétaire et le responsable sont les mêmes. Ils ont un accès en écriture au référentiel.

• Contributeurs est tout le monde qui a eu une demande de traction fusionnée dans un projet.

• Communauté membres sont les utilisateurs qui souvent utilisent et se soucient profondément le projet et sont actifs dans les discussions pour les fonctionnalités et tirez sur les requêtes.

Lisez-moi¶

Presque tous les projets de GitHub incluent un fichier de README.md. Le fichier readme fournit une configuration du terrain pour un projet avec des détails sur la façon de les utiliser, créer et parfois contribuer à un projet.

Licence¶

Un fichier LICENSE est la licence pour le projet. Une licence du projet open source informe les utilisateurs qu’ils peuvent et ne peuvent pas faire (par exemple, utiliser, modifier, redistribuer) et les contributeurs, qu’ils sont permettant à d’autres de le faire.

Documentation et Wikis¶

Beaucoup des projets fournissent plus que un readme pour donner des instructions pour comment les gens peuvent utiliser leur projet. Ils fournissent souvent un lien vers un autre fichier ou un dossier nommé docs dans le repository.

Alternativement, le référentiel peut utiliser le wiki de GitHub pour décomposer la documentation.

Issues¶

Les Issues sont une excellente façon de garder une trace de tâches, des améliorations et des bugs pour vos projets. Ils peuvent être partagés et discutés avec le reste de votre équipe. La plupart des projets de logiciel ont un traqueur de bug. Le traqueur de GitHub est tres simple et il est fourni par la section Issues.

Pour plus d’informations sur le fonctionnement des questions, consultez la section “Travailler avec GitHub Issues et Pull Requests“

Pull Requests¶

Si vous êtes capable de patcher un bogue ou ajouter une fonctionnalité vous-même, vous devez faire une une pull request avec le code sourc. Vous devez etre sure que vous avez lu tous les documents sur la contribution, que vous avez compri la licence et avez signé un CLA si nécessaire.

Une fois que vous avez soumis une demande de tirer les maintainer(s) pouvez comparer votre succursale à celle existante et décider ou non d’intégrer (traction) vos modifications.

Pour plus d’informations sur le fonctionnement de tirer les requêtes, reportez-vous à la section “Travailler avec GitHub Issues et Pull Requests“

Ouvrir une issue¶

1. Cliquez sur l’onglet Issues de la barre latérale.

   

2. Cliquez sur New Issue.

3. Donner votre Issue, un titre et une description.

   

Cliquez sur Submit new Issue lorsque vous avez terminé. Maintenant, cette question a une résidence permanente (URL) que vous pouvez référencer la même après il est fermé.

Délivre des conseils Pro¶

• Vérifiez existant questions pour votre question. Un problème de duplication est plus lente pour les deux parties afin de rechercher à travers des questions ouvertes et fermées pour voir si ce que vous exécutez dans a été abordée déjà.

• Être clair tout ce que votre problème est : quel était le résultat attendu, ce qui est arrivé à la place ? Détailler comment quelqu’un d’autre peut reproduire le problème.

• Lien vers démos recréer le problème sur des choses comme JSFiddle ou CodePen.

• Inclut système détails comme ce que le navigateur, bibliothèque ou système d’exploitation que vous utilisez et sa version.

• Coller la sortie erreur ou journaux dans votre livraison ou dans un Gist. Si en les collant dans le numéro, placez-le dans trois apostrophes inverses: ``` alors qu’il rend très bien.

Créer une nouvelle branche¶

• Allez dans le dossier de projet et créer une nouvelle branche

  $ cd /home/geonode/geonode_custom/
  $ sudo git branch add_logo
  $ sudo git checkout add_logo
  

  

• Vérifiez que vous travaillez sur la branche correcte: add_logo.

  $ cd /home/geonode/geonode_custom/
  $ git branch
  

  

• Pousser la nouvelle branche sur GitHub.

  $ cd /home/geonode/geonode_custom/
  $ sudo git push origin add_logo
  

  

Faire un commit¶

Sur GitHub, modifications enregistrées sont appelées commits.

Chaque commit a un associé commit message, qui est une description expliquant pourquoi une modification particulière a été apportée. Grâce à ces messages, vous et autres peuvent lire par le biais de validations et comprendre ce que vous avez fait et pourquoi.

• Ajouter un nouveau logo à votre GeoNode personnalisé, comme décrit dans la section Thématisation de votre projet de GeoNode

• Planquer les nouveaux fichiers dans le projet de travail à l’aide de git add

  $ cd /home/geonode/geonode_custom/
  $ sudo git add geonode_custom/static
  $ git status
  

  

• Validation les changements fournissant un comit message et poussez-les dans votre branche: add_logo.

  $ cd /home/geonode/geonode_custom/
  $ sudo git commit -m "Adding a new logo to the custom GeoNode"
  $ sudo git push origin add_logo
  

  

Créer une Pull Request pour modifier le Logo¶

• Cliquez sur l’icône de demande de tirer sur la barre latérale, puis de la page demande de tirer, sur le vert New pull request bouton nouveau.

  

• Sélectionnez la branche que vous faites, add_logo , à comparer avec master (l’original).

  

• Regarder par-dessus vos modifications dans les diffs sur la page de comparaison, assurez-vous qu’ils sont ce que vous voulez soumettre.

  

• Lorsque vous êtes convaincu que ce sont les changements que vous voulez envoyer, cliquez sur le gros bouton vert créer Create Pull Request.

  

• Donnez un titre à votre demande de tirer et puisqu’elle se rapporte directement à une question ouverte, ajouter “fixes #” et le numéro de la question dans le titre. Écrire une brève description de vos modifications.

  

Lorsque vous avez terminé avec votre message, cliquez sur Create pull request!

Fusionnez votre Pull Request¶

Il est temps de rassembler vos modifications – fusionner votre branche de add_logo dans la branche master (l’original).

Cliquez sur le bouton vert pour fusionner les modifications dans le maître. Cliquez sur confirmer fusionner. Allez-y et supprimer la branche, étant donné que ses modifications ont été incorporées, avec le bouton de direction de supprimer dans la boîte de pourpre.

Si vous revisitez sur la question que vous avez ouvert, il est maintenant terminée ! Parce que vous avez inclus “fixes #1” dans le titre de votre demande de tirer, GitHub a pris soin de fermer cette question lorsque la demande de tirer a été fusionnée !

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.