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

优化样式及部分逻辑✅

Browse Source
This commit is contained in:
Han
2025-05-13 10:17:49 +08:00
parent 14d4e6e94b
commit 2aa978451d
14 changed files with 223 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ArticleCard/ArticleCard.astro
+10 -12
View File
@@ -10,16 +10,14 @@ const ARTICLE_COVER: string = await getCover(post.data.cover);
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"><img src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} /></section>
<section class="vh-article-desc">
<header>
<span class={`vh-article-cat vh-cat-${post.data.categories}`}>{post.data.categories}</span>
<h2 class="title vh-ellipsis">{post.data.title}</h2>
</header>
<p class="vh-article-excerpt vh-ellipsis line-2">{description}</p>
<footer>{fmtTime(post.data.date)}</footer>
</section>
</a>
<article class={`vh-article-item vh-animation vh-animation-init vh-article-link${post.data.top ? " active" : ""}`}>
<section class="vh-article-banner"><img src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} /></section>
<header>
<h3><a class={`vh-article-cat vh-cat-${post.data.categories}`} href={`/categories/${post.data.categories}`}>{post.data.categories}</a><time>{fmtTime(post.data.date)}</time></h3>
<h1 class="title"><a class="vh-ellipsis" href={`/article/${post.data.id}`}>{post.data.title}</a></h1>
</header>
<h2 class="vh-article-excerpt vh-ellipsis line-2">{description}</h2>
<h4 class="vh-article-taglist vh-ellipsis">
{post.data.tags.map((tag: string) => <a href={`/tag/${tag}`}>{tag}</a>)}
</h4>
</article>
src/components/ArticleCard/ArticleCard.less
+183 -146
View File
@@ -16,7 +16,10 @@
overflow: hidden;
&>.vh-article-item {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
height: initial;
min-height: max-content;
@@ -25,173 +28,207 @@
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.18s;
&:hover {
&>.vh-article-banner {
&>img {
transform: scale(1.08);
}
&: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;
}
}
&.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 {
flex-shrink: 0;
position: relative;
box-sizing: border-box;
width: 100%;
height: 12rem;
overflow: hidden;
&>img {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background: rgba(0, 0, 0, 0.06);
z-index: 1;
pointer-events: none;
}
}
}
&>.vh-article-banner {
flex-shrink: 0;
position: relative;
box-sizing: border-box;
width: 100%;
height: 12rem;
overflow: hidden;
&>img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&>header {
box-sizing: border-box;
padding: 0.88rem 1.166rem;
display: flex;
flex-direction: column;
gap: 0.66rem;
width: 100%;
height: max-content;
&>h3 {
display: flex;
align-self: center;
justify-content: space-between;
width: 100%;
height: max-content;
&>.vh-article-cat {
flex-shrink: 0;
box-sizing: border-box;
width: max-content;
font-size: 0.875rem;
font-weight: 700;
/* 默认渐变色起始 */
--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-cat-Code {
/* 默认渐变色起始 */
--gradient-color-1: #f48600;
/* 默认渐变色中间 */
--gradient-color-2: #ffa12e;
/* 默认渐变色结束 */
--gradient-color-3: #ffe9c9;
}
&.vh-cat-Daily {
/* 默认渐变色起始 */
--gradient-color-1: #6270ee;
/* 默认渐变色中间 */
--gradient-color-2: #2b90d9;
/* 默认渐变色结束 */
--gradient-color-3: #37dede;
}
&.vh-cat-Software {
/* 默认渐变色起始 */
--gradient-color-1: #006633;
/* 默认渐变色中间 */
--gradient-color-2: #00cc66;
/* 默认渐变色结束 */
--gradient-color-3: #66ff99;
}
&.vh-cat-Share {
/* 默认渐变色起始 */
--gradient-color-1: rgb(240, 45, 133);
/* 默认渐变色中间 */
--gradient-color-2: #f95ba5;
/* 默认渐变色结束 */
--gradient-color-3: #f4bdd0;
}
}
&>time {
box-sizing: border-box;
margin-top: auto;
font-size: 0.805rem;
font-weight: 400;
color: var(--vh-font-color);
width: max-content;
}
}
&>.vh-article-desc {
flex: 1;
&>.title {
box-sizing: border-box;
padding: 1.188rem;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: max-content;
height: max-content;
overflow: hidden;
&>header {
display: flex;
flex-direction: column;
gap: 0.36rem;
&>a {
font-size: 1.06rem;
font-weight: 600;
transition: color 0.18s;
&>.vh-article-cat {
box-sizing: border-box;
width: max-content;
font-size: 0.875rem;
font-weight: 700;
/* 默认渐变色起始 */
--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-cat-Code {
/* 默认渐变色起始 */
--gradient-color-1: #f48600;
/* 默认渐变色中间 */
--gradient-color-2: #ffa12e;
/* 默认渐变色结束 */
--gradient-color-3: #ffe9c9;
}
&.vh-cat-Daily {
/* 默认渐变色起始 */
--gradient-color-1: #6270ee;
/* 默认渐变色中间 */
--gradient-color-2: #2b90d9;
/* 默认渐变色结束 */
--gradient-color-3: #37dede;
}
&.vh-cat-Software {
/* 默认渐变色起始 */
--gradient-color-1: #006633;
/* 默认渐变色中间 */
--gradient-color-2: #00cc66;
/* 默认渐变色结束 */
--gradient-color-3: #66ff99;
}
&.vh-cat-Share {
/* 默认渐变色起始 */
--gradient-color-1: rgb(240, 45, 133);
/* 默认渐变色中间 */
--gradient-color-2: #f95ba5;
/* 默认渐变色结束 */
--gradient-color-3: #f4bdd0;
}
}
&>.title {
font-size: 1.06rem;
font-weight: 600;
line-height: 1.36;
&:hover {
color: var(--vh-main-color);
}
}
}
}
&>.vh-article-excerpt {
margin: 0.88rem 0;
width: 100%;
height: max-content;
color: var(--vh-font-66);
font-size: 0.805rem;
letter-spacing: 0.88px;
line-height: 1.28rem;
&>.vh-article-excerpt {
box-sizing: border-box;
padding: 0 1.166rem;
width: 100%;
height: max-content;
color: var(--vh-font-66);
font-size: 0.805rem;
font-weight: 400;
letter-spacing: 0.88px;
line-height: 1.28rem;
}
&>.vh-article-taglist {
margin-top: auto;
box-sizing: border-box;
padding: 0.66rem 1.166rem 1rem;
width: 100%;
height: max-content;
overflow: hidden;
&>a {
box-sizing: border-box;
margin-right: 0.88rem;
color: var(--vh-font);
font-size: 0.688rem;
font-weight: 400;
transition: color 0.18s;
&:hover {
color: var(--vh-main-color);
}
&>footer {
margin-top: auto;
font-size: 0.805rem;
color: var(--vh-font-color);
&::before {
content: "#";
}
&:nth-last-of-type(1) {
margin-right: 0;
}
}
}
src/components/Aside/Aside.astro
+1 -1
View File
@@ -13,7 +13,7 @@ import { getCategories, getTags, getRecommendArticles, getCountInfo } from "@/ut
// 分类列表
const categories = getCategories();
// 热门标签
const tags = getTags().slice(0, 16);
const tags = getTags();
// 获取网站统计数据
const CountInfo = getCountInfo();
// 最新文章
src/components/Aside/Aside.less
+5 -3
View File
@@ -138,11 +138,11 @@ aside.vh-aside {
&>.count {
box-sizing: border-box;
padding: 1rem 0 0;
padding: 0.88rem 0 0.66rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.66rem;
gap: 0.28rem;
text-align: center;
background: var(--vh-white-color);
border-radius: var(--vh-main-radius);
@@ -269,7 +269,9 @@ aside.vh-aside {
gap: 0.68rem 1rem;
width: 100%;
height: max-content;
overflow: hidden;
max-height: 18.88rem;
overflow-x: hidden;
overflow-y: auto;
&>a {
display: flex;
src/components/Head/Head.astro
+1 -1
View File
@@ -11,7 +11,7 @@ const SiteCover = Site + Cover;
const WebCover = PageCover || SiteCover;
// Schema.org 结构化数据（JSON-LD）
const WebSiteData = { "@context": "https://schema.org", "@type": "WebSite", name: WebTitle, url: canonicalURL, image: { "@type": "ImageObject", url: SiteCover } };
const ArticleData = { "@context": "https://schema.org", "@type": "BlogPosting", mainEntityOfPage: { "@type": "WebPage", "@id": canonicalURL }, headline: WebTitle, image: [WebCover], author: { "@type": "Person", name: Author, url: Site }, publisher: { "@type": "Organization", name: SiteName, logo: { "@type": "ImageObject", url: SiteCover } } };
const ArticleData = { "@context": "https://schema.org", "@type": "BlogPosting", headline: WebTitle, image: [WebCover], author: { "@type": "Person", name: Author, url: Site }, publisher: { "@type": "Organization", name: SiteName, logo: { "@type": "ImageObject", url: SiteCover } } };
// 基础 样式
import "@/styles/Base.less";
---