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 等
- 部署前需编辑 `astro.config.mjs` 中的站点设置。
### 自动部署
**Vercel 部署：**
[![vhAstro-Theme](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/uxiaohan/vhAstro-Theme)
### 使用命令
```bash

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

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

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

@ -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;
}
}
}

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

@ -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);
}
}
}

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

@ -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: '';

2
src/scripts/Friends.ts
View File

@ -13,7 +13,7 @@ const FriendsInit = async (data: any) => {
if (typeof data === 'string') {
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();
} catch {

2
src/scripts/Links.ts
View File

@ -11,7 +11,7 @@ const LinksInit = async (data: any) => {
if (typeof data === 'string') {
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();
} catch {

2
src/scripts/Search.ts
View File

@ -30,7 +30,7 @@ const findAndModifyElements = (arr: any[], keyword: string) => {
// 渲染页面
let searchHTML = '';
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;
}

20
src/styles/Article.less
View File

@ -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 {

19
src/styles/ArticleBase.less
View File

@ -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);

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-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) {
// 手机端 禁止选择

4
src/styles/Reset.less
View File

@ -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"] {