Насторил работу блога через Backend
This commit is contained in:
Web-serfer
parent
014439d565
commit
edd730b438
33 changed files with 1019 additions and 200 deletions
|
|
@ -4,16 +4,10 @@ import { SITE_URL } from '@constants';
|
|||
import PostCommentForm from '@components/blog/PostCommentForm.astro';
|
||||
import RelatedPosts from '@components/blog/RelatedPosts.astro';
|
||||
import ArticleTableOfContents from '@components/blog/ArticleTableOfContents.astro';
|
||||
import { getCollection, getEntry, render } from 'astro:content';
|
||||
import { getPostBySlug, getPosts } from '@lib/pb';
|
||||
import { marked } from 'marked';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog') as { id: string; data: Record<string, any> }[];
|
||||
return posts.map((post: { id: string }) => ({
|
||||
params: { slug: post.id },
|
||||
}));
|
||||
}
|
||||
export const prerender = false;
|
||||
|
||||
const slug = Astro.params.slug;
|
||||
|
||||
|
|
@ -21,87 +15,77 @@ if (!slug) {
|
|||
return Astro.redirect('/blog');
|
||||
}
|
||||
|
||||
const post = await getEntry('blog', slug);
|
||||
const post = await getPostBySlug(slug);
|
||||
|
||||
if (!post) {
|
||||
return Astro.redirect('/blog');
|
||||
}
|
||||
|
||||
const { Content } = await render(post);
|
||||
// Конвертируем markdown в HTML
|
||||
const contentHtml = marked(post.content || '');
|
||||
|
||||
// Извлекаем заголовки из MDX тела для оглавления
|
||||
const body = post.body || '';
|
||||
// Извлекаем заголовки для оглавления
|
||||
const headingRegex = /^(#{2,3})\s+(.+)$/gm;
|
||||
const tocItems: { id: string; text: string; level: number }[] = [];
|
||||
const body = post.content || '';
|
||||
let match;
|
||||
let headingIndex = 0;
|
||||
while ((match = headingRegex.exec(body)) !== null) {
|
||||
const level = match[1].length;
|
||||
const text = match[2].trim();
|
||||
// Генерируем ID из текста заголовка
|
||||
const id = text.toLowerCase()
|
||||
.replace(/[^\w\s-]/g, '')
|
||||
.replace(/\s+/g, '-');
|
||||
tocItems.push({ level, id: `heading-${headingIndex++}`, text });
|
||||
}
|
||||
|
||||
console.log('=== TOC ITEMS ===', tocItems);
|
||||
|
||||
// Форматируем дату
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
// Логика авторизации (пока статичная переменная)
|
||||
const isAuthorized = false;
|
||||
// Для related posts берем те же категории
|
||||
const { posts: relatedPosts } = await getPosts({ perPage: 4, category: post.category });
|
||||
const filteredRelated = relatedPosts.filter(p => p.slug !== slug).slice(0, 3);
|
||||
|
||||
// URL текущей страницы
|
||||
const currentUrl = `${SITE_URL}/blog/${post.id}`;
|
||||
|
||||
// Получаем все посты для блока "Читайте также"
|
||||
const allPosts = await getCollection('blog');
|
||||
const currentUrl = `${SITE_URL}/blog/${slug}`;
|
||||
---
|
||||
|
||||
<ArticleLayout
|
||||
title={`${post.data.title} — автоюрист в Сургуте`}
|
||||
description={post.data.description}
|
||||
canonicalLink={`${SITE_URL}/blog/${post.id}`}
|
||||
title={`${post.title} — автоюрист в Сургуте`}
|
||||
description={post.description}
|
||||
canonicalLink={`${SITE_URL}/blog/${slug}`}
|
||||
breadcrumbs={[
|
||||
{ label: 'Главная', href: '/' },
|
||||
{ label: 'Блог', href: '/blog' },
|
||||
{ label: post.data.title }
|
||||
{ label: post.title }
|
||||
]}
|
||||
heroImage={post.data.imageUrl}
|
||||
heroAlt={post.data.title}
|
||||
category={post.data.category}
|
||||
postTitle={post.data.title}
|
||||
date={formatDate(post.data.date)}
|
||||
author={post.data.author}
|
||||
readTime={post.data.readTime}
|
||||
heroImage={post.imageUrl}
|
||||
heroAlt={post.title}
|
||||
category={post.category}
|
||||
postTitle={post.title}
|
||||
date={formatDate(post.date)}
|
||||
author={post.author}
|
||||
readTime={post.readTime}
|
||||
postId={post.id}
|
||||
postUrl={currentUrl}
|
||||
initialLikes={12}
|
||||
initialDislikes={2}
|
||||
>
|
||||
<!-- Содержимое статьи -->
|
||||
<div class="post-content">
|
||||
<Content />
|
||||
</div>
|
||||
<div class="post-content" set:html={contentHtml} />
|
||||
|
||||
<!-- Форма комментариев -->
|
||||
<PostCommentForm
|
||||
postId={post.id}
|
||||
isAuthorized={isAuthorized}
|
||||
isAuthorized={false}
|
||||
/>
|
||||
|
||||
<!-- Похожие статьи -->
|
||||
<RelatedPosts
|
||||
posts={allPosts}
|
||||
currentSlug={post.id}
|
||||
posts={filteredRelated}
|
||||
currentSlug={slug}
|
||||
/>
|
||||
|
||||
<!-- Оглавление в сайдбаре -->
|
||||
|
|
@ -168,4 +152,4 @@ const allPosts = await getCollection('blog');
|
|||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -7,32 +7,21 @@ import BlogCard from '@components/blog/BlogCard.astro';
|
|||
import Pagination from '@components/base/Pagination.astro';
|
||||
import CTA from '@components/base/CTA.astro';
|
||||
import SearchModal from '@components/base/SearchModal.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
|
||||
// Сортируем посты по дате (новые сверху)
|
||||
const sortedPosts = posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
||||
import { getPosts, getAllCategories } from '@lib/pb';
|
||||
|
||||
const POSTS_PER_PAGE = 6;
|
||||
const currentPage = 1;
|
||||
const totalPages = Math.ceil(sortedPosts.length / POSTS_PER_PAGE);
|
||||
|
||||
const startIndex = 0;
|
||||
const endIndex = POSTS_PER_PAGE;
|
||||
const paginatedPosts = sortedPosts.slice(startIndex, endIndex);
|
||||
const { posts, total, totalPages } = await getPosts({ page: currentPage, perPage: POSTS_PER_PAGE });
|
||||
const categories = await getAllCategories();
|
||||
|
||||
// Форматируем дату
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
// Категории
|
||||
const categories = ['Все', ...new Set(posts.map((post: any) => post.data.category))];
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
@ -66,17 +55,17 @@ const categories = ['Все', ...new Set(posts.map((post: any) => post.data.cate
|
|||
<section class="blog-grid-section">
|
||||
<div class="site-container">
|
||||
<div class="blog-grid" id="blog-grid">
|
||||
{paginatedPosts.map((post: any) => (
|
||||
<article class="blog-card-wrapper" data-category={post.data.category}>
|
||||
{posts.map((post: any) => (
|
||||
<article class="blog-card-wrapper" data-category={post.category}>
|
||||
<BlogCard
|
||||
title={post.data.title}
|
||||
description={post.data.description}
|
||||
category={post.data.category}
|
||||
categoryColor={post.data.categoryColor}
|
||||
date={formatDate(post.data.date)}
|
||||
readTime={post.data.readTime}
|
||||
imageUrl={post.data.imageUrl}
|
||||
slug={`/blog/${post.id}`}
|
||||
title={post.title}
|
||||
description={post.description}
|
||||
category={post.category}
|
||||
categoryColor={post.categoryColor}
|
||||
date={formatDate(post.date)}
|
||||
readTime={post.readTime}
|
||||
imageUrl={post.imageUrl}
|
||||
slug={`/blog/${post.slug}`}
|
||||
/>
|
||||
</article>
|
||||
))}
|
||||
|
|
@ -206,4 +195,4 @@ const categories = ['Все', ...new Set(posts.map((post: any) => post.data.cate
|
|||
setupAnimations();
|
||||
setupFilter();
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -7,49 +7,28 @@ import BlogCard from '@components/blog/BlogCard.astro';
|
|||
import Pagination from '@components/base/Pagination.astro';
|
||||
import CTA from '@components/base/CTA.astro';
|
||||
import SearchModal from '@components/base/SearchModal.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { getPosts, getAllCategories } from '@lib/pb';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
const POSTS_PER_PAGE = 6;
|
||||
const totalPages = Math.ceil(posts.length / POSTS_PER_PAGE);
|
||||
|
||||
return Array.from({ length: totalPages }, (_, i) => ({
|
||||
params: { page: String(i + 2) }, // Начинаем со 2-й страницы (1-я это /blog/)
|
||||
}));
|
||||
}
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
|
||||
// Сортируем посты по дате (новые сверху)
|
||||
const sortedPosts = posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
|
||||
export const prerender = false;
|
||||
|
||||
const POSTS_PER_PAGE = 6;
|
||||
const currentPage = Number(Astro.params.page) || 1;
|
||||
const totalPages = Math.ceil(sortedPosts.length / POSTS_PER_PAGE);
|
||||
|
||||
const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
|
||||
const endIndex = startIndex + POSTS_PER_PAGE;
|
||||
const paginatedPosts = sortedPosts.slice(startIndex, endIndex);
|
||||
const { posts, total, totalPages } = await getPosts({ page: currentPage, perPage: POSTS_PER_PAGE });
|
||||
const categories = await getAllCategories();
|
||||
|
||||
// Форматируем дату
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
// Категории
|
||||
const categories = ['Все', ...new Set(posts.map(post => post.data.category))];
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Блог — страница ${currentPage} — автоюрист в Сургуте"
|
||||
description="Полезные статьи и советы по автоспорам, ДТП, ОСАГО, лишении прав и защите прав водителей. Страница ${currentPage}."
|
||||
title={`Блог — страница ${currentPage} — автоюрист в Сургуте`}
|
||||
description={`Полезные статьи и советы по автоспорам, ДТП, ОСАГО, лишении прав и защите прав водителей. Страница ${currentPage}.`}
|
||||
canonicalLink={`${SITE_URL}/blog/page/${currentPage}`}
|
||||
breadcrumbs={[
|
||||
{ label: 'Главная', href: '/' },
|
||||
|
|
@ -78,17 +57,17 @@ const categories = ['Все', ...new Set(posts.map(post => post.data.category))]
|
|||
<section class="blog-grid-section">
|
||||
<div class="site-container">
|
||||
<div class="blog-grid" id="blog-grid">
|
||||
{paginatedPosts.map((post: any) => (
|
||||
<article class="blog-card-wrapper" data-category={post.data.category}>
|
||||
{posts.map((post: any) => (
|
||||
<article class="blog-card-wrapper" data-category={post.category}>
|
||||
<BlogCard
|
||||
title={post.data.title}
|
||||
description={post.data.description}
|
||||
category={post.data.category}
|
||||
categoryColor={post.data.categoryColor}
|
||||
date={formatDate(post.data.date)}
|
||||
readTime={post.data.readTime}
|
||||
imageUrl={post.data.imageUrl}
|
||||
slug={`/blog/${post.id}`}
|
||||
title={post.title}
|
||||
description={post.description}
|
||||
category={post.category}
|
||||
categoryColor={post.categoryColor}
|
||||
date={formatDate(post.date)}
|
||||
readTime={post.readTime}
|
||||
imageUrl={post.imageUrl}
|
||||
slug={`/blog/${post.slug}`}
|
||||
/>
|
||||
</article>
|
||||
))}
|
||||
|
|
@ -179,4 +158,4 @@ const categories = ['Все', ...new Set(posts.map(post => post.data.category))]
|
|||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:after-swap', setupAnimations);
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -3,40 +3,23 @@ import Layout from '@layouts/Layout.astro';
|
|||
import { SITE_URL } from '@constants';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
import SearchModal from '@components/base/SearchModal.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { getPosts } from '@lib/pb';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
|
||||
// Получаем параметр поиска из URL
|
||||
const url = new URL(Astro.request.url);
|
||||
const searchQuery = url.searchParams.get('q') || '';
|
||||
|
||||
const { posts: searchResults } = searchQuery
|
||||
? await getPosts({ perPage: 20, search: searchQuery })
|
||||
: { posts: [], total: 0, page: 1, totalPages: 1 };
|
||||
|
||||
const breadcrumbsItems = [
|
||||
{ label: 'Главная', href: '/' },
|
||||
{ label: 'Блог', href: '/blog' },
|
||||
{ label: searchQuery ? `Поиск: "${searchQuery}"` : 'Поиск' }
|
||||
];
|
||||
|
||||
// Функция поиска по статьям
|
||||
function searchArticles(query: string, allPosts: typeof posts) {
|
||||
if (!query.trim()) return [];
|
||||
|
||||
const lowerQuery = query.toLowerCase();
|
||||
|
||||
return allPosts.filter(post => {
|
||||
const titleMatch = post.data.title.toLowerCase().includes(lowerQuery);
|
||||
const descriptionMatch = post.data.description.toLowerCase().includes(lowerQuery);
|
||||
const categoryMatch = post.data.category.toLowerCase().includes(lowerQuery);
|
||||
|
||||
return titleMatch || descriptionMatch || categoryMatch;
|
||||
});
|
||||
}
|
||||
|
||||
const searchResults = searchArticles(searchQuery, posts);
|
||||
|
||||
// Форматируем дату
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString('ru-RU', {
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
|
|
@ -89,14 +72,14 @@ const formatDate = (date: Date) => {
|
|||
<div class="results-grid">
|
||||
{searchResults.map((post: any) => (
|
||||
<BlogCard
|
||||
title={post.data.title}
|
||||
description={post.data.description}
|
||||
category={post.data.category}
|
||||
categoryColor={post.data.categoryColor}
|
||||
date={formatDate(post.data.date)}
|
||||
readTime={post.data.readTime}
|
||||
imageUrl={post.data.imageUrl}
|
||||
slug={`/blog/${post.id}`}
|
||||
title={post.title}
|
||||
description={post.description}
|
||||
category={post.category}
|
||||
categoryColor={post.categoryColor}
|
||||
date={formatDate(post.date)}
|
||||
readTime={post.readTime}
|
||||
imageUrl={post.imageUrl}
|
||||
slug={`/blog/${post.slug}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -149,7 +132,6 @@ const formatDate = (date: Date) => {
|
|||
}));
|
||||
});
|
||||
|
||||
// Автоматически открываем поиск при загрузке страницы без параметров
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const query = urlParams.get('q');
|
||||
|
|
@ -338,4 +320,4 @@ const formatDate = (date: Date) => {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue