need display rest post starting from count

[uneven fulcrum]

---

import Layout from '../../layouts/Layout.astro'
import Search from '../../components/ui/Search.astro'
import Tag from '../../components/ui/Tag.astro'
import Card from '../../components/cards/_post-card.astro'
import Pagination from '../../components/ui/Pagination.astro'
import TopPosts from './_top-posts.astro'

export async function getStaticPaths({ paginate }) {
const allPosts = Object.values(
import.meta.glob('../../md/blog/*.md', { eager: true })
)
return paginate(allPosts, { pageSize: 6 })
}

const { page } = Astro.props

const bgImg = '/assets/img/bg/blog.jpg'
const bgFill = 'contain'

const title = 'Блог'

const count = 2

<Layout bg={{ bgImg: bgImg, bgFill: bgFill }}>
<section class="section hero">
<div class="container text-center">
<h1>{title}</h1>
<Search />
</div>
</section>
<section class="section page-container">
<div class="container">
<div class="">
<section class="mb-4">
<h2>Последнее</h2>
<TopPosts count={count} />
</section>
<section>
<h2>Все посты</h2>

                <div class="cards">
                    {
                        page.data
                            .slice(count)
                            .map((item) => <Card data={item.frontmatter} />)
                    }
                </div>

                <Pagination page={page} />
            </section>
        </div>
    </div>
</section>

</Layout>

[queen arch]

Hi @uneven fulcrum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I see you're trying to display blog posts in your Astro project, specifically showing all posts except the first few (which are displayed separately in a "TopPosts" component).

Your code is almost correct! The issue is in how you're trying to filter the posts. You're using slice(count) to skip the first count (2) posts, but this approach has a problem with pagination because page.data only contains the posts for the current page (6 per page as defined in your pageSize).

When using Astro's pagination, each page gets its own subset of data. For example:

• Page 1 gets posts 1-6
• Page 2 gets posts 7-12
• And so on

To properly implement what you want, you have two main options:

Option 1: Modify your pagination approach

export async function getStaticPaths({ paginate }) {
    const allPosts = Object.values(
        import.meta.glob('../../md/blog/*.md', { eager: true })
    )
    
    // Get top posts for separate display
    const topPosts = allPosts.slice(0, count);
    // Get remaining posts for pagination
    const remainingPosts = allPosts.slice(count);
    
    return paginate(remainingPosts, { pageSize: 6 })
}

Option 2: Keep your current approach but handle the first page specially

<div class="cards">
    {
        page.currentPage === 1 
            ? page.data.slice(count).map((item) => <Card data={item.frontmatter} />)
            : page.data.map((item) => <Card data={item.frontmatter} />)
    }
</div>

The second approach works because on the first page, you'd show the top posts separately and then only the remaining posts from page.data. On subsequent pages, you'd show all posts from page.data.

For more information about pagination in Astro, you can refer to the Pagination documentation which explains how the page prop works and how to implement pagination in your Astro project.

GitHub Copilot:

I see you're trying to display blog posts in your Astro project, specifically showing all posts except the first few (which are displayed separately in a "TopPosts" component).

Your code is almost correct! The issue is in how you're trying to filter the posts. You're using slice(count) to skip the first count (2) posts, but this approach has a problem with pagination because page.data only contains the posts for the current page (6 per page as defined in your pageSize).

When using Astro's pagination, each page gets its own subset of data. For example:

• Page 1 gets posts 1-6
• Page 2 gets posts 7-12
• And so on

To properly implement what you want, you have two main options:

Option 1: Modify your pagination approach

export async function getStaticPaths({ paginate }) {
    const allPosts = Object.values(
        import.meta.glob('../../md/blog/*.md', { eager: true })
    )
    
    // Get top posts for separate display
    const topPosts = allPosts.slice(0, count);
    // Get remaining posts for pagination
    const remainingPosts = allPosts.slice(count);
    
    return paginate(remainingPosts, { pageSize: 6 })
}

Option 2: Keep your current approach but handle the first page specially

<div class="cards">
    {
        page.currentPage === 1 
            ? page.data.slice(count).map((item) => <Card data={item.frontmatter} />)
            : page.data.map((item) => <Card data={item.frontmatter} />)
    }
</div>

The second approach works because on the first page, you'd show the top posts separately and then only the remaining posts from page.data. On subsequent pages, you'd show all posts from page.data.

For more information about pagination in Astro, you can refer to the Pagination documentation which explains how the page prop works and how to implement pagination in your Astro project.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: