diff options
| author | Gökmen Görgen <gkmngrgn@gmail.com> | 2019-09-15 01:05:14 +0300 |
|---|---|---|
| committer | Gökmen Görgen <gkmngrgn@gmail.com> | 2019-09-15 01:05:14 +0300 |
| commit | 342403d6c6ab705383279ee16c0862b75668af8b (patch) | |
| tree | be6c3f7b7010c1eb5f52615cb1b3adff4ccb6f4d | |
| parent | feb2726a1c6811724a3a97272caeddf7ec89ee2a (diff) | |
pagination support. #16
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | exampleSite/config.toml | 2 | ||||
| -rw-r--r-- | layouts/blog/section.html | 7 | ||||
| -rw-r--r-- | static/css/main.css | 22 |
4 files changed, 29 insertions, 3 deletions
@@ -36,6 +36,7 @@ Websites that are using hugo with alaGeek theme: * Disqus support * Dark-mode support * High accessibility score +* Pagination support in blog posts ## Supported Languages diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b69f2ea..fdde3a9 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -2,7 +2,7 @@ author = "Gökmen Görgen" baseurl = "/" canonifyurls = true copyright = "Copyright © 2008–2018, Steve Francia and the Hugo Authors; all rights reserved." -paginate = 3 +paginate = 5 theme = "alageek" title = "alaGeek Theme" diff --git a/layouts/blog/section.html b/layouts/blog/section.html index c37a5fb..eccfd02 100644 --- a/layouts/blog/section.html +++ b/layouts/blog/section.html @@ -11,14 +11,17 @@ <div class="mx-0 mx-md-4 posts"> <h1>{{ i18n "blog_posts" }}</h1> - <ul class="list-unstyled"> - {{ range .Data.Pages.GroupByDate "Jan, 2006" "desc"}} + + <ul class="mb-5 list-unstyled"> + {{ range (.Paginate (.Pages.GroupByDate "Jan, 2006" "desc")).PageGroups }} <li class="groupby">{{ .Key }}</li> {{ range sort .Pages "Date" "desc" }} {{ partial "list" . }} {{ end }} {{ end }} </ul> + + {{ template "_internal/pagination.html" . }} </div> </div> </div> diff --git a/static/css/main.css b/static/css/main.css index 88a7c3b..b16a207 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -5,6 +5,7 @@ --header-font-color: #333333; --header-link-color: #666666; --footer-link-color: #313537; + --pagination-border-color: #dee2e6; --color-patreon: #dc3545; --color-ko-fi: #dc3545; @@ -28,6 +29,7 @@ --header-font-color: #efefef; --header-link-color: #eaeaea; --footer-link-color: #aaa; + --pagination-border-color: #222222; --color-patreon: #f96854; --color-ko-fi: #df5000; @@ -69,6 +71,26 @@ h6 { color: var(--color-bmc) !important; } +.pagination .page-item .page-link { + background-color: var(--main-bg-color); + border-color: var(--pagination-border-color); + color: var(--main-link-color); +} + +.pagination .page-item .page-link:focus { + box-shadow: 0 0 0 .2rem var(--pagination-border-color); +} + +.pagination .page-item.active .page-link { + background-color: var(--main-link-color); + border-color: var(--main-link-color); + color: var(--main-bg-color); +} + +.pagination .page-item.disabled .page-link { + color: var(--main-font-color); +} + /* Partial: Header */ .header a:hover { text-decoration: none; |