Convert home default layout into paige/home layout
This commit is contained in:
Will Faught
39
README.md
39
README.md
@@ -253,13 +253,6 @@ paige:
|
||||
menu:
|
||||
breakpoint: "sm" # Bootstrap breakpoint at which to display all menu items
|
||||
style: "pills" # Must be "links" or "pills"
|
||||
home:
|
||||
blurb: "" # Displayed below the greeting
|
||||
greeting: "" # Displayed below the image
|
||||
image:
|
||||
raw: false # Do not copy or process the file
|
||||
stretch: false # Stretch the image fully horizontally if true; center the image otherwise
|
||||
url: "" # Local or remote resource glob
|
||||
list:
|
||||
authors:
|
||||
class: "mb-0 text-center text-secondary"
|
||||
@@ -337,11 +330,6 @@ paige:
|
||||
web_master: ""
|
||||
search:
|
||||
hide_page: false
|
||||
social:
|
||||
examplesite:
|
||||
bootstrap_icon: "" # Example is "example-icon"
|
||||
name: "" # Example is "Example"
|
||||
url: "" # Example is "https://example.com/username"
|
||||
```
|
||||
|
||||
The assigned values shown are the default values.
|
||||
@@ -400,6 +388,33 @@ paige:
|
||||
|
||||
## Layouts
|
||||
|
||||
## Home
|
||||
|
||||
The `paige/home` layout provides a home page.
|
||||
|
||||
Example `content/_index.md`:
|
||||
|
||||
```yaml
|
||||
layout: "paige/home"
|
||||
paige:
|
||||
home:
|
||||
blurb: "" # Displayed below the greeting
|
||||
greeting: "" # Displayed below the image
|
||||
image:
|
||||
raw: false # Do not copy or process the file
|
||||
stretch: false # Stretch the image fully horizontally if true; center the image otherwise
|
||||
url: "" # Local or remote resource glob
|
||||
social:
|
||||
examplesite:
|
||||
bootstrap_icon: "" # Example is "example-icon"
|
||||
name: "" # Example is "Example"
|
||||
url: "" # Example is "https://example.com/username"
|
||||
```
|
||||
|
||||
The assigned values shown are the default values.
|
||||
|
||||
## Search
|
||||
|
||||
The `paige/search` layout provides full site search.
|
||||
|
||||
Example `config.yaml`:
|
||||
|
||||
@@ -56,88 +56,6 @@ params:
|
||||
authors:
|
||||
michael_bluth:
|
||||
name: Michael Bluth
|
||||
paige:
|
||||
social:
|
||||
discord:
|
||||
bootstrap_icon: discord
|
||||
name: Discord
|
||||
url: https://discord.com/users/username
|
||||
dribbble:
|
||||
bootstrap_icon: dribbble
|
||||
name: Dribbble
|
||||
url: https://dribbble.com/username
|
||||
email:
|
||||
bootstrap_icon: envelope
|
||||
name: E-mail
|
||||
url: mailto:username@example.com
|
||||
facebook:
|
||||
bootstrap_icon: facebook
|
||||
name: Facebook
|
||||
url: https://facebook.com/username
|
||||
github:
|
||||
bootstrap_icon: github
|
||||
name: GitHub
|
||||
url: https://github.com/username
|
||||
instagram:
|
||||
bootstrap_icon: instagram
|
||||
name: Instagram
|
||||
url: https://instagram.com/username
|
||||
linkedin:
|
||||
bootstrap_icon: linkedin
|
||||
name: LinkedIn
|
||||
url: https://linkedin.com/in/username
|
||||
medium:
|
||||
bootstrap_icon: medium
|
||||
name: Medium
|
||||
url: https://medium.com/@username
|
||||
pinterest:
|
||||
bootstrap_icon: pinterest
|
||||
name: Pinterest
|
||||
url: https://pinterest.com/username
|
||||
quora:
|
||||
bootstrap_icon: quora
|
||||
name: Quora
|
||||
url: https://quora.com/profile/username
|
||||
reddit:
|
||||
bootstrap_icon: reddit
|
||||
name: Reddit
|
||||
url: https://reddit.com/u/username
|
||||
spotify:
|
||||
bootstrap_icon: spotify
|
||||
name: Spotify
|
||||
url: https://open.spotify.com/user/username
|
||||
stackoverflow:
|
||||
bootstrap_icon: stack-overflow
|
||||
name: Stack Overflow
|
||||
url: https://stackoverflow.com/users/username
|
||||
strava:
|
||||
bootstrap_icon: strava
|
||||
name: Strava
|
||||
url: https://strava.com/athletes/username
|
||||
twitch:
|
||||
bootstrap_icon: twitch
|
||||
name: Twitch
|
||||
url: https://twitch.tv/username
|
||||
twitter:
|
||||
bootstrap_icon: twitter
|
||||
name: Twitter
|
||||
url: https://twitter.com/username
|
||||
vimeo:
|
||||
bootstrap_icon: vimeo
|
||||
name: Vimeo
|
||||
url: https://vimeo.com/username
|
||||
wordpress:
|
||||
bootstrap_icon: wordpress
|
||||
name: Wordpress
|
||||
url: https://username.wordpress.com
|
||||
yelp:
|
||||
bootstrap_icon: yelp
|
||||
name: Yelp
|
||||
url: https://yelp.com/user_details?userid=username
|
||||
youtube:
|
||||
bootstrap_icon: youtube
|
||||
name: YouTube
|
||||
url: https://youtube.com/user/username
|
||||
social:
|
||||
twitter: username
|
||||
theme: paige
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
---
|
||||
description: Go ahead, touch the Cornballer
|
||||
description: Powerful, pliable pixel perfection.
|
||||
layout: paige/home
|
||||
paige:
|
||||
home:
|
||||
blurb: There's a new daddy in town. A discipline daddy. If I make this comeback, I'll buy you a hundred George Michaels that you can teach to drive! These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. We'll have to find something to do so that people can look at you without wanting to kill [themselves](https://bluthipsum.com).
|
||||
greeting: You know [best](https://www.youtube.com/watch?v=1WDW8XKEGgU)
|
||||
blurb: Paige is designed to put your content front and center, avoiding the typical clutter. The look is seamless and smooth, scalable and readable, portable and efficient. The layout is minimal and responsive, using verticality and white space to focus and delineate parts of the page. The implementation is flexible and extensible. It's a versatile canvas that serves most web needs. Welcome to the last Hugo theme you'll probably ever need.
|
||||
greeting: An advanced Hugo theme
|
||||
image:
|
||||
stretch: true
|
||||
url: landscape.webp
|
||||
@@ -13,9 +14,12 @@ paige:
|
||||
hide: true
|
||||
title:
|
||||
class: display-1 fw-bold text-center
|
||||
title: No Borders, No Limits
|
||||
social:
|
||||
github:
|
||||
bootstrap_icon: github
|
||||
name: GitHub
|
||||
url: https://github.com/willfaught/paige
|
||||
title: Paige
|
||||
---
|
||||
|
||||
<p class="lead text-center">
|
||||
<a href="https://github.com/willfaught/paige">Paige: Powerful, pliable pixel perfection. An advanced Hugo theme.</a>
|
||||
</p>
|
||||
<a class="lead" href="https://github.com/willfaught/paige">Install it now.</a>
|
||||
|
||||
227
exampleSite/content/layouts/home.md
Normal file
227
exampleSite/content/layouts/home.md
Normal file
@@ -0,0 +1,227 @@
|
||||
---
|
||||
authors: ["michael_bluth"]
|
||||
categories: ["paige"]
|
||||
date: "2023-02-22"
|
||||
description: "Demonstration of the Paige home layout."
|
||||
layout: "paige/home"
|
||||
paige:
|
||||
home:
|
||||
blurb: "This is the blurb."
|
||||
greeting: "This is the greeting"
|
||||
image:
|
||||
raw: false
|
||||
stretch: false
|
||||
url: "landscape.webp"
|
||||
main:
|
||||
metadata:
|
||||
authors:
|
||||
hide: true
|
||||
date:
|
||||
hide: true
|
||||
reading_time:
|
||||
hide: true
|
||||
terms:
|
||||
hide: true
|
||||
title:
|
||||
class: "display-1 fw-bold text-center"
|
||||
social:
|
||||
discord:
|
||||
bootstrap_icon: "discord"
|
||||
name: "Discord"
|
||||
url: "https://discord.com/users/username"
|
||||
dribbble:
|
||||
bootstrap_icon: "dribbble"
|
||||
name: "Dribbble"
|
||||
url: "https://dribbble.com/username"
|
||||
email:
|
||||
bootstrap_icon: "envelope"
|
||||
name: "E-mail"
|
||||
url: "mailto:username@example.com"
|
||||
facebook:
|
||||
bootstrap_icon: "facebook"
|
||||
name: "Facebook"
|
||||
url: "https://facebook.com/username"
|
||||
github:
|
||||
bootstrap_icon: "github"
|
||||
name: "GitHub"
|
||||
url: "https://github.com/username"
|
||||
instagram:
|
||||
bootstrap_icon: "instagram"
|
||||
name: "Instagram"
|
||||
url: "https://instagram.com/username"
|
||||
linkedin:
|
||||
bootstrap_icon: "linkedin"
|
||||
name: "LinkedIn"
|
||||
url: "https://linkedin.com/in/username"
|
||||
medium:
|
||||
bootstrap_icon: "medium"
|
||||
name: "Medium"
|
||||
url: "https://medium.com/@username"
|
||||
pinterest:
|
||||
bootstrap_icon: "pinterest"
|
||||
name: "Pinterest"
|
||||
url: "https://pinterest.com/username"
|
||||
quora:
|
||||
bootstrap_icon: "quora"
|
||||
name: "Quora"
|
||||
url: "https://quora.com/profile/username"
|
||||
reddit:
|
||||
bootstrap_icon: "reddit"
|
||||
name: "Reddit"
|
||||
url: "https://reddit.com/u/username"
|
||||
spotify:
|
||||
bootstrap_icon: "spotify"
|
||||
name: "Spotify"
|
||||
url: "https://open.spotify.com/user/username"
|
||||
stackoverflow:
|
||||
bootstrap_icon: "stack-overflow"
|
||||
name: "Stack Overflow"
|
||||
url: "https://stackoverflow.com/users/username"
|
||||
strava:
|
||||
bootstrap_icon: "strava"
|
||||
name: "Strava"
|
||||
url: "https://strava.com/athletes/username"
|
||||
twitch:
|
||||
bootstrap_icon: "twitch"
|
||||
name: "Twitch"
|
||||
url: "https://twitch.tv/username"
|
||||
twitter:
|
||||
bootstrap_icon: "twitter"
|
||||
name: "Twitter"
|
||||
url: "https://twitter.com/username"
|
||||
vimeo:
|
||||
bootstrap_icon: "vimeo"
|
||||
name: "Vimeo"
|
||||
url: "https://vimeo.com/username"
|
||||
wordpress:
|
||||
bootstrap_icon: "wordpress"
|
||||
name: "Wordpress"
|
||||
url: "https://username.wordpress.com"
|
||||
yelp:
|
||||
bootstrap_icon: "yelp"
|
||||
name: "Yelp"
|
||||
url: "https://yelp.com/user_details?userid=username"
|
||||
youtube:
|
||||
bootstrap_icon: "youtube"
|
||||
name: "YouTube"
|
||||
url: "https://youtube.com/user/username"
|
||||
title: "Home Layout"
|
||||
---
|
||||
|
||||
Paige provides a `paige/home` layout for a home page.
|
||||
|
||||
<!--more-->
|
||||
|
||||
These are the parameters for this page:
|
||||
|
||||
```yaml
|
||||
---
|
||||
authors: ["michael_bluth"]
|
||||
categories: ["paige"]
|
||||
date: "2023-02-22"
|
||||
description: "Demonstration of the Paige home layout."
|
||||
layout: "paige/home"
|
||||
paige:
|
||||
home:
|
||||
blurb: "This is the blurb."
|
||||
greeting: "This is the greeting"
|
||||
image:
|
||||
raw: false
|
||||
stretch: false
|
||||
url: "landscape.webp"
|
||||
main:
|
||||
metadata:
|
||||
authors:
|
||||
hide: true
|
||||
date:
|
||||
hide: true
|
||||
reading_time:
|
||||
hide: true
|
||||
terms:
|
||||
hide: true
|
||||
title:
|
||||
class: "display-1 fw-bold text-center"
|
||||
social:
|
||||
discord:
|
||||
bootstrap_icon: "discord"
|
||||
name: "Discord"
|
||||
url: "https://discord.com/users/username"
|
||||
dribbble:
|
||||
bootstrap_icon: "dribbble"
|
||||
name: "Dribbble"
|
||||
url: "https://dribbble.com/username"
|
||||
email:
|
||||
bootstrap_icon: "envelope"
|
||||
name: "E-mail"
|
||||
url: "mailto:username@example.com"
|
||||
facebook:
|
||||
bootstrap_icon: "facebook"
|
||||
name: "Facebook"
|
||||
url: "https://facebook.com/username"
|
||||
github:
|
||||
bootstrap_icon: "github"
|
||||
name: "GitHub"
|
||||
url: "https://github.com/username"
|
||||
instagram:
|
||||
bootstrap_icon: "instagram"
|
||||
name: "Instagram"
|
||||
url: "https://instagram.com/username"
|
||||
linkedin:
|
||||
bootstrap_icon: "linkedin"
|
||||
name: "LinkedIn"
|
||||
url: "https://linkedin.com/in/username"
|
||||
medium:
|
||||
bootstrap_icon: "medium"
|
||||
name: "Medium"
|
||||
url: "https://medium.com/@username"
|
||||
pinterest:
|
||||
bootstrap_icon: "pinterest"
|
||||
name: "Pinterest"
|
||||
url: "https://pinterest.com/username"
|
||||
quora:
|
||||
bootstrap_icon: "quora"
|
||||
name: "Quora"
|
||||
url: "https://quora.com/profile/username"
|
||||
reddit:
|
||||
bootstrap_icon: "reddit"
|
||||
name: "Reddit"
|
||||
url: "https://reddit.com/u/username"
|
||||
spotify:
|
||||
bootstrap_icon: "spotify"
|
||||
name: "Spotify"
|
||||
url: "https://open.spotify.com/user/username"
|
||||
stackoverflow:
|
||||
bootstrap_icon: "stack-overflow"
|
||||
name: "Stack Overflow"
|
||||
url: "https://stackoverflow.com/users/username"
|
||||
strava:
|
||||
bootstrap_icon: "strava"
|
||||
name: "Strava"
|
||||
url: "https://strava.com/athletes/username"
|
||||
twitch:
|
||||
bootstrap_icon: "twitch"
|
||||
name: "Twitch"
|
||||
url: "https://twitch.tv/username"
|
||||
twitter:
|
||||
bootstrap_icon: "twitter"
|
||||
name: "Twitter"
|
||||
url: "https://twitter.com/username"
|
||||
vimeo:
|
||||
bootstrap_icon: "vimeo"
|
||||
name: "Vimeo"
|
||||
url: "https://vimeo.com/username"
|
||||
wordpress:
|
||||
bootstrap_icon: "wordpress"
|
||||
name: "Wordpress"
|
||||
url: "https://username.wordpress.com"
|
||||
yelp:
|
||||
bootstrap_icon: "yelp"
|
||||
name: "Yelp"
|
||||
url: "https://yelp.com/user_details?userid=username"
|
||||
youtube:
|
||||
bootstrap_icon: "youtube"
|
||||
name: "YouTube"
|
||||
url: "https://youtube.com/user/username"
|
||||
title: "Home Layout"
|
||||
---
|
||||
```
|
||||
@@ -1,45 +0,0 @@
|
||||
{{ define "main" }}
|
||||
{{ $page := . }}
|
||||
|
||||
{{ $stretch := $page.Param "paige.home.image.stretch" }}
|
||||
|
||||
<article>
|
||||
{{ partial "paige/metadata.html" $page }}
|
||||
|
||||
<section>
|
||||
{{ if $page.Param "paige.home.image.url" }}
|
||||
{{ $class := cond ($stretch | not) "mw-100 rounded-4 shadow" "rounded-4 shadow w-100" }}
|
||||
{{ $style := cond ($stretch | not) "height: 20rem" "height: 20rem; object-fit: cover" }}
|
||||
|
||||
<p {{ if not $stretch }} class="text-center" {{ end }}>
|
||||
{{ partial "paige/img.html" (dict
|
||||
"class" $class
|
||||
"fetchpriority" "high"
|
||||
"loading" "eager"
|
||||
"raw" ($page.Param "paige.home.image.raw")
|
||||
"src" ($page.Param "paige.home.image.url")
|
||||
"style" $style
|
||||
) }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with $page.Param "paige.home.greeting" }}
|
||||
<p class="display-5 fw-bold h2 text-center">{{ . | markdownify }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with $page.Param "paige.home.blurb" }}
|
||||
<div class="container-fluid">
|
||||
<div class="justify-content-center row">
|
||||
<div class="col col-auto col-lg-7 px-0">
|
||||
<p class="lead text-center">{{ . | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
|
||||
{{ partial "paige/toc.html" $page }}
|
||||
{{ partial "paige/content.html" $page }}
|
||||
{{ partial "paige/social.html" $page }}
|
||||
</article>
|
||||
{{ end }}
|
||||
49
layouts/_default/paige/home.html
Normal file
49
layouts/_default/paige/home.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{{ define "main" }}
|
||||
{{ $page := . }}
|
||||
|
||||
{{ $stretch := $page.Params.paige.home.image.stretch }}
|
||||
|
||||
<article class="paige-article">
|
||||
<div class="align-items-center d-flex flex-column mb-0">
|
||||
{{ partial "paige/metadata.html" $page }}
|
||||
|
||||
{{ if or $page.Params.paige.home.image.url $page.Params.paige.home.greeting $page.Params.paige.home.blurb }}
|
||||
<section>
|
||||
{{ if $page.Params.paige.home.image.url }}
|
||||
{{ $class := cond ($stretch | not) "mw-100 rounded-4 shadow" "rounded-4 shadow w-100" }}
|
||||
{{ $style := cond ($stretch | not) "height: 20rem; width: auto" "height: 20rem; object-fit: cover; width: 100%" }}
|
||||
|
||||
<p {{ if not $stretch }} class="text-center" {{ end }}>
|
||||
{{ partial "paige/img.html" (dict
|
||||
"class" $class
|
||||
"fetchpriority" "high"
|
||||
"loading" "eager"
|
||||
"raw" $page.Params.paige.home.image.raw
|
||||
"src" $page.Params.paige.home.image.url
|
||||
"style" $style
|
||||
) }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with $page.Params.paige.home.greeting }}
|
||||
<p class="display-5 fw-bold h2 text-center">{{ . | markdownify }}</p>
|
||||
{{ end }}
|
||||
|
||||
{{ with $page.Params.paige.home.blurb }}
|
||||
<div class="container-fluid">
|
||||
<div class="justify-content-center row">
|
||||
<div class="col col-auto col-lg-7 px-0">
|
||||
<p class="lead text-center">{{ . | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "paige/toc.html" $page }}
|
||||
{{ partial "paige/content.html" $page }}
|
||||
{{ partial "paige/social.html" $page }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
@@ -1,6 +1,14 @@
|
||||
{{ $page := . }}
|
||||
{{ $params := . }}
|
||||
|
||||
{{ with $page.Param "paige.social" }}
|
||||
{{ $key := slice "paige" "social" }}
|
||||
{{ $page := $params }}
|
||||
|
||||
{{ if reflect.IsMap $params }}
|
||||
{{ $key = $params.key | default $key }}
|
||||
{{ $page = $params.page }}
|
||||
{{ end }}
|
||||
|
||||
{{ with index $page.Params $key }}
|
||||
<section>
|
||||
<nav>
|
||||
<div class="mb-3 text-center">
|
||||
|
||||
Reference in New Issue
Block a user