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-03-28 09:56:51 +08:00
parent 18722803e9
commit bdc6f747b8
45 changed files with 200 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Aside/Aside.astro
+3 -1
View File
@@ -1,5 +1,7 @@
---
// 静态图片
// Svg 组件
import Svg from "@/components/Svg/Svg.astro";
import { Image } from "astro:assets";
// 时间处理
import { fmtTime } from "@/utils/index";
@@ -30,7 +32,7 @@ import "./Aside.less";
{
WebSites.map(item => (
<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
<Image src={item.icon} alt={item.text} width="1" height="1" />
<Svg src={item.icon} />
</a>
))
}
src/components/Aside/Aside.less
+2 -1
View File
@@ -125,10 +125,11 @@ aside.vh-aside {
z-index: -1;
}
&>img {
&>svg {
width: auto;
height: 1.18rem;
object-fit: contain;
stroke-width: 3px;
}
}
}
src/components/Comment/Comment.less
+21 -4
View File
@@ -1,6 +1,6 @@
.vh-comment {
box-sizing: border-box;
padding: 2rem 1rem 2.88rem;
padding: 2rem 1rem 6.88rem;
width: 100%;
height: max-content;
border-radius: 0.5rem;
@@ -326,6 +326,21 @@
--waline-avatar-radius: 0.58rem;
font-size: var(--vh-size-h2);
.wl-comment {
.wl-panel {
.wl-header {
label {
padding: 0.36rem 0.28rem;
font-size: 0.8rem;
}
}
.wl-input {
font-size: 0.688rem;
}
}
}
.wl-cards {
&>.wl-card-item {
padding-left: 0;
@@ -411,7 +426,7 @@
// 图片
img {
&:not(.wl-user-avatar, .wl-reaction-list img, .wl-panel img, .tk-owo-emotion) {
&:not(.wl-user-avatar, .wl-reaction-list img, .wl-panel img, .tk-owo-emotion, .wl-emoji, .wl-login-nick>img) {
box-sizing: border-box;
padding: 0.188rem;
margin: 0.188rem 0;
@@ -424,8 +439,10 @@
cursor: -webkit-zoom-in;
}
&.tk-owo-emotion {
max-height: 28px;
&.tk-owo-emotion,
&.wl-emoji {
height: 1.68rem;
object-fit: contain;
cursor: default;
}
}
src/components/Header/Header.astro
+4 -4
View File
@@ -1,8 +1,8 @@
---
import SITE_CONFIG from "@/config";
const { Navs } = SITE_CONFIG;
// 原生图片
import { Image } from "astro:assets";
// Svg 组件
import Svg from "@/components/Svg/Svg.astro";
// 搜索框组件
import Search from "@/components/Search/Search.astro";
// 顶部 Header 样式
@@ -12,7 +12,7 @@ import "./Header.less";
<header class="vh-header">
<section class="main">
<a href="/" class="index">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1l32 0 0 160.4c0 35.3 28.7 64 64 64l102.3 0-31.3-52.2c-4.1-6.8-2.6-15.5 3.5-20.5L288 368l-60.2-82.8c-10.9-15 8.2-33.5 22.8-22l117.9 92.6c8 6.3 8.2 18.4 .4 24.9L288 448l38.4 64 122.1 0c35.5 0 64.2-28.8 64-64.3l-.7-160.2 32 0z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-smart-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"></path><path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0"></path></svg>
<span>Home</span>
</a>
<div class="link-list vh-link-list">
@@ -20,7 +20,7 @@ import "./Header.less";
Navs.map(i => (
<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
{i.text}
<Image src={i.icon} alt={`${i.text}图标`} width="10" height="10" />
<Svg src={i.icon} />
</a>
))
}
src/components/Header/Header.less
+7 -3
View File
@@ -86,6 +86,7 @@ header.vh-header {
font-size: 1.088rem;
line-height: 1;
}
}
&.search-btn {
@@ -124,10 +125,13 @@ header.vh-header {
}
}
&>img {
width: 1.08rem;
height: 1.08rem;
&>svg {
pointer-events: none;
width: auto;
height: 1.18rem;
object-fit: contain;
stroke: var(--vh-black-88);
stroke-width: 2.88px;
}
}
}
src/components/MobileSidebar/MobileSidebar.astro
+3 -1
View File
@@ -1,6 +1,8 @@
---
import SITE_CONFIG from "@/config";
const { Navs, Title } = SITE_CONFIG;
// Svg 组件
import Svg from "@/components/Svg/Svg.astro";
// 侧边栏 MobileSidebar 样式
import "./MobileSidebar.less";
---
@@ -15,7 +17,7 @@ import "./MobileSidebar.less";
{
Navs.map(i => (
<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
<object data={i.icon} type="image/svg+xml" />
<Svg src={i.icon} />
{i.text}
</a>
))
src/components/MobileSidebar/MobileSidebar.less
+7 -6
View File
@@ -90,15 +90,16 @@
color: #fff;
background-color: #3366FF;
&>object {
filter: brightness(0) invert(100%);
&>svg {
stroke: #fff;
}
}
&>object {
width: 0.875rem;
height: 0.875rem;
transition: filter 0.16s ease-in-out;
&>svg {
width: auto;
height: 0.888rem;
object-fit: contain;
transition: stroke 0.16s ease-in-out;
}
}
}
src/components/Pagination/Pagination.astro
+7 -7
View File
@@ -8,7 +8,7 @@ import "./Pagination.less";
<section class="vh-article-pagination">
<!-- 上一页 -->
<a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev || "javascript:;"}>
<a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev || "javascript:;"} title="上一页">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path>
</svg>
@@ -16,7 +16,7 @@ import "./Pagination.less";
<!-- 首页 -->
{
data.first && data.prev && (
<a class={`vh-pagination-item`} href={data.first}>
<a class={`vh-pagination-item`} href={data.first} title="第一页">
1
</a>
)
@@ -24,17 +24,17 @@ import "./Pagination.less";
<!-- 总页的前一页 -->
{
(!data.next || !data.last) && data.prev && data.current !== "/2" && (
<a class={`vh-pagination-item`} href={data.prev}>
<a class={`vh-pagination-item`} href={data.prev} title={`第${fmtPage(data.prev)}页`}>
{fmtPage(data.prev)}
</a>
)
}
<!-- 当前页 -->
<a class="vh-pagination-item active" href="javascript:;">{fmtPage(data.current) || "1"}</a>
<a class="vh-pagination-item active" href="javascript:;" title={`第${fmtPage(data.current)}页`}>{fmtPage(data.current) || "1"}</a>
<!-- 第一页的后一页 -->
{
(!data.prev || !data.first) && data.next && data.last !== "/2" && (
<a class="vh-pagination-item" href={data.next}>
<a class="vh-pagination-item" href={data.next} title={`第${fmtPage(data.next)}页`}>
{fmtPage(data.next)}
</a>
)
@@ -42,13 +42,13 @@ import "./Pagination.less";
<!-- 总页 -->
{
data.next && data.last && (
<a class={`vh-pagination-item`} href={data.last}>
<a class={`vh-pagination-item`} href={data.last} title={`第${fmtPage(data.last)}页`}>
{fmtPage(data.last)}
</a>
)
}
<!-- 下一页 -->
<a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next || "javascript:;"}>
<a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next || "javascript:;"} title="下一页">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path>
</svg>
src/components/Reward/Reward.less
+1
View File
@@ -24,6 +24,7 @@
justify-content: center;
gap: 1.18rem;
width: 100%;
z-index: 1;
&>span {
position: relative;
src/components/Search/Search.less
+1 -1
View File
@@ -14,7 +14,7 @@
transition: opacity 0.16s ease-in-out;
opacity: 0;
pointer-events: none;
z-index: 10;
z-index: 1;
&.active {
opacity: 1;
src/components/Svg/Svg.astro
+6
View File
@@ -0,0 +1,6 @@
---
const { src } = Astro.props;
const svgContent = await import(`../../../public/assets/images/svg/${src}.svg?raw`).then(m => m.default);
---
{svgContent && <Fragment set:html={svgContent} />}