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-04-04 14:04:24 +08:00
parent 38c449e71e
commit 70ffbfd80c
12 changed files with 103 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -61,6 +61,13 @@
- 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等 - 参考官方指南将博客部署至 Vercel, Netlify,Cloudflare Pages, GitHub Pages 等
- 部署前需编辑 `astro.config.mjs` 中的站点设置。 - 部署前需编辑 `astro.config.mjs` 中的站点设置。
### 自动部署
**Vercel 部署：**
[![vhAstro-Theme](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme)
### 使用命令 ### 使用命令
```bash ```bash

4
src/components/Archive/Archive.astro
View File

@ -19,8 +19,8 @@ import "./Archive.less";
<a href={`/article/${_.id}`}> <a href={`/article/${_.id}`}>
<em>{fmtTime(_.date, "MM-DD")}</em> <em>{fmtTime(_.date, "MM-DD")}</em>
<i /> <i />
<span>{_.title}</span> <span class="vh-ellipsis">{_.title}</span>
<cite>{_.tags.map((tag: string) => `#${tag}`).join(" ")}</cite> <cite class="vh-ellipsis">{_.tags.map((tag: string) => `#${tag}`).join(" ")}</cite>
</a> </a>
))} ))}
</div> </div>

6
src/components/Archive/Archive.less
View File

@ -110,11 +110,8 @@ section.vh-archive-main {
&>span { &>span {
flex: 1; flex: 1;
white-space: nowrap;
overflow: hidden;
color: var(--vh-font-66); color: var(--vh-font-66);
font-weight: 500; font-weight: 500;
text-overflow: ellipsis;
transition: all .18s; transition: all .18s;
} }
@ -125,9 +122,6 @@ section.vh-archive-main {
color: var(--vh-font-66); color: var(--vh-font-66);
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
} }

27
src/components/Search/Search.less
View File

@ -38,7 +38,6 @@
max-height: 88vh; max-height: 88vh;
border-radius: 1rem; border-radius: 1rem;
background-color: var(--vh-white-color); background-color: var(--vh-white-color);
transform: translateY(-1rem); transform: translateY(-1rem);
transition: transform 0.18s; transition: transform 0.18s;
overflow: hidden; overflow: hidden;
@ -100,6 +99,7 @@
} }
&>.vh-search-item { &>.vh-search-item {
position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 0.75rem; padding: 0.75rem;
display: flex; display: flex;
@ -110,19 +110,30 @@
&:hover { &:hover {
&::before { &::before {
opacity: 1;
transform: scale(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 { &>span {
width: 100%; width: 100%;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
color: var(--vh-font-color); color: var(--vh-font-color);
line-height: 1.16; line-height: 1.16;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
&>p { &>p {
@ -131,15 +142,9 @@
color: var(--vh-font-56); color: var(--vh-font-56);
font-weight: 400; font-weight: 400;
line-height: 1.25rem; 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 { &>span {
color: #60a5fa; color: var(--vh-main-color);
} }
} }
} }

49
src/layouts/ToolLayout/ToolLayout.less
View File

@ -56,6 +56,8 @@
&>.avatar { &>.avatar {
transform: scale(1.2) rotate(8deg); 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; width: 3.36rem;
height: 3.36rem; height: 3.36rem;
border-radius: 50%; border-radius: 50%;
border: solid 1px #E8E8E8; border: solid 1px var(--vh-font-16);
overflow: hidden; overflow: hidden;
opacity: 1; opacity: 1;
transition: all .18s; transition: all .18s;
@ -77,7 +79,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 0.388rem; gap: 0.68rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -91,17 +93,12 @@
&>p { &>p {
box-sizing: border-box; box-sizing: border-box;
padding: 0;
width: 100%; width: 100%;
height: max-content; height: max-content;
font-size: 0.81rem; font-size: 0.81rem;
color: #858585; color: var(--vh-font-56);
line-height: 1rem; 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; height: max-content;
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: var(--vh-box-shadow); 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-position: 0 100%;
background-size: 0 100%; background-size: 0 100%;
transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s; transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s;
@ -154,15 +151,9 @@
&>p { &>p {
padding: 0; padding: 0;
color: #26262680; color: var(--vh-font-66);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.8; 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 { &>footer {
@ -179,23 +170,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
height: 1.56rem; height: max-content;
font-size: 0.8rem; font-size: 0.8rem;
overflow: hidden; overflow: hidden;
&>em { &>em {
font-style: normal; font-style: normal;
flex: 1; flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
&>img { &>img {
box-sizing: border-box;
padding: 0.188rem;
flex-shrink: 0; flex-shrink: 0;
width: 1.56rem; width: 1.88rem;
height: 1.56rem; height: 1.88rem;
object-fit: cover;
border: 1px solid var(--vh-font-16);
border-radius: 50%; border-radius: 50%;
background-color: var(--vh-white-color);
overflow: hidden;
} }
} }
@ -206,8 +200,8 @@
&>time { &>time {
flex-shrink: 0; flex-shrink: 0;
width: max-content; width: max-content;
padding: 0.5rem; padding: 0.28rem 0.5rem;
background: #F7F7F7; background: var(--vh-font-6);
border-radius: 0.8rem; border-radius: 0.8rem;
} }
} }
@ -266,7 +260,7 @@
&>time { &>time {
font-size: 0.7rem; font-size: 0.7rem;
color: #858585; color: var(--vh-font-66);
} }
} }
} }
@ -311,10 +305,11 @@
&>.geographical-location { &>.geographical-location {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end;
gap: 0.2rem; gap: 0.2rem;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #49c7cc; color: var(--vh-success);
&::before { &::before {
content: ''; content: '';

2
src/scripts/Friends.ts
View File

@ -13,7 +13,7 @@ const FriendsInit = async (data: any) => {
if (typeof data === 'string') { if (typeof data === 'string') {
res = await $GET(api); res = await $GET(api);
} }
friendsDOM.innerHTML = res.map((i: any) => `<article><a href="${i.link}" target="_blank" rel="noopener nofollow"><header><h2>${i.title}</h2></header><p>${i.content}</p><footer><span><img src="https://icon.bqb.cool/?url=${i.link.split('//')[1].split('/')[0]}" /><em>${i.auther}</em></span><time>${fmtDate(i.date, false)}前</time></footer></a></article>`).join(''); friendsDOM.innerHTML = res.map((i: any) => `<article><a href="${i.link}" target="_blank" rel="noopener nofollow"><header><h2>${i.title}</h2></header><p class="vh-ellipsis line-2">${i.content}</p><footer><span><img src="https://icon.bqb.cool/?url=${i.link.split('//')[1].split('/')[0]}" /><em class="vh-ellipsis">${i.auther}</em></span><time>${fmtDate(i.date, false)}前</time></footer></a></article>`).join('');
// 图片懒加载 // 图片懒加载
vhLzImgInit(); vhLzImgInit();
} catch { } catch {

2
src/scripts/Links.ts
View File

@ -11,7 +11,7 @@ const LinksInit = async (data: any) => {
if (typeof data === 'string') { if (typeof data === 'string') {
res = await $GET(data); res = await $GET(data);
} }
linksDOM.innerHTML = res.map((i: any) => `<a href="${i.link}" target="_blank"><img class="avatar" src="${i.avatar}" /><section class="link-info"><span>${i.name}</span><p>${i.descr}</p></section></a>`).join(''); linksDOM.innerHTML = res.map((i: any) => `<a href="${i.link}" target="_blank"><img class="avatar" src="${i.avatar}" /><section class="link-info"><span>${i.name}</span><p class="vh-ellipsis line-2">${i.descr}</p></section></a>`).join('');
// 图片懒加载 // 图片懒加载
vhLzImgInit(); vhLzImgInit();
} catch { } catch {

2
src/scripts/Search.ts
View File

@ -30,7 +30,7 @@ const findAndModifyElements = (arr: any[], keyword: string) => {
// 渲染页面 // 渲染页面
let searchHTML = ''; let searchHTML = '';
const renderSearch = (arr: any[]) => { const renderSearch = (arr: any[]) => {
searchHTML = !arr.length ? '<em></em>' : arr.map(i => `<a class="vh-search-item" href="${i.url}"><span>${i.title}</span><p>${i.content}</p></a>`).join(''); searchHTML = !arr.length ? '<em></em>' : arr.map(i => `<a class="vh-search-item" href="${i.url}"><span class="vh-ellipsis">${i.title}</span><p class="vh-ellipsis line-3">${i.content}</p></a>`).join('');
document.querySelector('.vh-header>.main>.vh-search>main>.vh-search-list')!.innerHTML = searchHTML; document.querySelector('.vh-header>.main>.vh-search>main>.vh-search-list')!.innerHTML = searchHTML;
} }

20
src/styles/Article.less
View File

@ -158,7 +158,17 @@ article.vh-article-main {
z-index: -1; 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); color: var(--vh-info);
&::after { &::after {
@ -166,7 +176,7 @@ article.vh-article-main {
} }
} }
&:nth-of-type(2n+2) { &:nth-of-type(6n+3) {
color: var(--vh-success); color: var(--vh-success);
&::after { &::after {
@ -174,7 +184,7 @@ article.vh-article-main {
} }
} }
&:nth-of-type(2n+3) { &:nth-of-type(6n+4) {
color: var(--vh-warning); color: var(--vh-warning);
&::after { &::after {
@ -182,7 +192,7 @@ article.vh-article-main {
} }
} }
&:nth-of-type(2n+4) { &:nth-of-type(6n+5) {
color: var(--vh-error); color: var(--vh-error);
&::after { &::after {
@ -190,7 +200,7 @@ article.vh-article-main {
} }
} }
&:nth-of-type(2n+5) { &:nth-of-type(6n+6) {
color: var(--vh-import); color: var(--vh-import);
&::after { &::after {

19
src/styles/ArticleBase.less
View File

@ -62,7 +62,6 @@
p, p,
ul:not(.vh-vhMusic ul, .vh-comment ul), ul:not(.vh-vhMusic ul, .vh-comment ul),
ol:not(.vh-vhMusic ol, .vh-comment ol) { ol:not(.vh-vhMusic ol, .vh-comment ol) {
margin: 0;
padding: 0.618rem 0; padding: 0.618rem 0;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: 1.6; line-height: 1.6;
@ -112,7 +111,6 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
line-height: 1.58rem; line-height: 1.58rem;
color: #6A737D;
} }
} }
@ -125,7 +123,7 @@
border-spacing: 0; border-spacing: 0;
font-size: 0.9rem; font-size: 0.9rem;
background-color: var(--vh-white-color); background-color: var(--vh-white-color);
border: 1px solid #EEEEEE; border: 1px solid var(--vh-font-16);
border-radius: 0.38rem; border-radius: 0.38rem;
overflow: hidden; overflow: hidden;
@ -143,10 +141,10 @@
} }
th { th {
background-color: #f8f9fa; background-color: var(--vh-font-6);
padding: 0.75rem; padding: 0.75rem;
border-bottom: solid 1px #EEEEEE; border-bottom: solid 1px var(--vh-font-16);
border-right: solid 1px #EEEEEE; border-right: solid 1px var(--vh-font-16);
&:nth-last-of-type(1) { &:nth-last-of-type(1) {
border-right: none; border-right: none;
@ -156,8 +154,8 @@
td { td {
padding: 0.618rem 0.75rem; padding: 0.618rem 0.75rem;
vertical-align: top; vertical-align: top;
border-bottom: solid 1px #EEEEEE; border-bottom: solid 1px var(--vh-font-16);
border-right: solid 1px #EEEEEE; border-right: solid 1px var(--vh-font-16);
&:nth-last-of-type(1) { &:nth-last-of-type(1) {
border-right: none; border-right: none;
@ -205,10 +203,9 @@
flex-direction: column; flex-direction: column;
gap: 0.688rem; gap: 0.688rem;
padding: 0.888rem; padding: 0.888rem;
border-left: 5px solid #eee; border-left: 5px solid var(--vh-font-28);
border-left-color: #777;
border-radius: 3px; border-radius: 3px;
background-color: #f7f7f7; background-color: var(--vh-font-6);
&.note-success { &.note-success {
border-color: var(--vh-success); border-color: var(--vh-success);

33
src/styles/Base.less
View File

@ -23,6 +23,10 @@
--vh-main-color-28: rgb(from var(--vh-main-color) r g b / 28%); --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-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%); --vh-main-color-6: rgb(from var(--vh-main-color) r g b / 6%);
// Default
--vh-default: #BEC4CC;
--vh-default-hover: #BEC4CC18;
// Info // Info
--vh-info: #3253b4; --vh-info: #3253b4;
--vh-info-hover: #3253b418; --vh-info-hover: #3253b418;
@ -155,19 +159,32 @@ img[data-vh-lz-src] {
// 超出一行省略 // 超出一行省略
.vh-ellipsis { .vh-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; overflow: hidden;
} text-overflow: ellipsis;
// 超出两行省略
.vh-ellipsis-2 {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; word-break: break-all; // 解决纯数字/字母换行问题
overflow: hidden;
// 单行省略（默认）
&: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) { @media screen and (max-width: 768px) {
// 手机端 禁止选择 // 手机端 禁止选择

4
src/styles/Reset.less
View File

@ -21,6 +21,10 @@ dd {
margin: 0; 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 */ /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"], ul[role="list"],
ol[role="list"] { ol[role="list"] {