reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 19:22:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add underline animation

Browse source 
- 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 2025-01-28 02:46:38 +00:00
parent 0241091a8f
commit f1d2204337
7 changed files with 61 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/Navbar.astro
View file

@ -43,6 +43,7 @@ function isAboutPage(path: string) {
const isPostActive = isHomePage(currentPath) || isPostPage(currentPath) const isPostActive = isHomePage(currentPath) || isPostPage(currentPath)
const isTagActive = isTagPage(currentPath) const isTagActive = isTagPage(currentPath)
const isAboutActive = isAboutPage(currentPath) const isAboutActive = isAboutPage(currentPath)
--- ---
<nav class="mb-16 mt-13 text-5.6 font-semibold leading-13 font-navbar"> <nav class="mb-16 mt-13 text-5.6 font-semibold leading-13 font-navbar">
@ -51,7 +52,7 @@ const isAboutActive = isAboutPage(currentPath)
<a <a
href={getLocalizedPath('/')} href={getLocalizedPath('/')}
class:list={[ class:list={[
isPostActive && 'font-bold text-primary' isPostActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
]} ]}
> >
{currentUI.posts} {currentUI.posts}
@ -61,7 +62,7 @@ const isAboutActive = isAboutPage(currentPath)
<a <a
href={getLocalizedPath('/tags')} href={getLocalizedPath('/tags')}
class:list={[ class:list={[
isTagActive && 'font-bold text-primary' isTagActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
]} ]}
> >
{currentUI.tags} {currentUI.tags}
@ -71,7 +72,7 @@ const isAboutActive = isAboutPage(currentPath)
<a <a
href={getLocalizedPath('/about')} href={getLocalizedPath('/about')}
class:list={[ class:list={[
isAboutActive && 'font-bold text-primary' isAboutActive ? 'underline-animation font-bold text-primary' : 'underline-animation',
]} ]}
> >
{currentUI.about} {currentUI.about}
@ -79,3 +80,33 @@ const isAboutActive = isAboutPage(currentPath)
</li> </li>
</ul> </ul>
</nav> </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>

1
src/config.ts
View file

@ -93,7 +93,6 @@ export const themeConfig: ThemeConfig = {
// PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
preload: { 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/ commentURL: '', // https://comment.example.com/
imageHostURL: '', // https://image.example.com/ imageHostURL: '', // https://image.example.com/
// If you proxy analytics requests to the custom domain, you can fill in below // If you proxy analytics requests to the custom domain, you can fill in below

2
src/layouts/Head.astro
View file

@ -14,7 +14,7 @@ const { light: { background: lightMode }, dark: { background: darkMode } } = the
const { locale, moreLocale } = themeConfig.global const { locale, moreLocale } = themeConfig.global
const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {} const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
const { google = '', bing = '', yandex = '', baidu = '' } = verification const { google = '', bing = '', yandex = '', baidu = '' } = verification
const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
--- ---
<head> <head>

2
src/pages/index.astro
View file

@ -39,7 +39,7 @@ const postsByYear = await getPostsByYear()
{/* Post Title */} {/* Post Title */}
<a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a> <a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
{/* Post Date */} {/* 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.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
{post.remarkPluginFrontmatter?.minutes && <span class="ml-2"> {post.remarkPluginFrontmatter.minutes} min</span>} {post.remarkPluginFrontmatter?.minutes && <span class="ml-2"> {post.remarkPluginFrontmatter.minutes} min</span>}
</div> </div>

1
src/styles/global.css
View file

@ -47,6 +47,7 @@ h6 {
article img { article img {
--at-apply: 'cursor-zoom-in'; --at-apply: 'cursor-zoom-in';
/* Optimize animation performance of Scrollbar */
transform: translateZ(0); transform: translateZ(0);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
} }

1
src/types/index.d.ts vendored
View file

@ -77,7 +77,6 @@ export interface ThemeConfig {
} }
preload: { preload: {
cdn: string
commentURL?: string commentURL?: string
imageHostURL?: string imageHostURL?: string
customGoogleAnalyticsURL?: string customGoogleAnalyticsURL?: string

27
uno.config.ts
View file

@ -28,13 +28,34 @@ export default defineConfig({
theme: { theme: {
colors: light, colors: light,
fontFamily: { fontFamily: {
title: ['Snell-Black','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'], 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'], 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'], 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: [], rules: [],
transformers: [ transformers: [
transformerDirectives(), transformerDirectives(),