mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-16 23:41:20 +08:00
style: 修改标题和样式
- 修改网站标题为 "KazooTTT 博客" - 修改头部导航栏样式，使页面更加美观
This commit is contained in:
KazooTTT
12
README.md
12
README.md
@ -1,15 +1,13 @@
|
|||||||
# KazooTTT | 声控烤箱 博客
|
# KazooTTT 博客
|
||||||
|
|
||||||
## 关于我
|
## 关于我
|
||||||
|
|
||||||
无论是博客还是笔记，最重要的服务对象是我自己。
|
无论是博客还是笔记，最重要的服务对象是我自己。
|
||||||
|
|
||||||
[平台合集](<https://bento.me/kazoottt>)
|
[平台合集](https://bento.me/kazoottt)
|
||||||
|
|
||||||
[个人博客｜Blog](<https://blog.kazoottt.top/>)
|
[个人博客｜Blog](https://blog.kazoottt.top/)
|
||||||
|
|
||||||
[个人笔记 ｜ Notes](<https://notes.kazoottt.top/>)
|
|
||||||
|
|
||||||
[GitHub](<https://github.com/KazooTTT>)
|
|
||||||
|
|
||||||
|
[个人笔记 ｜ Notes](https://notes.kazoottt.top/)
|
||||||
|
|
||||||
|
[GitHub](https://github.com/KazooTTT)
|
||||||
|
|||||||
@ -1,111 +1,111 @@
|
|||||||
---
|
---
|
||||||
import kazootttAvatar from '../../assets/kazoottt-avatar.jpeg'
|
import kazootttAvatar from "../../assets/kazoottt-avatar.jpeg";
|
||||||
import { Image } from 'astro:assets'
|
import { Image } from "astro:assets";
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class='fixed left-0 right-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-800'>
|
<header class="fixed top-0 right-0 left-0 z-50 bg-white shadow-sm dark:bg-gray-800">
|
||||||
<nav
|
<nav
|
||||||
class='mx-auto flex w-full items-center justify-between px-4 py-3 lg:flex lg:w-3/5 lg:w-4/5 lg:items-center'
|
class="mx-auto flex w-full items-center justify-between px-4 py-3 lg:flex lg:w-3/5 lg:w-4/5 lg:items-center"
|
||||||
aria-label='global'
|
aria-label="global"
|
||||||
>
|
>
|
||||||
<a class='flex items-center' href='/'>
|
<a class="flex items-center" href="/">
|
||||||
<Image
|
<Image
|
||||||
src={kazootttAvatar}
|
src={kazootttAvatar}
|
||||||
alt='profile photo'
|
alt="profile photo"
|
||||||
class='mr-2 h-8 w-auto rounded-full lg:hidden'
|
class="mr-2 h-8 w-auto rounded-full lg:hidden"
|
||||||
loading='eager'
|
loading="eager"
|
||||||
/>
|
/>
|
||||||
<div class='hidden flex-none text-xl font-semibold lg:block' aria-label='Brand'>声控烤箱</div>
|
<div class="hidden flex-none text-xl font-semibold lg:block" aria-label="Brand">KazooTTT</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Mobile menu button -->
|
<!-- Mobile menu button -->
|
||||||
<button
|
<button
|
||||||
id='mobileMenuButton'
|
id="mobileMenuButton"
|
||||||
class='rounded-md p-2 hover:bg-border lg:hidden'
|
class="hover:bg-border rounded-md p-2 lg:hidden"
|
||||||
aria-label='Toggle mobile menu'
|
aria-label="Toggle mobile menu"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='24'
|
width="24"
|
||||||
height='24'
|
height="24"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='h-6 w-6'
|
class="h-6 w-6"
|
||||||
>
|
>
|
||||||
<path fill='currentColor' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'></path>
|
<path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Desktop Navigation -->
|
<!-- Desktop Navigation -->
|
||||||
<div class='hidden flex-row items-center justify-center gap-x-7 lg:flex'>
|
<div class="hidden flex-row items-center justify-center gap-x-7 lg:flex">
|
||||||
<div class='relative'>
|
<div class="relative">
|
||||||
<a
|
<a
|
||||||
href='/blog'
|
href="/blog"
|
||||||
class={`peer flex items-center text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}`}
|
class={`peer flex items-center text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/blog") ? "text-green-400" : ""}`}
|
||||||
aria-label='Blog Menu'
|
aria-label="Blog Menu"
|
||||||
>
|
>
|
||||||
Blog
|
Blog
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='20'
|
width="20"
|
||||||
height='20'
|
height="20"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='ml-1 transform transition-transform duration-200 peer-hover:rotate-180'
|
class="ml-1 transform transition-transform duration-200 peer-hover:rotate-180"
|
||||||
>
|
>
|
||||||
<path fill='currentColor' d='m12 15l-5-5h10z'></path>
|
<path fill="currentColor" d="m12 15l-5-5h10z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<div
|
<div
|
||||||
class='invisible absolute left-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 hover:visible hover:opacity-100 peer-hover:visible peer-hover:opacity-100 dark:bg-gray-800'
|
class="invisible absolute left-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 peer-hover:visible peer-hover:opacity-100 hover:visible hover:opacity-100 dark:bg-gray-800"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href='/categories'
|
href="/categories"
|
||||||
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
|
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith("/categories") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
|
||||||
aria-label='Categories Page'
|
aria-label="Categories Page"
|
||||||
>
|
>
|
||||||
Categories
|
Categories
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/tags'
|
href="/tags"
|
||||||
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
|
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith("/tags") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
|
||||||
aria-label='Tags Page'
|
aria-label="Tags Page"
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/diary'
|
href="/diary"
|
||||||
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/diary') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
|
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith("/diary") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
|
||||||
aria-label='Diary Page'
|
aria-label="Diary Page"
|
||||||
>
|
>
|
||||||
Diary
|
Diary
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
href='/tools'
|
href="/tools"
|
||||||
class={`flex-none text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}`}
|
class={`flex-none text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/tools") ? "text-green-400" : ""}`}
|
||||||
aria-label='Nav Menu Item'
|
aria-label="Nav Menu Item"
|
||||||
>Tools
|
>Tools
|
||||||
</a>
|
</a>
|
||||||
<div class='relative'>
|
<div class="relative">
|
||||||
<button class='peer flex items-center text-[1.05rem] font-medium' aria-label='More Menu'>
|
<button class="peer flex items-center text-[1.05rem] font-medium" aria-label="More Menu">
|
||||||
More
|
More
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='20'
|
width="20"
|
||||||
height='20'
|
height="20"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='ml-1 transform transition-transform duration-200 peer-hover:rotate-180'
|
class="ml-1 transform transition-transform duration-200 peer-hover:rotate-180"
|
||||||
>
|
>
|
||||||
<path fill='currentColor' d='m12 15l-5-5h10z'></path>
|
<path fill="currentColor" d="m12 15l-5-5h10z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
class='invisible absolute right-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 hover:visible hover:opacity-100 peer-hover:visible peer-hover:opacity-100 dark:bg-gray-800'
|
class="invisible absolute right-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 peer-hover:visible peer-hover:opacity-100 hover:visible hover:opacity-100 dark:bg-gray-800"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href='/friends'
|
href="/friends"
|
||||||
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
|
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith("/friends") ? "text-green-400" : ""} dark:hover:bg-gray-700`}
|
||||||
aria-label='Friends Page'
|
aria-label="Friends Page"
|
||||||
>
|
>
|
||||||
Friends
|
Friends
|
||||||
</a>
|
</a>
|
||||||
@ -113,30 +113,30 @@ import { Image } from 'astro:assets'
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
id='toggleDarkMode'
|
id="toggleDarkMode"
|
||||||
class='relative rounded-md border border-border p-1.5 transition-all hover:bg-border'
|
class="border-border hover:bg-border relative rounded-md border p-1.5 transition-all"
|
||||||
>
|
>
|
||||||
<span class='sr-only'>Dark Theme</span>
|
<span class="sr-only">Dark Theme</span>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='32'
|
width="32"
|
||||||
height='32'
|
height="32"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0'
|
class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:hidden dark:scale-0 dark:-rotate-90"
|
||||||
><path
|
><path
|
||||||
fill='currentColor'
|
fill="currentColor"
|
||||||
d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12'
|
d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12"
|
||||||
></path></svg
|
></path></svg
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='32'
|
width="32"
|
||||||
height='32'
|
height="32"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100'
|
class="hidden h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:block dark:scale-100 dark:rotate-0"
|
||||||
><path
|
><path
|
||||||
fill='currentColor'
|
fill="currentColor"
|
||||||
d='M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20'
|
d="M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20"
|
||||||
></path></svg
|
></path></svg
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
@ -144,71 +144,71 @@ import { Image } from 'astro:assets'
|
|||||||
|
|
||||||
<!-- Mobile Navigation -->
|
<!-- Mobile Navigation -->
|
||||||
<div
|
<div
|
||||||
id='mobileMenu'
|
id="mobileMenu"
|
||||||
class='fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg dark:bg-gray-800 lg:hidden'
|
class="fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg lg:hidden dark:bg-gray-800"
|
||||||
>
|
>
|
||||||
<div class='space-y-2 px-4 py-2'>
|
<div class="space-y-2 px-4 py-2">
|
||||||
<a
|
<a
|
||||||
href='/blog'
|
href="/blog"
|
||||||
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}`}
|
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/blog") ? "text-green-400" : ""}`}
|
||||||
>
|
>
|
||||||
Blog
|
Blog
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/categories'
|
href="/categories"
|
||||||
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''}`}
|
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/categories") ? "text-green-400" : ""}`}
|
||||||
>
|
>
|
||||||
Categories
|
Categories
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/tags'
|
href="/tags"
|
||||||
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''}`}
|
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/tags") ? "text-green-400" : ""}`}
|
||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/diary'
|
href="/diary"
|
||||||
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/diary') ? 'text-green-400' : ''}`}
|
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/diary") ? "text-green-400" : ""}`}
|
||||||
>
|
>
|
||||||
Diary
|
Diary
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/tools'
|
href="/tools"
|
||||||
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}`}
|
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/tools") ? "text-green-400" : ""}`}
|
||||||
>
|
>
|
||||||
Tools
|
Tools
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href='/friends'
|
href="/friends"
|
||||||
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''}`}
|
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith("/friends") ? "text-green-400" : ""}`}
|
||||||
>
|
>
|
||||||
Friends
|
Friends
|
||||||
</a>
|
</a>
|
||||||
<button
|
<button
|
||||||
id='mobileToggleDarkMode'
|
id="mobileToggleDarkMode"
|
||||||
class='mt-2 flex w-full items-center py-2 text-[1.05rem] font-medium'
|
class="mt-2 flex w-full items-center py-2 text-[1.05rem] font-medium"
|
||||||
>
|
>
|
||||||
<span>Theme</span>
|
<span>Theme</span>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='32'
|
width="32"
|
||||||
height='32'
|
height="32"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='ml-2 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0'
|
class="ml-2 h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:hidden dark:scale-0 dark:-rotate-90"
|
||||||
><path
|
><path
|
||||||
fill='currentColor'
|
fill="currentColor"
|
||||||
d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12'
|
d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12"
|
||||||
></path></svg
|
></path></svg
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width='32'
|
width="32"
|
||||||
height='32'
|
height="32"
|
||||||
viewBox='0 0 24 24'
|
viewBox="0 0 24 24"
|
||||||
class='ml-2 hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100'
|
class="ml-2 hidden h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:block dark:scale-100 dark:rotate-0"
|
||||||
><path
|
><path
|
||||||
fill='currentColor'
|
fill="currentColor"
|
||||||
d='M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20'
|
d="M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20"
|
||||||
></path></svg
|
></path></svg
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
@ -219,59 +219,59 @@ import { Image } from 'astro:assets'
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
function getCurrentTheme() {
|
function getCurrentTheme() {
|
||||||
return localStorage.getItem('theme')
|
return localStorage.getItem("theme");
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupDarkModeToggle() {
|
function setupDarkModeToggle() {
|
||||||
const toggleDarkModeButton = document.getElementById('toggleDarkMode')
|
const toggleDarkModeButton = document.getElementById("toggleDarkMode");
|
||||||
const mobileToggleDarkMode = document.getElementById('mobileToggleDarkMode')
|
const mobileToggleDarkMode = document.getElementById("mobileToggleDarkMode");
|
||||||
|
|
||||||
function toggleTheme() {
|
function toggleTheme() {
|
||||||
const currentTheme = getCurrentTheme()
|
const currentTheme = getCurrentTheme();
|
||||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
|
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||||
localStorage.setItem('theme', newTheme)
|
localStorage.setItem("theme", newTheme);
|
||||||
document.documentElement.classList.toggle('dark')
|
document.documentElement.classList.toggle("dark");
|
||||||
|
|
||||||
// Dispatch theme change event
|
// Dispatch theme change event
|
||||||
window.dispatchEvent(new CustomEvent('theme-change', { detail: { theme: newTheme } }))
|
window.dispatchEvent(new CustomEvent("theme-change", { detail: { theme: newTheme } }));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (toggleDarkModeButton) {
|
if (toggleDarkModeButton) {
|
||||||
toggleDarkModeButton.addEventListener('click', toggleTheme)
|
toggleDarkModeButton.addEventListener("click", toggleTheme);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mobileToggleDarkMode) {
|
if (mobileToggleDarkMode) {
|
||||||
mobileToggleDarkMode.addEventListener('click', toggleTheme)
|
mobileToggleDarkMode.addEventListener("click", toggleTheme);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupMobileMenu() {
|
function setupMobileMenu() {
|
||||||
const mobileMenuButton = document.getElementById('mobileMenuButton')
|
const mobileMenuButton = document.getElementById("mobileMenuButton");
|
||||||
const mobileMenu = document.getElementById('mobileMenu')
|
const mobileMenu = document.getElementById("mobileMenu");
|
||||||
if (!mobileMenuButton || !mobileMenu) return
|
if (!mobileMenuButton || !mobileMenu) return;
|
||||||
|
|
||||||
mobileMenuButton.addEventListener('click', () => {
|
mobileMenuButton.addEventListener("click", () => {
|
||||||
mobileMenu.classList.toggle('hidden')
|
mobileMenu.classList.toggle("hidden");
|
||||||
})
|
});
|
||||||
|
|
||||||
// Close mobile menu when clicking outside
|
// Close mobile menu when clicking outside
|
||||||
document.addEventListener('click', (event) => {
|
document.addEventListener("click", (event) => {
|
||||||
if (
|
if (
|
||||||
!mobileMenuButton.contains(event.target as Node) &&
|
!mobileMenuButton.contains(event.target as Node) &&
|
||||||
!mobileMenu.contains(event.target as Node)
|
!mobileMenu.contains(event.target as Node)
|
||||||
) {
|
) {
|
||||||
mobileMenu.classList.add('hidden')
|
mobileMenu.classList.add("hidden");
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Setup initial functionality
|
// Setup initial functionality
|
||||||
setupDarkModeToggle()
|
setupDarkModeToggle();
|
||||||
setupMobileMenu()
|
setupMobileMenu();
|
||||||
|
|
||||||
// Re-setup functionality after view transitions
|
// Re-setup functionality after view transitions
|
||||||
document.addEventListener('astro:after-swap', () => {
|
document.addEventListener("astro:after-swap", () => {
|
||||||
setupDarkModeToggle()
|
setupDarkModeToggle();
|
||||||
setupMobileMenu()
|
setupMobileMenu();
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -20,13 +20,13 @@ export const siteConfig: SiteConfig = {
|
|||||||
// Meta property, found in src/components/BaseHead.astro L:42
|
// Meta property, found in src/components/BaseHead.astro L:42
|
||||||
ogLocale: "zh_CN",
|
ogLocale: "zh_CN",
|
||||||
// Used to construct the meta title property found in src/components/BaseHead.astro L:11, and webmanifest name found in astro.config.ts L:42
|
// Used to construct the meta title property found in src/components/BaseHead.astro L:11, and webmanifest name found in astro.config.ts L:42
|
||||||
title: "声控烤箱 ｜ KazooTTT 博客",
|
title: "KazooTTT 博客",
|
||||||
// ! Please remember to replace the following site property with your own domain, used in astro.config.ts
|
// ! Please remember to replace the following site property with your own domain, used in astro.config.ts
|
||||||
url: "https://blog.kazoottt.top/",
|
url: "https://blog.kazoottt.top/",
|
||||||
rssConfig: {
|
rssConfig: {
|
||||||
noteTitle: "碎碎念 - 声控烤箱 ｜ KazooTTT",
|
noteTitle: "碎碎念 - KazooTTT 博客",
|
||||||
noteDescription: "分享一些比较碎片化的内容。",
|
noteDescription: "分享一些比较碎片化的内容。",
|
||||||
blogTitle: "博客 - 声控烤箱 ｜ KazooTTT",
|
blogTitle: "博客 - KazooTTT",
|
||||||
blogDescription: "分享一些技术笔记、个人随笔、生活日常等比较长篇的内容。",
|
blogDescription: "分享一些技术笔记、个人随笔、生活日常等比较长篇的内容。",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user