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 11:01:29 +08:00
parent b76b59088b
commit b6fd209b0b
12 changed files with 87 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -15,15 +15,15 @@
"@astrojs/mdx": "^4.2.3",
"@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "^3.3.0",
"@swup/astro": "^1.5.0",
"@swup/astro": "^1.6.0",
"aplayer": "^1.10.1",
"astro": "^5.5.6",
"astro": "^5.6.0",
"overlayscrollbars": "^2.11.1",
"vanilla-lazyload": "^19.1.3",
"vh-plugin": "^1.2.2"
},
"devDependencies": {
"@playform/compress": "^0.1.8",
"@playform/compress": "^0.1.9",
"@types/dplayer": "^1.25.5",
"@types/nprogress": "^0.2.3",
"@waline/client": "^3.5.6",

BIN
public/assets/images/background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

10
public/assets/js/vhPaopao.js
View File

@ -1,5 +1,5 @@
document.addEventListener('DOMContentLoaded', () => {
const vhPaopaoInit = (element, options) => {
export default (element, options) => {
document.querySelectorAll('.vh-paopao').forEach(item => setTimeout(() => item.remove()));
const config = Object.assign({ radius: 10, density: 0.3, clearOffset: 0.2 }, options);
let width, height, ctx, active = true;
const canvas = document.createElement('canvas');
@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
element.parentElement.style.overflow = 'hidden';
canvas.width = width;
canvas.height = height;
canvas.classList.add('vh-paopao');
ctx = canvas.getContext('2d');
};
@ -47,8 +48,3 @@ document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('scroll', () => active = document.documentElement.scrollTop <= height);
window.addEventListener('resize', () => { width = element.clientWidth; height = element.clientHeight; canvas.width = width; canvas.height = height; });
};
// 调用
const target = document.querySelector('main.main > .header-main');
target && vhPaopaoInit(target, { radius: 10, density: 0.2, color: "rgba(255,255,255,.4)", clearOffset: 0.99 });
});

2
src/components/Aside/Aside.less
View File

@ -138,7 +138,7 @@ aside.vh-aside {
&>.count {
box-sizing: border-box;
padding: 1rem 0;
padding: 1rem 0 0;
display: flex;
flex-direction: column;
justify-content: center;

5
src/components/MainHeader/MainHeader.less
View File

@ -8,7 +8,7 @@
gap: 0.88rem;
width: 100%;
height: var(--vh-main-header-height);
transition: height 0.3s ease-in-out;
transition: height 0.58s ease-in-out;
z-index: 1;
&::before {
@ -16,8 +16,7 @@
position: absolute;
inset: 0;
pointer-events: none;
background: var(--vh-home-banner) no-repeat top center;
background-size: cover;
background: var(--vh-home-banner);
z-index: -1;
}

7
src/config.ts
View File

@ -18,7 +18,12 @@ export default {
// 顶部 Banner 配置
HomeBanner: {
enable: true,
cover: '/assets/images/home-banner.webp'
// 首页高度
HomeHeight: '38.88rem',
// 其他页面高度
PageHeight: '28.88rem',
// 背景
background: "url('/assets/images/home-banner.webp') no-repeat center 60%/cover",
},
// 博客主题配置
Theme: {

8
src/layouts/Layout/Layout.astro
View File

@ -1,5 +1,5 @@
---
const { title, keywords, description, pagecover, activeNav } = Astro.props;
const { title, keywords, description, pagecover, activeNav, Home } = Astro.props;
// 网站配置
import SITE_INFO from "@/config";
const { GoogleAds, Theme, HomeBanner } = SITE_INFO;
@ -30,15 +30,13 @@ import "./Layout.less";
<Head Title={title} Keywords={keywords} Description={description} PageCover={pagecover}>
<!-- 谷歌广告JS加载项 -->
{ad_Client && (asideAD_Slot || articleAD_Slot) && <script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ad_Client}`} crossorigin="anonymous" />}
<!-- 泡泡🫧 -->
<script is:inline src="/assets/js/vhPaopao.js" defer></script>
<!-- 彩旗🎈 -->
<script is:inline src="/assets/js/vhCaiqi.js" defer></script>
<!-- 设置主题颜色 -->
<Fragment
set:html={`<style>:root {${Object.entries(Theme)
.map(([key, value]) => `${key}:${value};`)
.join("")}--vh-home-banner:url('${HomeBanner.cover}')}</style>`}
.join("")}--vh-main-header-height:${Home ? HomeBanner.HomeHeight : HomeBanner.PageHeight};--vh-home-banner:${HomeBanner.background}}</style>`}
/>
</Head>
<body>
@ -46,7 +44,7 @@ import "./Layout.less";
<Header activeNav={activeNav} />
<main class="main">
{HomeBanner.enable && <MainHeader />}
<section class="main-inner" style={`padding-top:${HomeBanner.enable ? "2rem" : "calc(66px + 0.68rem)"}`}>
<section class="main-inner" style={`padding-top:${HomeBanner.enable ? "0.88rem" : "calc(66px + 0.68rem)"}`}>
<section class="main-inner-content">
<slot />
</section>

2
src/pages/[...page].astro
View File

@ -31,7 +31,7 @@ import Pagination from "@/components/Pagination/Pagination.astro";
const currentPage = page_data.url.current.replace("/", "");
---
<Layout title={currentPage ? `第${currentPage}页文章` : ""} description={Description}>
<Layout title={currentPage ? `第${currentPage}页文章` : ""} description={Description} Home={true}>
<section class="article-list-main">
<section class="article-list">
<!-- 文章列表 -->

8
src/scripts/Init.ts
View File

@ -1,6 +1,8 @@
import { inRouter, outRouter } from "@/utils/updateRouter";
// Banner 打字效果
import TypeWriteInit from "@/scripts/TypeWrite";
// 泡泡🫧效果
import PaoPaoInit from "@/scripts/PaoPao";
// 初始化文章代码块
import codeInit from "@/scripts/Code";
// 初始化视频播放器
@ -45,8 +47,6 @@ const videoList: any[] = [];
const MusicList: any[] = [];
let commentLIst: any = { walineInit: null };
const indexInit = async (only: boolean = true) => {
// 打字效果
only && TypeWriteInit();
// 初始化网站运行时间
only && initWebSiteTime();
// 初始化BackTop组件
@ -79,6 +79,10 @@ const indexInit = async (only: boolean = true) => {
checkComment() && commentInit(checkComment(), commentLIst)
// Han Analytics 统计
HanAnalyticsInit();
// 打字效果
only && TypeWriteInit();
// 泡泡🫧效果
PaoPaoInit();
// 预加载搜索数据
only && searchFn("");
// 初始化搜索功能

12
src/scripts/PaoPao.ts Normal file
View File

@ -0,0 +1,12 @@
import vhPaopaoInit from '../../public/assets/js/vhPaopao.js';
let headerMainHeight = 0;
export default async () => {
// 调用
const target = document.querySelector('main.main > .header-main');
if (!target) return;
setTimeout(() => {
if (headerMainHeight == target.clientHeight) return;
headerMainHeight = target.clientHeight;
vhPaopaoInit(target, { radius: 10, density: 0.2, color: "rgba(255,255,255,.4)", clearOffset: 0.99 });
}, 688);
}

6
src/styles/ArticleBase.less
View File

@ -201,6 +201,9 @@
// :::note
&.vh-note {
display: flex;
flex-direction: column;
gap: 0.688rem;
padding: 0.888rem;
border-left: 5px solid #eee;
border-left-color: #777;
@ -242,9 +245,8 @@
}
p {
padding: 0.38rem 0;
font-size: 0.875rem;
line-height: 1.388rem;
line-height: 1.58rem;
font-weight: 500;
}
}

4
src/styles/Base.less
View File

@ -8,9 +8,7 @@
// Body 背景颜色
--vh-body-bg: #F8F8F8;
// Back Top 按钮位置
--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2);
// Main Header 封面高度
--vh-main-header-height: 38.88rem;
--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
// 字体颜色
--vh-font-88: rgb(from var(--vh-font-color) r g b / 88%);
--vh-font-66: rgb(from var(--vh-font-color) r g b / 66%);