blog/_posts/2020-08-04-customize_gitea.markdown

layout	title	date	categories	excerpt_separator
post	Personnalisation de l'interface d'un Gitea Dockerisé	2020-08-04	[graphisme outils]	<!--more-->

Parce que c’est toujours mieux de pouvoir adapter l’apparence d’un service selon son identité graphique, on regarde ici comment procéder sur une instance Gitea Dockerisée.

Pour ceux qui souhaiteraient en faire de même sur une instance classique, cette documentation devrait suffire.

Contexte

Nous prenons ici à titre d’exemple un container Docker Gitea dont le mappage des ports et le volume à utiliser pour la persistance des données sont définis, est lancé comme suit :

$ docker run -d --name=gitea -p 10022:22 -p 10080:3000 -v /var/lib/gitea:/data gitea/gitea:latest

Création et éditions des fichiers de surcharge

Il est nécessaire de créer 2 arborescences afin d’y stocker les modifications CSS d’une part, et de template d’autre part.

$ cd /var/lib/gitea/gitea
$ mkdir -p public/css && touch public/css/custom.css
$ mkdir -p templates/custom && touch templates/custom/header.tmpl

Surcharge CSS

1. On ajoute nos règles CSS dans public/css/custom.css :

body{
  color: red;
}

footer {
  display: none;
}

2. On inclut la nouvelle CSS dans le template de header templates/custom/header.tmpl :

<link rel="stylesheet" href="/css/custom.css" media="all" />

Surchage de template

Prenons l’exemple de la page d’accueil :

1. Récupération du template de la distribution Gitea de base dans templates/home.tmpl :

$ cd /var/lib/gitea/gitea/templates
$ wget https://github.com/go-gitea/gitea/raw/master/templates/home.tmpl

2. Modification du template :

{{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="{{StaticUrlPrefix}}/img/gitea-lg.png" />
			</div>
			<div class="hero">
				<h1 class="ui icon header title">
					This is a title
				</h1>
				<h2>And this is a subtitle...</h2>
			</div>
		</div>
	</div>
</div>

Afin de mieux comprendre l’organisation des fichiers de template de Gitea, c’est par ici.

Redémarrage du container

Un redémarrage est nécessaire pour la prise en compte des modifications apportées :

$ docker container restart <container_id>