GARAGENUM/docs
GARAGENUM/docs
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'hugo2' into rules

Browse Source
This commit is contained in:
makayabou 2021-01-02 02:02:23 +01:00
commit d06a53ab54
7 changed files with 68 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,4 +1,4 @@
geany/ geany/
mkdocs-material/ mkdocs-material/
docs/draft docs/draft
public public

21
docs/divers/devops/hugo/add_menu.md
View File

@ -12,27 +12,24 @@ Nous créons un partial pour définir le menu, et nous appelons le partial dans
!!! note "Appel du partial dans header.html" !!! note "Appel du partial dans header.html"
```html ```html
{% raw %} {\{ partial "menu.html" . }}
{{ partial "menu.html" . }}
{% endraw %}
``` ```
### Création du partial menu.html ### Création du partial menu.html
??? note "layouts/partials/menu.html" ??? note "layouts/partials/menu.html"
=== "Contenu" === "Contenu"
```html ```html
{% raw %}
<nav class="menu" aria-label="menu"> <nav class="menu" aria-label="menu">
<ul class="menu__items" aria-label="menu"> <ul class="menu__items" aria-label="menu">
{{ $current := . }} {\{ $current := . }}
{{ range .Site.Menus.main }} {\{ range .Site.Menus.main }}
<li class="menu__items__item" aria-label="{{ .Name }}"> <li class="menu__items__item" aria-label="{\{ .Name }}">
<a href="{{ .URL }}" class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}" <a href="{\{ .URL }}" class="menu__items__item__link {\{ if $current.IsMenuCurrent "main" . }}active{\{ end }}"
alt="{{ .Name }}" role="menuitem"> alt="{\{ .Name }}" role="menuitem">
{{ .Name }} {\{ .Name }}
</a> </a>
</li> </li>
{{ end }} {\{ end }}
</ul> </ul>
</nav> </nav>
{% endraw %} {% endraw %}
@ -48,5 +45,5 @@ Pour l'exemple, nous choisissons de créer la page `Présentation`.
Nous allons créer un template Nous allons créer un template
```html ```html
{% raw %}{{ .Content }}{% endraw %} {\{ .Content }}
``` ```

90
docs/divers/devops/hugo/create_website.md
View File

@ -1,6 +1,6 @@
# Créer un site web avec Hugo # Créer un site web avec Hugo
!!! important "**Dans ce tutoriel, vous devez remplacer `<name-of-project>`, par le nom de votre site, ex: info2000**)" !!! important "**Dans ce tutoriel, vous devez remplacer `<name-of-project>`, par le nom de votre site (ex: info2000)**"
## Étape 1: Construire le site ## Étape 1: Construire le site
@ -72,45 +72,41 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
??? note "**layouts/index.html**" ??? note "**layouts/index.html**"
=== "Contenu" === "Contenu"
``` ```
{{define "main"}} {\{define "main"}}
{{ partial "hero.html" }} {\{ partial "hero.html" }}
{{end}} {\{end}}
``` ```
=== "Explication" === "Explication"
Il s'agit d'un template spécifique à la page d'accueil. Il s'agit d'un template spécifique à la page d'accueil.
On appelle le template `layouts/default/baseof.html` avec la directive `{% raw %} {{define main}} {% endraw %}`. On appelle le template `layouts/default/baseof.html` avec la directive `{\{define main}}`.
On appelle aussi `partials/hero.html`, qui est en quelque sort le slogan de bannière du site. On appelle aussi `partials/hero.html`, qui est en quelque sort le slogan de bannière du site.
??? note "**layouts/partials/hero.html**" ??? note "**layouts/partials/hero.html**"
=== "Contenu" === "Contenu"
``` ```
{% raw %} <main class="hero">
<main class="hero"
<div class="hero__caption" > <div class="hero__caption" >
{{ .Content }} {\{ .Content }}
</div> </div>
</main> </main>
{% endraw %}
``` ```
=== "Explication" === "Explication"
La directive `{% raw %} {{ .Content }} {% endraw %}` récupère le contenu de `content/_index.md` après les balises de l'en-tête Toml. La directive `{\{ .Content }}` récupère le contenu de `content/_index.md` après les balises de l'en-tête Toml.
??? note "**layouts/default/baseof.html**" ??? note "**layouts/default/baseof.html**"
=== "Contenu" === "Contenu"
``` ```
{% raw %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{{- partial "head.html" . -}} {\{- partial "head.html" . -}}
<body> <body>
{{- partial "header.html" . -}} {\{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} {\{- block "main" . }}{\{- end }}
{{- partial "footer.html" . -}} {\{- partial "footer.html" . -}}
</body> </body>
</html> </html>
{% endraw %}
``` ```
=== "Explication" === "Explication"
On appelle le partial `head.html`, puis on créé le `body` avec les partials `header.html` et `footer.html` . On appelle le partial `head.html`, puis on créé le `body` avec les partials `header.html` et `footer.html` .
@ -119,20 +115,18 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
??? note "**layouts/partials/head.html**" ??? note "**layouts/partials/head.html**"
=== "Contenu" === "Contenu"
``` ```
{% raw %}
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<title>{{ $.Site.Title }} - {{ .Title }}</title> <title>{\{ $.Site.Title }} - {\{ .Title }}</title>
<link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" /> <link rel="icon" href="{\{ $.Site.BaseURL }}{\{ $.Site.Params.favicon }}" />
<meta name="description" content="{{ $.Site.Params.description }}" /> <meta name="description" content="{\{ $.Site.Params.description }}" />
{{ hugo.Generator }} {\{ hugo.Generator }}
<!-- CSS --> <!-- CSS -->
{{ partial "styles.html" . }} {\{ partial "styles.html" . }}
</head> </head>
{% endraw %}
``` ```
=== "Explication" === "Explication"
C'est ici qu'on placera notamment les informations de référencement **SEO**. C'est ici qu'on placera notamment les informations de référencement **SEO**.
@ -143,37 +137,48 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
??? note "**layouts/partials/header.html**" ??? note "**layouts/partials/header.html**"
=== "Contenu" === "Contenu"
``` ```
{% raw %}
<header class="header"> <header class="header">
<div class="header__title"> <div class="header__title">
<a href="{{ "/" | relLangURL }}" class="header__title__link" alt="Home"> <a href="{\{ "/" | relLangURL }}" class="header__title__link" alt="Home">
{{ if $.Site.Params.logo }} {\{ if $.Site.Params.logo }}
<img src="{{ $.Site.BaseURL }}{{ $.Site.Params.logo }}" class="header__title__logo" alt="{{ $.Site.Title }}"> <img src="{\{ $.Site.BaseURL }}{\{ $.Site.Params.logo }}" class="header__title__logo" alt="{\{ $.Site.Title }}">
{{ else }} {\{ else }}
{{ $.Site.Title }} {\{ $.Site.Title }}
{{ end }} {\{ end }}
</a> </a>
</div> </div>
</header> </header>
{% endraw %}
``` ```
=== "Explication" === "Explication"
Ici des classes CSS sont appellées (`header`, `header__title`, etc.). Ici des classes CSS sont appellées (`header`, `header__title`, etc.).
Elles doivent être définies dans le fichier `assets/css/style.css` Elles doivent être définies dans le fichier `assets/css/style.css`
??? note "**layouts/partials/footer.html**"
```
<div class="container content">
<footer>
<div>
<p class="right credit">
Fancy footer here. Link to <a href="/">Home Page</a>
</p>
</div>
</footer>
</div>
</body>
</html>
```
### Le CSS ### Le CSS
??? note "**layouts/partials/styles.html**" ??? note "**layouts/partials/styles.html**"
=== "Contenu" === "Contenu"
``` ```
{% raw %} {\{ $style := resources.Get "css/style.css" }}
{{ $style := resources.Get "css/style.css" }} {\{ $base := resources.Get "css/base.css" }}
{{ $base := resources.Get "css/base.css" }} {\{ $bundle := slice $style $base | resources.Concat "css/bundle.css" }}
{{ $bundle := $style $base | resources.Concat "css/bundle.css" }} {\{ $css := $bundle | resources.Minify }}
{{ $css := $bundle | resources.Minify }} <link rel="stylesheet" href="{\{ $css.Permalink }}">
<link rel="stylesheet" href="{{ $css.Permalink }}">
{% endraw %}
=== "Explication" === "Explication"
On appelle les fichiers `style.css` et `base.css` dans `assets/css/` et on les minimise, après les avoir concaténés. On appelle les fichiers `style.css` et `base.css` dans `assets/css/` et on les minimise, après les avoir concaténés.
@ -249,6 +254,15 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
margin-top: 0.45rem; margin-top: 0.45rem;
} }
/* FOOTER */
.right {
float: right;
margin-left: 1rem;
}
.credit {
padding-top: 3rem;
font-size: small;
}
``` ```
??? note "**assets/css/base.css**" ??? note "**assets/css/base.css**"

19
docs/divers/devops/hugo/dokku_workflow.md
View File

@ -180,21 +180,4 @@ cd public
git add -A git add -A
git commit -m "some modifications" git commit -m "some modifications"
sudo git push dokku master sudo git push dokku master
``` ```
```
```
```
```
```
```
```
```
```
```
```
```
```
```
```
```

1
docs/divers/devops/hugo/index.md
View File

@ -3,6 +3,7 @@
Ce guide vous permet de développer un site web avec Hugo. Ce guide vous permet de développer un site web avec Hugo.
Vous réaliserez un site **from scratch** en suivant ces étapes : Vous réaliserez un site **from scratch** en suivant ces étapes :
- [Installer Hugo](install_hugo.md) - [Installer Hugo](install_hugo.md)
- [Créer le site web en local](create_website.md) - [Créer le site web en local](create_website.md)
- [Déployer le site web](deploy_website.md) - [Déployer le site web](deploy_website.md)

6
docs/divers/internal/mkdocs.md
View File

@ -85,11 +85,11 @@ Plus d'informations sur `https://squidfunk.github.io/mkdocs-material/reference/a
Certains caractères peuvent être mal intêrprétés. Il faut parfois les échapper en les encadrant avec les directives `{% raw %}` et `{% endraw %}`. Certains caractères peuvent être mal intêrprétés. Il faut parfois les échapper en les encadrant avec les directives `{% raw %}` et `{% endraw %}`.
C'est le cas par exemple avec les double-accolades, ( **double curly brackets** : `{% raw %}{{{% endraw %}`) qu'on utilise dans les templates Hugo. C'est le cas par exemple avec les double-accolades, ( **double curly brackets** : `{% raw %}{\{{% endraw %}`) qu'on utilise dans les templates Hugo.
Pour mettre la ligne `{% raw %}{{ define main}}{% endraw %}` dans un bloc quote, on écrira: Pour mettre la ligne `{% raw %}{\{ define main}}{% endraw %}` dans un bloc quote, on écrira:
``` ```
``` ```
{% raw %} {% raw %} {{ define main}} {% endravv %} {% endraw %} {% raw %} {% raw %} {\{ define main}} {% endravv %} {% endraw %}
``` ```
``` ```

2
overrides/main.html
View File

@ -5,7 +5,7 @@
<small> Authors: </small> <small> Authors: </small>
{% if git_info %} {% if git_info %}
{%- for author in git_info.get('page_authors') -%} {%- for author in git_info.get('page_authors') -%}
<small>{{ author.name }} , </small> <small>{\{ author.name }} , </small>
{%- endfor -%} {%- endfor -%}
{% endif %} {% endif %}
</div> </div>