search

transitive-bullshit / nextjs-notion-starter-kit

Deploy your own Notion-powered website in minutes with Next.js and Vercel.
https://transitivebullsh.it/nextjs-notion-starter-kit
MIT License
6.27k stars 5.29k forks source link

Is there any way to show 10 posts per pages? and then we'll click next/prev #179

Open XahidEx opened 3 years ago

XahidEx commented 3 years ago

It'd be phenomenal if a feature could be added. Like we can see 10 posts per page. Then we'll click next, and It'll show up next ten posts. I think It would be nice. Because many of us are posting a lot. Like 50+. Then the page gets slower.

fky2015 commented 2 years ago

IMHO, the core concept of this project is the mapping from a blog page to a Notion page. So it's hard to implement some features like pagination that Notion hasn't provided.

I feel the need for pagination too, so I am trying to create a modified version based on this awesome project. Instead of mapping all the pages, I'm focusing on using Notion as a CMS.

This weaker bound makes me able to add pagination as a traditional blog site. You can see my current progress here. Feel free to borrow some code or leave your thoughts.

Edit: add a link to the source code.

transitive-bullshit commented 2 years ago

@fky2015 this looks awesome ❤️

One related feature that I added to my personal site but isn't in the main branch is the ability to have a tags page which filters the main collection: https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/transitive-bullshit/pages/tags/%5BtagName%5D.tsx

I use this on my site to view posts filtered by the existence of a tag in a multi_select property. Here's an example page showing only posts with the "JavaScript` tag: https://transitivebullsh.it/tags/javascript

It shows how you can use Notion more as a CMS and customize the data after the initial fetch.

fky2015 commented 2 years ago

🤯 Wow, didn't know I can do that! It's a pretty neat way to filter the content without touching the styles.

In this case, an index page with pagination can be implemented in the same way. In addition, the Pagination component can then be used as the pageFooter props.

But there is still a little problem. How can I get the tags in the gallery card link to the actual page? I'm struggling to achieve that in your method. (I apologize for bringing up this irrelevant question; I've filed a new issue here #252.)

Vadorequest commented 2 years ago

Agreed, tags would make it a lot more easier to find content, and one of those tags could be displayed by default, such as "Featured" (currently a checkbox, not a tag).

I saw a PR for tags landed recently, but I'm not so sure on how to use it, if it's usable at all at this time.

luckypoem commented 11 months ago

@fky2015 hi,如何在你网站https://blog-dev.fkynjyq.com/ 的首页的底部显示: https://blog-dev.fkynjyq.com/pages/1的超链? 谢谢回复