Modifier le template de Gitea

De Wiki Amis SH
Aller à la navigation Aller à la recherche



Le wiki : Accueil - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack


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

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

NAVIGATION

PARTICIPER ET PARTAGER

Bienvenue sur le wiki de Amis SH.
De nombreuses pages sont partagées sur ce wiki.
Créer un compte utilisateur pour participer sur le wiki.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Utiliser la recherche interne du wiki pour trouver votre contenu.
La page de discussion de Amis SH vous permet de poser vos questions.
Consulter le site amis-sh.fr pour installer votre propre serveur web.
Améliorer le contenu des pages avec vos retours depuis l'onglet discussion.
Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique.
Protéger votre système Linux ou Windows avec cette page dédiée à la sécurité.

SOUTENIR CE WIKI

Soutenir 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 :
Miner de la cryptomonnaie.
Récupérée de « https://wiki.amis-sh.fr/index.php?title=Modifier_le_template_de_Gitea&oldid=497 »