diff options
| author | Mark Pitman <mark@pitman.bz> | 2015-07-08 10:42:24 +0300 |
|---|---|---|
| committer | Mark Pitman <mark@pitman.bz> | 2015-07-08 10:47:04 +0300 |
| commit | a76fda6810ad7f115bcc0ff099a7a045662dcf7a (patch) | |
| tree | f76e97cdc89b5972b89151e7129d8871a44ca629 | |
| parent | e1efac013b317598548367c40cdb57e101c3322a (diff) | |
Implemented paging
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | layouts/index.html | 3 | ||||
| -rw-r--r-- | layouts/partials/pagination.html | 9 | ||||
| -rw-r--r-- | static/css/main.css | 41 |
4 files changed, 53 insertions, 1 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1377554 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.swp diff --git a/layouts/index.html b/layouts/index.html index 360647b..17de6dc 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,11 +1,12 @@ {{ partial "header.html" . }} <div class="article-list"> - {{ range $index, $page := .Site.Pages }} + {{ range $index, $page := .Paginator.Pages }} {{ if ne $index 0 }} <hr/> {{ end }} {{ .Render "li" }} {{ end }} </div> +{{ partial "pagination.html" .Paginator }} {{ partial "footer.html" . }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..0eb437e --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,9 @@ +<nav class="pagination" role="navigation"> +{{if .HasPrev}} + <a class="newer-posts" href="{{ .Prev.URL }}">« Newer Posts</a> +{{end}} + <span class="page-number">Page {{ .PageNumber }} of {{.TotalPages}}</span> +{{if .HasNext}} + <a class="older-posts" href="{{ .Next.URL }}">Older Posts »</a> +{{end}} +</nav> diff --git a/static/css/main.css b/static/css/main.css index f470408..b5fdc48 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -216,6 +216,47 @@ a.btn-back { color: rgba(255, 255, 255, 1.0); } +/* Pagination */ + +.pagination +{ + width: 720px; + text-align: center; +} + +.older-posts,.newer-posts +{ + display: inline!important; + border: 1px solid #ddd; + border-radius: 15px; + text-decoration: none; + transition: border .3s ease; + padding: 5px 14px; +} + +.page-number +{ + display: inline-block; + min-width: 100px; + padding: 2px 0; +} + +.newer-posts +{ + float: left; +} + +.older-posts +{ + float: right; +} + +.older-posts:hover,.newer-posts:hover +{ + color: #889093; + border-color: #98a0a4; +} + /* Override some of Bootstrap's styles */ pre { |