Commit 1eb76a7d authored by R茅gis WITZ's avatar R茅gis WITZ
Browse files

馃挌 met 脿 jour le theme beautifulhugo dans sa derni猫re version

parent 7028ae5a
---
title: Photoswipe Gallery Sample
subtitle: Making a Gallery
date: 2022-03-20
tags: ["exemple", "images"]
---
Beautiful Hugo adds a few custom shortcodes created by [Li-Wen Yip](https://www.liwen.id.au/heg/) and [Gert-Jan van den Berg](https://github.com/GjjvdBurg/HugoPhotoSwipe) for making galleries with [PhotoSwipe](http://photoswipe.com) .
{{< gallery caption-effect="fade" >}}
{{< figure thumb="-thumb" link="img/hexagon.jpg" >}}
{{< figure thumb="-thumb" link="img/sphere.jpg" caption="Sphere" >}}
{{< figure thumb="-thumb" link="img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" >}}
{{< /gallery >}}
{{< load-photoswipe >}}
<!--more-->
## Example
The above gallery was created using the following shortcodes:
```
{{</* gallery caption-effect="fade" */>}}
{{</* figure thumb="-thumb" link="/img/hexagon.jpg" */>}}
{{</* figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" */>}}
{{</* figure thumb="-thumb" link="/img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" */>}}
{{</* /gallery */>}}
{{</* load-photoswipe */>}}
```
## Usage
For full details please see the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) page. Basic usages from above are:
- Create a gallery with open and close tags `{{</* gallery */>}}` and `{{</* /gallery */>}}`
- `{{</* figure src="image.jpg" */>}}` will use `image.jpg` for thumbnail and lightbox
- `{{</* figure src="thumb.jpg" link="image.jpg" */>}}` will use `thumb.jpg` for thumbnail and `image.jpg` for lightbox
- `{{</* figure thumb="-small" link="image.jpg" */>}}` will use `image-small.jpg` for thumbnail and `image.jpg` for lightbox
- All the [features/parameters](https://gohugo.io/extras/shortcodes) of Hugo's built-in `figure` shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt
- `{{</* gallery caption-effect="fade" */>}}` will fade in captions for all figures in this gallery instead of the default slide-up behavior
- Many gallery styles for captions and hover effects exist; view the [hugo-easy-gallery GitHub](https://github.com/liwenyip/hugo-easy-gallery/) for all options
- Call `{{</* load-photoswipe */>}}` **once** anywhere you want on each page where you want to use PhotoSwipe
# Beautiful Hugo - A port of Beautiful Jekyll Theme
# Beautiful Hugo - An adaptation of the Beautiful Jekyll theme
![Beautiful Hugo Theme Screenshot](https://github.com/halogenica/beautifulhugo/blob/master/images/screenshot.png)
......@@ -6,9 +6,10 @@
$ mkdir themes
$ cd themes
$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo
$ git submodule add https://github.com/halogenica/beautifulhugo.git beautifulhugo
See [the Hugo documentation](http://gohugo.io/themes/installing/) for more information.
See [the Hugo documentation](https://gohugo.io/themes/installing/) for more information.
## Extra Features
......@@ -18,49 +19,165 @@ This theme is designed to look great on both large-screen and small-screen (mobi
### Syntax highlighting
This theme has support for both server side and client side highlighting.
This theme has support for either Hugo's lightning fast Chroma, or both server side and client side highlighting. See [the Hugo docs for more](https://gohugo.io/content-management/syntax-highlighting/).
#### Server side syntax highlighting
#### Chroma - New server side syntax highlighting
Use the `highlight` shortcode (with Pygments),
see [the Hugo documentation](http://gohugo.io/extras/highlighting/) for more information.
To enable Chroma, add the following to your site parameters:
To use this feature install Pygments (`pip install Pygments`) and add `pygmentsuseclasses = true` to your `config.toml`.
```
pygmentsCodeFences = true
pygmentsUseClasses = true
```
Then, you can generate a different style by running:
```
hugo gen chromastyles --style=trac > static/css/syntax.css
```
#### Client side syntax highlighting
#### Pygments - Old server side syntax highlighting
Use triple backticks ( ``` ) or triple tilde ( ~~~ ) around code blocks.
To use this feature install Pygments (`pip install Pygments`) and add the following to your site parameters:
Client side highlighting does not require pygments to be installed.
```
pygmentsStyle = "trac"
pygmentsUseClassic = true
```
Pygments is mostly compatable with the newer Chroma. It is slower but has some additional theme options. I recommend Chroma over Pygments. Pygments will use `syntax.css` for highlighting, unless you also set the config `pygmentsUseClasses = false` which will generate the style code directly in the HTML file.
#### Highlight.js - Client side syntax highlighting
```
[Params]
useHLJS = true
```
Client side highlighting does not require pygments to be installed. This will use `highlight.min.css` instead of `syntax.css` for highlighting (effectively disabling Chroma). Highlight.js has a wider range of support for languages and themes, and an alternative highlighting engine.
### Disqus support
To use this feature, uncomment and fill out the `disqusShortname` parameter in `config.toml`.
### Staticman support
Add *Staticman* configuration section in `config.toml` or `config.yaml`
Sample `config.toml` configuration
```
[Params.staticman]
api = "https://<API-ENDPOINT>/v3/entry/{GIT-HOST}/<USERNAME>/<REPOSITORY-BLOGNAME>/master/comments"
[Params.staticman.recaptcha]
sitekey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
```
Note: The public `API-ENDPOINT` https://staticman.net is currently hitting its API limit, so one may use other API instances to provide Staticman comment service.
The section `[Params.staticman.recaptcha]` is *optional*. To add reCAPTCHA to your site, you have to replace the default values with your own ones (to be obtained from Google.) The site `secret` has to be encrypted with
https://<API-ENDPOINT>/v3/encrypt/<SITE-SECRET>
You must also configure the `staticman.yml` in you blog website.
```
comments:
allowedFields: ["name", "email", "website", "comment"]
branch : "master"
commitMessage : "New comment in {options.slug}"
path: "data/comments/{options.slug}"
filename : "comment-{@timestamp}"
format : "yaml"
moderation : true
requiredFields : ['name', 'email', 'comment']
transforms:
email : md5
generatedFields:
date:
type : "date"
options:
format : "iso8601"
reCaptcha:
enabled: true
siteKey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
```
If you *don't* have the section `[Params.staticman]` in `config.toml`, you *won't* need the section `reCaptcha` in `staticman.yml`
### Google Analytics
To add Google Analytics, simply sign up to [Google Analytics](http://www.google.com/analytics/) to obtain your Google Tracking ID, and add this tracking ID to the `googleAnalytics` parameter in `config.toml`.
To add Google Analytics, simply sign up to [Google Analytics](https://www.google.com/analytics/) to obtain your Google Tracking ID, and add this tracking ID to the `googleAnalytics` parameter in `config.toml`.
### Commit SHA on the footer
If the source of your site is in a Git repo, the SHA corresponding to the commit the site is built from can be shown on the footer. To do so, two environment variables have to be set (`GIT_COMMIT_SHA` and `GIT_COMMIT_SHA_SHORT`) and parameter `commit` has to be defined in the config file:
If the source of your site is in a Git repo, the SHA corresponding to the commit the site is built from can be shown on the footer. To do so, two site parameters `commit` has to be defined in the config file `config.toml`:
```
enableGitInfo = true
[Params]
commit = "https://github.com/<username>/<siterepo>/tree/"
```
This can be achieved by running the next command prior to calling Hugo:
See at [vincenttam/vincenttam.gitlab.io](https://gitlab.com/vincenttam/vincenttam.gitlab.io) for an example of how to add it to a continuous integration system.
### Multilingual
To allow Beautiful Hugo to go multilingual, you need to define the languages
you want to use inside the `languages` parameter on `config.toml` file, also
redefining the content dir for each one. Check the `i18n/` folder to see all
languages available.
```toml
[languages]
[languages.en]
contentDir = "content/en" # English
[languages.ja]
contentDir = "content/ja" # Japanese
[languages.br]
contentDir = "content/br" # Brazilian Portuguese
```
Now you just need to create a subdir within the `content/` folder for each
language and just put stuff inside `page/` and `post/` regular directories.
```
GIT_COMMIT_SHA=`git rev-parse --verify HEAD` GIT_COMMIT_SHA_SHORT=`git rev-parse --short HEAD`
content/ content/ content/
鈹斺攢鈹 en/ 鈹斺攢鈹 br/ 鈹斺攢鈹 ja/
聽聽 鈹溾攢鈹 page/ 鈹溾攢鈹 page/ 聽聽 鈹溾攢鈹 page/
聽聽 鈹斺攢鈹 post/ 鈹斺攢鈹 post/ 聽聽 鈹斺攢鈹 post/
```
See at [xor-gate/xor-gate.org](https://github.com/xor-gate/xor-gate.org) an example of how to add it to a continuous integration system.
### Extra shortcodes
There are two extra shortcodes provided (along with the customized figure shortcode):
#### Details
This simply adds the html5 detail attribute, supported on all *modern* browsers. Use it like this:
```
{{< details "This is the details title (click to expand)" >}}
This is the content (hidden until clicked).
{{< /details >}}
```
#### Split
This adds a two column side-by-side environment (will turn into 1 col for narrow devices):
```
{{< columns >}}
This is column 1.
{{< column >}}
This is column 2.
{{< endcolumn >}}
```
## About
This is a port of the Jekyll theme [Beautiful Jekyll](http://deanattali.com/beautiful-jekyll/) by [Dean Attali](http://deanattali.com/aboutme#contact). It supports most of the features of the original theme.
This is an adaptation of the Jekyll theme [Beautiful Jekyll](https://deanattali.com/beautiful-jekyll/) by [Dean Attali](https://deanattali.com/aboutme#contact). It supports most of the features of the original theme, and many new features. It has diverged from the Jekyll theme over time, with years of community updates.
## License
......
---
title: "{{ replace .Name "-" " " | title }}"
author: ""
type: ""
date: {{ .Date }}
subtitle: ""
image: ""
tags: []
---
......@@ -11,10 +11,10 @@ title = "Facebook"
icon = "fab fa-facebook"
[[social_icons]]
id = "googleplus"
url = "https://www.plus.google.com/%s"
title = "Google+"
icon = "fab fa-google-plus"
id = "github"
url = "https://github.com/%s"
title = "GitHub"
icon = "fab fa-github"
[[social_icons]]
id = "gitlab"
......@@ -23,10 +23,10 @@ title = "GitLab"
icon = "fab fa-gitlab"
[[social_icons]]
id = "github"
url = "https://github.com/%s"
title = "GitHub"
icon = "fab fa-github"
id = "bitbucket"
url = "https://bitbucket.org/%s"
title = "Bitbucket"
icon = "fab fa-bitbucket"
[[social_icons]]
id = "twitter"
......@@ -34,6 +34,12 @@ url = "https://twitter.com/%s"
title = "Twitter"
icon = "fab fa-twitter"
[[social_icons]]
id = "slack"
url = "https://%s.slack.com/"
title = "Slack"
icon = "fab fa-slack"
[[social_icons]]
id = "reddit"
url = "https://reddit.com/u/%s"
......@@ -97,15 +103,9 @@ icon = "fab fa-bandcamp"
[[social_icons]]
id = "itchio"
url = "https://itch.io/profile/%s"
title = "itch.io"
title = "Itch.io"
icon = "fas fa-gamepad"
[[social_icons]]
id = "steam"
url = "https://steamcommunity.com/id/%s"
title = "Steam"
icon = "fab fa-steam"
[[social_icons]]
id = "keybase"
url = "https://keybase.io/%s"
......@@ -113,9 +113,49 @@ title = "Keybase"
icon = "fab fa-keybase"
[[social_icons]]
id = "Goodreads"
url = "https://www.goodreads.com/%s"
title = "Goodreads"
icon = "fab fa-goodreads"
id = "vk"
url = "https://vk.com/%s"
title = "VK"
icon = "fab fa-vk"
[[social_icons]]
id = "paypal"
url = "https://paypal.me/%s"
title = "PayPal"
icon = "fab fa-paypal"
[[social_icons]]
id = "telegram"
url = "https://telegram.me/%s"
title = "Telegram"
icon = "fab fa-telegram"
[[social_icons]]
id = "500px"
url = "https://500px.com/%s"
title = "500px"
icon = "fab fa-500px"
[[social_icons]]
id = "codepen"
url = "https://codepen.io/%s"
title = "CodePen"
icon = "fab fa-codepen"
[[social_icons]]
id = "kaggle"
url = "https://www.kaggle.com/%s"
title = "kaggle"
icon = "fab fa-kaggle"
[[social_icons]]
id = "mastodon"
url = "https://%s"
title = "Mastodon"
icon = "fab fa-mastodon"
[[social_icons]]
id = "weibo"
url = "https://weibo.com/%s"
title = "Weibo"
icon = "fab fa-weibo"
# Content
- id: dateFormat
translation: "2 de Janeiro de 2006"
- id: shortdateFormat
translation: "02/Jan/2006 15:04:05"
- id: postedOnDate
translation: "Postado em {{ . }}"
- id: lastModified
translation: "(Ultima modifica莽茫o em {{ . }})"
- id: translationsLabel
translation: "Outras linguagens: "
- id: translationsSeparator
translation: ", "
- id: readMore
translation: "Saiba mais"
- id: olderPosts
translation: "Posts antigos"
- id: newerPosts
translation: "Posts novos"
- id: previousPost
translation: "Post anterior"
- id: nextPost
translation: "Pr贸ximo Post"
- id: readTime
translation: "minutos"
- id: words
translation: "palavras"
# 404 page
- id: pageNotFound
translation: "Opa, a p谩gina n茫o existe"
# Footer
- id: poweredBy # Accepts HTML
translation: '<a href="https://gohugo.io">Hugo v{{ .Site.Hugo.Version }}</a> alimentada &nbsp;&bull;&nbsp; Tema <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a> adaptado de <a href="https://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a>'
# Navigation
- id: toggleNavigation
translation: "Ver navega莽茫o"
- id: languageSwitcherLabel
translation: "Idioma"
- id: gcseLabelShort
translation: "Buscar"
- id: gcseLabelLong
translation: "Buscar {{ .Site.Title }}"
- id: gcseClose
translation: "Fechar"
# Staticman
- id: noComment
translation: "Sem coment谩rios"
- id: oneComment
translation: "coment谩rio"
- id: moreComment
translation: "coment谩rios"
- id: useMarkdown
translation: "Voc锚 pode usar sintaxe MarkDown"
- id: yourName
translation: "Seu nome"
- id: yourEmail
translation: "Seu email"
- id: yourWebsite
translation: "Seu website"
# Delayed Disqus
- id: show
translation: "Mostrar"
- id: comments
translation: "coment谩rios"
# Related posts
- id: seeAlso
translation: "Veja tamb茅m"
# Content
- id: dateFormat
translation: "02.01.2006"
- id: shortdateFormat
translation: "2 Jan, 2006 15:04:05"
- id: postedOnDate
translation: "Gepostet am {{ . }}"
- id: lastModified
translation: "(Zuletzt ge盲ndert am {{ . }})"
- id: translationsLabel
translation: "Andere Sprachen: "
- id: translationsSeparator
translation: ", "
- id: readMore
translation: "Mehr"
- id: olderPosts
translation: "脛ltere Posts"
- id: newerPosts
translation: "Neuere Posts"
- id: previousPost
translation: "Letzter Post"
- id: nextPost
translation: "N盲chster Post"
- id: readTime
translation: "Minuten"
- id: words
translation: "W枚rter"
# 404 page
- id: pageNotFound
translation: "Ups, diese Seite existiert nicht. (404 Error)"
# Footer
- id: poweredBy # Accepts HTML
translation: '<a href="https://gohugo.io">Hugo v{{ .Site.Hugo.Version }}</a> angetrieben &nbsp;&bull;&nbsp; Theme <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a> angepasst von <a href="https://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a>'
# Navigation
- id: toggleNavigation
translation: "Navigation"
- id: languageSwitcherLabel
translation: "Sprache"
- id: gcseLabelShort
translation: "Suche"
- id: gcseLabelLong
translation: "Suche {{ .Site.Title }}"
- id: gcseClose
translation: "Schlie脽en"
# Staticman
- id: noComment
translation: "Kein Kommentar"
- id: oneComment
translation: "Kommentar"
- id: moreComment
translation: "Kommentare"
- id: useMarkdown
translation: "Sie k枚nnen Markdown-Syntax verwenden"
- id: yourName
translation: "Ihr Name"
- id: yourEmail
translation: "Ihre Emailadresse"
- id: yourWebsite
translation: "Ihre Website"
# Delayed Disqus
- id: show
translation: "Zeige"
- id: comments
translation: "Kommentare"
# Related posts
- id: seeAlso
translation: "Siehe auch"
# Content
- id: dateFormat
translation: "January 2, 2006"
- id: shortdateFormat
translation: "Jan 2, 2006 15:04:05"
- id: postedOnDate
translation: "Sl氓et op den {{ .Count }}"
- id: lastModified
translation: "(Senest redigeret den {{ .Count }})"
- id: translationsLabel
translation: "Andre sprog: "
- id: translationsSeparator
translation: ", "
- id: readMore
translation: "L忙s mere"
- id: olderPosts
translation: "脝ldre opslag"
- id: newerPosts
translation: "Nyere opslag"
- id: previousPost
translation: "Forrige opslag"
- id: nextPost
translation: "N忙ste opslag"
- id: readTime
translation: "Minutter"
- id: words
translation: "Ord"
# 404 page
- id: pageNotFound
translation: "Ups, denne side eksisterer ikke. (404 error)"
# Footer
- id: poweredBy # Accepts HTML
translation: '<a href="https://gohugo.io">Hugo v{{ .Site.Hugo.Version }}</a> drevet &nbsp;&bull;&nbsp; Tema <a href="https://github.com/halogenica/beautifulhugo">Beautiful Hugo</a> tilpasset fra <a href="https://deanattali.com/beautiful-jekyll/">Beautiful Jekyll</a>'
# Navigation
- id: toggleNavigation
translation: "Navigation"
- id: languageSwitcherLabel
translation: "Sprog"
- id: gcseLabelShort
translation: "S酶g"
- id: gcseLabelLong
translation: "S酶g {{ .Site.Title }}"
- id: gcseClose
translation: "Luk"
# Staticman
- id: noComment
translation: "Ingen kommentar"
- id: oneComment
translation: "Kommentar"
- id: moreComment
translation: "Kommentarer"
- id: useMarkdown
translation: "Du kan anvende Markdown syntax"
- id: yourName
translation: "Dit navn"
- id: yourEmail
translation: "Din emailadresse"
- id: yourWebsite
translation: "Din hjemmeside"
# Delayed Disqus
- id: show
translation: "Vis"
- id: comments
translation: "Kommentarer"
# Related posts
- id: seeAlso
translation: "Se ogs氓"
# Content
- id: dateFormat
translation: "January 2, 2006"
- id: shortdateFormat
translation: "Jan 2, 2006 15:04:05"
- id: postedOnDate
translation: "Posted on {{ .Count }}"
translation: "Posted on {{ . }}"
- id: lastModified
translation: "(Last modified on {{ . }})"
- id: translationsLabel
translation: "Other languages: "
- id: translationsSeparator
......@@ -17,6 +21,11 @@
translation: "Previous Post"
- id: nextPost
translation: "Next Post"
- id: readTime
translation: "minutes"
- id: words
translation: "words"
# 404 page
- id: pageNotFound
......@@ -24,7 +33,7 @@