mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
feat: add underline animation
- Implement underline-animation UnoCSS shortcut for navbar links - Add dynamic hover and page transition effects for navigation - Update Navbar component to use new underline-animation class - Remove CDN configuration from preload settings - Modify font class for date display in index page - Add inline script to handle link animations during page transitions
This commit is contained in:
radishzzz
parent
0241091a8f
commit
f1d2204337
7 changed files with 61 additions and 10 deletions
|
|
@ -43,6 +43,7 @@ function isAboutPage(path: string) {
|
|||
const isPostActive = isHomePage(currentPath) || isPostPage(currentPath)
|
||||
const isTagActive = isTagPage(currentPath)
|
||||
const isAboutActive = isAboutPage(currentPath)
|
||||
|
||||
---
|
||||
|
||||
<nav class="mb-16 mt-13 text-5.6 font-semibold leading-13 font-navbar">
|
||||
|
|
@ -51,7 +52,7 @@ const isAboutActive = isAboutPage(currentPath)
|
|||
<a
|
||||
href={getLocalizedPath('/')}
|
||||
class:list={[
|
||||
isPostActive && 'font-bold text-primary'
|
||||
isPostActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
|
||||
]}
|
||||
>
|
||||
{currentUI.posts}
|
||||
|
|
@ -61,7 +62,7 @@ const isAboutActive = isAboutPage(currentPath)
|
|||
<a
|
||||
href={getLocalizedPath('/tags')}
|
||||
class:list={[
|
||||
isTagActive && 'font-bold text-primary'
|
||||
isTagActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
|
||||
]}
|
||||
>
|
||||
{currentUI.tags}
|
||||
|
|
@ -71,7 +72,7 @@ const isAboutActive = isAboutPage(currentPath)
|
|||
<a
|
||||
href={getLocalizedPath('/about')}
|
||||
class:list={[
|
||||
isAboutActive && 'font-bold text-primary'
|
||||
isAboutActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
|
||||
]}
|
||||
>
|
||||
{currentUI.about}
|
||||
|
|
@ -79,3 +80,33 @@ const isAboutActive = isAboutPage(currentPath)
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<script is:inline>
|
||||
document.addEventListener('astro:before-preparation', (event) => {
|
||||
const hoverElement = document.querySelector('.underline-animation:hover')
|
||||
|
||||
if (hoverElement) {
|
||||
const originalLoader = event.loader
|
||||
|
||||
event.loader = async function () {
|
||||
await new Promise((resolve) => {
|
||||
// 添加强制收回动画的类
|
||||
hoverElement.classList.add('force-leave')
|
||||
|
||||
// 等待动画完成
|
||||
setTimeout(resolve, 300)
|
||||
})
|
||||
|
||||
return originalLoader()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 为所有带有下划线动画的链接添加点击事件处理
|
||||
document.addEventListener('click', (e) => {
|
||||
const link = e.target.closest('.underline-animation')
|
||||
if (link) {
|
||||
link.classList.add('force-leave')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,6 @@ export const themeConfig: ThemeConfig = {
|
|||
|
||||
// PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
|
||||
preload: {
|
||||
cdn: 'https://cdn.jsdelivr.net', // Keep the default CDN unless you can proxy https://cdn.jsdelivr.net/gh/radishzzz/astro-theme-retypeset/src/styles/EarlySummer.css
|
||||
commentURL: '', // https://comment.example.com/
|
||||
imageHostURL: '', // https://image.example.com/
|
||||
// If you proxy analytics requests to the custom domain, you can fill in below
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
|
|||
const { locale, moreLocale } = themeConfig.global
|
||||
const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
|
||||
const { google = '', bing = '', yandex = '', baidu = '' } = verification
|
||||
const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
|
||||
const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
|
||||
---
|
||||
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const postsByYear = await getPostsByYear()
|
|||
{/* Post Title */}
|
||||
<a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
|
||||
{/* Post Date */}
|
||||
<div class="text-5.6 leading-7 font-date block lg:inline lg:before:content-['_']" aria-hidden="true">
|
||||
<div class="text-5.6 leading-7 font-time block lg:inline lg:before:content-['_']" aria-hidden="true">
|
||||
{post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
|
||||
{post.remarkPluginFrontmatter?.minutes && <span class="ml-2"> {post.remarkPluginFrontmatter.minutes} min</span>}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ h6 {
|
|||
|
||||
article img {
|
||||
--at-apply: 'cursor-zoom-in';
|
||||
/* Optimize animation performance of Scrollbar */
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
|
|
|||
1
src/types/index.d.ts
vendored
1
src/types/index.d.ts
vendored
|
|
@ -77,7 +77,6 @@ export interface ThemeConfig {
|
|||
}
|
||||
|
||||
preload: {
|
||||
cdn: string
|
||||
commentURL?: string
|
||||
imageHostURL?: string
|
||||
customGoogleAnalyticsURL?: string
|
||||
|
|
|
|||
|
|
@ -28,13 +28,34 @@ export default defineConfig({
|
|||
theme: {
|
||||
colors: light,
|
||||
fontFamily: {
|
||||
title: ['Snell-Black','EarlySummer-subset', 'EarlySummer', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
|
||||
navbar: ['STIX-italic','EarlySummer-subset', 'EarlySummer', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
|
||||
title: ['Snell-Black', 'EarlySummer-subset', 'EarlySummer', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
|
||||
navbar: ['STIX-italic', 'EarlySummer-subset', 'EarlySummer', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
|
||||
time: ['Snell-Bold', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
|
||||
serif: ['STIX', 'EarlySummer', 'Georgia', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
|
||||
},
|
||||
},
|
||||
shortcuts: [],
|
||||
shortcuts: {
|
||||
'underline-animation': [
|
||||
'relative',
|
||||
'after:content-empty',
|
||||
'after:absolute',
|
||||
'after:left-0',
|
||||
'after:bottom--1',
|
||||
'after:w-full',
|
||||
'after:h-0.4',
|
||||
'after:bg-secondary',
|
||||
'after:scale-x-0',
|
||||
'after:origin-right',
|
||||
'after:transition-transform',
|
||||
'after:duration-300',
|
||||
'after:ease-out',
|
||||
'hover:after:scale-x-100',
|
||||
'hover:after:origin-left',
|
||||
'transition-ready',
|
||||
'[&.force-leave]:after:scale-x-0',
|
||||
'[&.force-leave]:after:origin-right',
|
||||
],
|
||||
},
|
||||
rules: [],
|
||||
transformers: [
|
||||
transformerDirectives(),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue