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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

@ -12,13 +12,13 @@
"ondev": "astro preferences enable devToolbar"
},
"dependencies": {
"@astrojs/mdx": "^4.2.3",
"@astrojs/mdx": "^4.2.6",
"@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "^3.3.0",
"@astrojs/sitemap": "^3.4.0",
"@swup/astro": "^1.6.0",
"aplayer": "^1.10.1",
"astro": "^5.6.0",
"overlayscrollbars": "^2.11.1",
"astro": "^5.7.12",
"overlayscrollbars": "^2.11.2",
"vanilla-lazyload": "^19.1.3",
"vh-plugin": "^1.2.2"
},
@ -26,10 +26,10 @@
"@playform/compress": "^0.1.9",
"@types/dplayer": "^1.25.5",
"@types/nprogress": "^0.2.3",
"@waline/client": "^3.5.6",
"@waline/client": "^3.5.7",
"cheerio": "^1.0.0",
"dayjs": "^1.11.13",
"less": "^4.2.2",
"less": "^4.3.0",
"mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0",
"rehype-katex": "^7.0.1",
@ -37,7 +37,7 @@
"remark-directive": "^4.0.0",
"remark-math": "^6.0.0",
"remark-sectionize": "^2.1.0",
"typescript": "^5.8.2",
"typescript": "^5.8.3",
"unist-util-visit": "^5.0.0"
},
"pnpm": {

22
src/components/ArticleCard/ArticleCard.astro
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>

329
src/components/ArticleCard/ArticleCard.less
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;
}
}
}

2
src/components/Aside/Aside.astro
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();
// 最新文章

8
src/components/Aside/Aside.less
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;

2
src/components/Head/Head.astro
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";
---

2
src/layouts/PageLayout/PageLayout.astro
View File

@ -3,8 +3,6 @@ const { frontmatter } = Astro.props;
// 页面 Info
import SITE_CONFIG from "@/config";
const { Description, Title } = SITE_CONFIG;
// Aside组件
import Aside from "@/components/Aside/Aside.astro";
// 公共 Layout
import Layout from "@/layouts/Layout/Layout.astro";
// 评论组件

2
src/layouts/ToolLayout/ToolLayout.astro
View File

@ -3,8 +3,6 @@ const { frontmatter } = Astro.props;
// 页面 Info
import SITE_CONFIG from "@/config";
const { Description, Title } = SITE_CONFIG;
// Aside组件
import Aside from "@/components/Aside/Aside.astro";
// 公共 Layout
import Layout from "@/layouts/Layout/Layout.astro";
// 评论组件

2
src/pages/archives/index.astro
View File

@ -7,8 +7,6 @@ import SITE_CONFIG from "@/config";
const { Description } = SITE_CONFIG;
// 公共 Layout
import Layout from "@/layouts/Layout/Layout.astro";
// Aside组件
import Aside from "@/components/Aside/Aside.astro";
// 文章列表组件
import Archive from "@/components/Archive/Archive.astro";
---

2
src/pages/tag/[...tags].astro
View File

@ -15,8 +15,6 @@ import SITE_CONFIG from "@/config";
const { Description } = SITE_CONFIG;
// 公共 Layout
import Layout from "@/layouts/Layout/Layout.astro";
// Aside组件
import Aside from "@/components/Aside/Aside.astro";
// 文章列表组件
import Archive from "@/components/Archive/Archive.astro";
---

9
src/scripts/Comment.ts
View File

@ -1,3 +1,11 @@
/*
* @Author: Han
* @Date: 2025-04-07 11:31:34
* @LastEditors: Han
* @LastEditTime: 2025-04-21 14:32:19
* @Description:
*
*/
import SITE_INFO from "@/config";
import { LoadScript } from "@/utils/index";
declare const twikoo: any;
@ -25,6 +33,7 @@ const WalineFn = async (commentDOM: string, walineInit: any) => {
"https://registry.npmmirror.com/@waline/emojis/1.3.0/files/tieba/tieba_awkward.png",
"https://registry.npmmirror.com/@waline/emojis/1.3.0/files/tieba/tieba_sleep.png",
],
requiredMeta: ['nick', 'mail'],
imageUploader: async (file: any) => {
const body = new FormData();
body.append('file', file);

6
src/styles/Article.less
View File

@ -25,10 +25,15 @@ article.vh-article-main {
}
&>.article-meta {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0.88rem;
font-size: 0.85rem;
width: 100%;
height: 0.98rem;
overflow: hidden;
&>.article-meta-item {
display: flex;
@ -40,6 +45,7 @@ article.vh-article-main {
flex-shrink: 0;
height: 0.888rem;
width: auto;
object-fit: contain;
}
&>time {

2
src/styles/Base.less
View File

@ -50,8 +50,6 @@
// 隐藏滚动条
scrollbar-width: none;
-ms-overflow-style: none;
// 平滑滚动
scroll-behavior: smooth;
// 去除下划线
text-decoration: none;
// 消除边框

2
src/utils/getArchive.ts
View File

@ -25,7 +25,7 @@ const getCategoriesList = async (categories: string) => {
// 获取标签下的文章列表
const getTagsList = async (tags: string) => {
const posts = await getCollection("blog");
const articleList = posts.filter((i: any) => (i.data.tags || []).includes(tags)).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());;
const articleList = posts.filter((i: any) => (i.data.tags || []).map((_i: any) => (String(_i))).includes(tags)).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
return fmtArticleList(articleList);
}