mirror of
https://github.com/gohugoio/hugoDocs.git
synced 2025-09-16 05:54:36 -04:00
Add tutorial videos to several docs pages
Credits go to @giraffeacademy
This commit is contained in:
parent
950fef1ff3
commit
2b27785915
@ -29,7 +29,7 @@ See above
|
||||
|
||||
**Archetypes** are content files in the [archetypes directory][] of your project that contain preconfigured [front matter][] for your website's [content types][]. Archetypes facilitate consistent metadata across your website content and allow content authors to quickly generate instances of a content type via the `hugo new` command.
|
||||
|
||||
{{< youtube S3Tj3UcTFz8 >}}
|
||||
{{< youtube bcme8AzVh6o >}}
|
||||
|
||||
The `hugo new` generator for archetypes assumes your working directory is the content folder at the root of your project. Hugo is able to infer the appropriate archetype by assuming the content type from the content section passed to the CLI command:
|
||||
|
||||
|
@ -19,6 +19,8 @@ toc: true
|
||||
|
||||
**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.
|
||||
|
||||
{{< youtube Yh2xKRJGff4 >}}
|
||||
|
||||
## Front Matter Formats
|
||||
|
||||
Hugo supports three formats for front matter, each with their own identifying tokens.
|
||||
|
@ -24,6 +24,8 @@ This section is not updated with the new nested sections support in Hugo 0.24, s
|
||||
See above
|
||||
{{% /todo %}}
|
||||
|
||||
{{< youtube 0GZxidrlaRM >}}
|
||||
|
||||
## Organization of Content Source
|
||||
|
||||
In Hugo, your content should be organized in a manner that reflects the rendered website.
|
||||
|
@ -30,6 +30,8 @@ In addition to cleaner Markdown, shortcodes can be updated any time to reflect n
|
||||
|
||||
## Use Shortcodes
|
||||
|
||||
{{< youtube 2xkNJL4gJ9E >}}
|
||||
|
||||
In your content files, a shortcode can be called by calling `{{%/* shortcodename parameters */%}}`. Shortcode parameters are space delimited, and parameters with internal spaces can be quoted.
|
||||
|
||||
The first word in the shortcode declaration is always the name of the shortcode. Parameters follow the name. Depending upon how the shortcode is defined, the parameters may be named, positional, or both, although you can't mix parameter types in a single call. The format for named parameters models that of HTML with the format `name="value"`.
|
||||
|
@ -32,7 +32,7 @@ Term
|
||||
Value
|
||||
: a piece of content assigned to a term
|
||||
|
||||
{{< youtube "-np9GX6cL38" >}}
|
||||
{{< youtube pCPCQgqC8RA >}}
|
||||
|
||||
## Example Taxonomy: Movie Website
|
||||
|
||||
|
@ -20,6 +20,8 @@ toc: true
|
||||
|
||||
## New Site Scaffolding
|
||||
|
||||
{{< youtube sB0HLHjgQ7E >}}
|
||||
|
||||
Running the `hugo new site` generator from the command line will create a directory structure with the following elements:
|
||||
|
||||
```
|
||||
|
@ -121,6 +121,8 @@ Since building from source is appealing to more seasoned command line users, thi
|
||||
|
||||
### Install Hugo with Brew
|
||||
|
||||
{{< youtube WvhCGlLcrF8 >}}
|
||||
|
||||
#### Step 1: Install `brew` if you haven't already
|
||||
|
||||
Go to the `brew` website, <https://brew.sh/>, and follow the directions there. The most important step is the installation from the command line:
|
||||
@ -299,6 +301,8 @@ Then place the `hugo` executable somewhere in your `$PATH`. You're now ready to
|
||||
|
||||
The following aims to be a complete guide to installing Hugo on your Windows PC.
|
||||
|
||||
{{< youtube G7umPCU-8xc >}}
|
||||
|
||||
### Assumptions
|
||||
|
||||
1. You will use `C:\Hugo\Sites` as the starting point for your new project.
|
||||
|
@ -21,6 +21,8 @@ toc: true
|
||||
|
||||
The `block` keyword allows you to define the outer shell of your pages' one or more master template(s) and then fill in or override portions as necessary.
|
||||
|
||||
{{< youtube QVOMCYitLEc >}}
|
||||
|
||||
## Base Template Lookup Order
|
||||
|
||||
The [lookup order][lookup] for base templates is as follows:
|
||||
|
@ -22,6 +22,8 @@ toc: true
|
||||
|
||||
Hugo supports loading data from YAML, JSON, and TOML files located in the `data` directory in the root of your Hugo project.
|
||||
|
||||
{{< youtube FyPgSuwIMWQ >}}
|
||||
|
||||
## The Data Folder
|
||||
|
||||
The `data` folder is where you can store additional data for Hugo to use when generating your site. Data files aren't used to generate standalone pages; rather, they're meant to be supplemental to content files. This feature can extend the content in case your front matter fields grow out of control. Or perhaps you want to show a larger dataset in a template (see example below). In both cases, it's a good idea to outsource the data in their own files.
|
||||
|
@ -24,6 +24,8 @@ Homepage is a `Page` and therefore has all the [page variables][pagevars] and [s
|
||||
The homepage template is the *only* required template for building a site and therefore useful when bootstrapping a new site and template. It is also the only required template if you are developing a single-page website.
|
||||
{{% /note %}}
|
||||
|
||||
{{< youtube ut1xtRZ1QOA >}}
|
||||
|
||||
## Homepage Template Lookup Order
|
||||
|
||||
The [lookup order][lookup] for the homepage template is as follows:
|
||||
|
@ -25,6 +25,8 @@ The following is only a primer on Go templates. For an in-depth look into Go tem
|
||||
|
||||
Go templates provide an extremely simple template language that adheres to the belief that only the most basic of logic belongs in the template or view layer.
|
||||
|
||||
{{< youtube gnJbPO-GFIw >}}
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
Golang templates are HTML files with the addition of [variables][variables] and [functions][functions]. Golang template variables and functions are accessible within `{{ }}`.
|
||||
|
@ -20,6 +20,8 @@ toc: true
|
||||
|
||||
## What is a List Page Template?
|
||||
|
||||
{{< youtube 8b2YTSMdMps >}}
|
||||
|
||||
A list page template is a template used to render multiple pieces of content in a single HTML page. The exception to this rule is the homepage, which is still a list but has its own [dedicated template][homepage].
|
||||
|
||||
Hugo uses the term *list* in its truest sense; i.e. a sequential arrangement of material, especially in alphabetical or numerical order. Hugo uses list templates on any output HTML page where content is traditionally listed:
|
||||
|
@ -18,6 +18,8 @@ aliases: [/templates/partial/,/layout/chrome/,/extras/analytics/]
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< youtube pjS4pOLyB7c >}}
|
||||
|
||||
## Partial Template Lookup Order
|
||||
|
||||
Partial templates---like [single page templates][singletemps] and [list page templates][listtemps]---have a specific [lookup order][]. However, partials are simpler in that Hugo will only check in two places:
|
||||
|
@ -35,6 +35,8 @@ The [lookup order][lookup] for section templates is as follows:
|
||||
7. `/themes/<THEME>/layouts/_default/section.html`
|
||||
8. `/themes/<THEME>/layouts/_default/list.html`
|
||||
|
||||
{{< youtube jrMClsB3VsY >}}
|
||||
|
||||
## `.Site.GetPage` with Sections
|
||||
|
||||
Every `Page` in Hugo has a `.Kind` attribute. `Kind` can easily be combined with the [`where` function][where] in your templates to create kind-specific lists of content. This method is ideal for creating lists, but there are times where you may want to fetch just the index page of a single section via the section's path.
|
||||
|
@ -28,6 +28,8 @@ Hugo also ships with built-in shortcodes for common use cases. (See [Content Man
|
||||
|
||||
Hugo's built-in shortcodes cover many common, but not all, use cases. Luckily, Hugo provides the ability to easily create custom shortcodes to meet your website's needs.
|
||||
|
||||
{{< youtube Eu4zSaKOY4A >}}
|
||||
|
||||
### File Placement
|
||||
|
||||
To create a shortcode, place an HTML template in the `layouts/shortcodes` directory of your [source organization][]. Consider the file name carefully since the shortcode name will mirror that of the file but without the `.html` extension. For example, `layouts/shortcodes/myshortcode.html` will be called with either `{{</* myshortcode /*/>}}` or `{{%/* myshortcode /*/%}}` depending on the type of parameters you choose.
|
||||
|
@ -35,6 +35,8 @@ Hugo assumes your content section and content type are the same unless you tell
|
||||
9. `/themes/<THEME>/layouts/<SECTION>/single.html`
|
||||
10. `/themes/<THEME>/layouts/_default/single.html`
|
||||
|
||||
{{< youtube ZYQ5k0RQzmo >}}
|
||||
|
||||
## Example Single Page Templates
|
||||
|
||||
Content pages are of the type `page` and will therefore have all the [page variables][pagevars] and [site variables][] available to use in their templates.
|
||||
|
@ -30,6 +30,8 @@ Hugo currently doesn’t ship with a “default” theme. This decision is inten
|
||||
|
||||
## Install Themes
|
||||
|
||||
{{< youtube L34JL_3Jkyc >}}
|
||||
|
||||
The community-contributed themes featured on [themes.gohugo.io](//themes.gohugo.io/) are hosted in a [centralized GitHub repository][themesrepo]. The Hugo Themes Repo at <https://github.com/gohugoio/hugoThemes> is really a meta repository that contains pointers to a set of contributed themes.
|
||||
|
||||
{{% warning "Get `git` First" %}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user