add Show More button to recent articles

This commit is contained in:
Nuno Coração 2022-09-27 00:18:11 +01:00
parent f75b27e0ed
commit 1da283f2ad
4 changed files with 18 additions and 0 deletions

View file

@ -24,6 +24,9 @@ enableCodeCopy = true
[homepage] [homepage]
layout = "profile" # valid options: page, profile, custom layout = "profile" # valid options: page, profile, custom
showRecent = false showRecent = false
showRecentItems = 5
showMoreLink = false
showMoreLinkDest = "/posts"
[article] [article]
showDate = true showDate = true

View file

@ -25,6 +25,8 @@ mainSections = ["docs", "samples"]
layout = "custom" # valid options: page, profile, custom layout = "custom" # valid options: page, profile, custom
showRecent = false showRecent = false
showRecentItems = 5 showRecentItems = 5
showMoreLink = false
showMoreLinkDest = "/docs"
[article] [article]
showDate = true showDate = true

View file

@ -137,6 +137,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
|`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.| |`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.|
|`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.| |`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.|
|`homepage.showRecentItems`|5|How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.| |`homepage.showRecentItems`|5|How many articles to display if showRecent is true. If variable is set to 0 or if it isn't defined the system will default to 5 articles.|
|`homepage.showMoreLink`|'false'|Wether or not to display a show more link at the end of your posts that takes the user to a predefined place.|
|`homepage.showMoreLinkDest`|'/posts'|The destination of the show more button.|
|`article.showDate`|`true`|Whether or not article dates are displayed.| |`article.showDate`|`true`|Whether or not article dates are displayed.|
|`article.showViews`|`false`|Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.| |`article.showViews`|`false`|Whether or not article views are displayed. This requires firebase integrations to be enabled, look below.|
|`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.| |`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.|

View file

@ -1,4 +1,5 @@
{{ $recentArticles := 5 }} {{ $recentArticles := 5 }}
{{ $showMoreLinkDest := "/posts" }}
{{ if .Site.Params.homepage.showRecent | default false }} {{ if .Site.Params.homepage.showRecent | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }} {{ if index .Site.Params.homepage "showRecentItems" }}
{{ $recentArticles = .Site.Params.homepage.showRecentItems }} {{ $recentArticles = .Site.Params.homepage.showRecentItems }}
@ -7,4 +8,14 @@
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }} {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages }}
{{ partial "article-link.html" . }} {{ partial "article-link.html" . }}
{{ end }} {{ end }}
{{ if .Site.Params.homepage.showMoreLink | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
{{ end }}
<div class="flex justify-center">
<a href="{{ $showMoreLinkDest }}">
<button class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show More</button>
</a>
</div>
{{ end }}
{{ end }} {{ end }}