├── exampleSite ├── .gitignore ├── archetypes │ └── default.md ├── content │ ├── playground │ │ ├── 01-playground.md │ │ └── menus.md │ ├── about.md │ └── post │ │ ├── hugoisforlovers.md │ │ ├── migrate-from-jekyll.md │ │ ├── goisforlovers.md │ │ └── creating-a-new-theme.md ├── config.toml └── README.md ├── images ├── tn.png └── screenshot.png ├── static ├── images │ ├── logo.png │ └── start-screen │ │ ├── picture1.png │ │ ├── picture2.png │ │ └── picture3.png ├── js │ └── single-text-align.js └── css │ ├── mobile.css │ ├── code-style.min.css │ ├── normalize.css │ └── default.css ├── archetypes └── default.md ├── layouts ├── partials │ ├── footer.html │ ├── justify.svg │ ├── left.svg │ ├── head.html │ ├── sidebar.svg │ ├── face.svg │ └── start-screen.svg ├── 404.html ├── _default │ ├── list.html │ └── single.html └── index.html ├── theme.toml ├── CREDITS.html ├── LICENSE.md ├── sample-config.toml └── README.md /exampleSite/.gitignore: -------------------------------------------------------------------------------- 1 | public/ -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djuelg/Shapez-Theme/HEAD/images/tn.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djuelg/Shapez-Theme/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djuelg/Shapez-Theme/HEAD/static/images/logo.png -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-10-09 3 | title: Title 4 | description: Description 5 | keywords: 6 | - Keyword 7 | --- -------------------------------------------------------------------------------- /static/images/start-screen/picture1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djuelg/Shapez-Theme/HEAD/static/images/start-screen/picture1.png -------------------------------------------------------------------------------- /static/images/start-screen/picture2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djuelg/Shapez-Theme/HEAD/static/images/start-screen/picture2.png -------------------------------------------------------------------------------- /static/images/start-screen/picture3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djuelg/Shapez-Theme/HEAD/static/images/start-screen/picture3.png -------------------------------------------------------------------------------- /exampleSite/archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head.html" . }} 5 | 6 | 7 |
8 | 404
9 | PAGE NOT
10 | FOUND :( 11 |
12 | 13 | -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | name = "Shapez Theme" 2 | license = "MIT" 3 | licenselink = "https://opensource.org/licenses/MIT" 4 | homepage = "https://github.com/djuelg/Shapez-Theme" 5 | tags = ["hugo", "blog", "Shapez", "SVG", "design"] 6 | min_version = 0.74 7 | 8 | [author] 9 | name = "djuelg" 10 | homepage = "https://github.com/djuelg" -------------------------------------------------------------------------------- /exampleSite/content/playground/01-playground.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-05-04 3 | title: The "Playground section" 4 | --- 5 | 6 | Here you can see the "playground"-section. 7 | It is used for less important content, wich isnt updated regulary and must not be in a strict structure. 8 | The special thing of this section is the fact, that every article is fully viewable and every article is on the same page (e.g. at `/playground/`). -------------------------------------------------------------------------------- /exampleSite/content/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-04-21 3 | title: About 4 | --- 5 | 6 | The shapez theme is a theme created with [hugo](http://gohugo.io/). 7 | Hugo is a static site generator using markdown-files to render it's content. 8 | 9 | __Special thanks__ goes to Freepik, Daniel Bruce and Plainicon for publishing their icons at [Flaticon](http://www.flaticon.com). 10 | Furthermore I would like to thank the creator of the [Slender Theme](http://themes.gohugo.io/slender/), wich brought me to create my own theme - using some code of slender ;) -------------------------------------------------------------------------------- /layouts/partials/justify.svg: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /layouts/partials/left.svg: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static/js/single-text-align.js: -------------------------------------------------------------------------------- 1 | // Wait for the page to load first 2 | window.onload = function() { 3 | 4 | //Get a reference to the link on the page 5 | var aLeft = document.getElementById("alignLeft"); 6 | var aJustify = document.getElementById("alignJustify"); 7 | 8 | //Set code to run when the link is clicked 9 | aJustify.onclick = function() { 10 | if (document.getElementById("article-body").className.match(/(?:^|\s)article-body-left(?!\S)/) ) { 11 | document.getElementById("article-body").className = document.getElementById("article-body").className.replace( /(?:^|\s)article-body-left(?!\S)/g , '' ) 12 | } 13 | } 14 | aLeft.onclick = function() { 15 | if (!document.getElementById("article-body").className.match(/(?:^|\s)article-body-left(?!\S)/) ) { 16 | document.getElementById("article-body").className += "article-body-left"; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /CREDITS.html: -------------------------------------------------------------------------------- 1 |
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
2 | 3 |
Icons made by Daniel Bruce from www.flaticon.com is licensed by CC 3.0 BY
4 | 5 |
Icons made by Plainicon from www.flaticon.com is licensed by CC 3.0 BY
-------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 djuelg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | {{ hugo.Generator }} 2 | 3 | 4 | 5 | 6 | {{ .Title }} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {{ "" | safeHTML }} 15 | 16 | {{ "" | safeHTML }} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {{ template "_internal/google_analytics_async.html" . }} 25 | -------------------------------------------------------------------------------- /sample-config.toml: -------------------------------------------------------------------------------- 1 | # Creator: djuelg @ https://github.com/djuelg 2 | # Run via: hugo server --theme=Shapez-Theme --buildDrafts --bind="0.0.0.0" 3 | 4 | baseurl = "http://0.0.0.0/" 5 | title = "Shapez Theme" 6 | theme = "shapez" 7 | copyright = "Copyright (c) 2020, djuelg; all rights reserved." 8 | [author] 9 | name = "djuelg" 10 | 11 | languageCode = "en-US" 12 | MetaDataFormat = "toml" 13 | paginate = 2 14 | PaginatePath = "page" 15 | googleAnalytics = "" 16 | 17 | [params] 18 | # Meta Information 19 | name = "djuelg" 20 | description = "This is the sites description, which will be found in the meta tags." 21 | 22 | # Homepage Start-Screen, variables can be left empty, links dont start with / 23 | title_l1 = "Shapez Theme" 24 | title_l2 = "" 25 | subtitle_l1 = "Shapez is a theme created for hugo" 26 | subtitle_l2 = "with SVG pictures, CSS3 magic," 27 | subtitle_l3 = "struggle and love." 28 | # For these Links you need the full URL, because external links are supported 29 | title_link = "http://djuelg.github.io/about/" 30 | subtitle_link = "" 31 | 32 | message = "I'm an optional important message!" 33 | # Possible values are: auto | optimizeSpeed | optimizeQuality 34 | start_screen_image_quality = "auto" 35 | 36 | # Enter links for the buttons (button one has the house sign), shouldn't be left empty 37 | button_1 = "" 38 | button_2 = "playground/" 39 | button_3 = "about/" 40 | 41 | logo = "images/logo.png" 42 | logo_start_screen_rotation = "19" -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | # Creator: djuelg @ https://github.com/djuelg 2 | # Run via: hugo server --theme=Shapez-Theme --buildDrafts --bind="0.0.0.0" 3 | 4 | baseurl = "http://0.0.0.0/" 5 | title = "Shapez Theme" 6 | theme = "shapez" 7 | copyright = "Copyright (c) 2020, djuelg; all rights reserved." 8 | [author] 9 | name = "djuelg" 10 | 11 | languageCode = "en-US" 12 | MetaDataFormat = "toml" 13 | paginate = 2 14 | PaginatePath = "page" 15 | googleAnalytics = "" 16 | 17 | [params] 18 | # Meta Information 19 | name = "djuelg" 20 | description = "This is the sites description, which will be found in the meta tags." 21 | 22 | # Homepage Start-Screen, variables can be left empty, links dont start with / 23 | title_l1 = "Shapez Theme" 24 | title_l2 = "" 25 | subtitle_l1 = "Shapez is a theme created for hugo" 26 | subtitle_l2 = "with SVG pictures, CSS3 magic," 27 | subtitle_l3 = "struggle and love." 28 | # For these Links you need the full URL, because external links are supported 29 | title_link = "http://djuelg.github.io/about/" 30 | subtitle_link = "" 31 | 32 | message = "I'm an optional important message!" 33 | # Possible values are: auto | optimizeSpeed | optimizeQuality 34 | start_screen_image_quality = "auto" 35 | 36 | # Enter links for the buttons (button one has the house sign), shouldn't be left empty 37 | button_1 = "" 38 | button_2 = "playground/" 39 | button_3 = "about/" 40 | 41 | logo = "images/logo.png" 42 | logo_start_screen_rotation = "19" -------------------------------------------------------------------------------- /static/css/mobile.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * CSS for mobile devices 4 | */ 5 | 6 | @media only screen and (max-width: 500px) { 7 | 8 | .start-screen svg { 9 | display: none; 10 | height: 0; 11 | width: 0; 12 | } 13 | 14 | .start-screen { 15 | height: 60vh; 16 | width: 100vw; 17 | margin: 0; 18 | background-color: #4CABAB; 19 | } 20 | 21 | .mobile { 22 | display: inline; 23 | } 24 | 25 | .mobile div { 26 | height: 20vh; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | box-shadow: inset 0 -4px 4px -4px #333; 31 | } 32 | 33 | .mobile div:first-child, .mobile div:first-child:hover { 34 | background-color: #333; 35 | } 36 | 37 | .mobile a, .mobile a:hover { 38 | text-decoration: none; 39 | font-size: 2em; 40 | color: #EFFFFF !important; 41 | } 42 | 43 | .mobile div:hover { 44 | background-color: #FF7400; 45 | } 46 | 47 | .mobile img { 48 | height: 15vh; 49 | width: 15vh; 50 | text-align: center; 51 | } 52 | 53 | .wrapper { 54 | min-width: 320px; 55 | } 56 | 57 | .publish-date, .attention-message { 58 | float: initial; 59 | text-align: center; 60 | margin: 0; 61 | } 62 | 63 | .attention-message { 64 | display: none; 65 | } 66 | 67 | .top-nav h3, .top-nav img, .top-nav text { 68 | position: absolute; 69 | display: none; 70 | width: 0; 71 | } 72 | 73 | .article-header-container { 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | } 78 | 79 | .article-header div { 80 | position: absolute; 81 | display: none; 82 | width: 0; 83 | } 84 | 85 | blockquote { 86 | padding: 0; 87 | margin: 0; 88 | } 89 | } -------------------------------------------------------------------------------- /exampleSite/README.md: -------------------------------------------------------------------------------- 1 | # Shapez Theme for Hugo 2 | Designed with passion and love. 3 | Shapez is a modern hugo theme using a lot of SVG graphics. 4 | SVG is super cool, but be aware - it can also be very nasty and exhausting. 5 | 6 | Demo: [http://djuelg.github.io/](http://djuelg.github.io/) 7 | Source: [https://github.com/djuelg/Shapez-Theme](https://github.com/djuelg/Shapez-Theme) 8 | 9 | # What it's meant to be 10 | Initially I designed this theme for my own blog, but I decided to make it an open source project, because I thought other people might like it, too. 11 | If you want to use it feel free to do so, but be prepared to learn some SVG if you want to adapt the theme to your wishes. 12 | 13 | # Features 14 | - responsive use of inline SVG 15 | - Timeline on the homepage 16 | - Single pages to write your content 17 | - spread some unstructured content on the playground 18 | - show reading time of articles 19 | - modern and nice to read design 20 | - responsive side or top bar, depending on apsect ratio 21 | - a comment section would be nice to have 22 | - responsive webdesign for most common screens (and smartphones) 23 | 24 | Attention! This theme isn't build with full Internet Explorer Support - feel free to create a merge request to add support. 25 | 26 | # Special Thanks 27 | Special thanks goes to Freepik, Daniel Bruce and Plainicon from [www.flaticon.com](http://www.flaticon.com) for their great icons! 28 | Furthermore I would like to thank [CrimsonRay](https://github.com/CrimsonRay), the creator of the slender-Theme. He inspired me to make my own theme and I reused some of his code. 29 | Last but not least, I would like to thank the creator and all the contributors at [Hugo](http://gohugo.io) for their great work! -------------------------------------------------------------------------------- /static/css/code-style.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .language-yaml { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | margin: 1em; 12 | color: #333; 13 | background: #F7FAFB; 14 | box-sizing: border-box; 15 | border: #E3EDF3 1px solid; 16 | border-radius: 3px; 17 | } 18 | 19 | .hljs { 20 | display: block; 21 | overflow-x: auto; 22 | padding: 0.5em; 23 | margin: 1em; 24 | color: #333; 25 | background: #F7FAFB; 26 | box-sizing: border-box; 27 | border: #E3EDF3 1px solid; 28 | border-radius: 3px; 29 | } 30 | 31 | .hljs-comment, 32 | .hljs-quote { 33 | color: #998; 34 | font-style: italic; 35 | } 36 | 37 | .hljs-keyword, 38 | .hljs-selector-tag, 39 | .hljs-subst { 40 | color: #333; 41 | font-weight: bold; 42 | } 43 | 44 | .hljs-number, 45 | .hljs-literal, 46 | .hljs-variable, 47 | .hljs-template-variable, 48 | .hljs-tag .hljs-attr { 49 | color: #008080; 50 | } 51 | 52 | .hljs-string, 53 | .hljs-doctag { 54 | color: #4cabab; 55 | } 56 | 57 | .hljs-title, 58 | .hljs-section, 59 | .hljs-selector-id { 60 | color: #008080; 61 | font-weight: bold; 62 | } 63 | 64 | .hljs-subst { 65 | font-weight: normal; 66 | } 67 | 68 | .hljs-type, 69 | .hljs-class .hljs-title { 70 | color: #008080; 71 | font-weight: bold; 72 | } 73 | 74 | .hljs-tag, 75 | .hljs-name, 76 | .hljs-attribute { 77 | color: #000080; 78 | font-weight: normal; 79 | } 80 | 81 | .hljs-regexp, 82 | .hljs-link { 83 | color: #009926; 84 | } 85 | 86 | .hljs-symbol, 87 | .hljs-bullet { 88 | color: #990073; 89 | } 90 | 91 | .hljs-built_in, 92 | .hljs-builtin-name { 93 | color: #0086b3; 94 | } 95 | 96 | .hljs-meta { 97 | color: #008080; 98 | font-weight: bold; 99 | } 100 | 101 | .hljs-deletion { 102 | background: #fdd; 103 | } 104 | 105 | .hljs-addition { 106 | background: #dfd; 107 | } 108 | 109 | .hljs-emphasis { 110 | font-style: italic; 111 | } 112 | 113 | .hljs-strong { 114 | font-weight: bold; 115 | } 116 | -------------------------------------------------------------------------------- /layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head.html" . }} 5 | 6 | 7 | 8 |
9 | {{ range .Data.Pages.ByDate.Reverse }} 10 |
11 | 12 |

{{ .Site.Title }}

13 | · 14 | Home 15 | Playground 16 | About 17 |
18 | 19 |
20 | {{ partial "sidebar.svg" . }} 21 |
22 | 23 |
24 |
25 | 26 | 27 | 28 | 33 | 34 | 35 |
29 |
30 |

{{ .Date.Format "02" }}


{{ .Date.Format "January" | upper }} 31 |
32 |
36 |
37 |
38 |
39 | {{ .Content }} 40 |
41 | {{ end }} 42 | {{ partial "footer.html" . }} 43 |
44 | 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Shapez Theme for Hugo 2 | Designed with passion and love. 3 | Shapez is a modern hugo theme using a lot of SVG graphics. 4 | SVG is super cool, but be aware - it can also be very nasty and exhausting. 5 | 6 | - Demo: [https://themes.gohugo.io/theme/shapez-theme/](https://themes.gohugo.io/theme/shapez-theme/) 7 | - Source: [https://github.com/djuelg/Shapez-Theme](https://github.com/djuelg/Shapez-Theme) 8 | 9 | Note: Demo might be buggy because of absolute/relative links. 10 | 11 | ## Screenshot 12 | ![Screenshot](/images/screenshot.png) 13 | 14 | ## What it's meant to be 15 | Initially I designed this theme for my own blog, but I decided to make it an open source project, because I thought other people might like it, too. 16 | If you want to use it feel free to do so, but be prepared to learn some SVG if you want to adapt the theme to your wishes. 17 | 18 | ## Getting started 19 | - copy the file sample-config.toml to your project folder 20 | - replace the file with your config file 21 | - adapt the config according to your wishes 22 | - you are good to go 23 | 24 | ## Features 25 | - responsive use of inline SVG 26 | - Timeline on the homepage 27 | - Single pages to write your content 28 | - spread some unstructured content on the playground 29 | - show reading time of articles 30 | - modern and nice to read design 31 | - responsive side or top bar, depending on apsect ratio 32 | - a comment section would be nice to have 33 | - responsive webdesign for most common screens (and smartphones) 34 | 35 | Attention! This theme isn't build with full Internet Explorer Support - feel free to create a merge request to add support. 36 | 37 | ## Special Thanks 38 | Special thanks goes to [Freepik](http://www.flaticon.com/authors/freepik), [Daniel Bruce](http://www.flaticon.com/authors/Daniel%20Bruce) and [Plainicon](http://www.flaticon.com/authors/Plainicon) from [www.flaticon.com](http://www.flaticon.com) for their great icons! Furthermore I would like to thank [CrimsonRay](https://github.com/CrimsonRay), the creator of the slender-Theme. He inspired me to make my own theme and I reused some of his code. 39 | Last but not least, I would like to thank the creator and all the contributors at [Hugo](http://gohugo.io) for their great work! 40 | -------------------------------------------------------------------------------- /layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head.html" . }} 5 | 6 | 7 | 8 |
9 |
10 | 11 |

{{ .Site.Title }}

12 | · 13 | Home 14 | Playground 15 | About 16 | · 17 | Prev 19 | Next 21 |
22 | 23 |
24 | {{ partial "sidebar.svg" . }} 25 |
26 | 27 |
28 |
29 |
30 |

{{ .Date.Format "02" }}


{{ .Date.Format "January" | upper }} 31 |
32 |

{{ .Title }}

33 |
34 |
35 |
36 | by {{ .Site.Author.name }} 37 |   ·   {{ .Date.Format "2006-01-02" }} 38 |   ·   {{ .ReadingTime }} minutes reading time 39 | {{ partial "left.svg" . }} 40 | {{ partial "justify.svg" . }} 41 |
42 |
43 | {{ .Content }} 44 |
45 | 46 | {{ partial "footer.html" . }} 47 |
48 | 49 | -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "head.html" . }} 5 | 6 | 7 |
8 |
9 |
10 |
11 |
Playground
12 |
About
13 |
14 | {{ partial "start-screen.svg" . }} 15 |
16 | 17 | 52 | {{ partial "footer.html" . }} 53 |
54 | 55 | -------------------------------------------------------------------------------- /exampleSite/content/post/hugoisforlovers.md: -------------------------------------------------------------------------------- 1 | +++ 2 | date = "2015-12-16" 3 | description = "" 4 | keywords = [] 5 | title = "Getting Started with Hugo" 6 | 7 | +++ 8 | 9 | ## Step 1. Install Hugo 10 | 11 | Goto [hugo releases](https://github.com/spf13/hugo/releases) and download the 12 | appropriate version for your os and architecture. 13 | 14 | Save it somewhere specific as we will be using it in the next step. 15 | 16 | More complete instructions are available at [installing hugo](/overview/installing/) 17 | 18 | ## Step 2. Build the Docs 19 | 20 | Hugo has its own example site which happens to also be the documentation site 21 | you are reading right now. 22 | 23 | Follow the following steps: 24 | 25 | 1. Clone the [hugo repository](http://github.com/spf13/hugo) 26 | 2. Go into the repo 27 | 3. Run hugo in server mode and build the docs 28 | 4. Open your browser to http://localhost:1313 29 | 30 | Corresponding pseudo commands: 31 | 32 | git clone https://github.com/spf13/hugo 33 | cd hugo 34 | /path/to/where/you/installed/hugo server --source=./docs 35 | > 29 pages created 36 | > 0 tags index created 37 | > in 27 ms 38 | > Web Server is available at http://localhost:1313 39 | > Press ctrl+c to stop 40 | 41 | Once you've gotten here, follow along the rest of this page on your local build. 42 | 43 | ## Step 3. Change the docs site 44 | 45 | Stop the Hugo process by hitting ctrl+c. 46 | 47 | Now we are going to run hugo again, but this time with hugo in watch mode. 48 | 49 | /path/to/hugo/from/step/1/hugo server --source=./docs --watch 50 | > 29 pages created 51 | > 0 tags index created 52 | > in 27 ms 53 | > Web Server is available at http://localhost:1313 54 | > Watching for changes in /Users/spf13/Code/hugo/docs/content 55 | > Press ctrl+c to stop 56 | 57 | 58 | Open your [favorite editor](http://vim.spf13.com) and change one of the source 59 | content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*. 60 | 61 | Content files are found in `docs/content/`. Unless otherwise specified, files 62 | are located at the same relative location as the url, in our case 63 | `docs/content/overview/quickstart.md`. 64 | 65 | Change and save this file.. Notice what happened in your terminal. 66 | 67 | > Change detected, rebuilding site 68 | 69 | > 29 pages created 70 | > 0 tags index created 71 | > in 26 ms 72 | 73 | Refresh the browser and observe that the typo is now fixed. 74 | 75 | Notice how quick that was. Try to refresh the site before it's finished building.. I double dare you. 76 | Having nearly instant feedback enables you to have your creativity flow without waiting for long builds. 77 | 78 | ## Step 4. Have fun 79 | 80 | The best way to learn something is to play with it. 81 | -------------------------------------------------------------------------------- /layouts/partials/sidebar.svg: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 77 | 78 | 79 | 80 | 81 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /layouts/partials/face.svg: -------------------------------------------------------------------------------- 1 | 9 | 10 | 16 | 17 | 18 | 19 | 22 | 23 | 30 | FIRST 34 | 35 | 36 | 37 | 38 | 39 | 42 | 43 | LAST 53 | 54 | 55 | 56 | 57 | 60 | 61 | 65 | 66 | 73 | 74 | 75 | 80 | NEXT 84 | 85 | 86 | 87 | 90 | 91 | 94 | 95 | 102 | 103 | 104 | 109 | PREV 113 | 114 | 115 | 116 | 120 | 121 | -------------------------------------------------------------------------------- /exampleSite/content/playground/menus.md: -------------------------------------------------------------------------------- 1 | --- 2 | lastmod: 2015-08-04 3 | date: 2014-05-14T02:36:37Z 4 | toc: true 5 | menu: 6 | main: 7 | parent: extras 8 | next: /extras/permalinks 9 | prev: /extras/livereload 10 | title: Menus 11 | weight: 60 12 | --- 13 | 14 | Hugo has a simple yet powerful menu system that permits content to be 15 | placed in menus with a good degree of control without a lot of work. 16 | 17 | 18 | *TIP:* If all you want is a simple menu for your sections, see [Section Menu for "the Lazy Blogger"]({{< relref "#section-menu-for-the-lazy-blogger" >}}). 19 | 20 | Some of the features of Hugo Menus: 21 | 22 | * Place content in one or many menus 23 | * Handle nested menus with unlimited depth 24 | * Create menu entries without being attached to any content 25 | * Distinguish active element (and active branch) 26 | 27 | ## What is a menu? 28 | 29 | A menu is a named array of menu entries accessible on the site under 30 | `.Site.Menus` by name. For example, if I have a menu called `main`, I would 31 | access it via `.Site.Menus.main`. 32 | 33 | A menu entry has the following properties: 34 | 35 | * **URL** string 36 | * **Name** string 37 | * **Menu** string 38 | * **Identifier** string 39 | * **Pre** template.HTML 40 | * **Post** template.HTML 41 | * **Weight** int 42 | * **Parent** string 43 | * **Children** Menu 44 | 45 | And the following functions: 46 | 47 | * **HasChildren** bool 48 | 49 | Additionally, there are some relevant functions available on the page: 50 | 51 | * **IsMenuCurrent** (menu string, menuEntry *MenuEntry ) bool 52 | * **HasMenuCurrent** (menu string, menuEntry *MenuEntry) bool 53 | 54 | 55 | ## Adding content to menus 56 | 57 | Hugo supports a couple of different methods of adding a piece of content 58 | to the front matter. 59 | 60 | ### Simple 61 | 62 | If all you need to do is add an entry to a menu, the simple form works 63 | well. 64 | 65 | **A single menu:** 66 | 67 | --- 68 | menu: "main" 69 | --- 70 | 71 | **Multiple menus:** 72 | 73 | --- 74 | menu: ["main", "footer"] 75 | --- 76 | 77 | 78 | ### Advanced 79 | 80 | If more control is required, then the advanced approach gives you the 81 | control you want. All of the menu entry properties listed above are 82 | available. 83 | 84 | --- 85 | menu: 86 | main: 87 | parent: 'extras' 88 | weight: 20 89 | --- 90 | 91 | 92 | ## Adding (non-content) entries to a menu 93 | 94 | You can also add entries to menus that aren’t attached to a piece of 95 | content. This takes place in the sitewide [config file](/overview/configuration/). 96 | 97 | Here’s an example `config.toml`: 98 | 99 | [[menu.main]] 100 | name = "about hugo" 101 | pre = "" 102 | weight = -110 103 | identifier = "about" 104 | url = "/about/" 105 | [[menu.main]] 106 | name = "getting started" 107 | pre = "" 108 | weight = -100 109 | url = "/getting-started/" 110 | 111 | And the equivalent example `config.yaml`: 112 | 113 | --- 114 | menu: 115 | main: 116 | - Name: "about hugo" 117 | Pre: "" 118 | Weight: -110 119 | Identifier: "about" 120 | URL: "/about/" 121 | - Name: "getting started" 122 | Pre: "" 123 | Weight: -100 124 | URL: "/getting-started/" 125 | --- 126 | 127 | 128 | **NOTE:** The URLs must be relative to the context root. If the `BaseURL` is `http://example.com/mysite/`, then the URLs in the menu must not include the context root `mysite`. 129 | 130 | ## Nesting 131 | 132 | All nesting of content is done via the `parent` field. 133 | 134 | The parent of an entry should be the identifier of another entry. 135 | Identifier should be unique (within a menu). 136 | 137 | The following order is used to determine identity Identifier > Name > 138 | LinkTitle > Title. This means that the title will be used unless 139 | linktitle is present, etc. In practice Name and Identifier are never 140 | displayed and only used to structure relationships. 141 | 142 | In this example, the top level of the menu is defined in the config file 143 | and all content entries are attached to one of these entries via the 144 | `parent` field. 145 | 146 | ## Rendering menus 147 | 148 | Hugo makes no assumptions about how your rendered HTML will be 149 | structured. Instead, it provides all of the functions you will need to be 150 | able to build your menu however you want. 151 | 152 | 153 | The following is an example: 154 | 155 | 156 | 190 | 191 | 192 | 193 | ## Section Menu for "the Lazy Blogger" 194 | 195 | To enable this menu, add this to your site config, i.e. `config.toml`: 196 | 197 | ``` 198 | SectionPagesMenu = "main" 199 | ``` 200 | 201 | The menu name can be anything, but take a note of what it is. 202 | 203 | This will create a menu with all the sections as menu items and all the sections' pages as "shadow-members". The _shadow_ implies that the pages isn't represented by a menu-item themselves, but this enables you to create a top-level menu like this: 204 | 205 | ``` 206 | 212 | 213 | ``` 214 | 215 | In the above, the menu item is marked as active if on the current section's list page or on a page in that section. 216 | 217 | The above is all that's needed. But if you want custom menu items, e.g. changing weight or name, you can define them manually in the site config, i.e. `config.toml`: 218 | 219 | ``` 220 | [[menu.main]] 221 | name = "This is the blog section" 222 | weight = -110 223 | identifier = "blog" 224 | url = "/blog/" 225 | 226 | ``` 227 | 228 | **Note** that the `identifier` must match the section name. 229 | 230 | -------------------------------------------------------------------------------- /exampleSite/content/post/migrate-from-jekyll.md: -------------------------------------------------------------------------------- 1 | +++ 2 | date = "2015-12-16" 3 | description = "" 4 | keywords = [] 5 | title = "Migrate to Hugo from Jekyll" 6 | 7 | +++ 8 | 9 | ## Move static content to `static` 10 | 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. 11 | With Jekyll, something that looked like 12 | 13 | ▾ / 14 | ▾ images/ 15 | logo.png 16 | 17 | should become 18 | 19 | ▾ / 20 | ▾ static/ 21 | ▾ images/ 22 | logo.png 23 | 24 | Additionally, you'll want any files that should reside at the root (such as `CNAME`) to be moved to `static`. 25 | 26 | ## Create your Hugo configuration file 27 | 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. 28 | 29 | ## Set your configuration publish folder to `_site` 30 | 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: 31 | 32 | 1. Change your submodule to point to map `gh-pages` to public instead of `_site` (recommended). 33 | 34 | git submodule deinit _site 35 | git rm _site 36 | git submodule add -b gh-pages git@github.com:your-username/your-repo.git public 37 | 38 | 2. Or, change the Hugo configuration to use `_site` instead of `public`. 39 | 40 | { 41 | .. 42 | "publishdir": "_site", 43 | .. 44 | } 45 | 46 | ## Convert Jekyll templates to Hugo templates 47 | 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. 48 | 49 | As a single reference data point, converting my templates for [heyitsalex.net](http://heyitsalex.net/) took me no more than a few hours. 50 | 51 | ## Convert Jekyll plugins to Hugo shortcodes 52 | Jekyll has [plugins](http://jekyllrb.com/docs/plugins/); Hugo has [shortcodes](/doc/shortcodes/). It's fairly trivial to do a port. 53 | 54 | ### Implementation 55 | 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. 56 | 57 | Jekyll's plugin: 58 | 59 | module Jekyll 60 | class ImageTag < Liquid::Tag 61 | @url = nil 62 | @caption = nil 63 | @class = nil 64 | @link = nil 65 | // Patterns 66 | IMAGE_URL_WITH_CLASS_AND_CAPTION = 67 | IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->((https?:\/\/|\/)(\S+))(\s*)/i 68 | IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i 69 | IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i 70 | IMAGE_URL = /((https?:\/\/|\/)(\S+))/i 71 | def initialize(tag_name, markup, tokens) 72 | super 73 | if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK 74 | @class = $1 75 | @url = $3 76 | @caption = $7 77 | @link = $9 78 | elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION 79 | @class = $1 80 | @url = $3 81 | @caption = $7 82 | elsif markup =~ IMAGE_URL_WITH_CAPTION 83 | @url = $1 84 | @caption = $5 85 | elsif markup =~ IMAGE_URL_WITH_CLASS 86 | @class = $1 87 | @url = $3 88 | elsif markup =~ IMAGE_URL 89 | @url = $1 90 | end 91 | end 92 | def render(context) 93 | if @class 94 | source = "
" 95 | else 96 | source = "
" 97 | end 98 | if @link 99 | source += "" 100 | end 101 | source += "" 102 | if @link 103 | source += "" 104 | end 105 | source += "
#{@caption}
" if @caption 106 | source += "
" 107 | source 108 | end 109 | end 110 | end 111 | Liquid::Template.register_tag('image', Jekyll::ImageTag) 112 | 113 | is written as this Hugo shortcode: 114 | 115 | 116 |
117 | {{ with .Get "link"}}{{ end }} 118 | 119 | {{ if .Get "link"}}{{ end }} 120 | {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}} 121 |
{{ if isset .Params "title" }} 122 | {{ .Get "title" }}{{ end }} 123 | {{ if or (.Get "caption") (.Get "attr")}}

124 | {{ .Get "caption" }} 125 | {{ with .Get "attrlink"}} {{ end }} 126 | {{ .Get "attr" }} 127 | {{ if .Get "attrlink"}} {{ end }} 128 |

{{ end }} 129 |
130 | {{ end }} 131 |
132 | 133 | 134 | ### Usage 135 | I simply changed: 136 | 137 | {% 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/ %} 138 | 139 | to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`): 140 | 141 | {{%/* 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/" */%}} 142 | 143 | As a bonus, the shortcode named parameters are, arguably, more readable. 144 | 145 | ## Finishing touches 146 | ### Fix content 147 | 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. 148 | 149 | ### Clean up 150 | You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it. 151 | 152 | ## A practical example in a diff 153 | [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). 154 | -------------------------------------------------------------------------------- /static/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * Remove the gray background on active links in IE 10. 89 | */ 90 | 91 | a { 92 | background-color: transparent; 93 | } 94 | 95 | /** 96 | * Remove the outline on focused links when they are also active or hovered 97 | * in all browsers (opinionated). 98 | */ 99 | 100 | a:active, 101 | a:hover { 102 | outline-width: 0; 103 | } 104 | 105 | /* Text-level semantics 106 | ========================================================================== */ 107 | 108 | /** 109 | * 1. Remove the bottom border in Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * Add the correct font style in Android 4.3-. 139 | */ 140 | 141 | dfn { 142 | font-style: italic; 143 | } 144 | 145 | /** 146 | * Correct the font size and margin on `h1` elements within `section` and 147 | * `article` contexts in Chrome, Firefox, and Safari. 148 | */ 149 | 150 | h1 { 151 | font-size: 2em; 152 | margin: 0.67em 0; 153 | } 154 | 155 | /** 156 | * Add the correct background and color in IE 9-. 157 | */ 158 | 159 | mark { 160 | background-color: #ff0; 161 | color: #000; 162 | } 163 | 164 | /** 165 | * Add the correct font size in all browsers. 166 | */ 167 | 168 | small { 169 | font-size: 80%; 170 | } 171 | 172 | /** 173 | * Prevent `sub` and `sup` elements from affecting the line height in 174 | * all browsers. 175 | */ 176 | 177 | sub, 178 | sup { 179 | font-size: 75%; 180 | line-height: 0; 181 | position: relative; 182 | vertical-align: baseline; 183 | } 184 | 185 | sub { 186 | bottom: -0.25em; 187 | } 188 | 189 | sup { 190 | top: -0.5em; 191 | } 192 | 193 | /* Embedded content 194 | ========================================================================== */ 195 | 196 | /** 197 | * Remove the border on images inside links in IE 10-. 198 | */ 199 | 200 | img { 201 | border-style: none; 202 | } 203 | 204 | /** 205 | * Hide the overflow in IE. 206 | */ 207 | 208 | svg:not(:root) { 209 | overflow: hidden; 210 | } 211 | 212 | /* Grouping content 213 | ========================================================================== */ 214 | 215 | /** 216 | * 1. Correct the inheritance and scaling of font size in all browsers. 217 | * 2. Correct the odd `em` font sizing in all browsers. 218 | */ 219 | 220 | code, 221 | kbd, 222 | pre, 223 | samp { 224 | font-family: monospace, monospace; /* 1 */ 225 | font-size: 1em; /* 2 */ 226 | } 227 | 228 | /** 229 | * Add the correct margin in IE 8. 230 | */ 231 | 232 | figure { 233 | margin: 1em 40px; 234 | } 235 | 236 | /** 237 | * 1. Add the correct box sizing in Firefox. 238 | * 2. Show the overflow in Edge and IE. 239 | */ 240 | 241 | hr { 242 | box-sizing: content-box; /* 1 */ 243 | height: 0; /* 1 */ 244 | overflow: visible; /* 2 */ 245 | } 246 | 247 | /* Forms 248 | ========================================================================== */ 249 | 250 | /** 251 | * Change font properties to `inherit` in all browsers (opinionated). 252 | */ 253 | 254 | button, 255 | input, 256 | select, 257 | textarea { 258 | font: inherit; 259 | } 260 | 261 | /** 262 | * Restore the font weight unset by the previous rule. 263 | */ 264 | 265 | optgroup { 266 | font-weight: bold; 267 | } 268 | 269 | /** 270 | * Show the overflow in IE. 271 | * 1. Show the overflow in Edge. 272 | * 2. Show the overflow in Edge, Firefox, and IE. 273 | */ 274 | 275 | button, 276 | input, /* 1 */ 277 | select { /* 2 */ 278 | overflow: visible; 279 | } 280 | 281 | /** 282 | * Remove the margin in Safari. 283 | * 1. Remove the margin in Firefox and Safari. 284 | */ 285 | 286 | button, 287 | input, 288 | select, 289 | textarea { /* 1 */ 290 | margin: 0; 291 | } 292 | 293 | /** 294 | * Remove the inheritence of text transform in Edge, Firefox, and IE. 295 | * 1. Remove the inheritence of text transform in Firefox. 296 | */ 297 | 298 | button, 299 | select { /* 1 */ 300 | text-transform: none; 301 | } 302 | 303 | /** 304 | * Change the cursor in all browsers (opinionated). 305 | */ 306 | 307 | button, 308 | [type="button"], 309 | [type="reset"], 310 | [type="submit"] { 311 | cursor: pointer; 312 | } 313 | 314 | /** 315 | * Restore the default cursor to disabled elements unset by the previous rule. 316 | */ 317 | 318 | [disabled] { 319 | cursor: default; 320 | } 321 | 322 | /** 323 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 324 | * controls in Android 4. 325 | * 2. Correct the inability to style clickable types in iOS. 326 | */ 327 | 328 | button, 329 | html [type="button"], /* 1 */ 330 | [type="reset"], 331 | [type="submit"] { 332 | -webkit-appearance: button; /* 2 */ 333 | } 334 | 335 | /** 336 | * Remove the inner border and padding in Firefox. 337 | */ 338 | 339 | button::-moz-focus-inner, 340 | input::-moz-focus-inner { 341 | border: 0; 342 | padding: 0; 343 | } 344 | 345 | /** 346 | * Restore the focus styles unset by the previous rule. 347 | */ 348 | 349 | button:-moz-focusring, 350 | input:-moz-focusring { 351 | outline: 1px dotted ButtonText; 352 | } 353 | 354 | /** 355 | * Change the border, margin, and padding in all browsers (opinionated). 356 | */ 357 | 358 | fieldset { 359 | border: 1px solid #c0c0c0; 360 | margin: 0 2px; 361 | padding: 0.35em 0.625em 0.75em; 362 | } 363 | 364 | /** 365 | * 1. Correct the text wrapping in Edge and IE. 366 | * 2. Correct the color inheritance from `fieldset` elements in IE. 367 | * 3. Remove the padding so developers are not caught out when they zero out 368 | * `fieldset` elements in all browsers. 369 | */ 370 | 371 | legend { 372 | box-sizing: border-box; /* 1 */ 373 | color: inherit; /* 2 */ 374 | display: table; /* 1 */ 375 | max-width: 100%; /* 1 */ 376 | padding: 0; /* 3 */ 377 | white-space: normal; /* 1 */ 378 | } 379 | 380 | /** 381 | * Remove the default vertical scrollbar in IE. 382 | */ 383 | 384 | textarea { 385 | overflow: auto; 386 | } 387 | 388 | /** 389 | * 1. Add the correct box sizing in IE 10-. 390 | * 2. Remove the padding in IE 10-. 391 | */ 392 | 393 | [type="checkbox"], 394 | [type="radio"] { 395 | box-sizing: border-box; /* 1 */ 396 | padding: 0; /* 2 */ 397 | } 398 | 399 | /** 400 | * Correct the cursor style of increment and decrement buttons in Chrome. 401 | */ 402 | 403 | [type="number"]::-webkit-inner-spin-button, 404 | [type="number"]::-webkit-outer-spin-button { 405 | height: auto; 406 | } 407 | 408 | /** 409 | * Correct the odd appearance of search inputs in Chrome and Safari. 410 | */ 411 | 412 | [type="search"] { 413 | -webkit-appearance: textfield; 414 | } 415 | 416 | /** 417 | * Remove the inner padding and cancel buttons in Chrome on OS X and 418 | * Safari on OS X. 419 | */ 420 | 421 | [type="search"]::-webkit-search-cancel-button, 422 | [type="search"]::-webkit-search-decoration { 423 | -webkit-appearance: none; 424 | } 425 | -------------------------------------------------------------------------------- /exampleSite/content/post/goisforlovers.md: -------------------------------------------------------------------------------- 1 | +++ 2 | date = "2015-12-16" 3 | description = "" 4 | keywords = [] 5 | title = "(Hu)go Template Primer" 6 | 7 | +++ 8 | 9 | Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for 10 | its template engine. It is an extremely lightweight engine that provides a very 11 | small amount of logic. In our experience that it is just the right amount of 12 | logic to be able to create a good static website. If you have used other 13 | template systems from different languages or frameworks you will find a lot of 14 | similarities in go templates. 15 | 16 | This document is a brief primer on using go templates. The [go docs][gohtmltemplate] 17 | provide more details. 18 | 19 | ## Introduction to Go Templates 20 | 21 | Go templates provide an extremely simple template language. It adheres to the 22 | belief that only the most basic of logic belongs in the template or view layer. 23 | One consequence of this simplicity is that go templates parse very quickly. 24 | 25 | A unique characteristic of go templates is they are content aware. Variables and 26 | content will be sanitized depending on the context of where they are used. More 27 | details can be found in the [go docs][gohtmltemplate]. 28 | 29 | ## Basic Syntax 30 | 31 | Go lang templates are html files with the addition of variables and 32 | functions. 33 | 34 | **Go variables and functions are accessible within {{ }}** 35 | 36 | Accessing a predefined variable "foo": 37 | 38 | {{ foo }} 39 | 40 | **Parameters are separated using spaces** 41 | 42 | Calling the add function with input of 1, 2: 43 | 44 | {{ add 1 2 }} 45 | 46 | **Methods and fields are accessed via dot notation** 47 | 48 | Accessing the Page Parameter "bar" 49 | 50 | {{ .Params.bar }} 51 | 52 | **Parentheses can be used to group items together** 53 | 54 | {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} 55 | 56 | 57 | ## Variables 58 | 59 | Each go template has a struct (object) made available to it. In hugo each 60 | template is passed either a page or a node struct depending on which type of 61 | page you are rendering. More details are available on the 62 | [variables](/layout/variables) page. 63 | 64 | A variable is accessed by referencing the variable name. 65 | 66 | {{ .Title }} 67 | 68 | Variables can also be defined and referenced. 69 | 70 | {{ $address := "123 Main St."}} 71 | {{ $address }} 72 | 73 | 74 | ## Functions 75 | 76 | Go template ship with a few functions which provide basic functionality. The go 77 | template system also provides a mechanism for applications to extend the 78 | available functions with their own. [Hugo template 79 | functions](/layout/functions) provide some additional functionality we believe 80 | are useful for building websites. Functions are called by using their name 81 | followed by the required parameters separated by spaces. Template 82 | functions cannot be added without recompiling hugo. 83 | 84 | **Example:** 85 | 86 | {{ add 1 2 }} 87 | 88 | ## Includes 89 | 90 | When including another template you will pass to it the data it will be 91 | able to access. To pass along the current context please remember to 92 | include a trailing dot. The templates location will always be starting at 93 | the /layout/ directory within Hugo. 94 | 95 | **Example:** 96 | 97 | {{ template "chrome/header.html" . }} 98 | 99 | 100 | ## Logic 101 | 102 | Go templates provide the most basic iteration and conditional logic. 103 | 104 | ### Iteration 105 | 106 | Just like in go, the go templates make heavy use of range to iterate over 107 | a map, array or slice. The following are different examples of how to use 108 | range. 109 | 110 | **Example 1: Using Context** 111 | 112 | {{ range array }} 113 | {{ . }} 114 | {{ end }} 115 | 116 | **Example 2: Declaring value variable name** 117 | 118 | {{range $element := array}} 119 | {{ $element }} 120 | {{ end }} 121 | 122 | **Example 2: Declaring key and value variable name** 123 | 124 | {{range $index, $element := array}} 125 | {{ $index }} 126 | {{ $element }} 127 | {{ end }} 128 | 129 | ### Conditionals 130 | 131 | If, else, with, or, & and provide the framework for handling conditional 132 | logic in Go Templates. Like range, each statement is closed with `end`. 133 | 134 | 135 | Go Templates treat the following values as false: 136 | 137 | * false 138 | * 0 139 | * any array, slice, map, or string of length zero 140 | 141 | **Example 1: If** 142 | 143 | {{ if isset .Params "title" }}

{{ index .Params "title" }}

{{ end }} 144 | 145 | **Example 2: If -> Else** 146 | 147 | {{ if isset .Params "alt" }} 148 | {{ index .Params "alt" }} 149 | {{else}} 150 | {{ index .Params "caption" }} 151 | {{ end }} 152 | 153 | **Example 3: And & Or** 154 | 155 | {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} 156 | 157 | **Example 4: With** 158 | 159 | An alternative way of writing "if" and then referencing the same value 160 | is to use "with" instead. With rebinds the context `.` within its scope, 161 | and skips the block if the variable is absent. 162 | 163 | The first example above could be simplified as: 164 | 165 | {{ with .Params.title }}

{{ . }}

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