Merge branch 'hugo2' into rules
This commit is contained in:
makayabou
commit
d06a53ab54
@ -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 }}
|
||||
```
|
||||
@ -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**"
|
||||
|
||||
@ -181,20 +181,3 @@ git add -A
|
||||
git commit -m "some modifications"
|
||||
sudo git push dokku master
|
||||
```
|
||||
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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 %}
|
||||
```
|
||||
```
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
