estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加blog首页列表

Browse Source
This commit is contained in:
estel
2025-08-07 15:00:06 +08:00
parent 4c8334b7bd
commit 0beda86667
1 changed files with 42 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/components/blog/indexBlog.vue
View File

@@ -37,56 +37,60 @@ const formatDate = (date: string | Date | null | undefined) => {
<template> <template>
<div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4"> <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
<div class="max-w-4xl mx-auto px-4 py-8"> <div class="max-w-4xl mx-auto ">
<!-- 页面标题 -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
博客文章
</h1>
<p class="text-gray-600 dark:text-gray-400">
分享技术见解和心得体会
</p>
</div>
<!-- 文章列表 --> <!-- 文章列表 -->
<div class="space-y-6"> <div class="space-y-6 w-full">
<NuxtLink <NuxtLink
v-for="item in articles" v-for="item in articles"
:key="item.path" :key="item.path"
:to="item.path" :to="item.path"
class="block" class="block w-full"
> >
<article <article
class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-all duration-200 cursor-pointer group" class="pr-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-all duration-200 cursor-pointer group"
> >
<!-- 文章头部 --> <!-- 文章内容布局 -->
<div class="flex items-start justify-between mb-4"> <div class="flex flex-row">
<div class="flex-1"> <!-- 图片预览区域 -->
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"> <div class="md:w-48 h-32 w-32 mt-2 ml-2 mb-2 md:mr-2 -mr-1 bg-gray-100 dark:bg-gray-700 rounded-xl overflow-hidden">
{{ item.title }} <img
</h2> :src="item.img || '/images/default-blog.jpg'"
:alt="item.title"
<!-- 文章描述 --> class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
<p />
v-if="item.description"
class="text-gray-600 dark:text-gray-300 text-sm mb-3 line-clamp-2"
>
{{ item.description }}
</p>
</div> </div>
<!-- 文字内容区域 -->
<div class="flex-1 p-4 md:p-6">
<!-- 文章头部 -->
<div class="mb-4">
<h2 class="md:text-2xl text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
{{ item.title }}
</h2>
</div> <!-- 文章描述 -->
<p
v-if="item.description"
class="text-gray-600 dark:text-gray-300 md:text-sm text-xs line-clamp-2"
>
{{ item.description }}
</p>
</div>
<!-- 文章元信息 --> <!-- 文章元信息 -->
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"> <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<!-- 文章时间 --> <!-- 文章时间 -->
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<UIcon <UIcon
name="lucide-clock" name="lucide-clock"
size="14" size="14"
/> />
<span>{{ formatDate(item.date) }}</span> <span>{{ formatDate(item.date) }}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>