---
layout: post
title:  "Personnalisation de l'UI d'un Gitea Dockerisé"
date:   2020-08-04
categories: [graphisme, outils]
excerpt_separator: <!--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.
<!--more-->
Pour ceux qui souhaite le faire sur une instance "classique", cette [documentation](https://docs.gitea.io/en-us/customizing-gitea/) 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](https://github.com/go-gitea/gitea/raw/master/templates/home.tmpl) 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](https://github.com/go-gitea/gitea/tree/master/templates).

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

```
$ docker container restart <container_id>
```