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

Merge branch 'hugo2' into rules

Browse Source
benjamin
Florian Roger 4 years ago
parent 8f8baa7ba1 28b99cdd92
commit d06a53ab54
7 changed files with 68 additions and 73 deletions
Show Stats Download Patch File Download Diff File

2
.gitignore vendored
Unescape Escape View File

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

21
docs/divers/devops/hugo/add_menu.md
Unescape Escape 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"
```html
{% raw %}
{{ partial "menu.html" . }}
{% endraw %}
{\{ partial "menu.html" . }}
```
### Création du partial menu.html
??? note "layouts/partials/menu.html"
=== "Contenu"
```html
{% raw %}
<nav class="menu" aria-label="menu">
<ul class="menu__items" aria-label="menu">
{{ $current := . }}
{{ range .Site.Menus.main }}
<li class="menu__items__item" aria-label="{{ .Name }}">
<a href="{{ .URL }}" class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}"
alt="{{ .Name }}" role="menuitem">
{{ .Name }}
{\{ $current := . }}
{\{ range .Site.Menus.main }}
<li class="menu__items__item" aria-label="{\{ .Name }}">
<a href="{\{ .URL }}" class="menu__items__item__link {\{ if $current.IsMenuCurrent "main" . }}active{\{ end }}"
alt="{\{ .Name }}" role="menuitem">
{\{ .Name }}
</a>
</li>
{{ end }}
{\{ end }}
</ul>
</nav>
{% endraw %}
@ -48,5 +45,5 @@ Pour l'exemple, nous choisissons de créer la page `Présentation`.
Nous allons créer un template
```html
{% raw %}{{ .Content }}{% endraw %}
{\{ .Content }}
```

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

@ -1,6 +1,6 @@
# 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
@ -72,45 +72,41 @@ Dans le dossier `layouts` on créé l'arborescence suivante:
??? note "**layouts/index.html**"
=== "Contenu"
```
{{define "main"}}
{{ partial "hero.html" }}
{{end}}
{\{define "main"}}
{\{ partial "hero.html" }}
{\{end}}
```
=== "Explication"
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.
??? note "**layouts/partials/hero.html**"
=== "Contenu"
```
{% raw %}
<main class="hero"
<main class="hero">
<div class="hero__caption" >
{{ .Content }}
{\{ .Content }}
</div>
</main>
{% endraw %}
```
=== "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**"
=== "Contenu"
```
{% raw %}
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
{\{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}}
{\{- partial "header.html" . -}}
{\{- block "main" . }}{\{- end }}
{\{- partial "footer.html" . -}}
</body>
</html>
{% endraw %}
```
=== "Explication"
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**"
=== "Contenu"
```
{% raw %}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<title>{{ $.Site.Title }} - {{ .Title }}</title>
<link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" />
<meta name="description" content="{{ $.Site.Params.description }}" />
<title>{\{ $.Site.Title }} - {\{ .Title }}</title>
<link rel="icon" href="{\{ $.Site.BaseURL }}{\{ $.Site.Params.favicon }}" />
<meta name="description" content="{\{ $.Site.Params.description }}" />
{{ hugo.Generator }}
{\{ hugo.Generator }}
<!-- CSS -->
{{ partial "styles.html" . }}
{\{ partial "styles.html" . }}
</head>
{% endraw %}
```
=== "Explication"
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**"
=== "Contenu"
```
{% raw %}
<header class="header">
<div class="header__title">
<a href="{{ "/" | relLangURL }}" class="header__title__link" alt="Home">
{{ if $.Site.Params.logo }}
<img src="{{ $.Site.BaseURL }}{{ $.Site.Params.logo }}" class="header__title__logo" alt="{{ $.Site.Title }}">
{{ else }}
{{ $.Site.Title }}
{{ end }}
<a href="{\{ "/" | relLangURL }}" class="header__title__link" alt="Home">
{\{ if $.Site.Params.logo }}
<img src="{\{ $.Site.BaseURL }}{\{ $.Site.Params.logo }}" class="header__title__logo" alt="{\{ $.Site.Title }}">
{\{ else }}
{\{ $.Site.Title }}
{\{ end }}
</a>
</div>
</header>
{% endraw %}
```
=== "Explication"
Ici des classes CSS sont appellées (`header`, `header__title`, etc.).
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
??? note "**layouts/partials/styles.html**"
=== "Contenu"
```
{% raw %}
{{ $style := resources.Get "css/style.css" }}
{{ $base := resources.Get "css/base.css" }}
{{ $bundle := $style $base | resources.Concat "css/bundle.css" }}
{{ $css := $bundle | resources.Minify }}
<link rel="stylesheet" href="{{ $css.Permalink }}">
{% endraw %}
{\{ $style := resources.Get "css/style.css" }}
{\{ $base := resources.Get "css/base.css" }}
{\{ $bundle := slice $style $base | resources.Concat "css/bundle.css" }}
{\{ $css := $bundle | resources.Minify }}
<link rel="stylesheet" href="{\{ $css.Permalink }}">
=== "Explication"
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;
}
/* FOOTER */
.right {
float: right;
margin-left: 1rem;
}
.credit {
padding-top: 3rem;
font-size: small;
}
```
??? note "**assets/css/base.css**"

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

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

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

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

6
docs/divers/internal/mkdocs.md
Unescape Escape 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 %}`.
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
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save