Add `simple` page layout for full-width content

Fixes #139
pull/156/head
James Panther 2022-03-08 10:46:26 +11:00
parent 74677d9c6d
commit c1857711ed
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
3 changed files with 41 additions and 0 deletions

View File

@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Added
- Simple page layout for creating full-width content ([#139](https://github.com/jpanther/congo/issues/139))
- Portuguese (Portugal) translation ([#144](https://github.com/jpanther/congo/pull/144))
### Changed

View File

@ -212,6 +212,28 @@ The theme includes an archetype to make generating these external link articles
hugo new -k external posts/my-post.md
```
### Simple pages
| | |
| ----------------- | ------------------------------ |
| **Layout:** | `layouts/_default/simple.html` |
| **Front Matter:** | `layout: "simple"` |
Congo also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.
The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page [front matter]({{< ref "front-matter" >}}) variables.
To enable the simple layout on a particular page, add the `layout` front matter variable with a value of `"simple"`:
```yaml
---
title: "My landing page"
date: 2022-03-08
layout: "simple"
---
This page content is now full-width.
```
## Custom layouts
One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.

View File

@ -0,0 +1,18 @@
{{ define "main" }}
<article class="max-w-full">
<header>
{{ if .Site.Params.article.showBreadcrumbs | default false }}
{{ partial "breadcrumbs.html" . }}
{{ end }}
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
{{ .Title | emojify }}
</h1>
</header>
<section class="max-w-full mt-6 prose dark:prose-invert">
{{ .Content | emojify }}
</section>
<footer class="pt-8">
{{ partial "sharing-links.html" . }}
</footer>
</article>
{{ end }}