fixed structure

This commit is contained in:
Ivan Schaller 2021-11-10 23:11:25 +01:00
parent 7d8da713c4
commit d96eb8e7de
110 changed files with 34 additions and 4308 deletions

6
.gitmodules vendored
View file

@ -1,6 +0,0 @@
[submodule "themes/hello-friend-ng"]
path = themes/hello-friend-ng
url = https://github.com/rhazdon/hugo-theme-hello-friend-ng.git
[submodule "themes/timeline"]
path = themes/timeline
url = https://github.com/s4n7h0/hugo-theme-timeline.git

View file

@ -2,5 +2,7 @@
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
comments: false
images:
---

View file

@ -17,7 +17,7 @@ body {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Roboto",
"Segoe UI", Helvetica, Arial, sans-serif;
font-display: auto;
font-size: 1rem;
font-size: 1.2rem;
line-height: 1.54;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@ -74,7 +74,6 @@ h1 {
h2 {
font-size: 1.625rem;
margin-top: 2.5em;
}
h3 {

View file

@ -1,7 +1,6 @@
baseurl = "https://44n.ch"
title = "44n.ch - Ivan Schaller"
languageCode = "en-us"
theme = "hello-friend-ng"
paginate = 10
timeZone = "Europe/Zurich"
@ -43,7 +42,15 @@ copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_
dateformNumTime = "2006-01-02 15:04"
# Subtitle for home
homeSubtitle = "Contact or find me on other platforms"
homeTitle = "Ivan Schaller"
homeSubtitle = "DevOps Engineer"
homeLinktext = "Find or contact me on other platforms"
# Set a background for the homepage
# backgroundImage = "assets/images/background.jpg"
# With this option on, the page user is able to set the scheme he wants.
enableThemeToggle = true
# Set disableReadOtherPosts to true in order to hide the links to other posts.
disableReadOtherPosts = true
@ -51,6 +58,8 @@ copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_
# Enable sharing buttons, if you like
enableSharingButtons = true
enableGlobalLanguageMenu = false
# Metadata mostly used in document's head
description = "Personal site of Ivan Schaller"
keywords = "homepage, blog"

6
content/_index.md Normal file
View file

@ -0,0 +1,6 @@
+++
title = "Home"
description = "Home"
type = ["default"]
+++

View file

@ -5,3 +5,6 @@ type = ["default"]
+++
## My name is Ivan Schaller
And im a DevOps Engineer

View file

@ -4,7 +4,7 @@ description = "Contact information"
type = ["default"]
+++
## I'd love to hear from you
You can reach me via [e-mail](mailto:ivan@schaller.sh) or the contact form below.
{{< rawhtml >}}

View file

@ -9,8 +9,14 @@
<img src="{{ .Site.Params.Portrait.Path }}" class="circle" alt="{{ .Site.Params.Portrait.Alt }}" style="max-width:{{ .Site.Params.Portrait.MaxWidth }}" />
{{ end }}
<h1>{{ .Site.Title }}</h1>
{{- with .Site.Params.homeSubtitle }}
<h1 style="margin: 0">{{ .Site.Params.homeTitle }}</h1>
<h2 style="display: initial">{{ .Site.Params.homeSubtitle }}</h2>
{{- with .Content }}
<p>{{.}}</p>
{{- end }}
{{- with .Site.Params.homeLinktext }}
<p>{{.}}</p>
{{- end }}

View file

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 320 B

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"main.b4aa1d56fab17acf87ebd337dacd359ae66dd46d6777f844d995cc5571aa7ca8.css","MediaType":"text/css","Data":{"Integrity":"sha256-tKodVvqxes+H69M32s01muZt1G1nd/hE2ZXMVXGqfKg="}}
{"Target":"main.02378e393390e7e2c12caa24f1da5d163945019aaf67fe7ac931355861d39104.css","MediaType":"text/css","Data":{"Integrity":"sha256-AjeOOTOQ5+LBLKok8dpdFjlFAZqvZ/56yTE1WGHTkQQ="}}

View file

@ -1,60 +0,0 @@
---
env:
es6: true
extends:
# https://github.com/airbnb/javascript
- airbnb
- eslint:recommended
- prettier
parser: babel-eslint
rules:
# best practices
arrow-parens:
- 2
- as-needed
semi:
- 2
- never
class-methods-use-this: 0
comma-dangle:
- 2
- always-multiline
no-console:
- 2
no-unused-expressions: 0
no-param-reassign:
- 2
- props: false
no-useless-escape: 0
func-names: 0
quotes:
- 2
- single
- allowTemplateLiterals: true
no-underscore-dangle: 0
object-curly-newline: 0
function-paren-newline: 0
operator-linebreak:
- 2
- after
no-unused-vars:
- 2
- argsIgnorePattern: "^_"
# jsx a11y
jsx-a11y/no-static-element-interactions: 0
jsx-a11y/anchor-is-valid:
- 2
- specialLink:
- to
globals:
document: true
requestAnimationFrame: true
window: true
self: true
fetch: true
Headers: true

View file

@ -1,38 +0,0 @@
# Created by https://www.gitignore.io/api/macos
# Edit at https://www.gitignore.io/?templates=macos
### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride
# Icon must end with two \r
Icon
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
# End of https://www.gitignore.io/api/macos
.vscode
# customize Headers whiteout touch git submodule.
layouts/partials/extra-head.html

View file

@ -1,14 +0,0 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## 2020-05-13
### Added
- Changelog
### Changed
- In order to make the image handling more consistent, the `cover` tag does not force the image to live in `/img/` anymore. [!131](https://github.com/rhazdon/hugo-theme-hello-friend-ng/pull/131).

View file

@ -1,4 +0,0 @@
# How to contribute
If you spot any bugs, please use [Issue Tracker](https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues) or if you want to add a new feature directly please create a new [Pull Request](https://github.com/rhazdon/hugo-theme-hello-friend-ng/pulls).

View file

@ -1,11 +0,0 @@
The MIT License (MIT)
Original work Copyright (c) 2018 Track3<br />
Original work Copyright (c) 2019 panr<br />
Modified work Copyright (c) 2019 Djordje Atlialp<br />
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View file

@ -1,206 +0,0 @@
# Hello Friend NG
![Hello Friend NG](https://dsh.re/d914c)
## General informations
This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). A lot of kudos for their great work.
---
## Table of Contents
- [Features](#features)
- [How to start](#how-to-start)
- [How to configure](#how-to-configure)
- [More](#more-things)
- [Built in shortcodes](#built-in-shortcodes)
- [image](#image)
- [Code highlighting](#code-highlighting)
- [Favicon](#favicon)
- [Audio Support](#audio-support)
- [Social Icons](#social-icons)
- [Known issues](#known-issues)
- [How to edit the theme](#how-to-edit-the-theme)
- [Changelog](CHANGELOG.md)
- [Sponsoring](#sponsoring)
- [Licence](#licence)
---
## Features
- Theming: **dark/light mode**, depending on your system preferences or the users choice
- Great reading experience thanks to [**Inter font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
- Nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
- An easy way to modify the theme with Hugo tooling
- Fully responsive
- Audio support for posts (thanks to [@talbotp](https://github.com/talbotp))
- Builtin (enableable/disableable) multilanguage menu
- Support for social icons
- Support for sharing buttons
- Support for [Commento](https://commento.io)
## How to start
You can download the theme manually by going to [https://github.com/rhazdon/hugo-theme-hello-friend-ng.git](https://github.com/rhazdon/hugo-theme-hello-friend-ng.git) and pasting it to `themes/hello-friend-ng` in your root directory.
You can also clone it directly to your Hugo folder:
``` bash
$ git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
```
If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. To do so, include it as a git submodule:
``` bash
$ git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
```
## How to configure
The theme doesn't require any advanced configuration. Just copy the following config file.
To see all possible configurations, [check the docs](docs/config.md).
Note: There are more options to configure. Take a look into the `config.toml` in `exampleSite`.
``` toml
baseurl = "localhost"
title = "My Blog"
languageCode = "en-us"
theme = "hello-friend-ng"
paginate = 10
[params]
dateform = "Jan 2, 2006"
dateformShort = "Jan 2"
dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04"
# Subtitle for home
homeSubtitle = "A simple and beautiful blog"
# Set disableReadOtherPosts to true in order to hide the links to other posts.
disableReadOtherPosts = false
# Enable sharing buttons, if you like
enableSharingButtons = true
# Metadata mostly used in document's head
description = "My new homepage or blog"
keywords = "homepage, blog"
images = [""]
[taxonomies]
category = "blog"
tag = "tags"
series = "series"
[languages]
[languages.en]
title = "Hello Friend NG"
subtitle = "A simple theme for Hugo"
keywords = ""
copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
readOtherPosts = "Read other posts"
[languages.en.params.logo]
logoText = "hello friend ng"
logoHomeLink = "/"
# or
#
# path = "/img/your-example-logo.svg"
# alt = "Your example logo alt text"
# And you can even create generic menu
[[menu.main]]
identifier = "blog"
name = "Blog"
url = "/posts"
```
## More things
### Built-in shortcodes
Of course you are able to use all default shortcodes from hugo (https://gohugo.io/content-management/shortcodes/).
#### image
Properties:
- `src` (required)
- `alt` (optional)
- `position` (optional, default: `left`, options: [`left`, `center`, `right`])
- `style`
Example:
``` golang
{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
```
### Code highlighting
By default the theme is using PrismJS to color your code syntax. All you need to do is to wrap you code like this:
<pre>
``` html
// your code here
```
</pre>
### Favicon
Check the [docs](docs/favicons.md).
### Audio Support
You wrote an article and recorded it? Or do you have a special music that you would like to put on a certain article? Then you can do this now without further ado.
In your article add to your front matters part:
```yaml
audio: path/to/file.mp3
```
## Social Icons:
A large variety of social icons are available and can be configured like this:
```toml
[[params.social]]
name = "<site>"
url = "<profile_URL>"
```
Take a look into this [list](docs/svgs.md) of available icon options.
If you need another one, just open an issue or create a pull request with your wished icon. :)
## Known issues
There is a bug in Hugo that sometimes causes the main page not to render correctly. The reason is an empty taxonomy part.
Related issue tickets: [!14](https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues/14) [!59](https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues/59).
Either you comment it out completely or you write the following in
``` toml
[taxonomies]
tag = "tags"
category = "categories"
```
## How to edit the theme
Just edit it. You don't need any node stuff. ;)
## Sponsoring
If you like my work and if you think this project is worth to support it, just <br />
<a href="https://www.buymeacoffee.com/djordjeatlialp" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-green.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
## Licence
Copyright © 2019-2021 Djordje Atlialp
The theme is released under the MIT License. Check the [original theme license](https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/LICENSE.md) for additional licensing information.

View file

@ -1,8 +0,0 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
comments: false
images:
---

View file

@ -1,15 +0,0 @@
# Configuration
There are some settings you can set in your `config.toml`.
## Default area
The settings in the default area are usually provided by Hugo itself. Check [Configure Hugo](https://gohugo.io/getting-started/configuration/#all-configuration-settings) for more information. But I want to list some important things here which are relevant to this theme.
### paginate
```
paginate = 10
```
This setting will paginate your list views. Set to `0` to disable it. For more information check (https://gohugo.io/templates/pagination/).

View file

@ -1,13 +0,0 @@
# Favicons
Use [RealFaviconGenerator](https://realfavicongenerator.net/) to generate these files, put them into your site's static folder:
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- mstile-150x150.png
- safari-pinned-tab.svg
- site.webmanifest

View file

@ -1,76 +0,0 @@
# Available Social Icons:
- [amazon](https://simpleicons.org/?q=amazon)
- [anilist](https://simpleicons.org/?q=anilist)
- [box](https://simpleicons.org/?q=box)
- [behance](https://simpleicons.org/?q=behance)
- [bitbucket](https://simpleicons.org/?q=bitbucket)
- case - generic briefcase icon for work based links
- [codesandbox](https://simpleicons.org/?q=codesandbox)
- [codechef](https://simpleicons.org/?q=codechef)
- [codepen](https://simpleicons.org/?q=codepen)
- dev
- [deviantart](https://simpleicons.org/?q=deviantart)
- [discogs](https://simpleicons.org/?q=discogs)
- [discord](https://simpleicons.org/?q=discord)
- [docker](https://simpleicons.org/?q=docker)
- [dribbble](https://simpleicons.org/?q=dribbble)
- [email](https://feathericons.com/?query=mail)
- [facebook](https://simpleicons.org/?q=facebook)
- [facebook-messenger](https://simpleicons.org/?q=messenger)
- [fitbit](https://simpleicons.org/?q=fitbit)
- git
- [gitbook](https://simpleicons.org/?q=gitbook)
- [gitea](https://simpleicons.org/?q=gitea)
- [github](https://feathericons.com/?query=github)
- [gitlab](https://feathericons.com/?query=gitlab)
- [gitter](https://simpleicons.org/icons/gitter.svg)
- [goodreads](https://simpleicons.org/?q=goodreads)
- [googleplay](https://simpleicons.org/?q=googleplay)
- [googlescholar](https://simpleicons.org/?q=googlescholar)
- [hackerone](https://simpleicons.org/?q=hackerone)
- [hackerrank](https://simpleicons.org/?q=hackerrank)
- [hackthebox](https://simpleicons.org/?q=hackthebox)
- [instagram](https://feathericons.com/?query=instagram)
- [kaggle](https://simpleicons.org/?q=kaggle)
- [keybase](https://simpleicons.org/?q=keybase)
- [lastfm](https://simpleicons.org/?q=lastfm)
- [leetcode](https://simpleicons.org/?q=leetcode)
- [letterboxd](https://simpleicons.org/?q=letterboxd)
- [librepay](https://simpleicons.org/?q=liberapay)
- [lichess](https://simpleicons.org/?q=lichess)
- [linkedin](https://feathericons.com/?query=linked)
- [mastodon](https://simpleicons.org/?q=mastodon)
- [matrix](https://simpleicons.org/?q=matrix)
- [medium](https://simpleicons.org/?q=medium)
- [mixcloud](https://simpleicons.org/?q=mixcloud)
- [npm](https://simpleicons.org/?q=npm)
- [opencollective](https://simpleicons.org/?q=opencollective)
- [orcid](https://simpleicons.org/?q=orcid)
- [peertube](https://simpleicons.org/?q=peertube)
- [pinterest](https://simpleicons.org/?q=pinterest)
- [pixelfed](https://github.com/pixelfed/pixelfed/blob/dev/public/img/pixelfed-icon-black.svg)
- [podcasts-apple](https://simpleicons.org/?q=podcast)
- [podcasts-google](https://simpleicons.org/?q=podcast)
- [polywork](https://simpleicons.org/?q=polywork)
- [reddit](https://simpleicons.org/?q=reddit)
- [researchgate](https://simpleicons.org/?q=researchgate)
- [signal](https://simpleicons.org/?q=signal)
- [slack](https://simpleicons.org/?q=slack)
- [soundcloud](https://simpleicons.org/?q=soundcloud)
- [spotify](https://simpleicons.org/?q=spotify)
- [stackoverflow](https://simpleicons.org/?q=stackoverflow)
- [steam](https://simpleicons.org/?q=Steam)
- [telegram](https://simpleicons.org/?q=telegram)
- [threema](https://simpleicons.org/?q=threema)
- [tryhackme](https://simpleicons.org/?q=tryhackme)
- [tumblr](https://simpleicons.org/?q=tumblr)
- [twitch](https://simpleicons.org/?q=twitch)
- [twitter](https://simpleicons.org/?q=twitter)
- [unsplash](https://simpleicons.org/?q=unsplash)
- [whatsapp](https://simpleicons.org/?q=whatsapp)
- [xampp](https://simpleicons.org/?q=xampp)
- [xing](https://simpleicons.org/?q=xing)
- [xmpp](https://simpleicons.org/?q=xmpp)
- [ycombinator](https://simpleicons.org/?q=ycombinator)
- [youtube](https://simpleicons.org/?q=youtube)

View file

@ -1,200 +0,0 @@
baseURL = "https://example.com"
title = "Hello Friend NG"
languageCode = "en-us"
theme = "hello-friend-ng"
PygmentsCodeFences = true
PygmentsStyle = "monokai"
paginate = 10
rssLimit = 10 # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
# googleAnalytics = ""
# disqusShortname = ""
archetypeDir = "archetypes"
contentDir = "content"
dataDir = "data"
layoutDir = "layouts"
publishDir = "public"
buildDrafts = false
buildFuture = false
buildExpired = false
canonifyURLs = true
enableRobotsTXT = true
enableGitInfo = false
enableEmoji = true
enableMissingTranslationPlaceholders = false
disableRSS = false
disableSitemap = false
disable404 = false
disableHugoGeneratorInject = false
[permalinks]
posts = "/posts/:year/:month/:title/"
[author]
name = "Jane Doe"
[blackfriday]
hrefTargetBlank = true
[taxonomies]
tag = "tags"
category = "categories"
series = "series"
[params]
dateform = "Jan 2, 2006"
dateformShort = "Jan 2"
dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04"
# Metadata mostly used in document's head
#
description = "Nice theme for homepages and blogs"
keywords = ""
images = [""]
# Home subtitle of the index page.
#
homeSubtitle = "Hello Friend NG"
# Set a background for the homepage
# backgroundImage = "assets/images/background.jpg"
# Prefix of link to the git commit detail page. GitInfo must be enabled.
#
# gitUrl = ""
# Set disableReadOtherPosts to true in order to hide the links to other posts.
#
disableReadOtherPosts = false
# Enable theme toggle
#
# This options enables the theme toggle for the theme.
# Per default, this option is off.
# The theme is respecting the prefers-color-scheme of the operating systeme.
# With this option on, the page user is able to set the scheme he wants.
enableThemeToggle = false
# Sharing buttons
#
# There are a lot of buttons preconfigured. If you want to change them,
# generate the buttons here: https://sharingbuttons.io
# and add them into your own `layouts/partials/sharing-buttons.html`
#
enableSharingButtons = true
# Global language menu
#
# Enables the global language menu.
#
enableGlobalLanguageMenu = true
# Integrate Javascript files or stylesheets by adding the url to the external assets or by
# linking local files with their path relative to the static folder, e.g. "css/styles.css"
#
customCSS = []
customJS = []
# Toggle this option need to rebuild SCSS, requires extended version of Hugo
#
justifyContent = false # Set "text-align: justify" to .post-content.
# Custom footer
# If you want, you can easily override the default footer with your own content.
#
[params.footer]
trademark = true
rss = true
copyright = true
author = true
topText = []
bottomText = [
"Powered by <a href=\"http://gohugo.io\">Hugo</a>",
"Made with &#10084; by <a href=\"https://github.com/rhazdon\">Djordje Atlialp</a>"
]
# Colors for favicons
#
[params.favicon.color]
mask = "#1b1c1d"
msapplication = "#1b1c1d"
theme = "#1b1c1d"
[params.logo]
logoMark = ">"
logoText = "$ cd /home/"
logoHomeLink = "/"
# Set true to remove the logo cursor entirely.
# logoCursorDisabled = false
# Set to a valid CSS color to change the cursor in the logo.
# logoCursorColor = "#67a2c9"
# Set to a valid CSS time value to change the animation duration, "0s" to disable.
# logoCursorAnimate = "2s"
# Commento is more than just a comments widget you can embed —
# its a return to the roots of the internet.
# An internet without the tracking and invasions of privacy.
# An internet that is simple and lightweight.
# An internet that is focused on interesting discussions, not ads.
# A better internet.
# Uncomment this to enable Commento.
#
# [params.commento]
# url = ""
# Uncomment this if you want a portrait on your start page
#
# [params.portrait]
# path = "/img/image.jpg"
# alt = "Portrait"
# maxWidth = "50px"
# Social icons
[[params.social]]
name = "twitter"
url = "https://twitter.com/"
[[params.social]]
name = "email"
url = "mailto:nobody@example.com"
[[params.social]]
name = "github"
url = "https://github.com/"
[[params.social]]
name = "linkedin"
url = "https://www.linkedin.com/"
[[params.social]]
name = "stackoverflow"
url = "https://www.stackoverflow.com/"
[languages]
[languages.en]
subtitle = "Hello Friend NG Theme"
weight = 1
copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
[languages.fr]
subtitle = "Hello Friend NG Theme"
weight = 2
copyright = '<a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "about/"
[[menu.main]]
identifier = "posts"
name = "Posts"
url = "posts/"

View file

@ -1,19 +0,0 @@
+++
title = "About"
date = "2014-04-09"
aliases = ["about-us","about-hugo","contact"]
[ author ]
name = "Hugo Authors"
+++
Hugo is the **worlds fastest framework for building websites**. It is written in Go.
It makes use of a variety of open source projects including:
* https://github.com/russross/blackfriday
* https://github.com/alecthomas/chroma
* https://github.com/muesli/smartcrop
* https://github.com/spf13/cobra
* https://github.com/spf13/viper
Learn more and contribute on [GitHub](https://github.com/gohugoio).

View file

@ -1,352 +0,0 @@
+++
categories = ["Go"]
date = "2014-04-02"
description = ""
featured = "pic02.jpg"
featuredalt = ""
featuredpath = "date"
linktitle = ""
slug = "Introduction aux modeles Hugo"
title = "Introduction aux modèles (Hu)go"
type = ["posts","post"]
[ author ]
name = "Michael Henderson"
+++
Hugo utilise l'excellente librairie [go][] [html/template][gohtmltemplate] pour
son moteur de modèles. c'est un moteur extrêmement léger qui offre un très petit
nombre de fonctions logiques. À notre expérience, c'est juste ce qu'il faut pour
créer un bon site web statique. Si vous avez déjà utilisé d'autre moteurs de
modèles pour différents langages ou frameworks, vous allez retrouver beaucoup de
similitudes avec les modèles go.
Ce document est une introduction sur l'utilisation de Go templates. La
[documentation go][gohtmltemplate] fourni plus de détails.
## Introduction aux modèles Go
Go templates fournit un langage de modèles très simple. Il adhère à la
conviction que les modèles ou les vues doivent avoir une logique des plus
élémentaires. L'une des conséquences de cette simplicité est que les modèles
seront plus rapides a être analysés.
Une caractéristique unique de Go templates est qu'il est conscient du contenu.
Les variables et le contenu va être nettoyé suivant le contexte d'utilisation.
Plus de détails sont disponibles dans la [documentation go][gohtmltemplate].
## Syntaxe basique
Les modèles en langage Go sont des fichiers HTML avec l'ajout de variables et
fonctions.
**Les variables Go et les fonctions sont accessibles avec {{ }}**
Accès à une variable prédéfinie "foo":
{{ foo }}
**Les paramètres sont séparés par des espaces**
Appel de la fonction add avec 1 et 2 en argument**
{{ add 1 2 }}
**Les méthodes et les champs sont accessibles par un point**
Accès au paramètre de la page "bar"
{{ .Params.bar }}
**Les parenthèses peuvent être utilisées pour grouper des éléments ensemble**
```
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
```
## Variables
Chaque modèle go a une structure (objet) mis à sa disposition. Avec Hugo, à
chaque modèle est passé soit une page, soit une structure de nœud, suivant quel
type de page vous rendez. Plus de détails sont disponibles sur la page des
[variables](/layout/variables).
Une variable est accessible par son nom.
<title>{{ .Title }}</title>
Les variables peuvent également être définies et appelées.
{{ $address := "123 Main St."}}
{{ $address }}
## Functions
Go templace est livré avec quelques fonctions qui fournissent des
fonctionnalités basiques. Le système de Go template fourni également un
mécanisme permettant aux applications d'étendre les fonctions disponible. Les
[fonctions de modèle Hugo](/layout/functions) fourni quelques fonctionnalités
supplémentaires que nous espérons qu'elles seront utiles pour vos sites web.
Les functions sont appelées en utilisant leur nom suivi par les paramètres
requis séparés par des espaces. Des fonctions de modèles ne peuvent pas être
ajoutées sans recompiler Hugo.
**Exemple:**
{{ add 1 2 }}
## Inclusions
Lorsque vous incluez un autre modèle, vous devez y passer les données qu'il sera
en mesure d'accèder. Pour passer le contexte actuel, pensez à ajouter un point.
La localisation du modèle sera toujours à partir du répertoire /layout/ dans
Hugo.
**Exemple:**
{{ template "chrome/header.html" . }}
## Logique
Go templates fourni les itérations et la logique conditionnèle des plus basique.
### Itération
Comme en go, les modèles go utilisent fortement *range* pour itérer dans une
map, un array ou un slice. Les exemples suivant montre différentes façons
d'utiliser *range*
**Exemple 1: En utilisant le context**
{{ range array }}
{{ . }}
{{ end }}
**Exemple 2: En déclarant un nom de variable**
{{range $element := array}}
{{ $element }}
{{ end }}
**Exemple 2: En déclarant un nom de varialbe pour la clé et la valeur**
{{range $index, $element := array}}
{{ $index }}
{{ $element }}
{{ end }}
### Conditions
*If*, *else*, *with*, *or*, *&*, *and* fournissent la base pour la logique
conditionnelle avec Go templates. Comme *range*, chaque déclaration est fermé
avec `end`.
Go templates considère les valeurs suivante comme *false* :
* false
* 0
* tout array, slice, map ou chaine d'une longueur de zéro
**Exemple 1: If**
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
**Exemple 2: If -> Else**
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{else}}
{{ index .Params "caption" }}
{{ end }}
**Exemple 3: And & Or**
```
{{ if and (or (isset .Params "title") (isset .Params "caption"))
(isset .Params "attr")}}
```
**Exemple 4: With**
Une manière alternative d'écrire un "if" et de référencer cette même valeur est
d'utiliser "with". Cela permet de remplacer le contexte `.` par cet valeur et
saute le bloc si la variable est absente.
Le premier exemple peut être simplifié à ceci :
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
**Exemple 5: If -> Else If**
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{ else if isset .Params "caption" }}
{{ index .Params "caption" }}
{{ end }}
## *Pipes*
L'un des composants le plus puissant de Go templates est la capacité d'empiler
les action l'une après l'autre. Cela est fait en utilisant les *pipes*.
Empruntés aux *pipes* unix, le concept est simple. Chaque sortie de *pipeline*
devient l'entrée du *pipe* suivant.
À cause de la syntaxe très simple de Go templates, le *pipe* est essentiel pour
être capable d'enchainer les appels de fonctions. Une limitation des *pipes*
est qu'il ne peuvent fonctionner seulement avec une seule valeur et cette valeur
devient le dernier paramètre du prochain *pipeline*.
Quelques exemples simple devrait vous aider à comprendre comment utiliser les
*pipes*.
**Exemple 1 :**
{{ if eq 1 1 }} Same {{ end }}
est identique à
{{ eq 1 1 | if }} Same {{ end }}
Il semble étrange de placer le *if* à la fin, mais il fournit une bonne
illustration de la façon d'utiliser les tuyaux.
**Exemple 2 :**
{{ index .Params "disqus_url" | html }}
Accès au paramètre de page nommé "disqus_url" et échappement du HTML
**Exemple 3 :**
```
{{ if or (or (isset .Params "title") (isset .Params "caption"))
(isset .Params "attr")}}
Stuff Here
{{ end }}
```
Peut être réécrit en
```
{{ isset .Params "caption" | or isset .Params "title" |
or isset .Params "attr" | if }}
Stuff Here
{{ end }}
```
## Contexte (alias. le point)
Le concept le plus facilement négligé pour comprendre les modèles go est que
{{ . }} fait toujours référence au contexte actuel. Dans le plus haut niveau de
votre modèle, ce sera l'ensemble des données mis à votre disposition. Dans une
itération, ce sera la valeur de l'élément actuel. Enfin, dans une boucle, le
contexte change. . ne fera plus référence aux données disponibles dans la page
entière. Si vous avez besoin y d'accèder depuis l'intérieur d'une boucle, il est
judicieux d'y définir comme variable au lieu de dépendre du contexte.
**Exemple:**
```
{{ $title := .Site.Title }}
{{ range .Params.tags }}
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">
{{ . }}</a> - {{ $title }} </li>
{{ end }}
```
Notez que, une fois que nous sommes entrés dans la boucle, la valeur de
{{ . }} a changée. Nous avons défini une variable en dehors de la boucle, afin
d'y avoir accès dans la boucle.
# Les Paramètres d'Hugo
Hugo fournit l'option de passer des valeurs au modèle depuis la configuration du
site, ou depuis les métadonnées de chaque partie du contenu. Vous pouvez définir
n'importe quelle valeur de n'importe quel type (supporté par votre section
liminaire / format de configuration) et les utiliser comme vous le souhaitez
dans votre modèle.
## Utiliser les paramètres de contenu (page)
Dans chaque partie du contenu, vous pouvez fournir des variables pour être
utilisées par le modèle. Cela se passe dans la
[section liminaire](/content/front-matter).
Un exemple de cela est utilisé par ce site de documentation. La plupart des
pages bénéficient de la présentation de la table des matières. Quelques fois,
la table des matières n'a pas beaucoup de sens. Nous avons défini une variable
dans notre section liminaire de quelques pages pour désactiver la table des
matières.
Ceci est un exemple de section liminaire :
```
---
title: "Permalinks"
date: "2013-11-18"
aliases:
- "/doc/permalinks/"
groups: ["extras"]
groups_weight: 30
notoc: true
---
```
Ceci est le code correspondant dans le modèle :
{{ if not .Params.notoc }}
<div id="toc" class="well col-md-4 col-sm-6">
{{ .TableOfContents }}
</div>
{{ end }}
## Utiliser les paramètres de site (config)
Dans votre configuration de plus haut niveau (ex `config.yaml`), vous pouvez
définir des paramètres de site, dont les valeurs vous seront accessibles.
Pour les instances, vous pourriez délarer :
```yaml
params:
CopyrightHTML: "Copyright &#xA9; 2013 John Doe. All Rights Reserved."
TwitterUser: "spf13"
SidebarRecentLimit: 5
```
Avec un pied de page, vous devriez déclarer un `<footer>` qui est affiché
seulement si le paramètre `CopyrightHTML` est déclaré, et si il l'est, vous
devriez le déclarer comme HTML-safe, afin d'éviter d'échapper les entités HTML.
Cela vous permettra de le modifier facilement dans votre configuration au lieu
de le chercher dans votre modèle.
```
{{if .Site.Params.CopyrightHTML}}<footer>
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
</footer>{{end}}
```
Une alternative au "if" et d'appeler la même valeur est d'utiliser "with". Cela
modifiera le contexte et passera le bloc si la variable est absente :
```
{{with .Site.Params.TwitterUser}}<span class="twitter">
<a href="https://twitter.com/{{.}}" rel="author">
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
alt="Twitter"></a>
</span>{{end}}
```
Enfin, si vous souhaitez extraire des "constantes magiques" de vos mises en
page, vous pouvez le faire comme dans l'exemple suivant :
```
<nav class="recent">
<h1>Recent Posts</h1>
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
{{end}}</ul>
</nav>
```
[go]: <http://golang.org/>
[gohtmltemplate]: <http://golang.org/pkg/html/template/>

Some files were not shown because too many files have changed in this diff Show more