mirror of
https://github.com/afoim/fuwari.git
synced 2026-01-31 09:03:18 +08:00
refactor(主题): 移除多语言支持和暗色模式功能
删除未使用的常量 UNCATEGORIZED，移除多语言 README 文件 移除 LightDarkSwitch 组件及相关暗色模式切换逻辑 简化 Navbar 组件，删除主题切换相关代码
This commit is contained in:
二叉树树
58
README.es.md
58
README.es.md
@@ -1,58 +0,0 @@
|
|||||||
# 🍥Fuwari
|
|
||||||
|
|
||||||
Un tema estático para blogs construido con [Astro](https://astro.build).
|
|
||||||
|
|
||||||
[**🖥️ Demostración en Vivo (Vercel)**](https://fuwari.vercel.app) /
|
|
||||||
[**📦 Versión Antigua de Hexo**](https://github.com/saicaca/hexo-theme-vivia) /
|
|
||||||
|
|
||||||
> Versión del README: `2024-04-07`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ✨ Características
|
|
||||||
|
|
||||||
- [x] Construido con [Astro](https://astro.build) y [Tailwind CSS](https://tailwindcss.com)
|
|
||||||
- [x] Animaciones suaves y transiciones de página
|
|
||||||
- [x] Modo claro / oscuro
|
|
||||||
- [x] Colores del tema y banner personalizables
|
|
||||||
- [x] Diseño responsivo
|
|
||||||
- [ ] Comentarios
|
|
||||||
- [x] Buscador
|
|
||||||
- [ ] TOC (Tabla de Contenidos)
|
|
||||||
|
|
||||||
## 🚀 Cómo Usar
|
|
||||||
|
|
||||||
1. [Genera un nuevo repositorio](https://github.com/saicaca/fuwari/generate) desde esta plantilla o haz un fork de este repositorio.
|
|
||||||
2. Para editar tu blog localmente, clona tu repositorio, ejecuta `pnpm install` y `pnpm add sharp` para instalar las dependencias.
|
|
||||||
- Instala [pnpm](https://pnpm.io) `npm install -g pnpm` si aún no lo tienes.
|
|
||||||
3. Edita el archivo de configuración `src/config.ts` para personalizar tu blog.
|
|
||||||
4. Ejecuta `pnpm new-post <nombre-de-archivo>` para crear una nueva entrada y edítala en `src/content/posts/`.
|
|
||||||
5. Despliega tu blog en Vercel, Netlify, GitHub Pages, etc., siguiendo [las guías](https://docs.astro.build/en/guides/deploy/). Necesitas editar la configuración del sitio en `astro.config.mjs` antes del despliegue.
|
|
||||||
|
|
||||||
## ⚙️ Cabecera de las Entradas
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: Mi Primer Post en el Blog
|
|
||||||
published: 2023-09-09
|
|
||||||
description: Esta es la primera entrada de mi nuevo blog con Astro.
|
|
||||||
image: /images/cover.jpg
|
|
||||||
tags: [Foo, Bar]
|
|
||||||
category: Front-end
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🧞 Comandos
|
|
||||||
|
|
||||||
Todos los comandos se ejecutan desde la raíz del proyecto, desde una terminal:
|
|
||||||
|
|
||||||
| Comando | Acción |
|
|
||||||
|:------------------------------------|:--------------------------------------------------|
|
|
||||||
| `pnpm install` y `pnpm add sharp` | Instala las dependencias |
|
|
||||||
| `pnpm dev` | Inicia el servidor de desarrollo local en `localhost:4321` |
|
|
||||||
| `pnpm build` | Compila tu web para producción en `./dist/` |
|
|
||||||
| `pnpm preview` | Previsualiza la web localmente, antes del despliegue |
|
|
||||||
| `pnpm new-post <nombre-de-archivo>` | Crea una nueva entrada |
|
|
||||||
| `pnpm astro ...` | Ejecuta comandos CLI como `astro add`, `astro check` |
|
|
||||||
| `pnpm astro --help` | Obtén ayuda para usar el CLI de Astro |
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
# 🍥Fuwari
|
|
||||||
|
|
||||||
[Astro](https://astro.build) で構築された静的ブログテンプレート
|
|
||||||
|
|
||||||
[**🖥️ライブデモ (Vercel)**](https://fuwari.vercel.app) /
|
|
||||||
[**📦旧 Hexo バージョン**](https://github.com/saicaca/hexo-theme-vivia)
|
|
||||||
|
|
||||||
> README バージョン：`2024-04-07`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ✨ 特徴
|
|
||||||
|
|
||||||
- [x] [Astro](https://astro.build) 及び [Tailwind CSS](https://tailwindcss.com) で構築
|
|
||||||
- [x] スムーズなアニメーションとページ遷移
|
|
||||||
- [x] ライト/ダークテーマ対応
|
|
||||||
- [x] カスタマイズ可能なテーマカラーとバナー
|
|
||||||
- [x] レスポンシブデザイン
|
|
||||||
- [ ] コメント機能
|
|
||||||
- [x] 検索機能
|
|
||||||
- [ ] 目次
|
|
||||||
|
|
||||||
## 🚀 使用方法
|
|
||||||
|
|
||||||
1. [テンプレート](https://github.com/saicaca/fuwari/generate)から新しいリポジトリを作成するかCloneをします。
|
|
||||||
2. ブログをローカルで編集するには、リポジトリをクローンした後、`pnpm install` と `pnpm add sharp` を実行して依存関係をインストールします。
|
|
||||||
- [pnpm](https://pnpm.io) がインストールされていない場合は `npm install -g pnpm` で導入可能です。
|
|
||||||
3. `src/config.ts` ファイルを編集する事でブログを自分好みにカスタマイズ出来ます。
|
|
||||||
4. `pnpm new-post <filename>` で新しい記事を作成し、`src/content/posts/`.フォルダ内で編集します。
|
|
||||||
5. 作成したブログをVercel、Netlify、GitHub Pagesなどにデプロイするには[ガイド](https://docs.astro.build/ja/guides/deploy/)に従って下さい。加えて、別途デプロイを行う前に `astro.config.mjs` を編集してサイト構成を変更する必要があります。
|
|
||||||
|
|
||||||
## ⚙️ 記事のフロントマター
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: My First Blog Post
|
|
||||||
published: 2023-09-09
|
|
||||||
description: This is the first post of my new Astro blog.
|
|
||||||
image: /images/cover.jpg
|
|
||||||
tags: [Foo, Bar]
|
|
||||||
category: Front-end
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🧞 コマンド
|
|
||||||
|
|
||||||
すべてのコマンドは、ターミナルでプロジェクトのルートから実行する必要があります:
|
|
||||||
|
|
||||||
| Command | Action |
|
|
||||||
|:------------------------------------|:--------------------------------------------|
|
|
||||||
| `pnpm install` AND `pnpm add sharp` | 依存関係のインストール |
|
|
||||||
| `pnpm dev` | `localhost:4321` で開発用ローカルサーバーを起動 |
|
|
||||||
| `pnpm build` | `./dist/` にビルド内容を出力 |
|
|
||||||
| `pnpm preview` | デプロイ前の内容をローカルでプレビュー |
|
|
||||||
| `pnpm new-post <filename>` | 新しい投稿を作成 |
|
|
||||||
| `pnpm astro ...` | `astro add`, `astro check` の様なコマンドを実行する際に使用 |
|
|
||||||
| `pnpm astro --help` | Astro CLIのヘルプを表示 |
|
|
||||||
57
README.ko.md
57
README.ko.md
@@ -1,57 +0,0 @@
|
|||||||
# 🍥Fuwari
|
|
||||||
|
|
||||||
[Astro](https://astro.build)로 구축된 정적 블로그 템플릿입니다.
|
|
||||||
|
|
||||||
[**🖥️미리보기 (Vercel)**](https://fuwari.vercel.app) /
|
|
||||||
[**📦Old Hexo Version**](https://github.com/saicaca/hexo-theme-vivia)
|
|
||||||
|
|
||||||
> README 버전: `2024-04-07`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ✨ 특징
|
|
||||||
|
|
||||||
- [x] [Astro](https://astro.build) 및 [Tailwind CSS](https://tailwindcss.com)로 구축됨
|
|
||||||
- [x] 부드러운 애니메이션 및 페이지 전환
|
|
||||||
- [x] 라이트 모드 / 다크 모드
|
|
||||||
- [x] 사용자 정의 가능한 테마 색상 및 배너
|
|
||||||
- [x] 반응형 디자인
|
|
||||||
- [ ] 댓글
|
|
||||||
- [x] 검색
|
|
||||||
- [ ] 목차
|
|
||||||
## 🚀 사용하는 방법
|
|
||||||
|
|
||||||
1. 이 템플릿에서 [새 저장소를 생성](https://github.com/saicaca/fuwari/generate)하거나 이 저장소를 포크하세요.
|
|
||||||
2. 블로그를 로컬에서 편집하려면 저장소를 복제하고 `pnpm install` 및 `pnpm add sharp`를 실행하여 종속성을 설치하세요.
|
|
||||||
- 아직 [pnpm](https://pnpm.io)을 설치하지 않았다면 `npm install -g pnpm`을 실행하여 [pnpm](https://pnpm.io)을 설치하세요.
|
|
||||||
3. 블로그를 사용자 정의하려면 `src/config.ts` 구성 파일을 편집하세요.
|
|
||||||
4. `pnpm new-post <filename>`을 실행하여 새 게시물을 만들고 `src/content/posts/`에서 편집하세요.
|
|
||||||
5. [가이드](https://docs.astro.build/en/guides/deploy/)에 따라 블로그를 Vercel, Netlify, GitHub 페이지 등에 배포하세요. 배포하기 전에 `astro.config.mjs`에서 사이트 구성을 편집해야 합니다.
|
|
||||||
|
|
||||||
## ⚙️ 게시물의 머리말 설정
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: 내 첫 블로그 게시물
|
|
||||||
published: 2023-09-09
|
|
||||||
description: 내 새로운 Astro 블로그의 첫 번째 게시물입니다!
|
|
||||||
image: /images/cover.jpg
|
|
||||||
tags: [푸, 바, 오]
|
|
||||||
category: 앞-끝
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🧞 명령어
|
|
||||||
|
|
||||||
모든 명령어는 프로젝트 최상단, 터미널에서 실행됩니다:
|
|
||||||
|
|
||||||
| Command | Action |
|
|
||||||
|:------------------------------------|:-------------------------------------------------|
|
|
||||||
| `pnpm install` AND `pnpm add sharp` | 종속성을 설치합니다. |
|
|
||||||
| `pnpm dev` | `localhost:4321`에서 로컬 개발 서버를 시작합니다. |
|
|
||||||
| `pnpm build` | `./dist/`에 프로덕션 사이트를 구축합니다. |
|
|
||||||
| `pnpm preview` | 배포하기 전에 로컬에서 빌드 미리보기 |
|
|
||||||
| `pnpm new-post <filename>` | 새 게시물 작성 |
|
|
||||||
| `pnpm astro ...` | `astro add`, `astro check`와 같은 CLI 명령어 실행 |
|
|
||||||
| `pnpm astro --help` | Astro CLI를 사용하여 도움 받기 |
|
|
||||||
@@ -4,11 +4,7 @@ A static blog template built with [Astro](https://astro.build).
|
|||||||
|
|
||||||
[**🖥️ Live Demo (Vercel)**](https://fuwari.vercel.app) /
|
[**🖥️ Live Demo (Vercel)**](https://fuwari.vercel.app) /
|
||||||
[**📦 Old Hexo Version**](https://github.com/saicaca/hexo-theme-vivia) /
|
[**📦 Old Hexo Version**](https://github.com/saicaca/hexo-theme-vivia) /
|
||||||
[**🌏 中文**](https://github.com/saicaca/fuwari/blob/main/README.zh-CN.md) /
|
|
||||||
[**🌏 日本語**](https://github.com/saicaca/fuwari/blob/main/README.ja-JP.md) /
|
|
||||||
[**🌏 한국어**](https://github.com/saicaca/fuwari/blob/main/README.ko.md) /
|
|
||||||
[**🌏 Español**](https://github.com/saicaca/fuwari/blob/main/README.es.md) /
|
|
||||||
[**🌏 ไทย**](https://github.com/saicaca/fuwari/blob/main/README.th.md)
|
|
||||||
|
|
||||||
> README version: `2024-09-10`
|
> README version: `2024-09-10`
|
||||||
|
|
||||||
|
|||||||
59
README.th.md
59
README.th.md
@@ -1,59 +0,0 @@
|
|||||||
# 🍥Fuwari
|
|
||||||
|
|
||||||
แม่แบบสำหรับเว็บบล็อกแบบ static สร้างด้วย [Astro](https://astro.build)
|
|
||||||
|
|
||||||
[**🖥️ ตัวอย่างการใช้งานจริง (Vercel)**](https://fuwari.vercel.app) /
|
|
||||||
[**📦 เวอร์ชั่นเก่าสำหรับ Hexo**](https://github.com/saicaca/hexo-theme-vivia)
|
|
||||||
|
|
||||||
> เวอร์ชั่นของ README: `2024-09-10`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ✨ คุณสมบัติ
|
|
||||||
|
|
||||||
- [x] สร้างด้วย [Astro](https://astro.build) และ [Tailwind CSS](https://tailwindcss.com)
|
|
||||||
- [x] มีอนิเมชั่นและการเปลี่ยนหน้าอย่างลื่นไหล
|
|
||||||
- [x] รองรับโหมดสว่าง / โหมดมืด
|
|
||||||
- [x] ปรับแต่งสีธีมและแบนเนอร์ได้
|
|
||||||
- [x] Responsive design (หน้าตาเว็บปรับเปลี่ยนตามขนาดจอ)
|
|
||||||
- [ ] การแสดงความคิดเห็น
|
|
||||||
- [x] การค้นหา
|
|
||||||
- [ ] TOC (สารบัญ)
|
|
||||||
|
|
||||||
## 🚀 วิธีใช้งาน
|
|
||||||
|
|
||||||
1. [Generate repository ใหม่](https://github.com/saicaca/fuwari/generate)ขึ้นมาจากแม่แบบนี้ หรือจะ fork repository นี้ก็ได้
|
|
||||||
2. เริ่มแก้ไขบล็อกของคุณแบบ local โดยการ clone repository ของคุณ (จากข้อ 1) ไว้ในเครื่องของคุณ แล้วรันคำสั่ง `pnpm install` และ `pnpm add sharp` เพื่อติดตั้ง dependencies ที่จำเป็น
|
|
||||||
- ติดตั้ง [pnpm](https://pnpm.io) ด้วยคำสั่ง `npm install -g pnpm` ถ้ายังไม่เคยติดตั้ง
|
|
||||||
3. แก้ไขไฟล์การตั้งค่า `src/config.ts` เพื่อปรับแต่งบล็อกของคุณ
|
|
||||||
4. รันคำสั่ง `pnpm new-post <filename>` เพื่อสร้างโพสต์ใหม่ใน `src/content/posts/` และแก้ไขไฟล์โพสต์นั้นๆ ให้สมบูรณ์
|
|
||||||
5. Deploy เว็บบล็อกของคุณไปยัง Vercel, Netlify, GitHub Pages หรือบริการอื่นๆ โดยอ้างอิงวิธีการจาก[คู่มือนี้](https://docs.astro.build/en/guides/deploy/) อย่าลืมแก้ไขการตั้งค่าเว็บไซต์ในไฟล์ `astro.config.mjs` ก่อนที่คุณจะ deploy เว็บ
|
|
||||||
|
|
||||||
## ⚙️ Frontmatter ของโพสต์
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: โพสต์แรกของฉัน
|
|
||||||
published: 2023-09-09
|
|
||||||
description: นี่คือโพสต์แรกของเว็บบล็อก Astro อันใหม่ของฉัน
|
|
||||||
image: ./cover.jpg
|
|
||||||
tags: [Foo, Bar]
|
|
||||||
category: Front-end
|
|
||||||
draft: false
|
|
||||||
lang: jp # เขียนค่านี้เมื่อภาษาของโพสต์นั้นๆ แตกต่างจากภาษาของเว็บไซต์ที่ตั้งค่าไว้ใน `config.ts` เท่านั้น
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🧞 คำสั่ง
|
|
||||||
|
|
||||||
คำสั่งที่รันได้ใน terminal จาก root ของโปรเจค:
|
|
||||||
|
|
||||||
| คำสั่ง | ผลที่เกิด |
|
|
||||||
|:------------------------------------|:--------------------------------------------------|
|
|
||||||
| `pnpm install` และ `pnpm add sharp` | ติดตั้ง dependencies |
|
|
||||||
| `pnpm dev` | เปิดเซิร์ฟเวอร์เพื่อพัฒนาเว็บแบบ local ที่ `localhost:4321` |
|
|
||||||
| `pnpm build` | Build เว็บไซต์แบบพร้อมใช้งานจริงไปยังโฟลเดอร์ `./dist/` |
|
|
||||||
| `pnpm preview` | ดูตัวอย่าง build ของคุณแบบ local ก่อนที่จะ deploy จริง |
|
|
||||||
| `pnpm new-post <filename>` | สร้างโพสต์ใหม่ |
|
|
||||||
| `pnpm astro ...` | รันคำสั่ง CLI เช่น `astro add`, `astro check` |
|
|
||||||
| `pnpm astro --help` | ดูข้อมูลเพิ่มเติมเกี่ยวกับ Astro CLI |
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
# 🍥Fuwari
|
|
||||||
|
|
||||||
基于 [Astro](https://astro.build) 开发的静态博客模板。
|
|
||||||
|
|
||||||
[**🖥️在线预览（Vercel）**](https://fuwari.vercel.app) /
|
|
||||||
[**📦旧 Hexo 版本**](https://github.com/saicaca/hexo-theme-vivia)
|
|
||||||
|
|
||||||
> README 版本：`2024-09-10`
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ✨ 功能特性
|
|
||||||
|
|
||||||
- [x] 基于 Astro 和 Tailwind CSS 开发
|
|
||||||
- [x] 流畅的动画和页面过渡
|
|
||||||
- [x] 亮色 / 暗色模式
|
|
||||||
- [x] 自定义主题色和横幅图片
|
|
||||||
- [x] 响应式设计
|
|
||||||
- [ ] 评论
|
|
||||||
- [x] 搜索
|
|
||||||
- [ ] 文内目录
|
|
||||||
|
|
||||||
## 🚀 使用方法
|
|
||||||
|
|
||||||
1. 使用此模板[生成新仓库](https://github.com/saicaca/fuwari/generate)或 Fork 此仓库
|
|
||||||
2. 进行本地开发，Clone 新的仓库，执行 `pnpm install` 和 `pnpm add sharp` 以安装依赖
|
|
||||||
- 若未安装 [pnpm](https://pnpm.io)，执行 `npm install -g pnpm`
|
|
||||||
3. 通过配置文件 `src/config.ts` 自定义博客
|
|
||||||
4. 执行 `pnpm new-post <filename>` 创建新文章，并在 `src/content/posts/` 目录中编辑
|
|
||||||
5. 参考[官方指南](https://docs.astro.build/zh-cn/guides/deploy/)将博客部署至 Vercel, Netlify, GitHub Pages 等；部署前需编辑 `astro.config.mjs` 中的站点设置。
|
|
||||||
|
|
||||||
## ⚙️ 文章 Frontmatter
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: My First Blog Post
|
|
||||||
published: 2023-09-09
|
|
||||||
description: This is the first post of my new Astro blog.
|
|
||||||
image: ./cover.jpg
|
|
||||||
tags: [Foo, Bar]
|
|
||||||
category: Front-end
|
|
||||||
draft: false
|
|
||||||
lang: jp # 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🧞 指令
|
|
||||||
|
|
||||||
下列指令均需要在项目根目录执行：
|
|
||||||
|
|
||||||
| Command | Action |
|
|
||||||
|:----------------------------------|:----------------------------------|
|
|
||||||
| `pnpm install` 并 `pnpm add sharp` | 安装依赖 |
|
|
||||||
| `pnpm dev` | 在 `localhost:4321` 启动本地开发服务器 |
|
|
||||||
| `pnpm build` | 构建网站至 `./dist/` |
|
|
||||||
| `pnpm preview` | 本地预览已构建的网站 |
|
|
||||||
| `pnpm new-post <filename>` | 创建新文章 |
|
|
||||||
| `pnpm astro ...` | 执行 `astro add`, `astro check` 等指令 |
|
|
||||||
| `pnpm astro --help` | 显示 Astro CLI 帮助 |
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import type { LIGHT_DARK_MODE } from "@/types/config.ts";
|
|
||||||
import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants.ts";
|
|
||||||
|
|
||||||
import Icon from "@iconify/svelte";
|
|
||||||
import {
|
|
||||||
applyThemeToDocument,
|
|
||||||
getStoredTheme,
|
|
||||||
setTheme,
|
|
||||||
} from "@utils/setting-utils.ts";
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
|
|
||||||
const seq: LIGHT_DARK_MODE[] = [LIGHT_MODE, DARK_MODE, AUTO_MODE];
|
|
||||||
let mode: LIGHT_DARK_MODE = $state(AUTO_MODE);
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
mode = getStoredTheme();
|
|
||||||
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
|
|
||||||
const changeThemeWhenSchemeChanged: Parameters<
|
|
||||||
typeof darkModePreference.addEventListener<"change">
|
|
||||||
>[1] = (e) => {
|
|
||||||
applyThemeToDocument(mode);
|
|
||||||
};
|
|
||||||
darkModePreference.addEventListener("change", changeThemeWhenSchemeChanged);
|
|
||||||
return () => {
|
|
||||||
darkModePreference.removeEventListener(
|
|
||||||
"change",
|
|
||||||
changeThemeWhenSchemeChanged,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
function switchScheme(newMode: LIGHT_DARK_MODE) {
|
|
||||||
mode = newMode;
|
|
||||||
setTheme(newMode);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleScheme() {
|
|
||||||
let i = 0;
|
|
||||||
for (; i < seq.length; i++) {
|
|
||||||
if (seq[i] === mode) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
switchScheme(seq[(i + 1) % seq.length]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showPanel() {
|
|
||||||
const panel = document.querySelector("#light-dark-panel");
|
|
||||||
panel.classList.remove("float-panel-closed");
|
|
||||||
}
|
|
||||||
|
|
||||||
function hidePanel() {
|
|
||||||
const panel = document.querySelector("#light-dark-panel");
|
|
||||||
panel.classList.add("float-panel-closed");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- z-50 make the panel higher than other float panels -->
|
|
||||||
<div class="relative z-50" role="menu" tabindex="-1" onmouseleave={hidePanel}>
|
|
||||||
<button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="scheme-switch" onclick={toggleScheme} onmouseenter={showPanel}>
|
|
||||||
<div class="absolute" class:opacity-0={mode !== LIGHT_MODE}>
|
|
||||||
<Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem]"></Icon>
|
|
||||||
</div>
|
|
||||||
<div class="absolute" class:opacity-0={mode !== DARK_MODE}>
|
|
||||||
<Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem]"></Icon>
|
|
||||||
</div>
|
|
||||||
<div class="absolute" class:opacity-0={mode !== AUTO_MODE}>
|
|
||||||
<Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem]"></Icon>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5" >
|
|
||||||
<div class="card-base float-panel p-2">
|
|
||||||
<button class="flex transition whitespace-nowrap items-center !justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
|
|
||||||
class:current-theme-btn={mode === LIGHT_MODE}
|
|
||||||
onclick={() => switchScheme(LIGHT_MODE)}
|
|
||||||
>
|
|
||||||
<Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
|
|
||||||
浅色模式
|
|
||||||
</button>
|
|
||||||
<button class="flex transition whitespace-nowrap items-center !justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
|
|
||||||
class:current-theme-btn={mode === DARK_MODE}
|
|
||||||
onclick={() => switchScheme(DARK_MODE)}
|
|
||||||
>
|
|
||||||
<Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
|
|
||||||
深色模式
|
|
||||||
</button>
|
|
||||||
<button class="flex transition whitespace-nowrap items-center !justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95"
|
|
||||||
class:current-theme-btn={mode === AUTO_MODE}
|
|
||||||
onclick={() => switchScheme(AUTO_MODE)}
|
|
||||||
>
|
|
||||||
<Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem] mr-3"></Icon>
|
|
||||||
跟随系统
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@@ -4,7 +4,7 @@ import { navBarConfig, siteConfig } from "../config";
|
|||||||
import { LinkPresets } from "../constants/link-presets";
|
import { LinkPresets } from "../constants/link-presets";
|
||||||
import { LinkPreset, type NavBarLink } from "../types/config";
|
import { LinkPreset, type NavBarLink } from "../types/config";
|
||||||
import { url } from "../utils/url-utils";
|
import { url } from "../utils/url-utils";
|
||||||
import LightDarkSwitch from "./LightDarkSwitch.svelte";
|
|
||||||
import Search from "./Search.svelte";
|
import Search from "./Search.svelte";
|
||||||
import DisplaySettings from "./widget/DisplaySettings.svelte";
|
import DisplaySettings from "./widget/DisplaySettings.svelte";
|
||||||
import NavMenuPanel from "./widget/NavMenuPanel.astro";
|
import NavMenuPanel from "./widget/NavMenuPanel.astro";
|
||||||
@@ -50,9 +50,7 @@ let links: NavBarLink[] = navBarConfig.links.map(
|
|||||||
<Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
|
<Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{!siteConfig.themeColor.forceDarkMode && (
|
|
||||||
<LightDarkSwitch client:only="svelte"></LightDarkSwitch>
|
|
||||||
)}
|
|
||||||
<button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch">
|
<button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:!hidden" id="nav-menu-switch">
|
||||||
<Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
|
<Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
|
||||||
</button>
|
</button>
|
||||||
@@ -63,23 +61,7 @@ let links: NavBarLink[] = navBarConfig.links.map(
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function switchTheme() {
|
|
||||||
if (localStorage.theme === 'dark') {
|
|
||||||
document.documentElement.classList.remove('dark');
|
|
||||||
localStorage.theme = 'light';
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.add('dark');
|
|
||||||
localStorage.theme = 'dark';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadButtonScript() {
|
function loadButtonScript() {
|
||||||
let switchBtn = document.getElementById("scheme-switch");
|
|
||||||
if (switchBtn) {
|
|
||||||
switchBtn.onclick = function () {
|
|
||||||
switchTheme()
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let settingBtn = document.getElementById("display-settings-switch");
|
let settingBtn = document.getElementById("display-settings-switch");
|
||||||
if (settingBtn) {
|
if (settingBtn) {
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
export const UNCATEGORIZED = "__uncategorized__";
|
|
||||||
|
|
||||||
export const PAGE_SIZE = 8;
|
export const PAGE_SIZE = 8;
|
||||||
|
|
||||||
export const LIGHT_MODE = "light",
|
export const LIGHT_MODE = "light",
|
||||||
|
|||||||
Reference in New Issue
Block a user