|
|
@@ -0,0 +1,92 @@ |
|
|
|
--- |
|
|
|
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> |
|
|
|
``` |