Comments (4)
Hi,
I assume you are asking about pagination for listing of posts in the home page. It can be easily achieved with normal Hugo pagination techniques.
What you need to do is go to hyde-hyde/layouts/index.html
, then look for the code that walks through the posts and prints out each post's info.
{{ range (where .Data.Pages "Type" "not in" (slice "about" "portfolio")).GroupBy "Section" -}}
...
{{ end }}
should be changed to something like this.
{{ range (.Paginate (where .Data.Pages "Type" "not in" (slice "about" "portfolio"))).Pages -}}
...
{{ end }}
{{ template "_internal/pagination.html" . }}
Hope this works as I'm traveling and have not tried in my setting yet.
Update 2018-07-12:
- Sorry, the previous code does not work. I updated the working code.
from hyde-hyde.
As I haven't heard from you, I will close this issue for now. Please reopen or ask further if you wish.
from hyde-hyde.
Hi @htr3n, since version 2.0 this part has been rewrittent, as I'm new to hugo, I wonder
how to make pagination working. I've identified two template to override
-
layouts/partials/posts-list.html
I'm not sure how to replace this template directive{{ range . }}
with a.Paginate
function, idea comming from this discussion. Hugo always fail to render with my tries. -
layouts/partials/page-list/content.html
I just looked at this file to see what the.
was about it seems it is a.Data.Pages
Ive tried many different thing but this usually ends in something like execute of template failed: template: partials/posts-list.html:1:10: executing "partials/posts-list.html" at <.Paginate>: can't evaluate field Paginate in type page.Pages
Do you have any clue or tips to make pagination work for posts page?
from hyde-hyde.
Just in case I found a solution, maybe not the best, but it works :
These files needs to be copied over the root of the Hugo site with the same relative path. And modify them as needed
layouts/partials/page-list/content.html
--- 1/themes/hyde-hyde/layouts/partials/page-list/content.html
+++ 2/layouts/partials/page-list/content.html
@@ -1,6 +1,4 @@
<span class="section__title">{{ .Title }}</span>
<ul class="posts">
- {{ with .Data.Pages }}
- {{ partial "posts-list.html" . }}
- {{ end }}
-</ul>
+ {{ partial "posts-list.html" . }}
+</ul>
layouts/partials/posts-list.html
--- 1/themes/hyde-hyde/layouts/partials/posts-list.html
+++ 2/layouts/partials/posts-list.html
@@ -1,6 +1,7 @@
-{{ range . }}
+{{ $paginator := .Paginate (where .Pages "Type" "in" "posts") }}
+{{ template "_internal/pagination.html" . }}
+<br/>
+{{ range $paginator.Pages }}
<li>
<a href="{{ .RelPermalink }}" {{if .Draft}}class="draft"{{end}}>{{ .Title }}</a>
{{if not .Date.IsZero}}
<time class="pull-right hidden-tablet">{{ .Date.Format (.Site.Params.dateformat | default "Jan 02 '06") }}</time>
@@ -8,3 +9,4 @@
</span>
</li>
{{ end }}
+<br/>
+{{ template "_internal/pagination.html" . }}
Here I’m using the Hugo internal template for pagination but one can image using a custom template. The .Paginate
directive was taken from pagination doc, however the doc have a slight issue, the where query
needs to be where .Pages “Type” “in” “posts”
keyword.
from hyde-hyde.
Related Issues (20)
- Font Awesome 5 file is too big HOT 2
- Ability to use a different font HOT 2
- Google Analytics don't colect data HOT 2
- build error with hugo v0.71.1 HOT 2
- Upstreaming Improvements From My Site HOT 4
- Not able to Modify HOT 1
- Add author to post HOT 1
- Show categories? HOT 1
- Bottom-based sidebar? `sidebarSticky = true` doesn't seem to work HOT 1
- Look for new maintainers? HOT 1
- Sidebar width HOT 1
- How to add custom css and author image broken HOT 1
- how to sink sidebar contents to the bottom? HOT 1
- sidebar contents always stick at top no matter the value of params.sidebarSticky
- Adding Bootstrap to hyde-hyde HOT 1
- Change home page layout to /posts
- My home page using hyde-hyde is blank HOT 2
- Add support for Google Analytics v4 HOT 1
- how to add LaTeX math expressions?
- Your theme is removed? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hyde-hyde.