diff --git a/package.json b/package.json index 6ed1507..613e75c 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/components/ArticleCard/ArticleCard.astro b/src/components/ArticleCard/ArticleCard.astro index f278b42..f3e1537 100644 --- a/src/components/ArticleCard/ArticleCard.astro +++ b/src/components/ArticleCard/ArticleCard.astro @@ -10,16 +10,14 @@ const ARTICLE_COVER: string = await getCover(post.data.cover); import "./ArticleCard.less"; --- -
- -
{post.data.title}
-
-
- {post.data.categories} -

{post.data.title}

-
-

{description}

-
{fmtTime(post.data.date)}
-
- +
+
{post.data.title}
+
+

{post.data.categories}

+

{post.data.title}

+
+

{description}

+

+ {post.data.tags.map((tag: string) => {tag})} +

diff --git a/src/components/ArticleCard/ArticleCard.less b/src/components/ArticleCard/ArticleCard.less index 690ebfa..ec3f5ab 100644 --- a/src/components/ArticleCard/ArticleCard.less +++ b/src/components/ArticleCard/ArticleCard.less @@ -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; } } } diff --git a/src/components/Aside/Aside.astro b/src/components/Aside/Aside.astro index 4e37157..c888e07 100644 --- a/src/components/Aside/Aside.astro +++ b/src/components/Aside/Aside.astro @@ -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(); // 最新文章 diff --git a/src/components/Aside/Aside.less b/src/components/Aside/Aside.less index 2ed397c..8b78a73 100644 --- a/src/components/Aside/Aside.less +++ b/src/components/Aside/Aside.less @@ -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; diff --git a/src/components/Head/Head.astro b/src/components/Head/Head.astro index b43126a..15303fb 100644 --- a/src/components/Head/Head.astro +++ b/src/components/Head/Head.astro @@ -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"; --- diff --git a/src/layouts/PageLayout/PageLayout.astro b/src/layouts/PageLayout/PageLayout.astro index 2c95556..63e8b15 100644 --- a/src/layouts/PageLayout/PageLayout.astro +++ b/src/layouts/PageLayout/PageLayout.astro @@ -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"; // 评论组件 diff --git a/src/layouts/ToolLayout/ToolLayout.astro b/src/layouts/ToolLayout/ToolLayout.astro index 72bffed..69d2fe8 100644 --- a/src/layouts/ToolLayout/ToolLayout.astro +++ b/src/layouts/ToolLayout/ToolLayout.astro @@ -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"; // 评论组件 diff --git a/src/pages/archives/index.astro b/src/pages/archives/index.astro index 34a6055..a5c4cd0 100644 --- a/src/pages/archives/index.astro +++ b/src/pages/archives/index.astro @@ -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"; --- diff --git a/src/pages/tag/[...tags].astro b/src/pages/tag/[...tags].astro index de8e2ba..276726f 100644 --- a/src/pages/tag/[...tags].astro +++ b/src/pages/tag/[...tags].astro @@ -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"; --- diff --git a/src/scripts/Comment.ts b/src/scripts/Comment.ts index 5adf7ed..51f0408 100644 --- a/src/scripts/Comment.ts +++ b/src/scripts/Comment.ts @@ -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); diff --git a/src/styles/Article.less b/src/styles/Article.less index 5b30256..8e7fb5c 100644 --- a/src/styles/Article.less +++ b/src/styles/Article.less @@ -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 { diff --git a/src/styles/Base.less b/src/styles/Base.less index eab9648..85ebfde 100644 --- a/src/styles/Base.less +++ b/src/styles/Base.less @@ -50,8 +50,6 @@ // 隐藏滚动条 scrollbar-width: none; -ms-overflow-style: none; - // 平滑滚动 - scroll-behavior: smooth; // 去除下划线 text-decoration: none; // 消除边框 diff --git a/src/utils/getArchive.ts b/src/utils/getArchive.ts index f6b2f02..117b6f7 100644 --- a/src/utils/getArchive.ts +++ b/src/utils/getArchive.ts @@ -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); }