hugo/content/en/templates/homepage.md
Bjørn Erik Pedersen 7c62d6ef16 Squashed 'docs/' changes from c43daf45f..a7e1e9be8
a7e1e9be8 Clarify front matter date fields
69df4fc22 Clarify how to determine if .Inner is populated
9046bf424 Document strings.ContainsNonSpace
8dbe5df90 Fix indentation and broken image
48ad4124e Typo: functions/after.md
d4c01b57b Link to detailed descriptions of canonfiyURLs and relativeURLs
4d9597302 Explain behaviour when appending to a slice containing other slices
69e24e44e Standardize right arrow usage
01b378726 Remove references to Google's Universal Analytics and the async template
d415bae24 Use shared file to describe regex syntax
e75dee6b8 snap: How to enable or revoke access to SSH keys
feed2d1c0 Remove hasPrefix and hasSuffix in favor of namespaced versions
3c6d2cfe5 security: Use default execution settings
461b5fcaf netlify: Hugo 0.116.1
95fac27a5 configuration: correct cacheDir description
cd9f1f929 configuration: Fix broken link
605394de4 netlify: Upgrade to Hugo 0.116.0
baf2a0f7b Merge branch 'tempv0.116.0'
ee51a9323 Update requirements for building from source
40189956d Editor tools: Remove duplicate sentence
fb0ff2621 docs: Regenerate CLI docs
e8a5665c4 Update where.md
7bc5cf15d Update hosting instructions
018a04314 docs: Update where
d33ae91cf docs: Update where function operators
9a108a664 docs: Rework the cacheDir documentation

git-subtree-dir: docs
git-subtree-split: a7e1e9be851b95e636ab5360e5151156b4f89044
2023-08-07 10:35:12 +02:00

65 lines
2.4 KiB
Markdown

---
title: Homepage template
description: The homepage of a website is often formatted differently than the other pages. For this reason, Hugo makes it easy for you to define your new site's homepage as a unique template.
categories: [templates]
keywords: [homepage]
menu:
docs:
parent: templates
weight: 70
weight: 70
aliases: [/layout/homepage/,/templates/homepage-template/]
toc: true
---
Homepage is a `Page` and therefore has all the [page variables][pagevars] and [site variables][sitevars] available for use.
{{% note %}}
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
See [Template Lookup](/templates/lookup-order/).
## Add content and front matter to the homepage
The homepage, similar to other [list pages in Hugo][lists], accepts content and front matter from an `_index.md` file. This file should live at the root of your `content` folder (i.e., `content/_index.md`). You can then add body copy and metadata to your homepage the way you would any other content file.
See the homepage template below or [Content Organization][contentorg] for more information on the role of `_index.md` in adding content and front matter to list pages.
## Example homepage template
The following is an example of a homepage template that uses [partial][partials], [base] templates, and a content file at `content/_index.md` to populate the `{{ .Title }}` and `{{ .Content }}` [page variables][pagevars].
{{< code file="layouts/index.html" >}}
{{ define "main" }}
<main aria-role="main">
<header class="homepage-header">
<h1>{{ .Title }}</h1>
{{ with .Params.subtitle }}
<span class="subtitle">{{ . }}</span>
{{ end }}
</header>
<div class="homepage-content">
<!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
{{ .Content }}
</div>
<div>
{{ range first 10 .Site.RegularPages }}
{{ .Render "summary" }}
{{ end }}
</div>
</main>
{{ end }}
{{< /code >}}
[base]: /templates/base/
[contentorg]: /content-management/organization/
[lists]: /templates/lists/
[lookup]: /templates/lookup-order/
[pagevars]: /variables/page/
[partials]: /templates/partials/
[sitevars]: /variables/site/