From 70ffbfd80c91ed5e71ebe393f91f84e608288bfb Mon Sep 17 00:00:00 2001
From: Han <1655466387@qq.com>
Date: Fri, 4 Apr 2025 14:04:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=86=E8=8A=82=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 7 ++++
src/components/Archive/Archive.astro | 4 +--
src/components/Archive/Archive.less | 6 ----
src/components/Search/Search.less | 27 ++++++++------
src/layouts/ToolLayout/ToolLayout.less | 49 ++++++++++++--------------
src/scripts/Friends.ts | 2 +-
src/scripts/Links.ts | 2 +-
src/scripts/Search.ts | 2 +-
src/styles/Article.less | 20 ++++++++---
src/styles/ArticleBase.less | 19 +++++-----
src/styles/Base.less | 35 +++++++++++++-----
src/styles/Reset.less | 4 +++
12 files changed, 103 insertions(+), 74 deletions(-)
diff --git a/README.md b/README.md
index fc169ff..e362576 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,13 @@
- 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
- 部署前需编辑 `astro.config.mjs` 中的站点设置。
+### 自动部署
+
+**Vercel 部署：**
+
+[](https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme)
+
+
### 使用命令
```bash
diff --git a/src/components/Archive/Archive.astro b/src/components/Archive/Archive.astro
index 5636d94..ba3ee01 100644
--- a/src/components/Archive/Archive.astro
+++ b/src/components/Archive/Archive.astro
@@ -19,8 +19,8 @@ import "./Archive.less";
{fmtTime(_.date, "MM-DD")}
- {_.title}
- {_.tags.map((tag: string) => `#${tag}`).join(" ")}
+ {_.title}
+ {_.tags.map((tag: string) => `#${tag}`).join(" ")}
))}
diff --git a/src/components/Archive/Archive.less b/src/components/Archive/Archive.less
index 1b255c2..b9d0c46 100644
--- a/src/components/Archive/Archive.less
+++ b/src/components/Archive/Archive.less
@@ -110,11 +110,8 @@ section.vh-archive-main {
&>span {
flex: 1;
- white-space: nowrap;
- overflow: hidden;
color: var(--vh-font-66);
font-weight: 500;
- text-overflow: ellipsis;
transition: all .18s;
}
@@ -125,9 +122,6 @@ section.vh-archive-main {
color: var(--vh-font-66);
font-weight: 400;
font-style: normal;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
}
}
}
diff --git a/src/components/Search/Search.less b/src/components/Search/Search.less
index 7af7fa9..da63373 100644
--- a/src/components/Search/Search.less
+++ b/src/components/Search/Search.less
@@ -38,7 +38,6 @@
max-height: 88vh;
border-radius: 1rem;
background-color: var(--vh-white-color);
-
transform: translateY(-1rem);
transition: transform 0.18s;
overflow: hidden;
@@ -100,6 +99,7 @@
}
&>.vh-search-item {
+ position: relative;
box-sizing: border-box;
padding: 0.75rem;
display: flex;
@@ -110,19 +110,30 @@
&:hover {
&::before {
+ opacity: 1;
transform: scale(1);
}
}
+ &:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: .5rem;
+ background-color: var(--vh-font-16);
+ opacity: 0;
+ transition: transform .16s ease-in-out, opacity .16s ease-in-out;
+ }
+
&>span {
width: 100%;
font-size: 1.125rem;
font-weight: 600;
color: var(--vh-font-color);
line-height: 1.16;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
}
&>p {
@@ -131,15 +142,9 @@
color: var(--vh-font-56);
font-weight: 400;
line-height: 1.25rem;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- text-overflow: ellipsis;
- word-break: break-all;
- overflow: hidden;
&>span {
- color: #60a5fa;
+ color: var(--vh-main-color);
}
}
}
diff --git a/src/layouts/ToolLayout/ToolLayout.less b/src/layouts/ToolLayout/ToolLayout.less
index a2595c2..f2f3d7c 100644
--- a/src/layouts/ToolLayout/ToolLayout.less
+++ b/src/layouts/ToolLayout/ToolLayout.less
@@ -56,6 +56,8 @@
&>.avatar {
transform: scale(1.2) rotate(8deg);
+ background-color: var(--vh-white-color);
+ border-color: var(--vh-white-color);
}
}
@@ -66,7 +68,7 @@
width: 3.36rem;
height: 3.36rem;
border-radius: 50%;
- border: solid 1px #E8E8E8;
+ border: solid 1px var(--vh-font-16);
overflow: hidden;
opacity: 1;
transition: all .18s;
@@ -77,7 +79,7 @@
display: flex;
flex-direction: column;
justify-content: center;
- gap: 0.388rem;
+ gap: 0.68rem;
width: 100%;
height: 100%;
overflow: hidden;
@@ -91,17 +93,12 @@
&>p {
box-sizing: border-box;
+ padding: 0;
width: 100%;
height: max-content;
font-size: 0.81rem;
- color: #858585;
+ color: var(--vh-font-56);
line-height: 1rem;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- text-overflow: ellipsis;
- word-break: break-all;
- overflow: hidden;
}
}
}
@@ -124,7 +121,7 @@
height: max-content;
border-radius: 0.5rem;
box-shadow: var(--vh-box-shadow);
- background: var(--vh-white-color) linear-gradient(90deg, #EDEEF388, var(--vh-white-color)) no-repeat 100% 100% / 0 1px;
+ background: var(--vh-white-color) linear-gradient(90deg, var(--vh-font-6), var(--vh-white-color)) no-repeat 100% 100% / 0 1px;
background-position: 0 100%;
background-size: 0 100%;
transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s;
@@ -154,15 +151,9 @@
&>p {
padding: 0;
- color: #26262680;
+ color: var(--vh-font-66);
font-size: 0.875rem;
line-height: 1.8;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- text-overflow: ellipsis;
- word-break: break-all;
- overflow: hidden;
}
&>footer {
@@ -179,23 +170,26 @@
display: flex;
align-items: center;
gap: 0.5rem;
- height: 1.56rem;
+ height: max-content;
font-size: 0.8rem;
overflow: hidden;
&>em {
font-style: normal;
flex: 1;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
}
&>img {
+ box-sizing: border-box;
+ padding: 0.188rem;
flex-shrink: 0;
- width: 1.56rem;
- height: 1.56rem;
+ width: 1.88rem;
+ height: 1.88rem;
+ object-fit: cover;
+ border: 1px solid var(--vh-font-16);
border-radius: 50%;
+ background-color: var(--vh-white-color);
+ overflow: hidden;
}
}
@@ -206,8 +200,8 @@
&>time {
flex-shrink: 0;
width: max-content;
- padding: 0.5rem;
- background: #F7F7F7;
+ padding: 0.28rem 0.5rem;
+ background: var(--vh-font-6);
border-radius: 0.8rem;
}
}
@@ -266,7 +260,7 @@
&>time {
font-size: 0.7rem;
- color: #858585;
+ color: var(--vh-font-66);
}
}
}
@@ -311,10 +305,11 @@
&>.geographical-location {
display: flex;
align-items: center;
+ justify-content: flex-end;
gap: 0.2rem;
font-style: normal;
font-size: 14px;
- color: #49c7cc;
+ color: var(--vh-success);
&::before {
content: '';
diff --git a/src/scripts/Friends.ts b/src/scripts/Friends.ts
index 39a3c32..b663364 100644
--- a/src/scripts/Friends.ts
+++ b/src/scripts/Friends.ts
@@ -13,7 +13,7 @@ const FriendsInit = async (data: any) => {
if (typeof data === 'string') {
res = await $GET(api);
}
- friendsDOM.innerHTML = res.map((i: any) => `${i.content}
`).join('');
+ friendsDOM.innerHTML = res.map((i: any) => `${i.content}
`).join('');
// 图片懒加载
vhLzImgInit();
} catch {
diff --git a/src/scripts/Links.ts b/src/scripts/Links.ts
index 11372a0..f18476d 100644
--- a/src/scripts/Links.ts
+++ b/src/scripts/Links.ts
@@ -11,7 +11,7 @@ const LinksInit = async (data: any) => {
if (typeof data === 'string') {
res = await $GET(data);
}
- linksDOM.innerHTML = res.map((i: any) => `
`).join('');
+ linksDOM.innerHTML = res.map((i: any) => ``).join('');
// 图片懒加载
vhLzImgInit();
} catch {
diff --git a/src/scripts/Search.ts b/src/scripts/Search.ts
index 98a06b3..7a30060 100644
--- a/src/scripts/Search.ts
+++ b/src/scripts/Search.ts
@@ -30,7 +30,7 @@ const findAndModifyElements = (arr: any[], keyword: string) => {
// 渲染页面
let searchHTML = '';
const renderSearch = (arr: any[]) => {
- searchHTML = !arr.length ? '' : arr.map(i => `${i.title}${i.content}
`).join('');
+ searchHTML = !arr.length ? '' : arr.map(i => `${i.title}${i.content}
`).join('');
document.querySelector('.vh-header>.main>.vh-search>main>.vh-search-list')!.innerHTML = searchHTML;
}
diff --git a/src/styles/Article.less b/src/styles/Article.less
index 4157967..5b30256 100644
--- a/src/styles/Article.less
+++ b/src/styles/Article.less
@@ -158,7 +158,17 @@ article.vh-article-main {
z-index: -1;
}
- &:nth-of-type(2n+1) {
+
+
+ &:nth-of-type(6n+1) {
+ color: var(--vh-default);
+
+ &::after {
+ background-color: var(--vh-default-hover);
+ }
+ }
+
+ &:nth-of-type(6n+2) {
color: var(--vh-info);
&::after {
@@ -166,7 +176,7 @@ article.vh-article-main {
}
}
- &:nth-of-type(2n+2) {
+ &:nth-of-type(6n+3) {
color: var(--vh-success);
&::after {
@@ -174,7 +184,7 @@ article.vh-article-main {
}
}
- &:nth-of-type(2n+3) {
+ &:nth-of-type(6n+4) {
color: var(--vh-warning);
&::after {
@@ -182,7 +192,7 @@ article.vh-article-main {
}
}
- &:nth-of-type(2n+4) {
+ &:nth-of-type(6n+5) {
color: var(--vh-error);
&::after {
@@ -190,7 +200,7 @@ article.vh-article-main {
}
}
- &:nth-of-type(2n+5) {
+ &:nth-of-type(6n+6) {
color: var(--vh-import);
&::after {
diff --git a/src/styles/ArticleBase.less b/src/styles/ArticleBase.less
index 72aa2d3..bb36993 100644
--- a/src/styles/ArticleBase.less
+++ b/src/styles/ArticleBase.less
@@ -62,7 +62,6 @@
p,
ul:not(.vh-vhMusic ul, .vh-comment ul),
ol:not(.vh-vhMusic ol, .vh-comment ol) {
- margin: 0;
padding: 0.618rem 0;
font-size: 0.9375rem;
line-height: 1.6;
@@ -112,7 +111,6 @@
font-size: 0.875rem;
font-weight: 500;
line-height: 1.58rem;
- color: #6A737D;
}
}
@@ -125,7 +123,7 @@
border-spacing: 0;
font-size: 0.9rem;
background-color: var(--vh-white-color);
- border: 1px solid #EEEEEE;
+ border: 1px solid var(--vh-font-16);
border-radius: 0.38rem;
overflow: hidden;
@@ -143,10 +141,10 @@
}
th {
- background-color: #f8f9fa;
+ background-color: var(--vh-font-6);
padding: 0.75rem;
- border-bottom: solid 1px #EEEEEE;
- border-right: solid 1px #EEEEEE;
+ border-bottom: solid 1px var(--vh-font-16);
+ border-right: solid 1px var(--vh-font-16);
&:nth-last-of-type(1) {
border-right: none;
@@ -156,8 +154,8 @@
td {
padding: 0.618rem 0.75rem;
vertical-align: top;
- border-bottom: solid 1px #EEEEEE;
- border-right: solid 1px #EEEEEE;
+ border-bottom: solid 1px var(--vh-font-16);
+ border-right: solid 1px var(--vh-font-16);
&:nth-last-of-type(1) {
border-right: none;
@@ -205,10 +203,9 @@
flex-direction: column;
gap: 0.688rem;
padding: 0.888rem;
- border-left: 5px solid #eee;
- border-left-color: #777;
+ border-left: 5px solid var(--vh-font-28);
border-radius: 3px;
- background-color: #f7f7f7;
+ background-color: var(--vh-font-6);
&.note-success {
border-color: var(--vh-success);
diff --git a/src/styles/Base.less b/src/styles/Base.less
index 177fdbb..eab9648 100644
--- a/src/styles/Base.less
+++ b/src/styles/Base.less
@@ -23,6 +23,10 @@
--vh-main-color-28: rgb(from var(--vh-main-color) r g b / 28%);
--vh-main-color-16: rgb(from var(--vh-main-color) r g b / 16%);
--vh-main-color-6: rgb(from var(--vh-main-color) r g b / 6%);
+
+ // Default
+ --vh-default: #BEC4CC;
+ --vh-default-hover: #BEC4CC18;
// Info
--vh-info: #3253b4;
--vh-info-hover: #3253b418;
@@ -155,19 +159,32 @@ img[data-vh-lz-src] {
// 超出一行省略
.vh-ellipsis {
- text-overflow: ellipsis;
- white-space: nowrap;
overflow: hidden;
-}
-
-// 超出两行省略
-.vh-ellipsis-2 {
+ text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
-}
+ word-break: break-all; // 解决纯数字/字母换行问题
+ // 单行省略（默认）
+ &:not([class*="line-"]) {
+ white-space: nowrap;
+ display: block;
+ }
+
+ .line-clamp(@lines) {
+ white-space: normal;
+ -webkit-line-clamp: @lines;
+ }
+
+ // 动态生成行数类
+ &.line-2 {
+ .line-clamp(2)
+ }
+
+ &.line-3 {
+ .line-clamp(3)
+ }
+}
@media screen and (max-width: 768px) {
// 手机端 禁止选择
diff --git a/src/styles/Reset.less b/src/styles/Reset.less
index 4a8e9b2..43abba4 100644
--- a/src/styles/Reset.less
+++ b/src/styles/Reset.less
@@ -21,6 +21,10 @@ dd {
margin: 0;
}
+del{
+ text-decoration: line-through;
+}
+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {