blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finalize more CM pages

Browse Source
This commit is contained in:
Ryan Watters
2017-03-09 01:05:53 -06:00
parent 015458997f
commit 766089ddf8
15 changed files with 174 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.toml
+1 -1
View File
@@ -61,7 +61,7 @@ watch = true
# Add GA Tracking Code Here. This leverages a built-in (ie, "internal") partial from HUGO: https://gohugo.io/extras/analytics#configuring-google-analytics # Add GA Tracking Code Here. This leverages a built-in (ie, "internal") partial from HUGO: https://gohugo.io/extras/analytics#configuring-google-analytics
googleanalyticstrackingcode = "" googleanalyticstrackingcode = ""
## Critical Render Path. If true, site style will be embedded in a <style> tag in each html <head> as part of Gulp Build. False puts a typical <link> to the stylesheet in <head>> ## Critical Render Path. If true, site style will be embedded in a <style> tag in each html <head> as part of Gulp Build. False puts a typical <link> to the stylesheet in <head>>
usecrp = true usecrp = false
## Include jQuery 2.2.4 in your site head. (see /static/assets/js) ## Include jQuery 2.2.4 in your site head. (see /static/assets/js)
includejq = false includejq = false
## Date the Site is Published, use YYYY-MM-DD ## Date the Site is Published, use YYYY-MM-DD
content/content-management/front-matter.md
+11 -7
View File
@@ -12,16 +12,20 @@ draft: false
aliases: [/content/front-matter/] aliases: [/content/front-matter/]
wip: true wip: true
toc: true toc: true
notesforauthors:
--- ---
**Front matter** allows you to keep metadata attached to an instance of a [content type][]---i.e., embedded inside a content file---and is one of the many features that gives Hugo its strength. Hugo supports a few different formats for front matter, each with their own identifying tokens. **Front matter** allows you to keep metadata attached to an instance of a [content type][]---i.e., embedded inside a content file---and is one of the many features that gives Hugo its strength. Hugo supports a few different formats for front matter, each with their own identifying tokens.
## Supported Front Matter Formats ## Supported Front Matter Formats
* TOML. identified by opening and closing `+++`. TOML
* YAML. identified by opening and closing `---` *or* opening `---` and closing `...` : identified by opening and closing `+++`.
* JSON. a single JSON object which is surrounded by '`{`' and '`}`', each on their own line.
YAML
: identified by opening and closing `---` *or* opening `---` and closing `...`
JSON
: a single JSON object which is surrounded by '`{`' and '`}`', each on their own line.
### TOML Front Matter Example ### TOML Front Matter Example
@@ -71,11 +75,11 @@ slug: "spf13-vim-3-0-release-and-new-website"
} }
``` ```
## Variables ## Front Matter Variables
There are a few predefined variables that Hugo is aware of and utilizes. There are a few predefined variables that Hugo is aware of and utilizes.
### Required ### Required Front Matter Variables
`title` `title`
: The title for the content : The title for the content
@@ -90,7 +94,7 @@ There are a few predefined variables that Hugo is aware of and utilizes.
: These will use the field name of the plural form of the index (see tags and : These will use the field name of the plural form of the index (see tags and
categories above) categories above)
### Optional ### Optional Front Matter Variables
`aliases` `aliases`
: An array of one or more aliases (e.g. old published path of a renamed content) that would be created to redirect to this content. See [Aliases][] for details. : An array of one or more aliases (e.g. old published path of a renamed content) that would be created to redirect to this content. See [Aliases][] for details.
content/content-management/menus.md
+8 -9
View File
@@ -11,7 +11,6 @@ draft: false
weight: 120 weight: 120
aliases: [/extras/menus/] aliases: [/extras/menus/]
toc: true toc: true
wip: true
--- ---
Hugo's simple yet powerful menu system allows you to add content to menus with a high degree of control and a very low amount of effort on the part of content authors. Hugo's simple yet powerful menu system allows you to add content to menus with a high degree of control and a very low amount of effort on the part of content authors.
@@ -78,11 +77,11 @@ menu:
## Adding Non-content Entries to a Menu ## Adding Non-content Entries to a Menu
You can also add entries to menus that aren’t attached to a piece of content. This takes place in the sitewide [config file](/overview/configuration/). You can also add entries to menus that aren’t attached to a piece of content. This takes place in your Hugo project's [`config` file][config].
Here’s an example snippet pulled from a `config.toml`: Here’s an example snippet pulled from a `config.toml`:
{{% code file="menu-in-config.toml" %}} {{% code file="config.toml" %}}
```toml ```toml
[[menu.main]] [[menu.main]]
name = "about hugo" name = "about hugo"
@@ -98,9 +97,9 @@ Here’s an example snippet pulled from a `config.toml`:
``` ```
{{% /code %}} {{% /code %}}
Here's the equivalent snippet pulled from a `config.yaml`: Here's the equivalent snippet in a `config.yaml`:
{{% code file="menu-in-config.yml" %}} {{% code file="config.yml" %}}
```yaml ```yaml
--- ---
menu: menu:
@@ -119,18 +118,18 @@ menu:
{{% /code %}} {{% /code %}}
{{% note %}} {{% 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`. Using an absolute URL will overide the baseURL. If the `URL` is `http://subdomain.example.com/`, the output will be `http://subdomain.example.com`. 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`. Using an absolute URL will overide the baseURL. If the value used for `URL` in the above example is `http://subdomain.example.com/`, the output will be `http://subdomain.example.com`.
{{% /note %}} {{% /note %}}
## Nesting ## Nesting
All nesting of content is done via the `parent` field. All nesting of content is done via the `parent` field.
The parent of an entry should be the identifier of another entry. Identifier should be unique (within a menu). The parent of an entry should be the identifier of another entry. The identifier should be unique (within a menu).
The following order is used to determine an Identifier: The following order is used to determine an Identifier:
`.Name > .LinkTitle` > .Title` `.Name > .LinkTitle > .Title`
This means that `.Title` will be used unless `.LinkTitle` is present, etc. In practice, `.Name` and `.Identifier` are only used to structure relationships and therefore never displayed. This means that `.Title` will be used unless `.LinkTitle` is present, etc. In practice, `.Name` and `.Identifier` are only used to structure relationships and therefore never displayed.
@@ -138,7 +137,7 @@ In this example, the top level of the menu is defined in your [site `config` fil
## Rendering Menus ## Rendering Menus
See [Menu Templates](/templates/menu-templates/) for information on how to render your site menus. See [Menu Templates](/templates/menu-templates/) for information on how to render your site menus within your templates.
[config]: /getting-started/configuration/ [config]: /getting-started/configuration/
[multilingual]: /content-management/multilingual/ [multilingual]: /content-management/multilingual/
content/content-management/multilingual.md
+24 -22
View File
@@ -11,10 +11,9 @@ weight: 150
draft: false draft: false
aliases: [/content/multilingual/,/content-management/multilingual/] aliases: [/content/multilingual/,/content-management/multilingual/]
toc: true toc: true
wip: true
--- ---
Hugo supports multiple languages side-by-side (added in `Hugo 0.17`). Define the available languages in a `Languages` section in your top-level `config.toml` (or equivalent). Hugo supports multiple languages side-by-side (added in `Hugo 0.17`). You should Define the available languages in a `Languages` section in your site configuration.
## Configuring Multilingual Mode ## Configuring Multilingual Mode
@@ -62,6 +61,8 @@ Only the obvious non-global options can be overridden per language. Examples of
Taxonomies and [Blackfriday configuration][hugoconfig] can also be set per language: Taxonomies and [Blackfriday configuration][hugoconfig] can also be set per language:
{{% code file="bf-config.toml" %}}
```toml ```toml
[Taxonomies] [Taxonomies]
tag = "tags" tag = "tags"
@@ -83,6 +84,7 @@ title = "Français"
[Languages.fr.Taxonomies] [Languages.fr.Taxonomies]
plaque = "plaques" plaque = "plaques"
``` ```
{{% /code %}}
## Translating Your Content ## Translating Your Content
@@ -93,21 +95,18 @@ Translated articles are identified by the name of the content file.
1. `/content/about.en.md` 1. `/content/about.en.md`
2. `/content/about.fr.md` 2. `/content/about.fr.md`
You can also have: You can also have the following, in which case the config variable `defaultContentLanguage` will be used to affect the default language `about.md`. This way, you can slowly start to translate your current content without having to rename everything:
1. `/content/about.md` 1. `/content/about.md`
2. `/content/about.fr.md` 2. `/content/about.fr.md`
In which case the config variable `defaultContentLanguage` will be used to affect the default language `about.md`. This way, you can If left unspecified, the default value for `defaultContentLanguage` is `en`.
slowly start to translate your current content without having to rename everything.
If left unspecified, the value for `defaultContentLanguage` defaults to `en`. By having the same *base filename*, the content pieces are linked together as translated pieces.
By having the same _base file name_, the content pieces are linked together as translated pieces.
## Link to Translated Content ## Link to Translated Content
To create a list of links to translated content, use a template similar to this: To create a list of links to translated content, use a template similar to the following:
{{% code file="layouts/partials/i18nlist.html" %}} {{% code file="layouts/partials/i18nlist.html" %}}
```html ```html
@@ -124,13 +123,13 @@ To create a list of links to translated content, use a template similar to this:
``` ```
{{% /code %}} {{% /code %}}
The above can be put in a `partial` (`./layouts/partials/`) and included in any template, be it for a [content page][contenttemplate] or the [homepage][]]. It will not print anything if there are no translations for a given page, or if there is---in the case of the homepage, section listing, etc.---a site with only one language. The above can be put in a `partial` (i.e., inside `layouts/partials/`) and included in any template, be it for a [single content page][contenttemplate] or the [homepage][]. It will not print anything if there are no translations for a given page, or if there are translations---in the case of the homepage, section listing, etc.---a site with only render one language.
The above also uses the [`i18n` function][i18func] described in the next section. The above also uses the [`i18n` function][i18func] described in the next section.
## Translation of Strings ## Translation of Strings
Hugo uses [go-i18n](https://github.com/nicksnyder/go-i18n) to support string translations. [See the project's source repository](https://github.com/nicksnyder/go-i18n) to find tools that will help you manage your translation workflows. Hugo uses [go-i18n][] to support string translations. [See the project's source repository][go-i18n-source] to find tools that will help you manage your translation workflows.
Translations are collected from the `themes/<THEME>/i18n/` folder (built into the theme), as well as translations present in `i18n/` at the root of your project. In the `i18n`, the translations will be merged and take precedence over what is in the theme folder. Language files should be named according to [RFC 5646][] with names such as `en-US.yaml`, `fr.yaml`, etc. Translations are collected from the `themes/<THEME>/i18n/` folder (built into the theme), as well as translations present in `i18n/` at the root of your project. In the `i18n`, the translations will be merged and take precedence over what is in the theme folder. Language files should be named according to [RFC 5646][] with names such as `en-US.yaml`, `fr.yaml`, etc.
@@ -181,7 +180,7 @@ i18n|MISSING_TRANSLATION|en|wordCount
## Menus ## Menus
You can define your menus for each language independently. The [creation of a menu](/content-management/menus/) works analogous to earlier versions of Hugo, except that they have to be defined in their language-specific block in the configuration file: You can define your menus for each language independently. The [creation of a menu][menus] works analogous to earlier versions of Hugo, except that they have to be defined in their language-specific block in the configuration file:
```toml ```toml
defaultContentLanguage = "en" defaultContentLanguage = "en"
@@ -206,7 +205,7 @@ name = "Startseite"
weight = 0 weight = 0
``` ```
The rendering of the main navigation works as usual. `.Site.Menus` will just contain the menu of the current language. Pay attention to the generation of the menu links. `absLangURL` takes care that you link to the correct locale of your website. Otherwise, both menu entries would link to the English version because it's the default content language that resides in the root directory. The rendering of the main navigation works as usual. `.Site.Menus` will just contain the menu of the current language. Pay attention to the generation of the menu links. `absLangURL` takes care that you link to the correct locale of your website. Otherwise, both menu entries would link to the English version as the default content language that resides in the root directory.
```html ```html
<ul> <ul>
@@ -224,28 +223,31 @@ The rendering of the main navigation works as usual. `.Site.Menus` will just con
If a string does not have a translation for the current language, Hugo will use the value from the default language. If no default value is set, an empty string will be shown. If a string does not have a translation for the current language, Hugo will use the value from the default language. If no default value is set, an empty string will be shown.
While translating a Hugo website, it can be handy to have a visual indicator of missing translations. The [`EnableMissingTranslationPlaceholders` configuration option][hugoconfig] will flag all untranslated strings with the placeholder `[i18n] identifier`, where `identifier` is the id of the missing translation. While translating a Hugo website, it can be handy to have a visual indicator of missing translations. The [`EnableMissingTranslationPlaceholders` configuration option][config] will flag all untranslated strings with the placeholder `[i18n] identifier`, where `identifier` is the id of the missing translation.
{{% note %}} {{% note %}}
Hugo will generate your website with these placeholders. It might not be suited for production environments. Hugo will generate your website with these missing translation placeholders. It might not be suited for production environments.
{{% /note %}} {{% /note %}}
## Multilingual Themes support ## Multilingual Themes support
To support Multilingual mode in your themes, some considerations must be taken for the URLs in the templates. If there is more than one language, URLs must To support Multilingual mode in your themes, some considerations must be taken for the URLs in the templates. If there is more than one language, URLs must meet the following criteria:
* Come from the built-in `.Permalink` or `.URL` * Come from the built-in `.Permalink` or `.URL`
* Be constructed with * Be constructed with
* The [`relLangURL` template function][rellangurl] or the [`absLangURL` template function][abslangurl] template functions **OR** * The [`relLangURL` template function][rellangurl] or the [`absLangURL` template function][abslangurl] **OR**
* Prefixed with `{{.LanguagePrefix }}` * Prefixed with `{{ .LanguagePrefix }}`
If there is more than one language defined, the`LanguagePrefix` variable will equal `/en` (or whatever your `CurrentLanguage` is). If not enabled, it will be an empty string and is therefore harmless for single-language Hugo websites. If there is more than one language defined, the `LanguagePrefix` variable will equal `/en` (or whatever your `CurrentLanguage` is). If not enabled, it will be an empty string and is therefore harmless for single-language Hugo websites.
[abslangurl]: /functions/abslangurl [abslangurl]: /functions/abslangurl
[config]: /getting-started/configuration/
[contenttemplate]: /templates/single-page-template/ [contenttemplate]: /templates/single-page-template/
[go-i18n-source]: https://github.com/nicksnyder/go-i18n
[go-i18n]: https://github.com/nicksnyder/go-i18n
[homepage]: /templates/homepage/ [homepage]: /templates/homepage/
[hugoconfig]: /getting-started/configuration/
[i18func]: /functions/i18n/ [i18func]: /functions/i18n/
[menus]: /content-management/menus/
[rellangurl]: /functions/rellangurl
[RFC 5646]: https://tools.ietf.org/html/rfc5646 [RFC 5646]: https://tools.ietf.org/html/rfc5646
[singles]: /templates/single-page-templates/ [singles]: /templates/single-page-templates/
[rellangurl]: /functions/rellangurl
content/content-management/organization.md
+30 -125
View File
@@ -9,9 +9,8 @@ categories: [content management]
tags: [sections,content,organization,fundamentals] tags: [sections,content,organization,fundamentals]
weight: 10 weight: 10
draft: false draft: false
aliases: [/content-management/sections,/content/sections/] aliases: [/content/sections/]
toc: true toc: true
wip: true
--- ---
## Organization of Content Source ## Organization of Content Source
@@ -37,18 +36,18 @@ While Hugo supports content nested at any level, the top levels (i.e. `content/<
## Path Breakdown in Hugo ## Path Breakdown in Hugo
The following demonstrates the relationships between your content organization and the output URL structure for your Hugo website at render. These examples assume you are [using pretty URLs][pretty], which is the default behavior for Hugo. The examples also assume a key-value of `baseurl = "http://yoursite.com"` in your [site's configuration file][config]. The following demonstrates the relationships between your content organization and the output URL structure for your Hugo website when it renders. These examples assume you are [using pretty URLs][pretty], which is the default behavior for Hugo. The examples also assume a key-value of `baseurl = "http://yoursite.com"` in your [site's configuration file][config].
### Section Index Page ### Index Pages: `_index.md`
`_index.md` has a special role in Hugo. It allows you to add front matter and content to your [list templates][lists] as of v0.18. These templates include those for [section templates][], [taxonomy templates][], [taxonomy terms templates][], and your [homepage template][]. `_index.md` has a special role in Hugo. It allows you to add front matter and content to your [list templates][lists] as of v0.18. These templates include those for [section templates][], [taxonomy templates][], [taxonomy terms templates][], and your [homepage template][]. In your templates, you can grab information from `_index.md` using the [`.Site.GetPage` function][getpage].
You can keep one `_index.md` in each of your content sections. The following shows typical placement of an `_index.md` that would contain content and front matter for a `posts` section list page on a Hugo website: You can keep one `_index.md` for your homepage and one in each of your content sections, taxonomies, and taxonomy terms. The following shows typical placement of an `_index.md` that would contain content and front matter for a `posts` section list page on a Hugo website:
```bash ```bash
. url . url
. ⊢------^------⊣ . ⊢--^-⊣
. path slug . path slug
. ⊢--^-⊣⊢---^---⊣ . ⊢--^-⊣⊢---^---⊣
. filepath . filepath
@@ -82,7 +81,7 @@ Single content files in each of your sections are going to be rendered as [singl
content/posts/my-first-hugo-post.md content/posts/my-first-hugo-post.md
``` ```
At the time Hugo renders your site, the content will be output to the following destination: At the time Hugo builds your site, the content will be output to the following destination:
```bash ```bash
@@ -114,45 +113,45 @@ http://yoursite.com/events/chicago/lollapalooza/
``` ```
{{% note %}} {{% note %}}
As of v0.20, Hugo does not recognize nested sections. So while you can nest as many content *directories* as you'd like, any child directory of a section will still be considered the same section as that of its parents. Therefore, in the above example, `{{.Section}}` for `lollapalooza.md` is `events` and *not* `chicago`.
{{% /note %}} {{% /note %}}
## Paths Explained ## Paths Explained
#### `section` The following concepts will provide more insight into the relationship between your project's organization and the default behaviors of Hugo when building the output website.
### `section`
A default content type is determined by a piece of content's section. `section` is determined by the location within the project's `content` directory. `section` *cannot* be specified or overridden in front matter. A default content type is determined by a piece of content's section. `section` is determined by the location within the project's `content` directory. `section` *cannot* be specified or overridden in front matter.
#### `slug` ### `slug`
A content's `slug` is either `name.extension` or `name/`. The value for `slug` is determined by A content's `slug` is either `name.extension` or `name/`. The value for `slug` is determined by
* the name of the content file (e.g., `lollapalooza.md`) OR * the name of the content file (e.g., `lollapalooza.md`) OR
* front matter overrides * front matter overrides
#### `path` ### `path`
A content's `path` is determined by the section's path to the file. The file `path` A content's `path` is determined by the section's path to the file. The file `path`
* is based on the path to the content's location AND * is based on the path to the content's location AND
* does not include the slug * does not include the slug
#### `url` ### `url`
The `url` is the relative URL for the piece of content. The `url` The `url` is the relative URL for the piece of content. The `url`
* is based on the content's location within the directory structure OR * is based on the content's location within the directory structure OR
* is defined in front matter and *overrides all the above* * is defined in front matter and *overrides all the above*
## Overriding Destinations via Front Matter ## Overriding Default Behaviors via Front Matter
Hugo believes that you organize your content with a purpose. The same structure that works to organize your source content is used to organize the rendered site. As displayed above, the organization of the source content will be mirrored in the destination. Hugo believes that you organize your content with a purpose. The same structure that works to organize your source content is used to organize the rendered site. As displayed above, the organization of the source content will be mirrored in the destination.
Notice that the first level `about/` page URL was created using a directory named "about" with a single `_index.md` file inside.
There are times where you may need more control over your content. In these cases, there are fields that can be specified in the front matter to determine the destination of a specific piece of content. There are times where you may need more control over your content. In these cases, there are fields that can be specified in the front matter to determine the destination of a specific piece of content.
The following items are defined in this order for a specific reason: latter items in the list will override earlier items, and not all of these items can be defined in front matter: The following items are defined in this order for a specific reason: items explained further down in the list will override earlier items, and not all of these items can be defined in front matter:
### `filename` ### `filename`
@@ -171,7 +170,7 @@ slug: "new-post"
``` ```
{{% /code %}} {{% /code %}}
This will render to the following destination: This will render to the following destination according to Hugo's default behavior:
``` ```
yoursite.com/posts/new-post/ yoursite.com/posts/new-post/
@@ -201,123 +200,29 @@ layout: mylayout
### `url` ### `url`
A complete URL can be provided. This will override all the above as it pertains to the end destination. This must be the path from the baseURL (starting with a `/`). `url` will be used exactly as it provided in the front matter and will ignore the `--uglyURLs` setting in your site configuration. A complete URL can be provided. This will override all the above as it pertains to the end destination. This must be the path from the baseURL (starting with a `/`). `url` will be used exactly as it provided in the front matter and will ignore the `--uglyURLs` setting in your site configuration:
## \_index.md and "Everything is a Page" {{% code file="content/posts/old-url.md" %}}
```yaml
As of version v0.18, Hugo now treats "[everything as a page](http://bepsays.com/en/2016/12/19/hugo-018/)". This allows you to add content and front matter to any page, including list pages like [sections][sectiontemplates], [taxonomy list pages][taxonomytemplates], [taxonomy terms pages](/templates/terms/) and even to potential "special case" pages like the [homepage][]. ---
title: Old URL
In order to take advantage of this behavior, you need to do a few things. url: /blog/new-url/
---
1. Create an `_index.md` file that contains the front matter and content you would like to apply.
2. Place the `_index.md` file in the correct place in the directory structure.
3. Ensure that the respective template is configured to display `{{ .Content }}` if you wish for the content of the `_index.md` file to be rendered on the respective page.
### How `_index.md` Works
Before continuing, it's important to know that this page must reference certain templates to describe how the `_index.md` page will be rendered. Hugo has a multitude of possible templates that can be used and placed in various places (think theme templates for instance). For simplicity/brevity the default/top level template location will be used to refer to the entire range of places the template can be placed.
If this is confusing or you are unfamiliar with Hugo's template hierarchy, visit the various template pages listed below. You may need to find the 'active' template responsible for any particular page on your own site by going through the template hierarchy and matching it to your particular setup/theme you are using.
- [Homepage template](/templates/homepage/)
- [Content List templates](/templates/list/)
- [Single Content templates](/templates/content/)
- [Taxonomy Terms templates](/templates/terms/)
Now that you've got a handle on templates lets recap some Hugo basics to understand how to use an \_index.md file with a List page.
1. Sections and Taxonomies are 'List' pages, NOT single pages.
2. List pages are rendered using the template heirarchy found in the [Content - List Template](http://localhost:1313/templates/list/) docs.
3. The homepage, though technically a list page, can have [it's own template](/templates/homepage/) at layouts/index.html rather than \_default/list.html. Many themes exploit this behavior so you are likely to encounter this specific use case.
4. Taxonomy terms pages are "lists of metadata" and not lists of content and therefore [have their own templates](/templates/terms/).
Let's put all this information together:
* `_index.md` files are used in list pages, terms pages, or the homepage and are *not* rendered as single pages or with [single page templates][singles].
{{% note %}}
All pages, including List pages, can have front matter and front matter can have markdown content. Thus, `_index.md` files are the way to _provide_ front matter *and* content to the respective list, terms, and homepage templates.
{{% /note %}}
Here are a couple of examples to make it clearer...
```
| \_index.md location | Page affected | Rendered by |
| ------------------- | ------------ | ----------- |
| /content/post/\_index.md | site.com/post/ | /layouts/section/post.html |
| /content/categories/hugo/\_index.md | site.com/categories/hugo/ | /layouts/taxonomy/hugo.html |
```
### Why `_index.md` Files are Used
With a Single page such as a post it's possible to add the front matter and content directly into the .md page itself. With List/Terms/Homepages this is not possible so \_index.md files can be used to provide that front matter/content to them.
### How to Display Content From `_index.md`
From the information above it should follow that content within an \_index.md file won't be rendered in its own Single Page, instead it'll be made available to the respective list, terms, Homepage.
To **_actually render that content_** you need to ensure that the relevant template responsible for rendering the List/Terms/Homepage contains (at least) `{{ .Content }}`.
This is the way to actually display the content within the \_index.md file on the List/Terms/Homepage.
A very simple example is shown in the following default section list page:
{{% code file="layouts/_default/section.html" download="section.html" %}}
```html
{{ define "main" }}
<main>
{{ .Content }}
<ul class="contents">
{{ range .Paginator.Pages }}
<li>{{.Title}}
<div>
{{ partial "summary.html" . }}
</div>
</li>
{{ end }}
</ul>
{{ partial "pagination.html" . }}
</main>
{{ end }}
``` ```
{{% /code %}} {{% /code %}}
You can see `{{ .Content }}` just after the `<main>` element. For this particular example, the content of the \_index.md file will show before the main list of summaries. Assuming your `baseURL` is [configured][config] to `https://yoursite.com`, the addition of `url` to the front matter will make `old-url.md` render to the following destination:
### Where to Organize `_index.md` Files ```
https://yoursite.com/blog/new-url/
To add content and front matter to the homepage, a section, a taxonomy or a taxonomy terms listing, add a markdown file with the base name \_index on the relevant place on the file system.
```bash
└── content
├── _index.md
├── categories
│ ├── _index.md
│ └── photo
│ └── _index.md
├── post
│ ├── _index.md
│ └── firstpost.md
└── tags
├── _index.md
└── hugo
└── _index.md
``` ```
In the above example, `_index.md` pages have been added to each section and taxonomy. You can see more information on how to control output paths in [URL Management][urls].
An `_index.md` file has also been added in the top level 'content' directory.
### Where to Place `_index.md` for the Homepage Template
Hugo themes are designed to use the 'content' directory as the root of the website, so adding an `_index.md` file here (like has been done in the example above) is how you would add front matter and content to the homepage.
[config]: /getting-started/configuration/ [config]: /getting-started/configuration/
[formats]: /content-management/formats/ [formats]: /content-management/formats/
[front matter]: /content-management/front-matter/ [front matter]: /content-management/front-matter/
[getpage]: /functions/getpage/
[homepage template]: /templates/homepage/ [homepage template]: /templates/homepage/
[homepage]: /templates/homepage/ [homepage]: /templates/homepage/
[lists]: /templates/lists/ [lists]: /templates/lists/
content/content-management/toc.md
+13 -7
View File
@@ -11,18 +11,17 @@ weight: 130
draft: false draft: false
aliases: [/extras/toc/,/content-management/toc/] aliases: [/extras/toc/,/content-management/toc/]
toc: false toc: false
wip: true
--- ---
Hugo can automatically parse Markdown content and create a Table of Contents you can leverage in your templates to guide readers to sections of longer pages. Hugo can automatically parse Markdown content and create a Table of Contents you can leverage in your templates to guide readers to sections of longer pages.
{{% note "TOC Heading Levels are Fixed" %}} {{% note "TOC Heading Levels are Fixed" %}}
Currently, the {{.TableOfContents}} [page variable](/variables/page-variables/) is fixed in its behavior; i.e., you do not have the option to set the heading level at which the TOC renders. This is a [known issue (#1778)](https://github.com/spf13/hugo/issues/1778), and as always, [contributions are welcome](/contribute/development/). Currently, the {{.TableOfContents}} [page variable](/variables/page-variables/) is fixed in its behavior; i.e., you do not have the option to set the heading level at which the TOC renders. This is a [known issue (#1778)](https://github.com/spf13/hugo/issues/1778).
{{% /note %}} {{% /note %}}
## Usage ## Usage
Create your markdown the way you normally would with the appropriate headers. Here is some example content: Create your markdown the way you normally would with the appropriate headings. Here is some example content:
```md ```md
<!-- Your front matter up here --> <!-- Your front matter up here -->
@@ -42,18 +41,25 @@ His many legs, pitifully thin compared with the size of the rest of him, waved a
A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops
``` ```
Hugo will take this Markdown and create a table of contents from `## Introuduction`, `## My Heading`, and `### My Subheading`stored in the [content variable](/variables/page-variables/) `.TableOfContents`. Hugo will take this Markdown and create a table of contents from `## Introduction`, `## My Heading`, and `### My Subheading` and then store it in the [page variable][pagevars]`.TableOfContents`.
## Template Example ## Template Example
This is example code of a [single.html template](/templates/single-page-templates/). The following is an example of a [partial template][partials] used in a [single page template][]:
```golang {{% code file="layout/partials/toc.html" download="toc.html" %}}
```html
{{ partial "header.html" . }} {{ partial "header.html" . }}
<aside id="toc" class="well col-md-4 col-sm-6"> <aside id="toc">
{{ .TableOfContents }} {{ .TableOfContents }}
</aside> </aside>
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ .Content }} {{ .Content }}
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
``` ```
{{% /code %}}
[pagevars]: /variables/page-variables/
[partials]: /templates/partials/
[single page template]: /templates/single-page-template/
content/content-management/urls.md
+39 -33
View File
@@ -11,12 +11,11 @@ weight: 110
draft: false draft: false
aliases: [/extras/permalinks/,/extras/aliases/,/extras/urls/,/doc/redirects/,/doc/alias/,/doc/aliases/] aliases: [/extras/permalinks/,/extras/aliases/,/extras/urls/,/doc/redirects/,/doc/alias/,/doc/aliases/]
toc: true toc: true
wip: true
--- ---
## Permalinks ## Permalinks
By default, Hugo target directory for your built website is `public/`. However, you can change this value by specifying a different `publishdir` in your [site configuration][config]. The directories created at build time for a section reflect the position of the content's directory within the `content` folder and namespace matching its layout within the `contentdir` hierarchy. The default Hugo target directory for your built website is `public/`. However, you can change this value by specifying a different `publishdir` in your [site configuration][config]. The directories created at build time for a section reflect the position of the content's directory within the `content` folder and namespace matching its layout within the `contentdir` hierarchy.
The `permalinks` option in your [site configuration][config] allows you to adjust the directory paths (i.e., the URLs) on a per-section basis. This will change where the files are written to and will change the page's internal "canonical" location, such that template references to `.RelPermalink` will honor the adjustments made as a result of the mappings in this option. The `permalinks` option in your [site configuration][config] allows you to adjust the directory paths (i.e., the URLs) on a per-section basis. This will change where the files are written to and will change the page's internal "canonical" location, such that template references to `.RelPermalink` will honor the adjustments made as a result of the mappings in this option.
@@ -24,7 +23,7 @@ The `permalinks` option in your [site configuration][config] allows you to adjus
These examples use the default values for `publishDir` and `contentDir`; i.e., `publish` and `content`, respectively. You can override the default values in your [site's `config` file](/getting-started/configuration/). These examples use the default values for `publishDir` and `contentDir`; i.e., `publish` and `content`, respectively. You can override the default values in your [site's `config` file](/getting-started/configuration/).
{{% /note %}} {{% /note %}}
For example, if one of your [sections][] is called `post` and you want to adjust the canonical path to be hierarchical based on the year and month, you could set up the following configurations in YAML and TOML, respectively. For example, if one of your [sections][] is called `post` and you want to adjust the canonical path to be hierarchical based on the year, month, and post title, you could set up the following configurations in YAML and TOML, respectively.
### YAML Permalinks Configuration Example ### YAML Permalinks Configuration Example
@@ -44,7 +43,7 @@ permalinks:
``` ```
{{% /code %}} {{% /code %}}
Only the content under `post/` will have the new URL structure. For example, the file `content/post/sample-entry` with `date: 2013-11-18T19:20:00-05:00` in its front matter will render to `public/2013/11/sample-entry/index.html` at build time and therefore be reachable at `http://yoursite.com/2013/11/sample-entry/`. Only the content under `post/` will have the new URL structure. For example, the file `content/post/sample-entry.md` with `date: 2017-02-27T19:20:00-05:00` in its front matter will render to `public/2017/02/sample-entry/index.html` at build time and therefore be reachable at `http://yoursite.com/2013/11/sample-entry/`.
### Permalink Configuration Values ### Permalink Configuration Values
@@ -62,11 +61,17 @@ The following is a list of values that can be used in a `permalink` definition i
* `:slug` = the content's slug (or title if no slug is provided in the front matter) * `:slug` = the content's slug (or title if no slug is provided in the front matter)
* `:filename` = the content's filename (without extension) * `:filename` = the content's filename (without extension)
## Example ## Aliases
Let's assume you create a new piece of content at `content/posts/my-awesome-blog-post.md`. The content is a revision of your previous post at `content/posts/my-original-url.md`. You can create an `aliases` field in the front matter of your new `my-awesome-blog-post.md` where you can add previous paths. The following show examples of creating this filed in TOML and YAML front matter, respectively. For people migrating existing published content to Hugo, there's a good chance you need a mechanism to handle redirecting old URLs.
### TOML Front Matter Luckily, redirects can be handled easily with **aliases** in Hugo.
### Example: Aliases
Let's assume you create a new piece of content at `content/posts/my-awesome-blog-post.md`. The content is a revision of your previous post at `content/posts/my-original-url.md`. You can create an `aliases` field in the front matter of your new `my-awesome-blog-post.md` where you can add previous paths. The following examples show how to create this filed in TOML and YAML front matter, respectively.
#### TOML Front Matter
{{% code file="content/posts/my-awesome-post.md" copy="false" %}} {{% code file="content/posts/my-awesome-post.md" copy="false" %}}
```toml ```toml
@@ -79,7 +84,7 @@ aliases = [
``` ```
{{% /code %}} {{% /code %}}
### YAML Front Matter #### YAML Front Matter
{{% code file="content/posts/my-awesome-post.md" copy="false" %}} {{% code file="content/posts/my-awesome-post.md" copy="false" %}}
```yaml ```yaml
@@ -91,9 +96,9 @@ aliases:
``` ```
{{% /code %}} {{% /code %}}
Now when you visit any of the locations specified in aliases---i.e., *assuming the same site domain*---you'll be redirected to the page they are specified on. For example, a visitor to `yoursite.com/posts/my-original-url/` will be immediately redirected to `yoursite.com/posts/my-awesome-blog-post`. Now when you visit any of the locations specified in aliases---i.e., *assuming the same site domain*---you'll be redirected to the page they are specified on. For example, a visitor to `yoursite.com/posts/my-original-url/` will be immediately redirected to `yoursite.com/posts/my-awesome-blog-post/`.
## Multilingual example ### Example: Aliases in Multilingual
On [multilingual sites][multilingual], each translation of a post can have unique aliases. To use the same alias across multiple languages, prefix it with the language code. On [multilingual sites][multilingual], each translation of a post can have unique aliases. To use the same alias across multiple languages, prefix it with the language code.
@@ -106,31 +111,34 @@ aliases:
--- ---
``` ```
## Aliases
For people migrating existing published content to Hugo, there's a good chance you need a mechanism to handle redirecting old URLs.
Luckily, redirects can be handled easily with **aliases** in Hugo.
### How Hugo Aliases Work ### How Hugo Aliases Work
When aliases are specified, Hugo creates a directory to match the alias entry. Inside the directory, Hugo creates an `.html` file specifying the canonical URL for the page and the new redirect target. When aliases are specified, Hugo creates a directory to match the alias entry. Inside the directory, Hugo creates an `.html` file specifying the canonical URL for the page and the new redirect target.
Assuming a baseURL of `yoursite.com`, the contents of the html file will look something like: For example, a content file at `posts/my-intended-url.md` with the following in the front matter:
```yaml
---
title: My New post
aliases: [/posts/my-old-url/]
---
```
Assuming a `baseURL` of `yoursite.com`, the contents of the auto-generated alias `.html` found at `https://yoursite.com/posts/my-old-url/ will contain the following:`
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>http://yoursite.com/posts/my-original-url</title> <title>http://yoursite.com/posts/my-intended-url</title>
<link rel="canonical" href="http://yoursite.com/posts/my-original-url"/> <link rel="canonical" href="http://yoursite.com/posts/my-intended-url"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="refresh" content="0; url=http://yoursite.com/posts/my-original-url"/> <meta http-equiv="refresh" content="0; url=http://yoursite.com/posts/my-intended-url"/>
</head> </head>
</html> </html>
``` ```
The `http-equiv="refresh"` line is what performs the redirect, in 0 seconds in this case. The `http-equiv="refresh"` line is what performs the redirect, in 0 seconds in this case. If an end user of your website goes to `https://yoursite.com/posts/my-old-url`, they will now be automatically redirected to the newer, correct URL.
### Customizing ### Customizing
@@ -148,9 +156,7 @@ layouts folder of your site (i.e., `layouts/alias.html`). In this case, the data
1. Hugo makes no assumptions about aliases. They also do not change based 1. Hugo makes no assumptions about aliases. They also do not change based
on your UglyURLs setting. You need to provide absolute paths to your web root on your UglyURLs setting. You need to provide absolute paths to your web root
and the complete filename or directory. and the complete filename or directory.
2. Aliases are rendered *before* any content are rendered and therefore will be overwritten by any content with the same location.
2. Aliases are rendered *before* to any content and will be overwritten by
any content with the same location.
## Pretty URLs ## Pretty URLs
@@ -162,16 +168,16 @@ The following demonstrates the concept:
content/posts/_index.md content/posts/_index.md
=> yoursite.com/posts/index.html => yoursite.com/posts/index.html
content/posts/post-1.md content/posts/post-1.md
=> yoursite.com/ => yoursite.com/posts/post-1/
content/posts/post-2.md
content/posts/post-3.md
``` ```
## Ugly URLs ## Ugly URLs
If you would like to have what we call "ugly URLs" (e.g.,&nbsp;http://example.com/extras/urls.html), set `uglyurls = true` or `uglyurls: true` to your site-wide `config.toml` or `config.yaml`, respectively. You can also use the `--uglyURLs=true` [flag from the command line][usage]. If you would like to have are often referred to as "ugly URLs" (e.g.,&nbsp;http://example.com/extras/urls.html), set `uglyurls = true` or `uglyurls: true` to your site's `config.toml` or `config.yaml`, respectively. You can also use the `--uglyURLs=true` [flag from the command line][usage] with `hugo` or `hugo server`..
If you want a specific piece of content to have an exact URL, you can specify this in the [front matter][] under the `url` key. The following are examples of the same content directory and what the eventual URL structure will be run with the default. See [Content Organization][contentorg] for more details. If you want a specific piece of content to have an exact URL, you can specify this in the [front matter][] under the `url` key. The following are examples of the same content directory and what the eventual URL structure will be when Hugo runs with its default behavior.
See [Content Organization][contentorg] for more details on paths.
```bash ```bash
. .
@@ -194,7 +200,7 @@ Here's the same organization run with `hugo --uglyURLs`:
. .
└── content └── content
└── about └── about
| └── _index.md // <- http://yoursite.com/about/ | └── _index.md // <- http://yoursite.com/about/index.html
├── post ├── post
| ├── firstpost.md // <- http://yoursite.com/post/firstpost.html | ├── firstpost.md // <- http://yoursite.com/post/firstpost.html
| ├── happy | ├── happy
@@ -208,11 +214,11 @@ Here's the same organization run with `hugo --uglyURLs`:
## Canonicalization ## Canonicalization
By default, all relative URLs encountered in the input are left unmodified, e.g. `/css/foo.css` would stay as `/css/foo.css`, i.e. `canonifyURLs` defaults to `false`. By default, all relative URLs encountered in the input are left unmodified, e.g. `/css/foo.css` would stay as `/css/foo.css`. The `canonifyURLs` field in your site `config` has a default value of `false`.
By setting `canonifyURLs` to `true`, all relative URLs would instead be *canonicalized* using `baseURL`. For example, assuming you have `baseURL = http://yoursite.com/` defined in the site-wide `config.toml`, the relative URL `/css/foo.css` would be turned into the absolute URL `http://yoursite.com/css/foo.css`. By setting `canonifyURLs` to `true`, all relative URLs would instead be *canonicalized* using `baseURL`. For example, assuming you have `baseURL = https://yoursite.com/`, the relative URL `/css/foo.css` would be turned into the absolute URL `http://yoursite.com/css/foo.css`.
Benefits of canonicalization include fixing all URLs to be absolute, which may aid with some parsing tasks. Note, however, that all modern browsers handle this on the client without issues. Benefits of canonicalization include fixing all URLs to be absolute, which may aid with some parsing tasks. Note, however, that all modern browsers handle this on the client without issue.
Benefits of non-canonicalization include being able to have scheme-relative resource inclusion; e.g., so that `http` vs `https` can be decided according to how the page was retrieved. Benefits of non-canonicalization include being able to have scheme-relative resource inclusion; e.g., so that `http` vs `https` can be decided according to how the page was retrieved.
content/getting-started/installing.md
+3 -3
View File
@@ -22,9 +22,9 @@ The latest release can be found at [Hugo Releases][releases].
Hugo currently provides pre-built binaries for the following: Hugo currently provides pre-built binaries for the following:
* <i class="fa fa-apple"></i> OS X (Darwin) for x64, i386, and ARM architectures * <i class="icon-apple"></i> OS X (Darwin) for x64, i386, and ARM architectures
* <i class="fa fa-windows"></i> Windows * <i class="icon-windows"></i> Windows
* <i class="fa fa-linux"></i> Linux * <i class="icon-linux"></i> Linux
* <i class="icon-freebsd"></i> FreeBSD * <i class="icon-freebsd"></i> FreeBSD
Hugo may also be compiled from source wherever the Go compiler tool chain can run; e.g., for other operating systems, including DragonFly BSD, OpenBSD, Plan&nbsp;9 and Solaris. See <http://golang.org/doc/install/source> for the full set of supported combinations of target operating systems and compilation architectures. Hugo may also be compiled from source wherever the Go compiler tool chain can run; e.g., for other operating systems, including DragonFly BSD, OpenBSD, Plan&nbsp;9 and Solaris. See <http://golang.org/doc/install/source> for the full set of supported combinations of target operating systems and compilation architectures.
content/templates/section-templates.md
+23 -1
View File
@@ -11,7 +11,6 @@ weight: 40
draft: false draft: false
aliases: [/templates/sections/] aliases: [/templates/sections/]
toc: true toc: true
wip: true
--- ---
Templates used for section pages are *lists* and therefore have all the variables and methods available to [list pages][lists]. Templates used for section pages are *lists* and therefore have all the variables and methods available to [list pages][lists].
@@ -52,6 +51,29 @@ These are the valid values for 'kind':
3. `taxonomy` 3. `taxonomy`
4. `taxonomyTerm` 4. `taxonomyTerm`
## Example: Creating a Default Section Template
{{% code file="layouts/_default/section.html" download="section.html" %}}
```html
{{ define "main" }}
<main>
{{ .Content }}
<ul class="contents">
{{ range .Paginator.Pages }}
<li>{{.Title}}
<div>
{{ partial "summary.html" . }}
</div>
</li>
{{ end }}
</ul>
{{ partial "pagination.html" . }}
</main>
{{ end }}
```
{{% /code %}}
### Example: Using `.Site.GetPage` ### Example: Using `.Site.GetPage`
The `.Site.GetPage` example that follows assumes the following project directory structure: The `.Site.GetPage` example that follows assumes the following project directory structure:
dev-and-design-resources/gopher-small-homepage.afdesign
BIN
View File
Binary file not shown.
layouts/partials/homepage/homepage-install.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="half"> <div class="half">
<div class="svgs"> <div class="svgs">
{{partial "svg-icons/gopher-small-homepage.svg" .}} {{partial "svg-icons/gopher-homepage.svg" .}}
</div> </div>
<div class="homepage-terminal"> <div class="homepage-terminal">
$ export GOPATH=$HOME/go $ export GOPATH=$HOME/go
layouts/partials/style-embed.html
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/partials/svg-icons/gopher-small-homepage.svg → layouts/partials/svg-icons/gopher-homepage.svg
+9 -1
View File
@@ -1,4 +1,4 @@
<svg width="100%" id="gopher" height="100%" viewBox="0 0 272 282" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"> <svg id="gopher" width="100%" height="100%" viewBox="0 0 272 282" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1.09329,0,0,1.09329,-135.183,-11.6982)"> <g transform="matrix(1.09329,0,0,1.09329,-135.183,-11.6982)">
<path class="gopher-cape animated" d="M167.376,132.778C165.4,163.47 157.387,172.184 150.142,191.552C140.361,210.573 133.102,214.357 127.626,223.012C131.508,226.814 144.79,238.814 159.006,243.911C199.917,251.86 250.261,251.499 284.105,243.911C312.297,238.453 330.566,241.986 350.858,258.146C352.025,218.523 351.604,171.276 333.752,132.778" style="fill:rgb(201,23,126);stroke:rgb(201,23,126);stroke-width:4px;"/> <path class="gopher-cape animated" d="M167.376,132.778C165.4,163.47 157.387,172.184 150.142,191.552C140.361,210.573 133.102,214.357 127.626,223.012C131.508,226.814 144.79,238.814 159.006,243.911C199.917,251.86 250.261,251.499 284.105,243.911C312.297,238.453 330.566,241.986 350.858,258.146C352.025,218.523 351.604,171.276 333.752,132.778" style="fill:rgb(201,23,126);stroke:rgb(201,23,126);stroke-width:4px;"/>
</g> </g>
@@ -47,4 +47,12 @@
<g transform="matrix(1.09329,0,0,1.09329,-135.318,-8.1299)"> <g transform="matrix(1.09329,0,0,1.09329,-135.318,-8.1299)">
<path class="gopher-cape animated" d="M167.5,129.514C184.792,131.141 216.708,134.608 250.124,148.407C283.576,136.181 294.915,129.585 333.876,129.514" style="fill:none;stroke:rgb(201,23,126);stroke-width:4px;"/> <path class="gopher-cape animated" d="M167.5,129.514C184.792,131.141 216.708,134.608 250.124,148.407C283.576,136.181 294.915,129.585 333.876,129.514" style="fill:none;stroke:rgb(201,23,126);stroke-width:4px;"/>
</g> </g>
<g transform="matrix(1,0,0,1,-1.47026,0)">
<g transform="matrix(1.09203,0,0,1,-11.2404,3.14785)">
<path class="gopher-cape animated" d="M103.229,44.41C127.646,44.41 141.964,60.067 145.637,76.405C149.492,93.554 120.688,108.4 96.272,108.4C71.856,108.4 58.627,77.601 58.627,59.942C58.627,42.284 78.813,44.41 103.229,44.41ZM103.229,59.942C117.928,59.942 128.366,65.775 128.366,76.405C128.366,87.035 117.928,95.666 103.229,95.666C88.531,95.666 75.079,82.622 75.079,71.992C75.079,61.361 88.531,59.942 103.229,59.942Z" style="fill:rgb(201,23,126);"/>
</g>
<g transform="matrix(1.05263,0,0,1,75.8327,3.14785)">
<path class="gopher-cape animated" d="M101.398,44.41C125.814,44.41 141.107,42.439 141.107,60.097C141.107,77.755 125.814,108.4 101.398,108.4C76.982,108.4 57.159,94.063 57.159,76.405C57.159,58.747 76.982,44.41 101.398,44.41ZM98.548,60.097C113.14,60.097 125.888,60.912 125.888,71.466C125.888,82.019 113.14,95.527 98.548,95.527C83.955,95.527 72.108,86.959 72.108,76.405C72.108,65.851 83.955,60.097 98.548,60.097Z" style="fill:rgb(201,23,126);"/>
</g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

pipeline/scss/pages/_homepage.scss
+10 -8
View File
@@ -254,14 +254,13 @@ ul.animated {
background-color: $hugo-gray; background-color: $hugo-gray;
padding: 1em 1.5em; padding: 1em 1.5em;
text-align: left; text-align: left;
// width: 90%;
width: 110%; width: 110%;
position:relative; position: relative;
left:-5%; left: -5%;
max-width: 360px; max-width: 360px;
@include MQ(M){ @include MQ(M) {
width:100%; width: 100%;
left:auto; left: auto;
} }
@include card(2); @include card(2);
border-radius: 5px; border-radius: 5px;
@@ -348,7 +347,10 @@ svg {
color: $hugo-white; color: $hugo-white;
justify-content: space-between; justify-content: space-between;
i { i {
font-size: 80px; font-size: 40px;
@include MQ(M) {
font-size: 60px;
}
} }
} }
} }
@@ -363,7 +365,7 @@ svg {
@include MQ(M) { @include MQ(M) {
max-width: 640px; max-width: 640px;
} }
@include MQ(L) { @include MQ(M) {
max-width: $L; max-width: $L;
} }
} }
static/css/style.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long