Modifier le template de Gitea : Différence entre versions

De Analyse Développement Hacking
Sauter à la navigation Sauter à la recherche
(Page créée avec « Category:Git Category:Gitea {{Transclusion_Entete}} =Modifier le template de Gitea= Optimiser la personnalisation de Gitea : https://docs.gitea.io/en-us/customizi... »)
 
(Aucune différence)

Version actuelle datée du 11 octobre 2019 à 14:01

Consulter le wiki : Accueil du wiki - Objectifs - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack
Consulter le site : Accueil du site - Annuaire - Blog - Forum - Outils - Utilisateur     Consulter le Redmine : Accueil du Redmine

Modifier le template de Gitea

Optimiser la personnalisation de Gitea : https://docs.gitea.io/en-us/customizing-gitea/

Changer le favicon de Gitea

sudo -s
cd /var/lib/gitea/custom
mkdir public
cd public/
mkdir img
cd img/
wget https://ftp.visionduweb.fr/favicon.ico
wget https://ftp.visionduweb.fr/favicon.png
cd ../../
chown serveur-gitea:serveur-gitea -R custom/
service gitea restart
Si le favicon ne change pas, recréer les images, depuis un site en ligne par exemple.
Ici, mon favicon.ico est en 48x48 et le favicon.png en 16x16.
Le favicon est bien affiché dans le navigateur.
Le lien du favicon.png une fois en ligne : https://gitea.domaine.fr/img/favicon.png

Modifier la page d'accueil de Gitea

Utiliser les sources officielles pour surcharger et modifier le template : https://github.com/go-gitea/gitea/tree/master/templates
Copier le fichier https://github.com/go-gitea/gitea/blob/master/templates/home.tmpl dans le répertoire /var/lib/gitea/custom/templates/
Créer le dossier templates pour surcharger le template :
sudo -s
cd /var/lib/gitea/custom/
mkdir templates
cd templates
nano home.tmpl
chown -R serveur-gitea:serveur-gitea /var/lib/gitea/custom/templates/
Le modèle appliqué pour la page d'accueil du Gitea :
{{template "base/head" .}}
 <div class="home">
         <div class="ui stackable middle very relaxed page grid">
                 <div class="sixteen wide center aligned centered column">
                         <div>
                                 <img class="logo" src="{{AppSubUrl}}/img/gitea-lg.png" /></br/><br/>
                         </div>
                         <div class="hero">
                                 <h1 class="ui icon header title">
                                         {{AppName}}
                                 </h1>
                                 <h2><a href="https://ledomaine.com" target="_cannabis">Le Domaine</a> - Un média qui vous veut du bien.</h2>
 
 <strong>Nous contacter</strong>
 <br/>Pour une question ou une proposition au sujet du contenu du site 💨 redacteur@ledomaine.com
 <br/>Pour un problème technique ou une erreur sur le site 💨 info@ledomaine.com
 <br/>Pour un partenariat ou de la publicité 💨 pub@ledomaine.com
 <br/>Pour un accès au serveur Git 💨 gitea@ledomaine.com
 <br/>Pour toute autre question 💨 info@ledomaine.com
 <br/><br/></div></div></div></div>{{template "base/footer" .}}
Noter que le symbole 💨 est ici un code HTML : & # 128168 ;
# Redémarrer Gitea pour appliquer chacun des changements effectués par après.
sudo service gitea restart

Personnaliser la barre de navigation

Emplacement du code de la barre de navigation pour la surcharge : "/var/lib/gitea/custom/templates/base/head_navbar.tmpl".
Créer le dossier "base" et le fichier "head_navbar.tmpl".
Coller le code source correspondant dans le fichier : "https://github.com/go-gitea/gitea/blob/master/templates/base/head_navbar.tmpl".
cd /var/lib/gitea/custom/templates/
mkdir base
cd base
nano head_navbar.tmpl
Commenter le bouton d'aide :
<!--<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.i18n.Tr "help"}}</a>-->
Remplacer le lien et l'image de la barre de navigation :
  <a href="{{AppSubUrl}}/">
     <img class="ui mini image" src="{{AppSubUrl}}/img/gitea-sm.png">
Par le code suivant :
               <a href="https://domaine.com" target="_cannabis">
                <img style="display: inline; border-radius: 6px;" class="ui mini image" src="{{AppSubUrl}}/img/favicon-32x32.png"/>
                <span style="margin-left: 0.65em;">domaine.com</span>
Importer la nouvelle image dans le répertoire de personnalisation de Gitea.
Attention, ici, l'image favicon-32x32.png n'est pas une image standard dans le template Gitea.
J'ai choisi ce nommage dans le template qui a été personnalisé. Ce nom d'image pourrait être utilisé par certains services pour récupérer le favicon en 32x32 pixels.
Il aurait pu être préférable de conserver le nommage standard "gitea-sm.png" et d'ajouter "favicon-32x32.png" en tant que nouvelle image !
cd /var/lib/gitea/custom/public/img
wget https://ftp.visionduweb.fr/favicon-32x32.png
chown -R serveur-gitea:serveur-gitea /var/lib/gitea/custom/

Surcharger l'avatar affiché par défaut

sudo -s
cd /var/lib/gitea/custom/public/img
# Dupliquer l'image existante qui a été téléchargée précédemment.
cp favicon-32x32.png avatar_default.png
chown serveur-gitea:serveur-gitea -R /var/lib/gitea/custom/public/img/avatar_default.png
Emplacement de cette image dans le dépôt officiel : https://github.com/go-gitea/gitea/blob/master/public/img/avatar_default.png

sudo -s
cd /var/lib/gitea/custom/public/img/
wget https://ftp.visionduweb.fr/gitea-lg.png
chown -R serveur-gitea:serveur-gitea /var/lib/gitea/custom/public/img/
Emplacement de cette image dans le dépôt officiel : https://github.com/go-gitea/gitea/blob/master/public/img/gitea-lg.png

Ajouter une css personnalisée depuis l'entête

Copier le modèle https://github.com/go-gitea/gitea/blob/master/templates/base/head.tmpl dans le répertoire /var/lib/gitea/custom/templates/base/ puis le personnaliser.
sudo -s
cd /var/lib/gitea/custom/templates/base
nano head.tmpl
chown serveur-gitea:serveur-gitea head.tmpl
Inclure un fichier CSS personnalisé dans l'entête.
Ajouter la ligne <link rel="stylesheet" href="/css/custom.css"> au dessous des lignes suivantes.
       <link rel="shortcut icon" href="{{AppSubUrl}}/img/favicon.png" />
        <link rel="mask-icon" href="{{AppSubUrl}}/img/gitea-safari.svg" color="#609926">
        <link rel="preload" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
        <link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css">

        <!-- CSS personnalisée -->
        <link rel="stylesheet" href="/css/custom.css">
Redémarrer pour appliquer les modifications.
service gitea restart

Personnaliser le pied de page

Le pied de page affiche actuellement :
© Gitea Version: 1.10.0+dev-359-gbcd4af483 Page: 0ms Modèle: 0ms français JavaScript licenses API Site web Go1.13.1
Copier le modèle https://github.com/go-gitea/gitea/blob/master/templates/base/footer.tmpl dans le répertoire /var/lib/gitea/custom/templates/base/ puis le personnaliser.
sudo -s
cd /var/lib/gitea/custom/templates/base/
nano footer.tmpl
chown -R serveur-gitea:serveur-gitea /var/lib/gitea/custom/templates/
D'après le code {{template "base/footer_content" .}} le contenu du pied de page se trouve dans https://github.com/go-gitea/gitea/blob/master/templates/base/footer_content.tmpl
Copier le modèle https://github.com/go-gitea/gitea/blob/master/templates/base/footer_content.tmpl dans le répertoire /var/lib/gitea/custom/templates/base/ puis le personnaliser.
C'est bien ce fichier footer_content.tmpl qui faut créer pour modifier le pied de page ! Le fichier footer.tmpl n'est pas forcément adapté à notre besoin ici !
sudo -s
cd /var/lib/gitea/custom/templates/base/
nano footer_content.tmpl
chown -R serveur-gitea:serveur-gitea /var/lib/gitea/custom/templates/
<footer>
         <div class="ui container">
                 <div class="ui left">
                         © Ledomaine
 <!--{{if (or .ShowFooterVersion .PageIsAdmin)}}{{.i18n.Tr "version"}}: {{AppVer}}{{end}}-->
 <!--{{if ShowFooterTemplateLoadTime}}{{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong>{{end}}-->
                 </div>
                 <div class="ui right links">
                         {{if .ShowFooterBranding}}
                                 <a target="_blank" rel="noopener noreferrer" href="https://github.com/go-gitea/gitea"><i class="fa fa-github-square"></i><span class="sr-only">GitHub</span></a>
                         {{end}}
                         <div class="ui language bottom floating slide up dropdown link item">
                                 <i class="world icon"></i>
                                 <div class="text">{{.LangName}}</div>
                                 <div class="menu">
                                         {{range .AllLangs}}
                                                 <a lang="{{.Lang}}" class="item {{if eq $.Lang .Lang}}active selected{{end}}" href="{{if eq $.Lang .Lang}}#{{else}}{{$.Link}}?lang={{.Lang}}{{end}}">{{.Name}}</a>
                                         {{end}}
                                 </div>
                         </div>
 <!--
                         <a href="{{AppSubUrl}}/vendor/librejs.html" data-jslicense="1">JavaScript licenses</a>
                         {{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
                         <a target="_blank" rel="noopener noreferrer" href="https://gitea.io">{{.i18n.Tr "website"}}</a>
                         {{if (or .ShowFooterVersion .PageIsAdmin)}}<span class="version">{{GoVer}}</span>{{end}}
 -->
                 </div>
         </div>
 </footer>
Redémarrer pour appliquer les modifications.
service gitea restart

Appliquer un fichier CSS personnalisé

sudo -s
cd /var/lib/gitea/custom/public/
mkdir css
cd css
nano custom.css
chown -R serveur-gitea:serveur-gitea /var/lib/gitea/custom/
On pourrait modifier directement le fichier index.css /var/lib/gitea/custom/public/css/index.css en ajoutant https://github.com/go-gitea/gitea/blob/master/public/css/index.css puis en le modifiant.
On préférera utiliser une CSS personnalisée.
Rappel vu précédemment !
Inclure le CSS dans l'entête personnalisé /var/lib/gitea/custom/templates/base/head.tmpl
Ajouter la ligne <link rel="stylesheet" href="/css/custom.css"> au dessous des lignes suivantes.

        <link rel="shortcut icon" href="{{AppSubUrl}}/img/favicon.png" />
         <link rel="mask-icon" href="{{AppSubUrl}}/img/gitea-safari.svg" color="#609926">
         <link rel="preload" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css" as="style" onload="this.rel='stylesheet'">
         <noscript><link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css"></noscript>
         <link rel="stylesheet" href="{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css">

         <!-- CSS personnalisée -->
         <link rel="stylesheet" href="/css/custom.css">
Une marge de 80 pixels pourrait être inutile dans le pied de page.
Le mode développeur du navigateur affiche la CSS suivante comme étant celle par défaut.
.full.height {
     flex-grow: 1;
     padding-bottom: 80px;
 }
Fixer le padding-bottom à 0px et coller ce code dans la CSS personnalisée.
.full.height {
     flex-grow: 1;
     padding-bottom: 0px!important;
 }
Redémarrer pour appliquer les modifications.
sudo service gitea restart

Bibliographie

Installer Gitea

Installer un serveur Git avec Gitea.

Modifier le template

Ok.png Installation du serveur git Gitea : https://wiki.hadoly.fr/documentation_technique:gitea
Ok.png Modifier le favicon et les images de la page d'accueil : https://www.thedroneely.com/posts/lets-customize-gitea/

NAVIGATION

PARTICIPER ET PARTAGER

Vous êtes sur le wiki de Vision du Web.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Pour participer sur le wiki, créer un compte utilisateur en haut à droite.
La recherche interne du wiki permet de trouver le contenu qui vous intéresse.
Les informations présentes sur ce wiki sont issues d'une recherche personnelle.
Identifiez-vous pour poser vos questions sur la page de discussion de VisionDuWeb.
Améliorer le contenu des pages en faisant des propositions depuis l'onglet discussion.
Les informations du wiki ne doivent pas servir à nuire à autrui ou à un système informatique.
De nombreux outils gratuits sont listés et disponibles dans la boîte à outils de Vision du web.
D'autres pages du wiki peuvent correspondre à vos attentes. La liste de toutes les pages du wiki.

VALORISER LE WIKI

Valoriser le contenu partagé sur le wiki avec un don en monnaie numérique :
AEON - Bitcoins - Bitcoins Cash - Bitcoins Gold - Bitcore - Blackcoins - Basic Attention Token - Bytecoins - Clams - Dash - Monero - Dogecoins - Ğ1 - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash

OBTENIR DE LA MONNAIE NUMERIQUE

Obtenir gratuitement de la monnaie numérique :
Gagner des Altcoins - Miner des Altcoins.
Consulter le miroir du wiki depuis Planet Hoster : Le miroir du wiki version du 12 Juillet 2019.