Use images instead of featuredImg

`featuredImg` and `bgImg` are preserved in case you want to use a different background image from metadata images
This commit is contained in:
Track3 2018-12-31 20:03:32 +08:00
parent f5b68c452f
commit 4b2192f2fa
6 changed files with 41 additions and 16 deletions

View file

@ -101,7 +101,7 @@ You can reference as many stylesheets as you want. Their paths need to be relati
#### Code injection #### Code injection
You can inject any html code to every page's document head or right above the closing body tag. This makes it easier to add any html meta data, custom css/js, dns-prefetch etc. To do this you simplely need to creat a file at site's `layouts/partials/extra-head.html` or `layouts/partials/extra-foot.html`, code inside will be injected to every page. You can inject any html code to every page's document head or right above the closing body tag. This makes it easier to add any html meta data, custom css/js, dns-prefetch etc. To do this you simply need to create a file at site's `layouts/partials/extra-head.html` or `layouts/partials/extra-foot.html`, code inside will be injected to every page.
## Acknowledgments ## Acknowledgments

View file

@ -3,8 +3,8 @@ title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }} date: {{ .Date }}
draft: true draft: true
toc: false toc: false
featuredImg: "" images:
tags: tags:
- tag - untagged
--- ---

View file

@ -6,7 +6,7 @@ theme = "hermit"
# enableGitInfo = true # enableGitInfo = true
pygmentsCodefences = true pygmentsCodefences = true
pygmentsUseClasses = true pygmentsUseClasses = true
hasCJKLanguage = true # If there're Chinese/Japanese/Korean Languages in the content, enable this. # hasCJKLanguage = true # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
rssLimit = 10 # Maximum number of items in the RSS feed. rssLimit = 10 # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template. copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/functions/emojify/ enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
@ -29,13 +29,24 @@ enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/func
dateformNum = "2006-01-02" dateformNum = "2006-01-02"
dateformNumTime = "2006-01-02 15:04 -0700" dateformNumTime = "2006-01-02 15:04 -0700"
# themeColor = "#494f5c" # Theme color in meta tags. # Metadata mostly used in document's head
# description = ""
# images = [""]
themeColor = "#494f5c"
homeSubtitle = "A minimal and fast theme for Hugo." homeSubtitle = "A minimal and fast theme for Hugo."
footerCopyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>' footerCopyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
# gitUrl = "https://github.com/Someone/SomeRepo/commit/" # Prefix of link to the git commit detail page. GitInfo must be enabled. # bgImg = "" # Homepage background-image URL
justifyContent = false # Set "text-align: justify" to .content, requires extended version of Hugo
# bgImg = "" # Homepage background-image URL # Prefix of link to the git commit detail page. GitInfo must be enabled.
# customCSS = ["css/foo.css", "css/bar.css"] # add custom css # gitUrl = "https://github.com/username/repository/commit/"
# Toggle this option need to rebuild SCSS, requires extended version of Hugo
justifyContent = false # Set "text-align: justify" to .content.
# Add custom css
# customCSS = ["css/foo.css", "css/bar.css"]
# Social Icons # Social Icons
# Check https://github.com/Track3/hermit#social-icons for more info. # Check https://github.com/Track3/hermit#social-icons for more info.
[[params.social]] [[params.social]]

View file

@ -2,7 +2,8 @@
title: "Post With Featured Image" title: "Post With Featured Image"
date: 2018-10-01T16:15:09+08:00 date: 2018-10-01T16:15:09+08:00
draft: false draft: false
featuredImg: "https://picsum.photos/1024/768/?random" images:
- https://picsum.photos/1024/768/?random
tags: tags:
- Demo - Demo
- Image - Image
@ -13,5 +14,10 @@ Just define the image URL in the contents front matter, the featured image wi
For example: For example:
```yaml ```yaml
featuredImg: "https://picsum.photos/1024/768/?random" ---
images:
- https://picsum.photos/1024/768/?random
---
``` ```
This is an array, you can set multiple urls, only the first url will be used. These images is also used in [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) and the [Open Graph](http://ogp.me/) metadata.

View file

@ -1,6 +1,10 @@
{{ define "main" }} {{ define "main" }}
{{- with .Site.Params.bgImg }} {{- if .Site.Params.bgImg }}
<div class="bg-img" style="background-image: url('{{ . }}')"></div> <div class="bg-img" style="background-image: url({{.Site.Params.bgImg}});"></div>
{{- else if .Site.Params.images }}
{{- range first 1 .Site.Params.images }}
<div class="bg-img" style="background-image: url({{.}});"></div>
{{- end }}
{{- end }} {{- end }}
<div id="spotlight" class="animated fadeIn"> <div id="spotlight" class="animated fadeIn">
<div id="home-center"> <div id="home-center">

View file

@ -3,9 +3,13 @@
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
{{- with .Params.featuredImg }} {{- if .Params.featuredImg }}
<div id="bg-img" class="bg-img" style="background-image: url({{.Params.featuredImg}});" onclick="showContent()"></div>
{{- else if .Params.images }}
{{- range first 1 .Params.images }}
<div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div> <div id="bg-img" class="bg-img" style="background-image: url({{.}});" onclick="showContent()"></div>
{{- end }} {{- end }}
{{- end }}
<main class="site-main section-inner animated fadeIn faster"> <main class="site-main section-inner animated fadeIn faster">
<article class="thin"> <article class="thin">
<header class="post-header"> <header class="post-header">
@ -51,7 +55,7 @@
{{- end }} {{- end }}
</div> </div>
<div id="comments" class="thin"> <div id="comments" class="thin">
{{ partial "comments.html" . }} {{- partial "comments.html" . -}}
</div> </div>
</main> </main>
{{ end }} {{ end }}