From 3bf613946c601f2c3395c35e3ba8b6ed993a3898 Mon Sep 17 00:00:00 2001 From: Han <1655466387@qq.com> Date: Tue, 25 Mar 2025 17:27:12 +0800 Subject: [PATCH] =?UTF-8?q?=20=E5=B0=81=E8=A3=85=E8=AF=84=E8=AE=BA?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=20=E5=86=85=E7=BD=AE=E3=80=90Twikoo=E3=80=81?= =?UTF-8?q?Waline=E3=80=91=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- package.json | 7 +- src/components/ArticleCard/ArticleCard.less | 1 + src/components/Comment/Comment.less | 104 ++++++++++++++++++ src/config.ts | 15 ++- .../blog/Astro主题优雅的vhAstro-Theme.md | 2 +- src/layouts/PageLayout/PageLayout.astro | 5 +- src/layouts/ToolLayout/ToolLayout.astro | 5 +- src/pages/article/[...article].astro | 5 +- src/scripts/Comment.ts | 47 +++++--- src/scripts/Friends.ts | 4 + src/scripts/Init.ts | 12 +- src/scripts/Talking.ts | 7 -- src/scripts/ViewImage.ts | 23 ++++ src/scripts/vhLazyImg.ts | 8 +- src/styles/ArticleBase.less | 11 +- 16 files changed, 215 insertions(+), 43 deletions(-) create mode 100644 src/scripts/ViewImage.ts diff --git a/README.md b/README.md index fa55151..ba2db47 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ - [x] LivePhoto - [x] LaTex 数学公式 - [x] 赞赏功能 -- [x] Twikoo 评论 +- [x] 评论 - 内置【Twikoo、Waline】 - [x] 本地搜索 - [x] 标签 - [x] 分类 diff --git a/package.json b/package.json index 51b77d1..87bcbe0 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "build": "astro build", "preview": "astro preview", "astro": "astro", - "newpost": "node ./script/newpost.js" + "newpost": "node ./script/newpost.js", + "offdev": "astro preferences disable devToolbar", + "ondev": "astro preferences enable devToolbar" }, "dependencies": { "@astrojs/mdx": "^4.2.1", @@ -15,7 +17,7 @@ "@astrojs/sitemap": "^3.3.0", "@swup/astro": "^1.5.0", "aplayer": "^1.10.1", - "astro": "^5.5.3", + "astro": "^5.5.4", "overlayscrollbars": "^2.11.1", "vanilla-lazyload": "^19.1.3", "vh-plugin": "^1.2.2" @@ -24,6 +26,7 @@ "@playform/compress": "^0.1.7", "@types/dplayer": "^1.25.5", "@types/nprogress": "^0.2.3", + "@waline/client": "^3.5.6", "cheerio": "^1.0.0", "dayjs": "^1.11.13", "less": "^4.2.2", diff --git a/src/components/ArticleCard/ArticleCard.less b/src/components/ArticleCard/ArticleCard.less index f7b0f56..d206c21 100644 --- a/src/components/ArticleCard/ArticleCard.less +++ b/src/components/ArticleCard/ArticleCard.less @@ -6,6 +6,7 @@ section.article-list { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; width: 100%; + min-width: 0; height: max-content; overflow: hidden; diff --git a/src/components/Comment/Comment.less b/src/components/Comment/Comment.less index bf3dc8b..37b7d1c 100644 --- a/src/components/Comment/Comment.less +++ b/src/components/Comment/Comment.less @@ -319,4 +319,108 @@ } } } + + div[data-waline] { + // 头像尺寸和圆角 + --waline-avatar-size: 2.56rem; + --waline-avatar-radius: 0.58rem; + font-size: var(--vh-size-h2); + + .wl-cards { + &>.wl-card-item { + padding-left: 0; + + .wl-card { + padding-bottom: 0; + + &>.wl-head { + .wl-nick { + color: var(--vh-black-100); + font-size: var(--vh-size-h2); + line-height: 1.18; + + &::after { + position: absolute; + content: ""; + right: 0; + left: auto; + bottom: 0; + width: 0; + height: 1px; + background-color: var(--vh-black-88); + transition: all 0.28s; + } + + &:hover { + &::after { + left: 0; + right: auto; + width: 100%; + } + } + } + } + + // &>.wl-meta {} + + &>.wl-content { + padding: 0; + + p { + padding: 0.18rem 0; + color: var(--vh-black-100); + font-size: var(--vh-size-span); + line-height: 1.75rem; + } + + &>p { + &:nth-of-type(1) { + padding: 0; + } + + a { + color: var(--vh-black-100); + font-size: 0.76rem; + font-weight: 700; + } + } + } + + &>.wl-quote { + border-left: solid 0.25rem var(--vh-main-color-38); + } + } + + // item 中 wl-card 虚线间距 + &>.wl-card { + padding-bottom: 1.25rem; + border-bottom-color: var(--vh-black-16); + } + } + } + + // 图片 + img { + &:not(.wl-user-avatar, .wl-reaction-list img) { + max-height: 66px; + object-fit: contain; + cursor: zoom-in; + cursor: -moz-zoom-in; + cursor: -webkit-zoom-in; + } + + &.tk-owo-emotion { + max-height: 28px; + cursor: default; + } + } + + a { + color: var(--vh-black-100); + } + + code { + font-size: 0.68rem; + } + } } \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 738f988..dc076d8 100644 --- a/src/config.ts +++ b/src/config.ts @@ -40,8 +40,19 @@ export default { ], // 博客音乐组件解析接口 vhMusicApi: 'https://music.zhheo.com/meting-api/', - // 评论组件 Twikoo - Twikoo: { envId: '' }, + // 评论组件（只允许同时开启一个） + Comment: { + // Twikoo 评论 + Twikoo: { + enable: false, + envId: '' + }, + // Waline 评论 + Waline: { + enable: false, + serverURL: '' + } + }, // Han Analytics 统计（https://github.com/uxiaohan/HanAnalytics） HanAnalytics: { enable: true, server: 'https://analytics.vvhan.com', siteId: 'Hello-HanHexoBlog' }, // Google 广告 diff --git a/src/content/blog/Astro主题优雅的vhAstro-Theme.md b/src/content/blog/Astro主题优雅的vhAstro-Theme.md index 2cf13c8..89cff4e 100644 --- a/src/content/blog/Astro主题优雅的vhAstro-Theme.md +++ b/src/content/blog/Astro主题优雅的vhAstro-Theme.md @@ -46,7 +46,7 @@ top: true - [x] LivePhoto - [x] LaTex数学公式 - [x] 赞赏功能 -- [x] Twikoo 评论 +- [x] 评论 - 内置【Twikoo、Waline】 - [x] 本地搜索 - [x] 标签 - [x] 分类 diff --git a/src/layouts/PageLayout/PageLayout.astro b/src/layouts/PageLayout/PageLayout.astro index b16d975..fefe0f4 100644 --- a/src/layouts/PageLayout/PageLayout.astro +++ b/src/layouts/PageLayout/PageLayout.astro @@ -2,12 +2,13 @@ const { frontmatter } = Astro.props; // 页面 Info import SITE_CONFIG from "@/config"; -const { Description, Twikoo, Title } = SITE_CONFIG; +const { Description, Title } = SITE_CONFIG; // Aside组件 import Aside from "@/components/Aside/Aside.astro"; // 公共 Layout import Layout from "@/layouts/Layout/Layout.astro"; // 评论组件 +import { checkComment } from "@/scripts/Comment"; import Comment from "@/components/Comment/Comment.astro"; // 关于样式 import "@/styles/About.less"; @@ -23,7 +24,7 @@ import "@/styles/ArticleBase.less";

{frontmatter.desc}

- {Twikoo.envId && frontmatter.comment != false && } + {checkComment() && frontmatter.comment != false && }