55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { CalendarOutlined } from '@antdv-next/icons';
|
|
import { computed, defineComponent } from 'vue';
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
import BlogLayout from '@/components/blog/BlogLayout';
|
|
import { useBlogArticles } from '@/hooks/useBlogArticles';
|
|
|
|
export default defineComponent({
|
|
name: 'BlogArchivePage',
|
|
setup() {
|
|
const { articles } = useBlogArticles();
|
|
const groupedArticles = computed(() => {
|
|
const groups = new Map<string, typeof articles.value>();
|
|
articles.value.forEach((article) => {
|
|
const key = article.date.slice(0, 7);
|
|
groups.set(key, [...(groups.get(key) ?? []), article]);
|
|
});
|
|
|
|
return Array.from(groups.entries());
|
|
});
|
|
|
|
return () => (
|
|
<BlogLayout
|
|
mainClass="kt-blog__main--archive"
|
|
pageTitle="归档时间轴"
|
|
pageDescription="按月份回顾 KT 项目沉淀的文章记录。"
|
|
pageMeta={`${articles.value.length} 篇文章`}
|
|
>
|
|
<article class="kt-blog__post kt-blog__post--full kt-blog__card">
|
|
<div class="kt-blog__post-content kt-blog__post-content--full">
|
|
<div class="kt-blog__timeline kt-blog__timeline--archive">
|
|
{groupedArticles.value.map(([month, monthArticles]) => (
|
|
<section key={month} class="kt-blog__timeline-group">
|
|
<h3 class="kt-blog__timeline-month">
|
|
<CalendarOutlined />
|
|
<span>{month}</span>
|
|
</h3>
|
|
{monthArticles.map((article) => (
|
|
<div key={article.id} class="kt-blog__timeline-node">
|
|
<div class="kt-blog__timeline-time">{article.date.slice(5)}</div>
|
|
<div class="kt-blog__timeline-card kt-blog__card kt-blog__card--gradient-secondary">
|
|
<RouterLink to={`/post/${article.slug}`}>{article.title}</RouterLink>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</BlogLayout>
|
|
);
|
|
},
|
|
});
|