Sources du blog ALLELLA
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2020-08-04-customize_gitea.markdown 2.5 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. ---
  2. layout: post
  3. title: "Personnalisation de l'interface d'un Gitea Dockerisé"
  4. date: 2020-08-04
  5. categories: [graphisme, outils]
  6. excerpt_separator: <!--more-->
  7. ---
  8. 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.
  9. <!--more-->
  10. Pour ceux qui souhaiteraient en faire de même sur une instance *classique*, cette [documentation](https://docs.gitea.io/en-us/customizing-gitea/) devrait suffire.
  11. ## Contexte
  12. 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 :
  13. ```
  14. $ docker run -d --name=gitea -p 10022:22 -p 10080:3000 -v /var/lib/gitea:/data gitea/gitea:latest
  15. ```
  16. ## Création et éditions des fichiers de surcharge
  17. 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.
  18. ```
  19. $ cd /var/lib/gitea/gitea
  20. $ mkdir -p public/css && touch public/css/custom.css
  21. $ mkdir -p templates/custom && touch templates/custom/header.tmpl
  22. ```
  23. ### Surcharge CSS
  24. 1. On ajoute nos règles CSS dans `public/css/custom.css` :
  25. ```
  26. body{
  27. color: red;
  28. }
  29. footer {
  30. display: none;
  31. }
  32. ```
  33. 2. On inclut la nouvelle CSS dans le template de header `templates/custom/header.tmpl` :
  34. ```
  35. <link rel="stylesheet" href="/css/custom.css" media="all" />
  36. ```
  37. ### Surchage de template
  38. Prenons l'exemple de la page d'accueil :
  39. 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` :
  40. ```
  41. $ cd /var/lib/gitea/gitea/templates
  42. $ wget https://github.com/go-gitea/gitea/raw/master/templates/home.tmpl
  43. ```
  44. 2. Modification du template :
  45. ```
  46. {{template "base/head"}}
  47. <div class="home">
  48. <div class="ui stackable middle very relaxed page grid">
  49. <div class="sixteen wide center aligned centered column">
  50. <div>
  51. <img class="logo" src="{{StaticUrlPrefix}}/img/gitea-lg.png" />
  52. </div>
  53. <div class="hero">
  54. <h1 class="ui icon header title">
  55. This is a title
  56. </h1>
  57. <h2>And this is a subtitle...</h2>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. ```
  63. 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).
  64. ## Redémarrage du container
  65. Un redémarrage est nécessaire pour la prise en compte des modifications apportées :
  66. ```
  67. $ docker container restart <container_id>
  68. ```