wenyongda/vhAstro-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化性能、逻辑、冗余代码【2.0 版本】✅

Browse Source
This commit is contained in:
Han
2025-03-20 19:23:03 +08:00
parent fae69d44fd
commit d1b781ed6f
66 changed files with 287 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ArticleCard/ArticleCard.astro
+26
View File
@@ -0,0 +1,26 @@
---
import { Image } from "astro:assets";
import { getDescription, fmtTime } from "@/utils/index";
const { post } = Astro.props;
// 获取文章的摘要
const description = getDescription(post);
// 获取封面图
import getCover from "@/utils/getCover";
const ARTICLE_COVER: string = await getCover(post.data.cover);
// 文章Item组件样式
import "./ArticleCard.less";
---
<article class="vh-article-item vh-animation vh-animation-init">
<a class={`vh-article-link${post.data.top ? " active" : ""}`} href={`/article/${post.data.id}`}>
<section class="vh-article-banner"><Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} width="10" height="10" /></section>
<section class="vh-article-desc">
<header>
<span class={`vh-article-categories vh-categories-${post.data.categories}`}>{post.data.categories}</span>
<h2 class="title">{post.data.title}</h2>
</header>
<p class="vh-article-excerpt">{description}</p>
<footer>{fmtTime(post.data.date)}</footer>
</section>
</a>
</article>
src/components/ArticleCard/ArticleCard.less
+224
View File
@@ -0,0 +1,224 @@
section.article-list {
flex: 1;
position: relative;
padding-bottom: 6rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
width: 100%;
height: max-content;
overflow: hidden;
&>.vh-article-item {
box-sizing: border-box;
width: 100%;
height: initial;
min-height: max-content;
border: solid 1px #eee;
border-radius: 1rem;
background-color: #fff;
overflow: hidden;
&>a.vh-article-link {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
height: max-content;
min-height: 100%;
border-radius: 0.618rem;
overflow: hidden;
transition: background 0.16s;
&:hover {
&>.vh-article-banner {
&>img {
transform: scale(1.08);
}
}
}
&.active {
&::before {
content: "置顶";
position: absolute;
top: 1.6rem;
left: 0.66rem;
box-sizing: border-box;
padding: 0.18rem 1rem;
width: max-content;
height: max-content;
font-size: 1rem;
color: #fff;
border-radius: 0.66rem;
transform: rotate(-45deg);
/* 确保元素有半透明背景 */
background: #00000033;
box-shadow: 0 2rem 1rem rgba(0, 0, 0, 0.1);
z-index: 1;
/* 高斯模糊效果 */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
/* 兼容旧版浏览器 */
}
&>.vh-article-banner {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.06);
z-index: 1;
pointer-events: none;
}
}
}
&>.vh-article-banner {
position: relative;
flex-shrink: 0;
box-sizing: border-box;
width: 100%;
height: 12rem;
overflow: hidden;
&>img {
width: 100%;
height: 100%;
object-fit: cover;
// transition公共区域有动画效果
}
}
&>.vh-article-desc {
flex: 1;
box-sizing: border-box;
padding: 1.25rem;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: max-content;
overflow: hidden;
&>header {
display: flex;
flex-direction: column;
gap: 0.36rem;
&>.vh-article-categories {
box-sizing: border-box;
width: max-content;
font-size: 0.875rem;
font-weight: bold;
/* 默认渐变色起始 */
--gradient-color-1: #a32cc4;
/* 默认渐变色中间 */
--gradient-color-2: #b65fcf;
/* 默认渐变色结束 */
--gradient-color-3: #e39ff6;
background: linear-gradient(118deg, var(--gradient-color-1), var(--gradient-color-2) 26%, var(--gradient-color-3));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
&.vh-categories-Code {
/* 默认渐变色起始 */
--gradient-color-1: #f48600;
/* 默认渐变色中间 */
--gradient-color-2: #ffa12e;
/* 默认渐变色结束 */
--gradient-color-3: #ffe9c9;
}
&.vh-categories-Daily {
/* 默认渐变色起始 */
--gradient-color-1: #6270ee;
/* 默认渐变色中间 */
--gradient-color-2: #2b90d9;
/* 默认渐变色结束 */
--gradient-color-3: #37dede;
}
&.vh-categories-Software {
/* 默认渐变色起始 */
--gradient-color-1: #006633;
/* 默认渐变色中间 */
--gradient-color-2: #00cc66;
/* 默认渐变色结束 */
--gradient-color-3: #66ff99;
}
&.vh-categories-Share {
/* 默认渐变色起始 */
--gradient-color-1: rgb(240, 45, 133);
/* 默认渐变色中间 */
--gradient-color-2: #f95ba5;
/* 默认渐变色结束 */
--gradient-color-3: #f4bdd0;
}
}
&>.title {
margin: 0;
font-size: 1.18rem;
font-weight: 600;
line-height: 1.36;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
}
}
&>.vh-article-excerpt {
margin: 0.88rem 0 0.625rem;
width: 100%;
height: max-content;
font-size: 0.875rem;
line-height: 1.28rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
opacity: 0.6;
}
&>footer {
margin-top: auto;
font-size: 0.875rem;
color: #6E6E6E;
}
}
}
}
&>.vh-article-pagination {
position: absolute;
bottom: 0;
right: 0;
}
}
@media screen and (max-width: 1150px) {
section.article-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 556px) {
section.article-list {
grid-template-columns: repeat(1, 1fr);
}
}