├── .gitignore ├── assets ├── js │ ├── main.js │ ├── menu.js │ └── theme.js └── scss │ ├── _mixins.scss │ ├── main.scss │ ├── _variables.scss │ ├── _logo.scss │ ├── _header.scss │ ├── _footer.scss │ ├── _menu.scss │ ├── _fonts.scss │ ├── _list.scss │ ├── _buttons.scss │ ├── _prism.scss │ ├── _single.scss │ ├── _main.scss │ └── _normalize.scss ├── data └── langFlags.yaml ├── images ├── tn.png └── screenshot.png ├── .prettierrc ├── layouts ├── partials │ ├── comments.html │ ├── social-icons.html │ ├── menu.html │ ├── theme-icon.html │ ├── favicons.html │ ├── logo.html │ ├── pagination.html │ ├── header.html │ ├── javascript.html │ ├── footer.html │ ├── head.html │ └── svg.html ├── shortcodes │ ├── image.html │ └── figure.html ├── index.html ├── _default │ ├── baseof.html │ ├── list.html │ └── single.html ├── 404.html └── posts │ ├── rss.xml │ └── single.html ├── static └── fonts │ ├── Inter-UI-Bold.woff │ ├── Inter-UI-Bold.woff2 │ ├── Inter-UI-Italic.woff │ ├── Inter-UI-Medium.woff │ ├── Inter-UI-Italic.woff2 │ ├── Inter-UI-Medium.woff2 │ ├── Inter-UI-Regular.woff │ ├── Inter-UI-Regular.woff2 │ ├── Inter-UI-BoldItalic.woff │ ├── Inter-UI-BoldItalic.woff2 │ ├── Inter-UI-MediumItalic.woff │ └── Inter-UI-MediumItalic.woff2 ├── archetypes ├── default.md └── posts.md ├── package.json ├── exampleSite ├── content │ ├── about.md │ └── posts │ │ ├── hugoisforlovers.md │ │ ├── hugoisforlovers.fr.md │ │ ├── migrate-from-jekyll.md │ │ ├── migrate-from-jekyll.fr.md │ │ ├── goisforlovers.md │ │ ├── goisforlovers.fr.md │ │ └── creating-a-new-theme.md └── config.toml ├── i18n ├── en.toml ├── pt-br.toml ├── fr.toml ├── de.toml └── es.toml ├── theme.toml ├── LICENSE.md ├── .eslintrc.yml └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | // Some code could be here ... 2 | -------------------------------------------------------------------------------- /assets/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin dimmed { 2 | opacity: .6; 3 | } 4 | -------------------------------------------------------------------------------- /data/langFlags.yaml: -------------------------------------------------------------------------------- 1 | de: de 2 | en: gb 3 | fr: fr 4 | nl: nl 5 | es: es 6 | pt-br: br -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/images/tn.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babylon", 3 | "printWidth": 100, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/images/screenshot.png -------------------------------------------------------------------------------- /layouts/partials/comments.html: -------------------------------------------------------------------------------- 1 | {{- if .Site.DisqusShortname }} 2 | {{ template "_internal/disqus.html" . }} 3 | {{- end }} 4 | -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Bold.woff -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Bold.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Italic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Medium.woff -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Italic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Medium.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Regular.woff -------------------------------------------------------------------------------- /static/fonts/Inter-UI-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-Regular.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-UI-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-BoldItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-UI-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-BoldItalic.woff2 -------------------------------------------------------------------------------- /static/fonts/Inter-UI-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-MediumItalic.woff -------------------------------------------------------------------------------- /static/fonts/Inter-UI-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mogeko/hugo-theme-hello-friend-ng/master/static/fonts/Inter-UI-MediumItalic.woff2 -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | comments: false 6 | images: 7 | --- 8 | 9 | -------------------------------------------------------------------------------- /archetypes/posts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | toc: false 6 | images: 7 | tags: 8 | - untagged 9 | --- 10 | 11 | -------------------------------------------------------------------------------- /layouts/partials/social-icons.html: -------------------------------------------------------------------------------- 1 | {{ range . -}} 2 |   {{ partial "svg.html" . }}   3 | {{- end -}} 4 | -------------------------------------------------------------------------------- /layouts/partials/menu.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /layouts/shortcodes/image.html: -------------------------------------------------------------------------------- 1 | {{ if .Get "src" }} 2 | {{ . | plainify }} 3 | {{ end }} 4 | -------------------------------------------------------------------------------- /assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "normalize"; 2 | @import "prism"; 3 | 4 | @import "variables"; 5 | @import "mixins"; 6 | @import "fonts"; 7 | @import "buttons"; 8 | 9 | @import "header"; 10 | @import "logo"; 11 | @import "menu"; 12 | @import "main"; 13 | @import "list"; 14 | @import "single"; 15 | @import "footer"; 16 | -------------------------------------------------------------------------------- /layouts/partials/theme-icon.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-friend-ng", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "author": "Djordje Atlialp ", 6 | "license": "MIT", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "browserslist": [ 11 | "last 2 versions", 12 | ">1%", 13 | "not dead" 14 | ], 15 | "devDependencies": { 16 | "bulma": "^0.7.4", 17 | "node-sass": "^4.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |

{{ .Site.Title }}

5 | 6 | {{- with .Site.Params.homeSubtitle }} 7 |

{{.}}

8 | {{- end }} 9 | 10 | {{- with .Site.Params.social }} 11 |
12 | {{ partial "social-icons.html" . }} 13 |
14 | {{- end }} 15 |
16 |
17 | {{ end }} 18 | -------------------------------------------------------------------------------- /layouts/partials/favicons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /layouts/shortcodes/figure.html: -------------------------------------------------------------------------------- 1 | {{ if .Get "src" }} 2 |
3 | {{ . | plainify }} 4 | 5 | {{ if .Get "caption" }} 6 |
{{ .Get "caption" }}
7 | {{ end }} 8 |
9 | {{ end }} 10 | -------------------------------------------------------------------------------- /layouts/partials/logo.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /exampleSite/content/about.md: -------------------------------------------------------------------------------- 1 | +++ 2 | title = "About" 3 | date = "2014-04-09" 4 | aliases = ["about-us","about-hugo","contact"] 5 | [ author ] 6 | name = "Hugo Authors" 7 | +++ 8 | 9 | Hugo is the **world’s fastest framework for building websites**. It is written in Go. 10 | 11 | It makes use of a variety of open source projects including: 12 | 13 | * https://github.com/russross/blackfriday 14 | * https://github.com/alecthomas/chroma 15 | * https://github.com/muesli/smartcrop 16 | * https://github.com/spf13/cobra 17 | * https://github.com/spf13/viper 18 | 19 | Learn more and contribute on [GitHub](https://github.com/gohugoio). 20 | -------------------------------------------------------------------------------- /assets/js/menu.js: -------------------------------------------------------------------------------- 1 | // Mobile menu 2 | 3 | const menuTrigger = document.querySelector(".menu-trigger"); 4 | const menu = document.querySelector(".menu"); 5 | const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); 6 | const isMobile = () => window.matchMedia(mobileQuery).matches; 7 | const isMobileMenu = () => { 8 | menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile()); 9 | menu && menu.classList.toggle("hidden", isMobile()); 10 | }; 11 | 12 | isMobileMenu(); 13 | 14 | menuTrigger && menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden")); 15 | 16 | window.addEventListener("resize", isMobileMenu); 17 | -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head.html" . }} 5 | 6 | 7 | 8 |
9 | {{ partial "header.html" . }} 10 | 11 |
12 | {{ block "main" . }}{{ end }} 13 |
14 | 15 | {{ block "footer" . }} 16 | {{ partial "footer.html" . }} 17 | {{ end }} 18 |
19 | 20 | {{ partial "javascript.html" . }} 21 | 22 | 23 | -------------------------------------------------------------------------------- /i18n/en.toml: -------------------------------------------------------------------------------- 1 | # Translations for English 2 | # https://gohugo.io/content-management/multilingual/#translation-of-strings 3 | 4 | # Generic 5 | # 6 | [translations] 7 | other = "Translations" 8 | 9 | [postAvailable] 10 | other = "Also available in" 11 | 12 | 13 | # 404.html 14 | # 15 | [archives] 16 | other = "Archives" 17 | 18 | [home] 19 | other = "Home" 20 | 21 | [notFound] 22 | other = "Oops, page not found…" 23 | 24 | 25 | # posts/single.html 26 | # 27 | [readingTime] 28 | one = "One minute" 29 | other = "{{ .Count }} minutes" 30 | 31 | [tableOfContents] 32 | other = "Table of Contents" 33 | 34 | [wordCount] 35 | one = "One Word" 36 | other = "{{ .Count }} Words" 37 | -------------------------------------------------------------------------------- /i18n/pt-br.toml: -------------------------------------------------------------------------------- 1 | # Translations for France 2 | # https://gohugo.io/content-management/multilingual/#translation-of-strings 3 | 4 | # Generic 5 | # 6 | [translations] 7 | other = "Traduções" 8 | 9 | [postAvailable] 10 | other = "Também disponível em" 11 | 12 | 13 | # 404.html 14 | # 15 | [archives] 16 | other = "Arquivo" 17 | 18 | [home] 19 | other = "Início" 20 | 21 | [notFound] 22 | other = "Oops, página não encontrada…" 23 | 24 | 25 | # posts/single.html 26 | # 27 | [readingTime] 28 | one = "Um minuto" 29 | other = "{{ .Count }} minutos" 30 | 31 | [tableOfContents] 32 | other = "Índice" 33 | 34 | [wordCount] 35 | one = "Uma Palavra" 36 | other = "{{ .Count }} Palavras" -------------------------------------------------------------------------------- /i18n/fr.toml: -------------------------------------------------------------------------------- 1 | # Translations for France 2 | # https://gohugo.io/content-management/multilingual/#translation-of-strings 3 | 4 | # Generic 5 | # 6 | [translations] 7 | other = "Traductions" 8 | 9 | [postAvailable] 10 | other = "Aussi disponible en" 11 | 12 | 13 | # 404.html 14 | # 15 | [archives] 16 | other = "Les archives" 17 | 18 | [home] 19 | other = "Accueil" 20 | 21 | [notFound] 22 | other = "Oups, page non trouvée …" 23 | 24 | 25 | # posts/single.html 26 | # 27 | [readingTime] 28 | one = "Une minute" 29 | other = "{{ .Count }} minutes" 30 | 31 | [tableOfContents] 32 | other = "Table des matières" 33 | 34 | [wordCount] 35 | one = "Une Mot" 36 | other = "{{ .Count }} Mots" 37 | -------------------------------------------------------------------------------- /i18n/de.toml: -------------------------------------------------------------------------------- 1 | # Translations for English 2 | # https://gohugo.io/content-management/multilingual/#translation-of-strings 3 | 4 | # Generic 5 | # 6 | [translations] 7 | other = "Übersetzungen" 8 | 9 | [postAvailable] 10 | other = "Auch verfügbar auf" 11 | 12 | 13 | # 404.html 14 | # 15 | [archives] 16 | other = "Archiv" 17 | 18 | [home] 19 | other = "Home" 20 | 21 | [notFound] 22 | other = "Oops, Seite nicht gefunden ..." 23 | 24 | 25 | # posts/single.html 26 | # 27 | [readingTime] 28 | one = "Eine Minute" 29 | other = "{{ .Count }} Minuten" 30 | 31 | [tableOfContents] 32 | other = "Inhaltsverzeichnis" 33 | 34 | [wordCount] 35 | one = "Ein Wort" 36 | other = "{{ .Count }} Wörter" 37 | -------------------------------------------------------------------------------- /i18n/es.toml: -------------------------------------------------------------------------------- 1 | # Translations for Spanish 2 | # https://gohugo.io/content-management/multilingual/#translation-of-strings 3 | 4 | # Generic 5 | # 6 | [translations] 7 | other = "Traducciones" 8 | 9 | [postAvailable] 10 | other = "También disponible en" 11 | 12 | 13 | # 404.html 14 | # 15 | [archives] 16 | other = "Archivo" 17 | 18 | [home] 19 | other = "Home" 20 | 21 | [notFound] 22 | other = "Oops, página no encontrada…" 23 | 24 | 25 | # posts/single.html 26 | # 27 | [readingTime] 28 | one = "Un minuto" 29 | other = "{{ .Count }} minutos" 30 | 31 | [tableOfContents] 32 | other = "Tabla de Contenido" 33 | 34 | [wordCount] 35 | one = "Una Palabra" 36 | other = "{{ .Count }} Palabras" 37 | -------------------------------------------------------------------------------- /layouts/partials/pagination.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* light theme color */ 4 | $light-background: #fff; 5 | $light-background-secondary: #eaeaea; 6 | $light-color: #222; 7 | $light-color-secondary: #999; 8 | $light-border-color: #dcdcdc; 9 | 10 | /* dark theme colors */ 11 | $dark-background: #292a2d; 12 | $dark-background-secondary: #3b3d42; 13 | $dark-color: #a9a9b3; 14 | $dark-color-secondary: #73747b; 15 | $dark-border-color: #4a4b50; 16 | 17 | $media-size-phone: "(max-width: 684px)"; 18 | $media-size-tablet: "(max-width: 900px)"; 19 | 20 | /* variables for js, must be the same as these in @custom-media queries */ 21 | :root { 22 | --phoneWidth: (max-width: 684px); 23 | --tabletWidth: (max-width: 900px); 24 | } 25 | -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{ partial "logo.html" . }} 4 | 5 | 6 | {{ if len .Site.Menus }} 7 | {{ partial "menu.html" . }} 8 | 9 | 10 | 11 | 12 | 13 | 14 | {{ end }} 15 | 16 | {{ partial "theme-icon.html" . }} 17 | 18 | 19 |
20 | -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | name = "hello-friend-ng" 2 | license = "MIT" 3 | licenselink = "https://github.com/rhazdon/hugo-theme-hello-friend-ng/blob/master/LICENSE.md" 4 | description = "A simple theme for Hugo. That's it." 5 | tags = ["blog", "clean", "customizable", "dark", "highlighting", "light", "minimal", "monochromatic", "multilingual", "personal", "responsive", "simple", "technical"] 6 | features = ["blog", "shortcode", "syntax highlighting"] 7 | min_version = 0.30 8 | 9 | [author] 10 | name = "Djordje Atlialp" 11 | homepage = "https://atlialp.com" 12 | twitter = "https://twitter.com/rhazdon" 13 | 14 | [original] 15 | name = "hello-friend" 16 | homepage = "https://github.com/panr/hugo-theme-hello-friend" 17 | repo = "https://github.com/panr/hugo-theme-hello-friend" 18 | -------------------------------------------------------------------------------- /assets/scss/_logo.scss: -------------------------------------------------------------------------------- 1 | .logo { 2 | display: flex; 3 | align-items: center; 4 | text-decoration: none; 5 | font-weight: bold; 6 | font-family: monospace, monospace; 7 | 8 | img { 9 | height: 44px; 10 | } 11 | 12 | &__mark { 13 | margin-right: 5px; 14 | } 15 | 16 | &__text { 17 | font-size: 1.125rem; 18 | } 19 | 20 | &__cursor { 21 | display: inline-block; 22 | width: 10px; 23 | height: 1rem; 24 | background: #fe5186; 25 | margin-left: 5px; 26 | border-radius: 1px; 27 | animation: cursor 1s infinite; 28 | } 29 | 30 | @media (prefers-reduced-motion: reduce) { 31 | &__cursor { 32 | animation: none; 33 | } 34 | } 35 | 36 | } 37 | 38 | @keyframes cursor { 39 | 0% { opacity: 0; } 40 | 50% { opacity: 1; } 41 | 100% { opacity: 0; } 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background: #fafafa; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | position: relative; 7 | padding: 20px; 8 | 9 | .dark-theme & { 10 | background: #252627; 11 | } 12 | 13 | &__right { 14 | display: flex; 15 | flex-direction: row; 16 | align-items: center; 17 | 18 | @media #{$media-size-phone} { 19 | flex-direction: row-reverse; 20 | } 21 | } 22 | 23 | &__inner { 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | margin: 0 auto; 28 | width: 760px; 29 | max-width: 100%; 30 | } 31 | } 32 | 33 | .theme-toggle { 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | line-height: 1; 38 | cursor: pointer; 39 | } 40 | 41 | .theme-toggler { 42 | fill: currentColor; 43 | } 44 | -------------------------------------------------------------------------------- /assets/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 40px 20px; 3 | flex-grow: 0; 4 | color: $light-color-secondary; 5 | 6 | &__inner { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | margin: 0 auto; 11 | width: 760px; 12 | max-width: 100%; 13 | 14 | @media #{$media-size-tablet} { 15 | flex-direction: column; 16 | } 17 | } 18 | 19 | &__content { 20 | display: flex; 21 | flex-direction: row; 22 | align-items: center; 23 | font-size: 1rem; 24 | color: $light-color-secondary; 25 | 26 | @media #{$media-size-tablet} { 27 | flex-direction: column; 28 | margin-top: 10px; 29 | } 30 | 31 | & > *:not(:last-child) { 32 | border-right: 1px solid; 33 | padding: 0 15px; 34 | 35 | @media #{$media-size-tablet} { 36 | border: none; 37 | } 38 | } 39 | 40 | & > *:last-child { 41 | padding: 0 15px; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /assets/js/theme.js: -------------------------------------------------------------------------------- 1 | // Toggle theme 2 | 3 | const getTheme = window.localStorage && window.localStorage.getItem("theme"); 4 | const themeToggle = document.querySelector(".theme-toggle"); 5 | const isDark = getTheme === "dark"; 6 | var metaThemeColor = document.querySelector("meta[name=theme-color]"); 7 | 8 | if (getTheme !== null) { 9 | document.body.classList.toggle("dark-theme", isDark); 10 | isDark ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa"); 11 | } 12 | 13 | themeToggle.addEventListener("click", () => { 14 | document.body.classList.toggle("dark-theme"); 15 | window.localStorage && 16 | window.localStorage.setItem( 17 | "theme", 18 | document.body.classList.contains("dark-theme") ? "dark" : "light", 19 | ); 20 | document.body.classList.contains("dark-theme") ? 21 | metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa"); 22 | ; 23 | }); 24 | -------------------------------------------------------------------------------- /layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

{{ .Title }}

4 | 5 | {{- if .Content }} 6 |
{{ .Content }}
7 | {{- end }} 8 | 9 | {{- range .Data.Pages.GroupByDate "2006" }} 10 |
11 |
{{ .Key }}
12 | 13 | 23 |
24 | {{- end }} 25 |
26 | {{ end }} 27 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Djordje Atlialp 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. 10 | -------------------------------------------------------------------------------- /layouts/partials/javascript.html: -------------------------------------------------------------------------------- 1 | {{ $main := resources.Get "js/main.js" }} 2 | {{ $menu := resources.Get "js/menu.js" }} 3 | {{ $prism := resources.Get "js/prism.js" }} 4 | {{ $theme := resources.Get "js/theme.js" }} 5 | {{ $secureJS := slice $main $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }} 6 | 7 | 8 | {{- if .Site.GoogleAnalytics }} 9 | 17 | {{- end}} 18 | 19 | {{ range $val := $.Site.Params.customJS }} 20 | {{ if gt (len $val) 0 }} 21 | 22 | {{ end }} 23 | {{ end }} 24 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | env: 4 | es6: true 5 | 6 | extends: 7 | # https://github.com/airbnb/javascript 8 | - airbnb 9 | - eslint:recommended 10 | - prettier 11 | 12 | parser: babel-eslint 13 | 14 | rules: 15 | # best practices 16 | arrow-parens: 17 | - 2 18 | - as-needed 19 | semi: 20 | - 2 21 | - never 22 | class-methods-use-this: 0 23 | comma-dangle: 24 | - 2 25 | - always-multiline 26 | no-console: 27 | - 2 28 | no-unused-expressions: 0 29 | no-param-reassign: 30 | - 2 31 | - props: false 32 | no-useless-escape: 0 33 | func-names: 0 34 | quotes: 35 | - 2 36 | - single 37 | - allowTemplateLiterals: true 38 | no-underscore-dangle: 0 39 | object-curly-newline: 0 40 | function-paren-newline: 0 41 | operator-linebreak: 42 | - 2 43 | - after 44 | no-unused-vars: 45 | - 2 46 | - argsIgnorePattern: "^_" 47 | # jsx a11y 48 | jsx-a11y/no-static-element-interactions: 0 49 | jsx-a11y/anchor-is-valid: 50 | - 2 51 | - specialLink: 52 | - to 53 | 54 | globals: 55 | document: true 56 | requestAnimationFrame: true 57 | window: true 58 | self: true 59 | fetch: true 60 | Headers: true 61 | -------------------------------------------------------------------------------- /assets/scss/_menu.scss: -------------------------------------------------------------------------------- 1 | .menu { 2 | background: #fafafa; 3 | border-right: 1px solid; 4 | margin-right: 18px; 5 | z-index: 9999; 6 | 7 | .dark-theme & { 8 | background: #252627; 9 | } 10 | 11 | @media #{$media-size-phone} { 12 | position: absolute; 13 | top: 50px; 14 | right: 0; 15 | border: none; 16 | margin: 0; 17 | padding: 10px; 18 | } 19 | 20 | &__inner { 21 | display: flex; 22 | align-items: center; 23 | justify-content: flex-start; 24 | max-width: 100%; 25 | margin: 0 auto; 26 | padding: 0 15px; 27 | font-size: 1rem; 28 | list-style: none; 29 | 30 | li { 31 | margin: 0 12px; 32 | } 33 | 34 | @media #{$media-size-phone} { 35 | flex-direction: column; 36 | align-items: flex-start; 37 | padding: 0; 38 | 39 | li { 40 | margin: 0; 41 | padding: 5px; 42 | } 43 | } 44 | } 45 | 46 | &-trigger { 47 | width: 24px; 48 | height: 24px; 49 | fill: currentColor; 50 | margin-left: 10px; 51 | cursor: pointer; 52 | } 53 | 54 | a { 55 | display: inline-block; 56 | margin-right: 15px; 57 | text-decoration: none; 58 | 59 | &:hover { 60 | text-decoration: underline; 61 | } 62 | 63 | &:last-of-type { 64 | margin-right: 0; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /assets/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Inter UI'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"), 6 | url("../fonts/Inter-UI-Regular.woff") format("woff"); 7 | } 8 | @font-face { 9 | font-family: 'Inter UI'; 10 | font-style: italic; 11 | font-weight: 400; 12 | src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"), 13 | url("../fonts/Inter-UI-Italic.woff") format("woff"); 14 | } 15 | 16 | @font-face { 17 | font-family: 'Inter UI'; 18 | font-style: normal; 19 | font-weight: 600; 20 | src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"), 21 | url("../fonts/Inter-UI-Medium.woff") format("woff"); 22 | } 23 | @font-face { 24 | font-family: 'Inter UI'; 25 | font-style: italic; 26 | font-weight: 600; 27 | src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"), 28 | url("../fonts/Inter-UI-MediumItalic.woff") format("woff"); 29 | } 30 | 31 | @font-face { 32 | font-family: 'Inter UI'; 33 | font-style: normal; 34 | font-weight: 800; 35 | src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"), 36 | url("../fonts/Inter-UI-Bold.woff") format("woff"); 37 | } 38 | @font-face { 39 | font-family: 'Inter UI'; 40 | font-style: italic; 41 | font-weight: 800; 42 | src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"), 43 | url("../fonts/Inter-UI-BoldItalic.woff") format("woff"); 44 | } 45 | -------------------------------------------------------------------------------- /assets/scss/_list.scss: -------------------------------------------------------------------------------- 1 | .posts { 2 | width: 100%; 3 | max-width: 800px; 4 | text-align: left; 5 | padding: 20px; 6 | margin: 20px auto; 7 | 8 | @media #{$media-size-tablet} { 9 | max-width: 660px; 10 | } 11 | 12 | &:not(:last-of-type) { 13 | border-bottom: 1px solid $light-border-color; 14 | 15 | .dark-theme & { 16 | border-color: $dark-border-color; 17 | } 18 | } 19 | 20 | &-group { 21 | display: flex; 22 | margin-bottom: 1.9em; 23 | line-height: normal; 24 | 25 | @media #{$media-size-tablet} { 26 | display: block; 27 | } 28 | } 29 | 30 | &-list { 31 | flex-grow: 1; 32 | margin: 0; 33 | padding: 0; 34 | list-style: none; 35 | } 36 | 37 | .post { 38 | &-title { 39 | font-size: 1rem; 40 | margin: 5px 0 5px 0; 41 | } 42 | 43 | &-year { 44 | padding-top: 6px; 45 | margin-right: 1.8em; 46 | font-size: 1.6em; 47 | @include dimmed; 48 | 49 | @media #{$media-size-tablet} { 50 | margin: -6px 0 4px; 51 | } 52 | } 53 | 54 | &-item { 55 | border-bottom: 1px grey dashed; 56 | 57 | a { 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: baseline; 61 | padding: 12px 0; 62 | text-decoration: none; 63 | } 64 | } 65 | 66 | &-day { 67 | flex-shrink: 0; 68 | margin-left: 1em; 69 | @include dimmed; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |

4 | 5 |

6 | 14 |
15 | {{ end }} 16 | -------------------------------------------------------------------------------- /layouts/posts/rss.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }} 4 | {{ .Permalink }} 5 | Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }} 6 | Hugo -- gohugo.io{{ with .Site.LanguageCode }} 7 | {{.}}{{end}}{{ with .Site.Author.email }} 8 | {{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}{{end}}{{ with .Site.Author.email }} 9 | {{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}{{end}}{{ with .Site.Copyright }} 10 | {{.}}{{end}}{{ if not .Date.IsZero }} 11 | {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}{{ end }} 12 | {{ with .OutputFormats.Get "RSS" -}} 13 | {{ printf "" .Permalink .MediaType | safeHTML }} 14 | {{ end -}} 15 | {{ range .Pages }} 16 | 17 | {{ .Title }} 18 | {{ .Permalink }} 19 | {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} 20 | {{ with .Site.Author.email }}{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}{{end}} 21 | {{ .Permalink }} 22 | {{ .Summary | html }} 23 | {{ printf `` .Content | safeHTML }} 24 | 25 | {{ end }} 26 | 27 | 28 | -------------------------------------------------------------------------------- /assets/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | .button-container { 2 | display: table; 3 | margin-left: auto; 4 | margin-right: auto; 5 | } 6 | 7 | button, 8 | .button, 9 | a.button { 10 | position: relative; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | padding: 8px 18px; 15 | margin-bottom: 5px; 16 | background: $light-background-secondary; 17 | text-decoration: none; 18 | text-align: center; 19 | font-weight: 500; 20 | border-radius: 8px; 21 | border: 1px solid transparent; 22 | appearance: none; 23 | cursor: pointer; 24 | outline: none; 25 | 26 | .dark-theme & { 27 | background: $dark-background-secondary; 28 | color: inherit; 29 | } 30 | 31 | /* variants */ 32 | 33 | &.outline { 34 | background: transparent; 35 | border-color: $light-background-secondary; 36 | box-shadow: none; 37 | padding: 8px 18px; 38 | 39 | .dark-theme & { 40 | border-color: $dark-background-secondary; 41 | color: inherit; 42 | } 43 | 44 | :hover { 45 | transform: none; 46 | box-shadow: none; 47 | } 48 | } 49 | 50 | &.primary { 51 | box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); 52 | 53 | &:hover { 54 | box-shadow: 0 2px 6px rgba(50, 50, 93, .21), 0 1px 3px rgba(0, 0, 0, .08); 55 | } 56 | } 57 | 58 | &.link { 59 | background: none; 60 | font-size: 1rem; 61 | } 62 | 63 | &.small { 64 | font-size: .8rem; 65 | } 66 | 67 | &.wide { 68 | min-width: 200px; 69 | padding: 14px 24px; 70 | } 71 | } 72 | 73 | .code-toolbar { 74 | margin-bottom: 20px; 75 | 76 | .toolbar-item a { 77 | position: relative; 78 | display: inline-flex; 79 | align-items: center; 80 | justify-content: center; 81 | padding: 3px 8px; 82 | margin-bottom: 5px; 83 | background: $light-background-secondary; 84 | text-decoration: none; 85 | text-align: center; 86 | font-size: 13px; 87 | font-weight: 500; 88 | border-radius: 8px; 89 | border: 1px solid transparent; 90 | appearance: none; 91 | cursor: pointer; 92 | outline: none; 93 | 94 | .dark-theme & { 95 | background: $dark-background-secondary; 96 | color: inherit; 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | 10 | 11 | 12 | {{ block "title" . }} 13 | 14 | {{ if .IsHome }} 15 | {{ $.Site.Title }} {{ with $.Site.Params.Subtitle }} — {{ . }} {{ end }} 16 | {{ else }} 17 | {{ .Title }} :: {{ $.Site.Title }} {{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }} 18 | {{ end }} 19 | 20 | {{ end }} 21 | 22 | 23 | 25 | 26 | {{ $options := (dict "targetPath" "main.css" "outputStyle" "compressed" "enableSourceMap" true) }} 27 | {{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options | resources.Minify | resources.Fingerprint }} 28 | 29 | 30 | {{ range $val := $.Site.Params.customCSS }} 31 | {{ if gt (len $val) 0 }} 32 | 33 | {{ end }} 34 | {{ end }} 35 | 36 | 37 | {{- partial "favicons.html" }} 38 | 39 | {{- template "_internal/schema.html" . }} 40 | {{- template "_internal/twitter_cards.html" . }} 41 | 42 | {{ range .Params.categories }} 43 | {{ end }} 44 | {{ if isset .Params "date" }} 45 | {{ end }} 46 | 47 | 48 | {{ with .OutputFormats.Get "rss" -}} 49 | {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} 50 | {{ end -}} 51 | 52 | 53 | {{ if .OutputFormats.Get "json" }} 54 | 56 | {{ end }} 57 | 58 | 59 | {{- if templates.Exists "partials/extra-head.html" -}} 60 | {{ partial "extra-head.html" . }} 61 | {{- end }} 62 | -------------------------------------------------------------------------------- /layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 | 4 |
5 | {{ if .IsTranslated }} 6 | {{ i18n "postAvailable" }} 7 | {{ range .Translations }} 8 | 9 | {{ end}} 10 | {{ end }} 11 |

12 |
13 | 14 |
15 |

{{ .Title | markdownify }}

16 | 17 | {{- if .Params.toc }} 18 |
19 | 23 |
24 | {{- end }} 25 | 26 | {{ with .Params.Cover }} 27 | 28 | {{ end }} 29 | 30 |
31 | {{ .Content }} 32 |
33 |
34 | 35 |
36 | 37 |
38 | {{- with .Params.tags }} 39 |

40 | 41 | {{- range . -}} 42 | {{.}} 43 | {{- end }} 44 |

45 | {{- end }} 46 | 47 | {{- if .GitInfo }} 48 |

{{ .GitInfo.AbbreviatedHash }} @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}

49 | {{- end }} 50 |
51 | 52 | {{ if .Params.comments }} 53 |
54 | {{- partial "comments.html" . -}} 55 |
56 | {{ end }} 57 |
58 | {{ end }} 59 | -------------------------------------------------------------------------------- /exampleSite/content/posts/hugoisforlovers.md: -------------------------------------------------------------------------------- 1 | +++ 2 | title = "Getting Started with Hugo" 3 | description = "" 4 | type = ["posts","post"] 5 | tags = [ 6 | "go", 7 | "golang", 8 | "hugo", 9 | "development", 10 | ] 11 | date = "2014-04-02" 12 | categories = [ 13 | "Development", 14 | "golang", 15 | ] 16 | series = ["Hugo 101"] 17 | [ author ] 18 | name = "Hugo Authors" 19 | +++ 20 | 21 | ## Step 1. Install Hugo 22 | 23 | Go to [Hugo releases](https://github.com/spf13/hugo/releases) and download the 24 | appropriate version for your OS and architecture. 25 | 26 | Save it somewhere specific as we will be using it in the next step. 27 | 28 | More complete instructions are available at [Install Hugo](https://gohugo.io/getting-started/installing/) 29 | 30 | ## Step 2. Build the Docs 31 | 32 | Hugo has its own example site which happens to also be the documentation site 33 | you are reading right now. 34 | 35 | Follow the following steps: 36 | 37 | 1. Clone the [Hugo repository](http://github.com/spf13/hugo) 38 | 2. Go into the repo 39 | 3. Run hugo in server mode and build the docs 40 | 4. Open your browser to http://localhost:1313 41 | 42 | Corresponding pseudo commands: 43 | 44 | git clone https://github.com/spf13/hugo 45 | cd hugo 46 | /path/to/where/you/installed/hugo server --source=./docs 47 | > 29 pages created 48 | > 0 tags index created 49 | > in 27 ms 50 | > Web Server is available at http://localhost:1313 51 | > Press ctrl+c to stop 52 | 53 | Once you've gotten here, follow along the rest of this page on your local build. 54 | 55 | ## Step 3. Change the docs site 56 | 57 | Stop the Hugo process by hitting Ctrl+C. 58 | 59 | Now we are going to run hugo again, but this time with hugo in watch mode. 60 | 61 | /path/to/hugo/from/step/1/hugo server --source=./docs --watch 62 | > 29 pages created 63 | > 0 tags index created 64 | > in 27 ms 65 | > Web Server is available at http://localhost:1313 66 | > Watching for changes in /Users/spf13/Code/hugo/docs/content 67 | > Press ctrl+c to stop 68 | 69 | 70 | Open your [favorite editor](http://vim.spf13.com) and change one of the source 71 | content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*. 72 | 73 | Content files are found in `docs/content/`. Unless otherwise specified, files 74 | are located at the same relative location as the url, in our case 75 | `docs/content/overview/quickstart.md`. 76 | 77 | Change and save this file.. Notice what happened in your terminal. 78 | 79 | > Change detected, rebuilding site 80 | 81 | > 29 pages created 82 | > 0 tags index created 83 | > in 26 ms 84 | 85 | Refresh the browser and observe that the typo is now fixed. 86 | 87 | Notice how quick that was. Try to refresh the site before it's finished building. I double dare you. 88 | Having nearly instant feedback enables you to have your creativity flow without waiting for long builds. 89 | 90 | ## Step 4. Have fun 91 | 92 | The best way to learn something is to play with it. 93 | -------------------------------------------------------------------------------- /assets/scss/_prism.scss: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.15.0 2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+aspnet+arduino+cil+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+markup-templating+erlang+fsharp+flow+fortran+gcode+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+less+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+javastacktrace+jolie+json+julia+keyman+kotlin+latex+markdown+liquid+lisp+livescript+lolcode+lua+makefile+crystal+erb+matlab+mel+mizar+monkey+n1ql+n4js+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+sql+powershell+processing+prolog+properties+protobuf+scss+puppet+pure+python+q+qore+r+jsx+typescript+renpy+reason+rest+rip+roboconf+textile+rust+sas+sass+stylus+scala+scheme+smalltalk+smarty+plsql+soy+pug+swift+yaml+tcl+haml+toml+tt2+twig+tsx+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+xquery+tap */ 3 | /** 4 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML 5 | * Based on https://github.com/chriskempson/tomorrow-theme 6 | * @author Rose Pritchard 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: #ccc; 12 | background: none; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | 30 | } 31 | 32 | /* Code blocks */ 33 | pre[class*="language-"] { 34 | padding: 1em; 35 | margin: .5em 0; 36 | overflow: auto; 37 | } 38 | 39 | :not(pre) > code[class*="language-"], 40 | pre[class*="language-"] { 41 | background: #2d2d2d; 42 | } 43 | 44 | /* Inline code */ 45 | :not(pre) > code[class*="language-"] { 46 | padding: .1em; 47 | border-radius: .3em; 48 | white-space: normal; 49 | } 50 | 51 | .token.comment, 52 | .token.block-comment, 53 | .token.prolog, 54 | .token.doctype, 55 | .token.cdata { 56 | color: #999; 57 | } 58 | 59 | .token.punctuation { 60 | color: #ccc; 61 | } 62 | 63 | .token.tag, 64 | .token.attr-name, 65 | .token.namespace, 66 | .token.deleted { 67 | color: #e2777a; 68 | } 69 | 70 | .token.function-name { 71 | color: #6196cc; 72 | } 73 | 74 | .token.boolean, 75 | .token.number, 76 | .token.function { 77 | color: #f08d49; 78 | } 79 | 80 | .token.property, 81 | .token.class-name, 82 | .token.constant, 83 | .token.symbol { 84 | color: #f8c555; 85 | } 86 | 87 | .token.selector, 88 | .token.important, 89 | .token.atrule, 90 | .token.keyword, 91 | .token.builtin { 92 | color: #cc99cd; 93 | } 94 | 95 | .token.string, 96 | .token.char, 97 | .token.attr-value, 98 | .token.regex, 99 | .token.variable { 100 | color: #7ec699; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url { 106 | color: #67cdcc; 107 | } 108 | 109 | .token.important, 110 | .token.bold { 111 | font-weight: bold; 112 | } 113 | .token.italic { 114 | font-style: italic; 115 | } 116 | 117 | .token.entity { 118 | cursor: help; 119 | } 120 | 121 | .token.inserted { 122 | color: green; 123 | } 124 | 125 | -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "https://example.com" 2 | title = "Hello Friend NG" 3 | 4 | DefaultContentLanguage = "en" 5 | 6 | theme = "hello-friend-ng" 7 | 8 | PygmentsCodeFences = true 9 | PygmentsStyle = "monokai" 10 | 11 | rssLimit = 10 # Maximum number of items in the RSS feed. 12 | copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template. 13 | 14 | # googleAnalytics = "" 15 | # disqusShortname = "" 16 | 17 | archetypeDir = "archetypes" 18 | contentDir = "content" 19 | dataDir = "data" 20 | layoutDir = "layouts" 21 | publishDir = "public" 22 | 23 | buildDrafts = false 24 | buildFuture = false 25 | buildExpored = false 26 | canonifyURLs = true 27 | 28 | enableRobotsTXT = true 29 | enableGitInfo = false 30 | enableEmoji = true 31 | enableMissingTranslationPlaceholders = false 32 | disableRSS = false 33 | disableSitemap = false 34 | disable404 = false 35 | disableHugoGeneratorInject = false 36 | 37 | [permalinks] 38 | posts = "/posts/:year/:month/:title/" 39 | 40 | [author] 41 | name = "Jane Doe" 42 | 43 | [blackfriday] 44 | hrefTargetBlank = true 45 | 46 | [taxonomies] 47 | tag = "tags" 48 | category = "" 49 | 50 | [params] 51 | dateform = "Jan 2, 2006" 52 | dateformShort = "Jan 2" 53 | dateformNum = "2006-01-02" 54 | dateformNumTime = "2006-01-02 15:04 -0700" 55 | 56 | # Metadata mostly used in document's head 57 | description = "Nice theme for homepages and blogs" 58 | keywords = "" 59 | images = [""] 60 | 61 | homeSubtitle = "Hello Friend NG" 62 | 63 | # Prefix of link to the git commit detail page. GitInfo must be enabled. 64 | # gitUrl = "" 65 | 66 | # Integrate Javascript files or stylesheets by adding the url to the external assets or by 67 | # linking local files with their path relative to the static folder, e.g. "css/styles.css" 68 | customCSS = [] 69 | customJS = [] 70 | 71 | # Toggle this option need to rebuild SCSS, requires extended version of Hugo 72 | justifyContent = false # Set "text-align: justify" to .content. 73 | 74 | # Directory name of your blog content (default is `content/posts`) 75 | contentTypeName = "posts" 76 | # Default theme "light" or "dark" 77 | defaultTheme = "dark" 78 | themeColor = "#252627" 79 | 80 | [params.logo] 81 | logoText = "$ cd /home/" 82 | logoHomeLink = "/" 83 | 84 | # Social icons 85 | [[params.social]] 86 | name = "twitter" 87 | url = "https://twitter.com/" 88 | 89 | [[params.social]] 90 | name = "email" 91 | url = "mailto:nobody@example.com" 92 | 93 | [[params.social]] 94 | name = "github" 95 | url = "https://github.com/" 96 | 97 | [[params.social]] 98 | name = "linkedin" 99 | url = "https://www.linkedin.com/" 100 | 101 | [languages] 102 | [languages.en] 103 | subtitle = "Hello Friend NG Theme" 104 | weight = 1 105 | copyright = 'CC BY-NC 4.0' 106 | 107 | [languages.fr] 108 | subtitle = "Hello Friend NG Theme" 109 | weight = 2 110 | copyright = 'CC BY-NC 4.0' 111 | 112 | [menu] 113 | [[menu.main]] 114 | identifier = "about" 115 | name = "About" 116 | url = "about/" 117 | [[menu.main]] 118 | identifier = "posts" 119 | name = "Posts" 120 | url = "posts/" 121 | -------------------------------------------------------------------------------- /exampleSite/content/posts/hugoisforlovers.fr.md: -------------------------------------------------------------------------------- 1 | +++ 2 | categories = ["Hugo"] 3 | date = "2014-04-02" 4 | description = "" 5 | featured = "pic03.jpg" 6 | featuredalt = "Pic 3" 7 | featuredpath = "date" 8 | linktitle = "" 9 | slug = "Debuter avec Hugo" 10 | title = "Débuter avec Hugo" 11 | type = "post" 12 | [ author ] 13 | name = "Hugo Authors" 14 | +++ 15 | 16 | ## Étape 1. Installer Hugo 17 | 18 | Allez sur la page de téléchargements de 19 | [hugo](https://github.com/spf13/hugo/releases) et téléchargez la version 20 | appropriée à votre système d'exploitation et votre architecture. 21 | 22 | Sauvegardez le fichier téléchargé à un endroit précis, afin de l'utiliser dans 23 | l'étape suivante. 24 | 25 | Des informations plus complètes sont disponibles sur la page 26 | [installing hugo](/overview/installing/) 27 | 28 | 29 | ## Étape 2. Compilez la documentation 30 | 31 | Hugo possède son propre site d'exemple qui se trouve être également le site que 32 | vous lisez actuellement. 33 | 34 | Suivez les instructions suivante : 35 | 36 | 1. Clonez le [dépôt de hugo](http://github.com/spf13/hugo) 37 | 2. Allez dans ce dépôt 38 | 3. Lancez Hugo en mode serveur et compilez la documentation 39 | 4. Ouvrez votre navigateur sur http://localhost:1313 40 | 41 | Voici les commandes génériques correspondantes : 42 | 43 | git clone https://github.com/spf13/hugo 44 | cd hugo 45 | /chemin/ou/vous/avez/installe/hugo server --source=./docs 46 | > 29 pages created 47 | > 0 tags index created 48 | > in 27 ms 49 | > Web Server is available at http://localhost:1313 50 | > Press ctrl+c to stop 51 | 52 | Lorsque vous avez cela, continuez le reste de ce guide sur votre version locale. 53 | 54 | ## Étape 3. Changer le site de documentation 55 | 56 | Arrêtez le processus de Hugo en pressant ctrl+c. 57 | 58 | Maintenant, nous allons relancer hugo, mais cette fois avec Hugo en mode de 59 | surveillance. 60 | 61 | /chemin/vers/hugo/de/l-etape/1/hugo server --source=./docs --watch 62 | > 29 pages created 63 | > 0 tags index created 64 | > in 27 ms 65 | > Web Server is available at http://localhost:1313 66 | > Watching for changes in /Users/spf13/Code/hugo/docs/content 67 | > Press ctrl+c to stop 68 | 69 | Ouvrez votre [éditeur favori](https://vim.spf13.com) et changer l'une des 70 | sources des pages de contenu. 71 | Open your [favorite editor](http://vim.spf13.com) and change one of the source 72 | content pages. Que diriez-vous de modifier ce fichier pour *résoudre une faute 73 | de typo*. 74 | 75 | Les fichiers de contenu peuvent être trouvés dans `docs/content/`. Sauf 76 | indication contraire, les fichiers sont situés au même emplacement relatif que 77 | l'URL, dans notre cas `docs/content/overview/quickstart.md`. 78 | 79 | Modifiez et sauvegardez ce fichier. Notez ce qu'il se passe dans le terminal. 80 | 81 | > Change detected, rebuilding site 82 | 83 | > 29 pages created 84 | > 0 tags index created 85 | > in 26 ms 86 | 87 | Rechargez la page dans votre navigateur et voyez que le problème de typo est 88 | maintenant résolu. 89 | 90 | Notez à quel point cela a été rapide. Essayez de recharger le site avant qu'il 91 | soit fini de compiler. 92 | Notice how quick that was. Try to refresh the site before it's finished 93 | building. Je paris que vous n'y arrivez pas. 94 | Le fait d'avoir des réactions presque instantanées vous permet d'avoir votre 95 | créativité fluide sans avoir à attendre de longues compilations. 96 | 97 | ## Step 4. Amusez-vous 98 | 99 | Le meilleur moyen d'apprendre quelque chose est de s'amuser avec. 100 | -------------------------------------------------------------------------------- /assets/scss/_single.scss: -------------------------------------------------------------------------------- 1 | .post { 2 | width: 100%; 3 | max-width: 800px; 4 | text-align: left; 5 | padding: 20px; 6 | margin: 20px auto; 7 | 8 | @media #{$media-size-tablet} { 9 | max-width: 600px; 10 | } 11 | 12 | &-date { 13 | &:after { 14 | content: '—'; 15 | } 16 | } 17 | 18 | &-title { 19 | font-size: 2.625rem; 20 | margin: 0 0 20px; 21 | 22 | @media #{$media-size-phone} { 23 | font-size: 2rem; 24 | } 25 | 26 | a { 27 | text-decoration: none; 28 | } 29 | } 30 | 31 | &-tags { 32 | display: block; 33 | margin-bottom: 20px; 34 | font-size: 1rem; 35 | opacity: .5; 36 | 37 | a { 38 | text-decoration: none; 39 | } 40 | } 41 | 42 | &-content { 43 | margin-top: 30px; 44 | } 45 | 46 | &-cover { 47 | border-radius: 8px; 48 | margin: 40px -50px; 49 | width: 860px; 50 | max-width: 860px; 51 | 52 | @media #{$media-size-tablet} { 53 | margin: 20px 0; 54 | width: 100%; 55 | } 56 | } 57 | 58 | &-info { 59 | margin-top: 30px; 60 | font-size: .8rem; 61 | line-height: normal; 62 | @include dimmed; 63 | 64 | p { 65 | margin: .8em 0; 66 | } 67 | 68 | a:hover { 69 | border-bottom: 1px solid white; 70 | } 71 | 72 | svg { 73 | margin-right: .8em; 74 | } 75 | 76 | .tag { 77 | margin-right: .5em; 78 | 79 | &::before { 80 | content: "#" 81 | } 82 | } 83 | 84 | .feather { 85 | display: inline-block; 86 | vertical-align: -.125em; 87 | width: 1em; 88 | height: 1em; 89 | } 90 | } 91 | 92 | .flag { 93 | border-radius: 50%; 94 | margin: 0 5px; 95 | } 96 | } 97 | 98 | .pagination { 99 | margin-top: 20px; 100 | 101 | &__title { 102 | display: flex; 103 | text-align: center; 104 | position: relative; 105 | margin: 30px 0 20px; 106 | 107 | &-h { 108 | text-align: center; 109 | margin: 0 auto; 110 | padding: 5px 10px; 111 | background: $light-background; 112 | color: $light-color-secondary; 113 | font-size: .8rem; 114 | text-transform: uppercase; 115 | text-decoration: none; 116 | letter-spacing: .1em; 117 | z-index: 1; 118 | 119 | .dark-theme & { 120 | background: $dark-background; 121 | color: $dark-color-secondary; 122 | } 123 | } 124 | 125 | hr { 126 | position: absolute; 127 | left: 0; 128 | right: 0; 129 | width: 100%; 130 | margin-top: 15px; 131 | z-index: 0; 132 | } 133 | } 134 | 135 | &__buttons { 136 | display: flex; 137 | align-items: center; 138 | justify-content: center; 139 | 140 | a { 141 | text-decoration: none; 142 | font-weight: bold; 143 | } 144 | } 145 | } 146 | 147 | .button { 148 | position: relative; 149 | display: inline-flex; 150 | align-items: center; 151 | justify-content: center; 152 | background: $light-background-secondary; 153 | font-size: 1rem; 154 | font-weight: 600; 155 | border-radius: 8px; 156 | max-width: 40%; 157 | padding: 0; 158 | cursor: pointer; 159 | appearance: none; 160 | 161 | .dark-theme & { 162 | background: $dark-background-secondary; 163 | } 164 | 165 | + .button { 166 | margin-left: 10px; 167 | } 168 | 169 | a { 170 | display: flex; 171 | padding: 8px 16px; 172 | text-decoration: none; 173 | text-overflow: ellipsis; 174 | white-space: nowrap; 175 | overflow: hidden; 176 | } 177 | 178 | &__text { 179 | text-overflow: ellipsis; 180 | white-space: nowrap; 181 | overflow: hidden; 182 | } 183 | 184 | &.next .button__icon { 185 | margin-left: 8px; 186 | } 187 | 188 | &.previous .button__icon { 189 | margin-right: 8px; 190 | } 191 | } 192 | -------------------------------------------------------------------------------- /layouts/partials/svg.html: -------------------------------------------------------------------------------- 1 | {{- if (eq .name "codepen") -}} 2 | 3 | {{- else if (eq .name "facebook") -}} 4 | 5 | {{- else if (eq .name "github") -}} 6 | 7 | {{- else if (eq .name "gitlab") -}} 8 | 9 | {{- else if (eq .name "instagram") -}} 10 | 11 | {{- else if (eq .name "linkedin") -}} 12 | 13 | {{- else if (eq .name "slack") -}} 14 | 15 | {{- else if (eq .name "twitter") -}} 16 | 17 | {{- else if (eq .name "youtube") -}} 18 | 19 | {{- else if (eq .name "email") -}} 20 | 21 | {{- else if (eq .name "telegram") -}} 22 | 23 | {{- else -}} 24 | 25 | {{- end -}} 26 | -------------------------------------------------------------------------------- /layouts/posts/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 | 4 |
5 |

{{ i18n "readingTime" .Page.ReadingTime }} 6 | 7 | {{ if .IsTranslated }} 8 | | {{ i18n "postAvailable" }} 9 | {{ range .Translations }} 10 | 11 | {{ end}} 12 | {{ end }} 13 | 14 |

15 |
16 | 17 |
18 |

{{ .Title | markdownify }}

19 | 20 | {{- if .Params.toc }} 21 |
22 | 26 |
27 | {{- end }} 28 | 29 | {{ with .Params.Cover }} 30 | 31 | {{ end }} 32 | 33 |
34 | {{ .Content }} 35 |
36 |
37 | 38 |
39 | 40 |
41 | {{- with .Params.tags }} 42 |

43 | 44 | {{- range . -}} 45 | {{.}} 46 | {{- end }} 47 |

48 | {{- end }} 49 | 50 |

{{ i18n "wordCount" .Page.WordCount }}

51 | 52 |

{{ if .Site.Params.dateformNumTime }}{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}{{ else }}{{ dateFormat "2006-01-02 15:04 -0700" .Date.Local }}{{ end }}

53 | 54 | {{- if .GitInfo }} 55 |

{{ .GitInfo.AbbreviatedHash }} @ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}

56 | {{- end }} 57 |
58 | 59 | {{ if or .NextInSection .PrevInSection }} 60 | 86 | {{ end }} 87 | 88 | {{ if .Params.comments }} 89 |
90 | {{- partial "comments.html" . -}} 91 |
92 | {{ end }} 93 |
94 | {{ end }} 95 | -------------------------------------------------------------------------------- /assets/scss/_main.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | line-height: 1.6; 4 | letter-spacing: .06em; 5 | scroll-behavior: smooth; 6 | } 7 | 8 | *, 9 | *:before, 10 | *:after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | margin: 0; 16 | padding: 0; 17 | font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; 18 | font-size: 1rem; 19 | line-height: 1.54; 20 | background-color: $light-background; 21 | color: $light-color; 22 | text-rendering: optimizeLegibility; 23 | -webkit-font-smoothing: antialiased; 24 | font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; 25 | -webkit-overflow-scrolling: touch; 26 | -webkit-text-size-adjust: 100%; 27 | 28 | display: flex; 29 | min-height: 100vh; 30 | flex-direction: column; 31 | 32 | @media #{$media-size-phone} { 33 | font-size: 1rem; 34 | } 35 | 36 | &.dark-theme { 37 | background-color: $dark-background; 38 | color: $dark-color; 39 | } 40 | } 41 | 42 | h2, h3, h4, h5, h6 { 43 | display: flex; 44 | align-items: center; 45 | line-height: 1.3; 46 | } 47 | 48 | h1 { 49 | font-size: 2.625rem; 50 | } 51 | 52 | h2 { 53 | font-size: 1.625rem; 54 | } 55 | 56 | h3 { 57 | font-size: 1.375rem; 58 | } 59 | 60 | h4 { 61 | font-size: 1.125rem; 62 | } 63 | 64 | @media #{$media-size-phone} { 65 | h1 { 66 | font-size: 2rem; 67 | } 68 | 69 | h2 { 70 | font-size: 1.4rem; 71 | } 72 | 73 | h3 { 74 | font-size: 1.15rem; 75 | } 76 | 77 | h4 { 78 | font-size: 1.125rem; 79 | } 80 | } 81 | 82 | a { 83 | color: inherit; 84 | } 85 | 86 | img { 87 | display: block; 88 | max-width: 100%; 89 | 90 | &.left { 91 | margin-right: auto; 92 | } 93 | 94 | &.center { 95 | margin-left: auto; 96 | margin-right: auto; 97 | } 98 | 99 | &.right { 100 | margin-left: auto; 101 | } 102 | } 103 | 104 | figure { 105 | display: table; 106 | max-width: 100%; 107 | margin: 25px 0; 108 | 109 | &.left { 110 | margin-right: auto; 111 | } 112 | 113 | &.center { 114 | margin-left: auto; 115 | margin-right: auto; 116 | } 117 | 118 | &.right { 119 | margin-left: auto; 120 | } 121 | 122 | figcaption { 123 | font-size: 14px; 124 | margin-top: 5px; 125 | opacity: .8; 126 | 127 | &.left { 128 | text-align: left; 129 | } 130 | 131 | &.center { 132 | text-align: center; 133 | } 134 | 135 | &.right { 136 | text-align: right; 137 | } 138 | } 139 | } 140 | 141 | code { 142 | font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace; 143 | font-feature-settings: normal; 144 | background: $light-background-secondary; 145 | padding: 1px 6px; 146 | margin: 0 2px; 147 | border-radius: 5px; 148 | font-size: .95rem; 149 | 150 | .dark-theme & { 151 | background: $dark-background-secondary; 152 | } 153 | } 154 | 155 | pre { 156 | background: #212020; 157 | padding: 20px; 158 | border-radius: 8px; 159 | font-size: .95rem; 160 | overflow: auto; 161 | 162 | @media #{$media-size-phone} { 163 | white-space: pre-wrap; 164 | word-wrap: break-word; 165 | } 166 | 167 | code { 168 | background: none !important; 169 | color: #ccc; 170 | margin: 0; 171 | padding: 0; 172 | font-size: inherit; 173 | 174 | .dark-theme & { 175 | color: inherit; 176 | } 177 | } 178 | } 179 | 180 | blockquote { 181 | border-left: 2px solid; 182 | margin: 40px; 183 | padding: 10px 20px; 184 | 185 | @media #{$media-size-phone} { 186 | margin: 10px; 187 | padding: 10px; 188 | } 189 | 190 | &:before { 191 | content: '”'; 192 | font-family: Georgia, serif; 193 | font-size: 3.875rem; 194 | position: absolute; 195 | left: -40px; 196 | top: -20px; 197 | } 198 | 199 | p:first-of-type { 200 | margin-top: 0; 201 | } 202 | 203 | p:last-of-type { 204 | margin-bottom: 0; 205 | } 206 | } 207 | 208 | ul, ol { 209 | margin-left: 40px; 210 | padding: 0; 211 | 212 | @media #{$media-size-phone} { 213 | margin-left: 20px; 214 | } 215 | } 216 | 217 | ol ol { 218 | list-style-type: lower-alpha; 219 | } 220 | 221 | .container { 222 | flex: 1; 223 | display: flex; 224 | flex-direction: column; 225 | justify-content: center; 226 | text-align: center; 227 | } 228 | 229 | .content { 230 | display: flex; 231 | flex-direction: column; 232 | flex: 1 auto; 233 | align-items: center; 234 | justify-content: center; 235 | margin: 50px 0; 236 | 237 | @media #{$media-size-phone} { 238 | margin-top: 0; 239 | } 240 | } 241 | 242 | hr { 243 | width: 100%; 244 | border: none; 245 | background: $light-border-color; 246 | height: 1px; 247 | 248 | .dark-theme & { 249 | background: $dark-border-color; 250 | } 251 | } 252 | 253 | .hidden { 254 | display: none; 255 | } 256 | 257 | .hide-on-phone { 258 | @media #{$media-size-phone} { 259 | display: none; 260 | } 261 | } 262 | 263 | .hide-on-tablet { 264 | @media #{$media-size-tablet} { 265 | display: none; 266 | } 267 | } 268 | 269 | // Accessibility 270 | .screen-reader-text { 271 | border: 0; 272 | clip: rect(1px, 1px, 1px, 1px); 273 | clip-path: inset(50%); 274 | height: 1px; 275 | margin: -1px; 276 | overflow: hidden; 277 | padding: 0; 278 | position: absolute !important; 279 | width: 1px; 280 | word-wrap: normal !important; 281 | } 282 | 283 | .screen-reader-text:focus { 284 | background-color: #f1f1f1; 285 | border-radius: 3px; 286 | box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 287 | clip: auto !important; 288 | clip-path: none; 289 | color: #21759b; 290 | display: block; 291 | font-size: 14px; 292 | font-size: 0.875rem; 293 | font-weight: bold; 294 | height: auto; 295 | left: 5px; 296 | line-height: normal; 297 | padding: 15px 23px 14px; 298 | text-decoration: none; 299 | top: 5px; 300 | width: auto; 301 | z-index: 100000; 302 | } 303 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello Friend NG 2 | 3 | ![Hello Friend NG](https://dsh.re/d27822) 4 | 5 | 6 | 7 | ## General informations 8 | 9 | This theme was highly inspired by the [hello-friend](https://github.com/panr/hugo-theme-hello-friend) and [hermit](https://github.com/Track3/hermit). 10 | 11 | 12 | ## Features 13 | 14 | - Theming: **dark/light mode**, depending on your preferences (dark is default, but you can change it) 15 | - Great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/) 16 | - Nice code highlighting thanks to [**PrismJS**](https://prismjs.com) 17 | - An easy way to modify the theme with Hugo tooling 18 | - Fully responsive 19 | - Support for social 20 | 21 | #### Built-in shortcodes 22 | 23 | - **`image`** (prop required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**) 24 | - eg: `{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}` 25 | - **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`** 26 | - eg: `{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}` 27 | 28 | #### Code highlighting 29 | 30 | By default the theme is using PrismJS to color your code syntax. All you need to do is to wrap you code like this: 31 | 32 | 
 33 | ```html
 34 |   // your code here
 35 | ```
 36 |
37 | 38 | **Supported languages**: https://prismjs.com/#languages-list 39 | 40 | ## How to start 41 | 42 | 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. 43 | 44 | You can also clone it directly to your Hugo folder: 45 | 46 | ``` 47 | $ git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng 48 | ``` 49 | 50 | 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: 51 | 52 | ``` 53 | $ git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng 54 | ``` 55 | ### Favicon 56 | 57 | Use [RealFaviconGenerator](https://realfavicongenerator.net/) to generate these files, put them into your site's static folder: 58 | 59 | - android-chrome-192x192.png 60 | - android-chrome-512x512.png 61 | - apple-touch-icon.png 62 | - favicon-16x16.png 63 | - favicon-32x32.png 64 | - favicon.ico 65 | - mstile-150x150.png 66 | - safari-pinned-tab.svg 67 | - site.webmanifest 68 | 69 | ## How to configure 70 | 71 | The theme doesn't require any advanced configuration. Just copy: 72 | 73 | ``` 74 | baseurl = "/" 75 | languageCode = "en-us" 76 | theme = "hello-friend-ng" 77 | 78 | [params] 79 | dateform = "Jan 2, 2006" 80 | dateformShort = "Jan 2" 81 | dateformNum = "2006-01-02" 82 | dateformNumTime = "2006-01-02 15:04 -0700" 83 | 84 | # Metadata mostly used in document's head 85 | description = "Homepage and blog by Djordje Atlialp" 86 | keywords = "homepage, blog, science, informatics, development, programming" 87 | images = [""] 88 | 89 | # Directory name of your blog content (default is `content/posts`) 90 | contentTypeName = "posts" 91 | # Default theme "light" or "dark" 92 | defaultTheme = "dark" 93 | 94 | [languages] 95 | [languages.en] 96 | title = "Hello Friend NG" 97 | subtitle = "A simple theme for Hugo" 98 | keywords = "" 99 | copyright = "" 100 | readOtherPosts = "Read other posts" 101 | 102 | [languages.en.params.logo] 103 | logoText = "hello friend ng" 104 | logoHomeLink = "/" 105 | # or 106 | # 107 | # path = "/img/your-example-logo.svg" 108 | # alt = "Your example logo alt text" 109 | 110 | # You can create a language based menu 111 | [languages.en.menu] 112 | [[languages.en.menu.main]] 113 | identifier = "about" 114 | name = "About" 115 | url = "/about" 116 | [[languages.en.menu.main]] 117 | identifier = "showcase" 118 | name = "Showcase" 119 | url = "/showcase" 120 | 121 | # And you can even create generic menu 122 | [menu] 123 | [[menu.main]] 124 | identifier = "about" 125 | name = "About" 126 | url = "/about" 127 | [[menu.main]] 128 | identifier = "blog" 129 | name = "Blog" 130 | url = "/posts" 131 | ``` 132 | 133 | 134 | ## How to run your site 135 | 136 | From your Hugo root directory run: 137 | 138 | ``` 139 | $ hugo server -t hello-friend-ng 140 | ``` 141 | 142 | and go to `localhost:1313` in your browser. From now on all the changes you make will go live, so you don't need to refresh your browser every single time. 143 | 144 | 145 | ## How to edit the theme 146 | 147 | If you really want to edit the theme, you need to install Node dependencies. To do this, go to the theme directory (from your Hugo root directory): 148 | 149 | ``` 150 | $ cd themes/hello-friend-ng 151 | ``` 152 | 153 | and then run: 154 | 155 | ``` 156 | $ npm install 157 | ``` 158 | 159 | 160 | ## How to contribute 161 | 162 | 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). 163 | 164 | 165 | ## Third Party 166 | 167 | - [normalize.css](https://github.com/necolas/normalize.css) 168 | - [Feather Open Source Icons](https://github.com/feathericons/feather) 169 | - [Flag Icon](https://github.com/lipis/flag-icon-css) 170 | 171 | 172 | ## Licence 173 | 174 | Copyright © 2019 Djordje Atlialp 175 | 176 | 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. 177 | -------------------------------------------------------------------------------- /exampleSite/content/posts/migrate-from-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | author: 3 | name: "Hugo Authors" 4 | date: 2014-03-10 5 | linktitle: Migrating from Jekyll 6 | title: Migrate to Hugo from Jekyll 7 | type: 8 | - post 9 | - posts 10 | weight: 10 11 | series: 12 | - Hugo 101 13 | aliases: 14 | - /blog/migrate-from-jekyll/ 15 | --- 16 | 17 | ## Move static content to `static` 18 | Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output. Hugo keeps all static content under `static`. You should therefore move it all there. 19 | With Jekyll, something that looked like 20 | 21 | ▾ / 22 | ▾ images/ 23 | logo.png 24 | 25 | should become 26 | 27 | ▾ / 28 | ▾ static/ 29 | ▾ images/ 30 | logo.png 31 | 32 | Additionally, you'll want any files that should reside at the root (such as `CNAME`) to be moved to `static`. 33 | 34 | ## Create your Hugo configuration file 35 | Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the [Hugo configuration documentation](/overview/configuration/) for details. 36 | 37 | ## Set your configuration publish folder to `_site` 38 | The default is for Jekyll to publish to `_site` and for Hugo to publish to `public`. If, like me, you have [`_site` mapped to a git submodule on the `gh-pages` branch](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.html), you'll want to do one of two alternatives: 39 | 40 | 1. Change your submodule to point to map `gh-pages` to public instead of `_site` (recommended). 41 | 42 | git submodule deinit _site 43 | git rm _site 44 | git submodule add -b gh-pages git@github.com:your-username/your-repo.git public 45 | 46 | 2. Or, change the Hugo configuration to use `_site` instead of `public`. 47 | 48 | { 49 | .. 50 | "publishdir": "_site", 51 | .. 52 | } 53 | 54 | ## Convert Jekyll templates to Hugo templates 55 | That's the bulk of the work right here. The documentation is your friend. You should refer to [Jekyll's template documentation](http://jekyllrb.com/docs/templates/) if you need to refresh your memory on how you built your blog and [Hugo's template](/layout/templates/) to learn Hugo's way. 56 | 57 | As a single reference data point, converting my templates for [heyitsalex.net](http://heyitsalex.net/) took me no more than a few hours. 58 | 59 | ## Convert Jekyll plugins to Hugo shortcodes 60 | Jekyll has [plugins](http://jekyllrb.com/docs/plugins/); Hugo has [shortcodes](/doc/shortcodes/). It's fairly trivial to do a port. 61 | 62 | ### Implementation 63 | As an example, I was using a custom [`image_tag`](https://github.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc06908ec/_plugins/image_tag.rb) plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing. 64 | 65 | Jekyll's plugin: 66 | 67 | module Jekyll 68 | class ImageTag < Liquid::Tag 69 | @url = nil 70 | @caption = nil 71 | @class = nil 72 | @link = nil 73 | // Patterns 74 | IMAGE_URL_WITH_CLASS_AND_CAPTION = 75 | IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->((https?:\/\/|\/)(\S+))(\s*)/i 76 | IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i 77 | IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i 78 | IMAGE_URL = /((https?:\/\/|\/)(\S+))/i 79 | def initialize(tag_name, markup, tokens) 80 | super 81 | if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK 82 | @class = $1 83 | @url = $3 84 | @caption = $7 85 | @link = $9 86 | elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION 87 | @class = $1 88 | @url = $3 89 | @caption = $7 90 | elsif markup =~ IMAGE_URL_WITH_CAPTION 91 | @url = $1 92 | @caption = $5 93 | elsif markup =~ IMAGE_URL_WITH_CLASS 94 | @class = $1 95 | @url = $3 96 | elsif markup =~ IMAGE_URL 97 | @url = $1 98 | end 99 | end 100 | def render(context) 101 | if @class 102 | source = "
" 103 | else 104 | source = "
" 105 | end 106 | if @link 107 | source += "" 108 | end 109 | source += "" 110 | if @link 111 | source += "" 112 | end 113 | source += "
#{@caption}
" if @caption 114 | source += "
" 115 | source 116 | end 117 | end 118 | end 119 | Liquid::Template.register_tag('image', Jekyll::ImageTag) 120 | 121 | is written as this Hugo shortcode: 122 | 123 | 124 |
125 | {{ with .Get "link"}}{{ end }} 126 | 127 | {{ if .Get "link"}}{{ end }} 128 | {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} 129 |
{{ if isset .Params "title" }} 130 | {{ .Get "title" }}{{ end }} 131 | {{ if or (.Get "caption") (.Get "attr")}}

132 | {{ .Get "caption" }} 133 | {{ with .Get "attrlink"}} {{ end }} 134 | {{ .Get "attr" }} 135 | {{ if .Get "attrlink"}} {{ end }} 136 |

{{ end }} 137 |
138 | {{ end }} 139 |
140 | 141 | 142 | ### Usage 143 | I simply changed: 144 | 145 | {% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %} 146 | 147 | to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`): 148 | 149 | {{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}} 150 | 151 | As a bonus, the shortcode named parameters are, arguably, more readable. 152 | 153 | ## Finishing touches 154 | ### Fix content 155 | Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that `hugo server --watch` is your friend. Test your changes and fix errors as needed. 156 | 157 | ### Clean up 158 | You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it. 159 | 160 | ## A practical example in a diff 161 | [Hey, it's Alex](http://heyitsalex.net/) was migrated in less than a _father-with-kids day_ from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this [diff](https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610). 162 | -------------------------------------------------------------------------------- /assets/scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /exampleSite/content/posts/migrate-from-jekyll.fr.md: -------------------------------------------------------------------------------- 1 | +++ 2 | categories = ["Hugo", "Jekyll"] 3 | date = "2014-03-10" 4 | description = "" 5 | featured = "" 6 | featuredalt = "" 7 | featuredpath = "" 8 | linktitle = "" 9 | slug = "Migrer vers Hugo depuis Jekyll" 10 | title = "Migrer vers Hugo depuis Jekyll" 11 | type = ["posts","post"] 12 | [ author ] 13 | name = "Hugo Authors" 14 | +++ 15 | 16 | ## Déplacez le contenu statique vers `static` 17 | Jekyll a une règle comme quoi tout répertoire qui ne commence pas par `_` sera 18 | copié tel-quel dans le répertoire `_site`. Hugo garde tout le contenu statique 19 | dans le répertoire `static`. Vous devez donc déplacer tout ce type de contenu 20 | là-dedans. Avec Jekylll, l'arborescence ressemblant à ceci : 21 | 22 | ▾ / 23 | ▾ images/ 24 | logo.png 25 | 26 | doit devenir 27 | 28 | ▾ / 29 | ▾ static/ 30 | ▾ images/ 31 | logo.png 32 | 33 | En outre, vous allez devoir déplacer tous les fichiers présents à la racine vers 34 | le répertoire `static`. 35 | 36 | ## Créez votre configuration Hugo 37 | Hugo peut lire votre fichier de configuration au format JSON, YAML et TOML. Hugo 38 | supporte également les paramètres de configuration. Plus d'informations sur la 39 | [documentation de configuration Hugo](/overview/configuration/) 40 | 41 | ## Définiez votre répertoire de publication sur `_site` 42 | La valeur par défaut pour Jekyll est d'utiliser le répertoire `_site` pour 43 | publier le contenu. Pour Hugo, le répertoire de publication est `public`. Si, 44 | comme moi, vous avez [lié `_site` vers un sous-module git sur la branche 45 | `gh-pages`](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.ht 46 | ml), vous allez vouloir avoir quelques alternatives : 47 | 48 | 1. Changez votre lien du sous-module `gh-pages` pour pointer sur public au lieu 49 | de `_site` (recommendé). 50 | 51 | git submodule deinit _site 52 | git rm _site 53 | git submodule add -b gh-pages 54 | git@github.com:your-username/your-repo.git public 55 | 56 | 2. Ou modifiez la configuration de Hugo pour utiliser le répertoire `_site` au 57 | lieu de `public`. 58 | 59 | { 60 | .. 61 | "publishdir": "_site", 62 | .. 63 | } 64 | 65 | ## Convertir un thème Jekyll pour Hugo 66 | C'est la majeure partie du travail. La documentation est votre ami. 67 | Vous devriez vous référer à [la documentation des thèmes de Jekyll] 68 | (http://jekyllrb.com/docs/templates/) si vous devez vous rafraîchir la mémoire 69 | sur la façon dont vous avez construit votre blog et [les thèmes de Hugo] 70 | (/layout/templates/) pour apprendre la manière de faire sur Hugo. 71 | 72 | Pour vous donner un point de référence, la conversion du thème pour 73 | [heyitsalex.net](http://heyitsalex.net/) ne m'a pris que quelques heures. 74 | 75 | ## Convertir les extensions Jekyll vers des shortcodes Hugo 76 | Jekyll support les [extensions](http://jekyllrb.com/docs/plugins/); Hugo lui a 77 | les [shortcodes](/doc/shortcodes/). C'est assez banal les porter. 78 | 79 | ### Implémentation 80 | Comme exemple, j'utilise une extension pour avoir un [`image_tag`](https://githu 81 | b.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc 82 | 06908ec/_plugins/image_tag.rb) presonnalisé pour générer les images avec une 83 | légende sur Jekyll. J'ai vu que Hugo implémente un shortcode qui fait exactement 84 | la même chose. 85 | 86 | Extension Jekyll : 87 | ``` 88 | module Jekyll 89 | class ImageTag < Liquid::Tag 90 | @url = nil 91 | @caption = nil 92 | @class = nil 93 | @link = nil 94 | // Patterns 95 | IMAGE_URL_WITH_CLASS_AND_CAPTION = 96 | IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = 97 | /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)-> 98 | ((https?:\/\/|\/)(\S+))(\s*)/i 99 | IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i 100 | IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i 101 | IMAGE_URL = /((https?:\/\/|\/)(\S+))/i 102 | def initialize(tag_name, markup, tokens) 103 | super 104 | if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK 105 | @class = $1 106 | @url = $3 107 | @caption = $7 108 | @link = $9 109 | elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION 110 | @class = $1 111 | @url = $3 112 | @caption = $7 113 | elsif markup =~ IMAGE_URL_WITH_CAPTION 114 | @url = $1 115 | @caption = $5 116 | elsif markup =~ IMAGE_URL_WITH_CLASS 117 | @class = $1 118 | @url = $3 119 | elsif markup =~ IMAGE_URL 120 | @url = $1 121 | end 122 | end 123 | def render(context) 124 | if @class 125 | source = "
" 126 | else 127 | source = "
" 128 | end 129 | if @link 130 | source += "" 131 | end 132 | source += "" 133 | if @link 134 | source += "" 135 | end 136 | source += "
#{@caption}
" if @caption 137 | source += "
" 138 | source 139 | end 140 | end 141 | end 142 | Liquid::Template.register_tag('image', Jekyll::ImageTag) 143 | ``` 144 | 145 | Écrite en tant que shortcode Hugo: 146 | ``` 147 | 148 |
149 | {{ with .Get "link"}}{{ end }} 150 | {{ with .Get 158 | {{ if .Get "link"}}{{ end }} 159 | {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} 160 |
{{ if isset .Params "title" }} 161 | {{ .Get "title" }}{{ end }} 162 | {{ if or (.Get "caption") (.Get "attr")}}

163 | {{ .Get "caption" }} 164 | {{ with .Get "attrlink"}} {{ end }} 165 | {{ .Get "attr" }} 166 | {{ if .Get "attrlink"}} {{ end }} 167 |

{{ end }} 168 |
169 | {{ end }} 170 |
171 | 172 | ``` 173 | 174 | ### Utilisation 175 | J'ai simplement changé : 176 | ``` 177 | {% image 178 | full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg 179 | "One of my favorite touristy-type photos. I secretly waited for the 180 | good light while we were "having fun" and took this. Only regret: a 181 | stupid pole in the top-left corner of the frame I had to clumsily get 182 | rid of at post-processing." 183 | ->http://www.flickr.com/photos/alexnormand/4829260124/in/ 184 | set-72157624547713078/ %} 185 | ``` 186 | 187 | pour cela (cet exemple utilise une version légèrement étendue nommée `fig`, 188 | différente de la `figure` intégrée) : 189 | 190 | ``` 191 | {{%/* fig class="full" 192 | src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" 193 | title="One of my favorite touristy-type photos. I secretly waited for the 194 | good light while we were having fun and took this. Only regret: a stupid 195 | pole in the top-left corner of the frame I had to clumsily get rid of at 196 | post-processing." 197 | link="http://www.flickr.com/photos/alexnormand/4829260124/in/ 198 | set-72157624547713078/" */%}} 199 | ``` 200 | Comme bonus, les paramètres nommés des shortcodes sont plus lisibles. 201 | 202 | ## Touches finales 203 | ### Corriger le contenu 204 | Suivant le nombre de modifications que vous avez effectué sur chaque articles 205 | avec Jekyll, cette étape requierra plus ou moins d'efforts. Il n'y a pas de 206 | règles rigoureuses ici, si ce n'est que `hugo server --watch` est votre ami. 207 | Testez vos modifications et corrigez les erreurs au besoin. 208 | 209 | ### Nettoyez le tout 210 | Vous voudrez sûrement supprimer votre configuration Jekyll maintenant que tout 211 | est fini. Exact, pensez à supprimer tout ce qui est inutilisé. 212 | 213 | ## Un exemple pratique 214 | [Hey, it's Alex](http://heyitsalex.net/) a été migré de Jekyll vers Hugo en 215 | moins de temps qu'une journée père enfant. Vous pouvez trouver toutes les 216 | modification en regardant ce [diff](https://github.com/alexandre-normand/alexand 217 | re-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b 218 | 81495423294208cc74d610). 219 | -------------------------------------------------------------------------------- /exampleSite/content/posts/goisforlovers.md: -------------------------------------------------------------------------------- 1 | +++ 2 | title = "(Hu)go Template Primer" 3 | description = "" 4 | type = ["posts","post"] 5 | tags = [ 6 | "go", 7 | "golang", 8 | "templates", 9 | "themes", 10 | "development", 11 | ] 12 | date = "2014-04-02" 13 | categories = [ 14 | "Development", 15 | "golang", 16 | ] 17 | series = ["Hugo 101"] 18 | [ author ] 19 | name = "Hugo Authors" 20 | +++ 21 | 22 | Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for 23 | its template engine. It is an extremely lightweight engine that provides a very 24 | small amount of logic. In our experience that it is just the right amount of 25 | logic to be able to create a good static website. If you have used other 26 | template systems from different languages or frameworks you will find a lot of 27 | similarities in Go templates. 28 | 29 | This document is a brief primer on using Go templates. The [Go docs][gohtmltemplate] 30 | provide more details. 31 | 32 | ## Introduction to Go Templates 33 | 34 | Go templates provide an extremely simple template language. It adheres to the 35 | belief that only the most basic of logic belongs in the template or view layer. 36 | One consequence of this simplicity is that Go templates parse very quickly. 37 | 38 | A unique characteristic of Go templates is they are content aware. Variables and 39 | content will be sanitized depending on the context of where they are used. More 40 | details can be found in the [Go docs][gohtmltemplate]. 41 | 42 | ## Basic Syntax 43 | 44 | Golang templates are HTML files with the addition of variables and 45 | functions. 46 | 47 | **Go variables and functions are accessible within {{ }}** 48 | 49 | Accessing a predefined variable "foo": 50 | 51 | {{ foo }} 52 | 53 | **Parameters are separated using spaces** 54 | 55 | Calling the add function with input of 1, 2: 56 | 57 | {{ add 1 2 }} 58 | 59 | **Methods and fields are accessed via dot notation** 60 | 61 | Accessing the Page Parameter "bar" 62 | 63 | {{ .Params.bar }} 64 | 65 | **Parentheses can be used to group items together** 66 | 67 | {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} 68 | 69 | 70 | ## Variables 71 | 72 | Each Go template has a struct (object) made available to it. In hugo each 73 | template is passed either a page or a node struct depending on which type of 74 | page you are rendering. More details are available on the 75 | [variables](/layout/variables) page. 76 | 77 | A variable is accessed by referencing the variable name. 78 | 79 | {{ .Title }} 80 | 81 | Variables can also be defined and referenced. 82 | 83 | {{ $address := "123 Main St."}} 84 | {{ $address }} 85 | 86 | 87 | ## Functions 88 | 89 | Go template ship with a few functions which provide basic functionality. The Go 90 | template system also provides a mechanism for applications to extend the 91 | available functions with their own. [Hugo template 92 | functions](/layout/functions) provide some additional functionality we believe 93 | are useful for building websites. Functions are called by using their name 94 | followed by the required parameters separated by spaces. Template 95 | functions cannot be added without recompiling hugo. 96 | 97 | **Example:** 98 | 99 | {{ add 1 2 }} 100 | 101 | ## Includes 102 | 103 | When including another template you will pass to it the data it will be 104 | able to access. To pass along the current context please remember to 105 | include a trailing dot. The templates location will always be starting at 106 | the /layout/ directory within Hugo. 107 | 108 | **Example:** 109 | 110 | {{ template "chrome/header.html" . }} 111 | 112 | 113 | ## Logic 114 | 115 | Go templates provide the most basic iteration and conditional logic. 116 | 117 | ### Iteration 118 | 119 | Just like in Go, the Go templates make heavy use of range to iterate over 120 | a map, array or slice. The following are different examples of how to use 121 | range. 122 | 123 | **Example 1: Using Context** 124 | 125 | {{ range array }} 126 | {{ . }} 127 | {{ end }} 128 | 129 | **Example 2: Declaring value variable name** 130 | 131 | {{range $element := array}} 132 | {{ $element }} 133 | {{ end }} 134 | 135 | **Example 2: Declaring key and value variable name** 136 | 137 | {{range $index, $element := array}} 138 | {{ $index }} 139 | {{ $element }} 140 | {{ end }} 141 | 142 | ### Conditionals 143 | 144 | If, else, with, or, & and provide the framework for handling conditional 145 | logic in Go Templates. Like range, each statement is closed with `end`. 146 | 147 | 148 | Go Templates treat the following values as false: 149 | 150 | * false 151 | * 0 152 | * any array, slice, map, or string of length zero 153 | 154 | **Example 1: If** 155 | 156 | {{ if isset .Params "title" }}

{{ index .Params "title" }}

{{ end }} 157 | 158 | **Example 2: If -> Else** 159 | 160 | {{ if isset .Params "alt" }} 161 | {{ index .Params "alt" }} 162 | {{else}} 163 | {{ index .Params "caption" }} 164 | {{ end }} 165 | 166 | **Example 3: And & Or** 167 | 168 | {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} 169 | 170 | **Example 4: With** 171 | 172 | An alternative way of writing "if" and then referencing the same value 173 | is to use "with" instead. With rebinds the context `.` within its scope, 174 | and skips the block if the variable is absent. 175 | 176 | The first example above could be simplified as: 177 | 178 | {{ with .Params.title }}

{{ . }}

{{ end }} 179 | 180 | **Example 5: If -> Else If** 181 | 182 | {{ if isset .Params "alt" }} 183 | {{ index .Params "alt" }} 184 | {{ else if isset .Params "caption" }} 185 | {{ index .Params "caption" }} 186 | {{ end }} 187 | 188 | ## Pipes 189 | 190 | One of the most powerful components of Go templates is the ability to 191 | stack actions one after another. This is done by using pipes. Borrowed 192 | from unix pipes, the concept is simple, each pipeline's output becomes the 193 | input of the following pipe. 194 | 195 | Because of the very simple syntax of Go templates, the pipe is essential 196 | to being able to chain together function calls. One limitation of the 197 | pipes is that they only can work with a single value and that value 198 | becomes the last parameter of the next pipeline. 199 | 200 | A few simple examples should help convey how to use the pipe. 201 | 202 | **Example 1 :** 203 | 204 | {{ if eq 1 1 }} Same {{ end }} 205 | 206 | is the same as 207 | 208 | {{ eq 1 1 | if }} Same {{ end }} 209 | 210 | It does look odd to place the if at the end, but it does provide a good 211 | illustration of how to use the pipes. 212 | 213 | **Example 2 :** 214 | 215 | {{ index .Params "disqus_url" | html }} 216 | 217 | Access the page parameter called "disqus_url" and escape the HTML. 218 | 219 | **Example 3 :** 220 | 221 | {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} 222 | Stuff Here 223 | {{ end }} 224 | 225 | Could be rewritten as 226 | 227 | {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }} 228 | Stuff Here 229 | {{ end }} 230 | 231 | 232 | ## Context (aka. the dot) 233 | 234 | The most easily overlooked concept to understand about Go templates is that {{ . }} 235 | always refers to the current context. In the top level of your template this 236 | will be the data set made available to it. Inside of a iteration it will have 237 | the value of the current item. When inside of a loop the context has changed. . 238 | will no longer refer to the data available to the entire page. If you need to 239 | access this from within the loop you will likely want to set it to a variable 240 | instead of depending on the context. 241 | 242 | **Example:** 243 | 244 | {{ $title := .Site.Title }} 245 | {{ range .Params.tags }} 246 |
  • {{ . }} - {{ $title }}
    • 247 | {{ end }} 248 | 249 | Notice how once we have entered the loop the value of {{ . }} has changed. We 250 | have defined a variable outside of the loop so we have access to it from within 251 | the loop. 252 | 253 | # Hugo Parameters 254 | 255 | Hugo provides the option of passing values to the template language 256 | through the site configuration (for sitewide values), or through the meta 257 | data of each specific piece of content. You can define any values of any 258 | type (supported by your front matter/config format) and use them however 259 | you want to inside of your templates. 260 | 261 | 262 | ## Using Content (page) Parameters 263 | 264 | In each piece of content you can provide variables to be used by the 265 | templates. This happens in the [front matter](/content/front-matter). 266 | 267 | An example of this is used in this documentation site. Most of the pages 268 | benefit from having the table of contents provided. Sometimes the TOC just 269 | doesn't make a lot of sense. We've defined a variable in our front matter 270 | of some pages to turn off the TOC from being displayed. 271 | 272 | Here is the example front matter: 273 | 274 | ``` 275 | --- 276 | title: "Permalinks" 277 | date: "2013-11-18" 278 | aliases: 279 | - "/doc/permalinks/" 280 | groups: ["extras"] 281 | groups_weight: 30 282 | notoc: true 283 | --- 284 | ``` 285 | 286 | Here is the corresponding code inside of the template: 287 | 288 | {{ if not .Params.notoc }} 289 |
    290 | {{ .TableOfContents }} 291 |
    292 | {{ end }} 293 | 294 | 295 | 296 | ## Using Site (config) Parameters 297 | In your top-level configuration file (eg, `config.yaml`) you can define site 298 | parameters, which are values which will be available to you in chrome. 299 | 300 | For instance, you might declare: 301 | 302 | ```yaml 303 | params: 304 | CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved." 305 | TwitterUser: "spf13" 306 | SidebarRecentLimit: 5 307 | ``` 308 | 309 | Within a footer layout, you might then declare a `