Я создаю свою страницу блога для своего веб-сайта, и у меня есть папка сообщений с файлами уценки моих блогов. Я просто выясняю способ отображения всех блогов на странице, но я хочу немного оптимизировать его, чтобы он не пытался загружать все сообщения блога сразу, а, например, только первые 6. А затем, когда вы нажимаете кнопку «Загрузить еще», следующие 6 загружаются и отображаются.
Это код, который я использую для получения данных из моих сообщений в блоге:
async function getBlogPosts(n: number) {
const files = fs.readdirSync('posts');
const posts = files.slice(0, n).map((fileName) => {
const slug = fileName.replace('.md', '');
const readFile = fs.readFileSync(`posts/${fileName}`, 'utf-8');
const { data: frontmatter } = matter(readFile);
return {
slug,
frontmatter,
};
});
return posts;
}
А затем отобразить заголовок сообщений:
export default async function Blogs() {
const posts = await getBlogPosts(6);
return (
<div className = "mx-auto flex">
{posts.map(({ slug, frontmatter }) => (
<div
key = {slug}
className = "m-2 flex flex-col overflow-hidden rounded-xl border border-gray-200 shadow-lg"
>
<Link href = {`/blog/${slug}`}>
<h3 className = "p-4">{frontmatter.title}</h3>
</Link>
</div>
))}
</div>
);
}
Как бы это реализовать?
Потому что я думаю, что если бы я позвонил GetBlogPosts(12)
, он загрузил бы 12 сообщений, а также первые 6, которые уже были загружены.
🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.
Ваш код идеален. Просто реализуйте разбиение на страницы во время метода среза, увеличивайте количество страниц по мере того, как пользовательские клики показывают больше. и нарезать только данные НЕОБХОДИМЫЕ ФАЙЛЫ.
Ваш код будет выглядеть так:
async function getBlogPosts(blogsPerPage:number, pageNumber:number) {
const files = fs.readdirSync('posts');
!IMPORTANT. sort files array here before slicing, so we wont get repeated posts...
const posts = files.slice((pageNumber-1)* blogsPerPage,pageNumber*blogsPerPage).map((fileName) => {
const slug = fileName.replace('.md', '');
const readFile = fs.readFileSync(`posts/${fileName}`, 'utf-8');
const { data: frontmatter } = matter(readFile);
return {
slug,
frontmatter,
};
});
return posts;
}
Теперь вы можете реализовать состояние в своем функциональном компоненте и вызвать эту функцию примерно так:
export default async function Blogs() {
const [pageNumber, setPageNumber] = useState(0);
const posts = await getBlogPosts(6,pageNumber);
......
}