diff --git a/docusaurus.config.ts b/docusaurus.config.ts index be861e88b..9de27610a 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -34,7 +34,9 @@ const config: Config = { // ICP 备案号 ICP_LICENSE: ICP_LICENSE, // 是否为中国站点 - IS_CHINA_SITE: IS_CHINA_SITE + IS_CHINA_SITE: IS_CHINA_SITE, + description: + "笨蛋开服教程为 Minecraft 玩家提供 Java 版与基岩版服务器开服指南，包含环境配置、插件使用、端口转发、常见报错解决与服务器优化技巧。适合新手与进阶服主快速掌握开服步骤，顺利搭建稳定高性能的 Minecraft 服务器。" }, markdown: { @@ -424,4 +426,4 @@ const config: Config = { themes: ["@docusaurus/theme-mermaid"] }; -export default config; +export default config; \ No newline at end of file diff --git a/src/components/HeroBackground.tsx b/src/components/HeroBackground.tsx new file mode 100644 index 000000000..15bccfcaa --- /dev/null +++ b/src/components/HeroBackground.tsx @@ -0,0 +1,36 @@ +export function HeroBackground() { + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/css/components/navbar.css b/src/css/components/navbar.css index b62445a78..4acdbe754 100644 --- a/src/css/components/navbar.css +++ b/src/css/components/navbar.css @@ -9,29 +9,11 @@ display: flex; align-items: center; background: var(--ifm-navbar-background-color); - border-bottom: 1px solid var(--border); transition: all var(--transition-base); box-shadow: none !important; position: relative; } -/* 底部渐变线 */ -.navbar::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent 0%, var(--primary-alpha-30) 50%, transparent 100%); - opacity: 0; - transition: opacity var(--transition-base); -} - -.navbar:hover::after { - opacity: 1; -} - /* ====================================== 品牌区域 ====================================== */ diff --git a/src/css/custom.css b/src/css/custom.css index 018d50e6c..c6ed2347e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -38,7 +38,6 @@ /* ====================================== 工具类样式 ====================================== */ -@import "./utilities/animations.css"; @import "./utilities/scrollbar.css"; @import "./utilities/responsive.css"; @import "./utilities/search.css"; diff --git a/src/css/utilities/animations.css b/src/css/utilities/animations.css deleted file mode 100644 index 3271f56b9..000000000 --- a/src/css/utilities/animations.css +++ /dev/null @@ -1,316 +0,0 @@ -/* ====================================== - NitWikit 动画样式 - 克制设计 + 流畅过渡 -====================================== */ - -/* ====================================== - 减少动画偏好 -====================================== */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} - -/* ====================================== - 淡入动画 -====================================== */ -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeInDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* ====================================== - 动画工具类 -====================================== */ -.animate-fade-in { - animation: fadeIn var(--transition-base) ease-out; -} - -.animate-fade-in-up { - animation: fadeInUp var(--transition-slow) ease-out; -} - -.animate-fade-in-down { - animation: fadeInDown var(--transition-slow) ease-out; -} - -/* ====================================== - 延迟动画 -====================================== */ -.animation-delay-100 { - animation-delay: 100ms; -} - -.animation-delay-200 { - animation-delay: 200ms; -} - -.animation-delay-300 { - animation-delay: 300ms; -} - -.animation-delay-400 { - animation-delay: 400ms; -} - -.animation-delay-500 { - animation-delay: 500ms; -} - -/* ====================================== - 悬停过渡基础 -====================================== */ -.transition-colors { - transition: - color var(--transition-fast), - background-color var(--transition-fast), - border-color var(--transition-fast); -} - -.transition-opacity { - transition: opacity var(--transition-fast); -} - -.transition-transform { - transition: transform var(--transition-fast); -} - -.transition-all { - transition: all var(--transition-base); -} - -/* ====================================== - 悬停效果 -====================================== */ -.hover-lift { - transition: transform var(--transition-fast); -} - -.hover-lift:hover { - transform: translateY(-2px); -} - -.hover-scale { - transition: transform var(--transition-fast); -} - -.hover-scale:hover { - transform: scale(1.02); -} - -/* ====================================== - 脉冲动画（用于提示） -====================================== */ -@keyframes pulse { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0.5; - } -} - -.animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -/* ====================================== - 旋转动画（用于加载） -====================================== */ -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.animate-spin { - animation: spin 1s linear infinite; -} - -/* ====================================== - 页面切换动画 -====================================== */ -@keyframes pageEnter { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes pageExit { - from { - opacity: 1; - transform: translateY(0) scale(1); - } - to { - opacity: 0; - transform: translateY(-20px) scale(0.98); - } -} - -/* 全局页面进入动画 */ -main[class*="page"], -.main-wrapper { - animation: pageEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; -} - -/* ====================================== - 移动端侧边栏动画 -====================================== */ -@keyframes slideInLeft { - from { - opacity: 0; - transform: translateX(-100%); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes slideOutLeft { - from { - opacity: 1; - transform: translateX(0); - } - to { - opacity: 0; - transform: translateX(-100%); - } -} - -@keyframes backdropFadeIn { - from { - opacity: 0; - backdrop-filter: blur(0); - } - to { - opacity: 1; - backdrop-filter: blur(4px); - } -} - -/* 侧边栏打开动画 */ -.navbar-sidebar--show { - animation: slideInLeft 280ms cubic-bezier(0.32, 0.72, 0, 1); -} - -/* 背景遮罩动画 */ -.navbar-sidebar__backdrop { - animation: backdropFadeIn 200ms ease-out; -} - -/* 菜单项交错动画 */ -@keyframes menuItemSlideIn { - from { - opacity: 0; - transform: translateX(-12px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -/* 移动端菜单项入场动画 */ -@media (max-width: 996px) { - .navbar-sidebar--show .menu__list-item { - animation: menuItemSlideIn 250ms ease-out backwards; - } - - .navbar-sidebar--show .menu__list-item:nth-child(1) { - animation-delay: 50ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(2) { - animation-delay: 80ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(3) { - animation-delay: 110ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(4) { - animation-delay: 140ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(5) { - animation-delay: 170ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(6) { - animation-delay: 200ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(7) { - animation-delay: 230ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(8) { - animation-delay: 260ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(9) { - animation-delay: 290ms; - } - .navbar-sidebar--show .menu__list-item:nth-child(10) { - animation-delay: 320ms; - } - - /* 嵌套菜单展开动画 */ - .menu__list .menu__list { - animation: fadeInUp 200ms ease-out; - } - - /* 触摸反馈动画 */ - .menu__link:active, - .navbar__link:active { - transform: scale(0.98); - transition: transform 50ms ease-out; - } - - /* 展开箭头旋转动画优化 */ - .menu__caret::before, - .menu__link--sublist-caret::after { - transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); - } - - /* 活动指示条动画 */ - .menu__link--active { - transition: - all var(--transition-fast), - border-left-color 150ms ease-out; - } -} diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index d67264a06..e926fa676 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -80,77 +80,6 @@ z-index: 1; } -/* ====================================== - 装饰性模糊圆形 -====================================== */ -.decorCircle { - position: absolute; - border-radius: 50%; - filter: blur(100px); - pointer-events: none; - z-index: 0; - // 移动端减少模糊半径以提升性能 - @media (max-width: 768px) { - filter: blur(60px); - } -} - -.decorCircle1 { - top: -200px; - right: -100px; - width: 500px; - height: 500px; - background: rgba(0, 220, 130, 0.08); - // 移动端缩小尺寸 - @media (max-width: 768px) { - width: 300px; - height: 300px; - top: -150px; - right: -80px; - } - @media (max-width: 540px) { - width: 200px; - height: 200px; - opacity: 0.6; - } -} - -.decorCircle2 { - bottom: -150px; - left: -100px; - width: 400px; - height: 400px; - background: rgba(0, 220, 130, 0.05); - // 移动端缩小尺寸 - @media (max-width: 768px) { - width: 250px; - height: 250px; - bottom: -100px; - left: -60px; - } - @media (max-width: 540px) { - display: none; // 小屏隐藏次要装饰 - } -} - -.decorCircle3 { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 600px; - height: 600px; - background: rgba(0, 220, 130, 0.03); - // 移动端缩小尺寸 - @media (max-width: 768px) { - width: 350px; - height: 350px; - } - @media (max-width: 540px) { - width: 250px; - height: 250px; - } -} - /* ====================================== Hero 区域 - 左右分栏布局 ====================================== */ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4c6891b94..3840d186e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,7 @@ -import Head from "@docusaurus/Head"; import Link from "@docusaurus/Link"; +import { useHistory } from "@docusaurus/router"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import Layout from "@theme/Layout"; -import { useHistory } from "@docusaurus/router"; import React, { useRef } from "react"; import styles from "./index.module.scss"; @@ -17,21 +16,108 @@ interface NavLink { to: string; } -const Home: React.FC = () => { - const { siteConfig } = useDocusaurusContext(); - const history = useHistory(); - const pageRef = useRef(null); +function StatsMetrics({ stats }: { stats: Stat[] }) { + return ( +
+ {stats.map((item) => ( +
+ {item.value} + {item.label} +
+ ))} +
+ ); +} - const stats: Stat[] = [ - { label: "文档篇章", value: "1200+" }, - { label: "活跃贡献者", value: "50+" } - ]; +function HeroHeader() { + return ( + <> +

+ Cubic Wiki +

+

+ 主要针对高版本 Java 版和基岩版服务器的开服指南。从零开始，手把手教你搭建和运营 Minecraft 服务器。 +

+ + ); +} - const quickLinks: NavLink[] = [ - { title: "新手入门", description: "了解教程定位、阅读指引与基础要求", to: "/intro" }, - { title: "Java 版核心", description: "高版本 Java 版服务器开服指南", to: "/Java/intro" }, - { title: "基岩版核心", description: "基岩版服务器开服指南", to: "/Bedrock/intro" } - ]; +function HeroButtons() { + return ( +
+ + 立即开始 + + + 参与贡献 + +
+ ); +} + +function QuickNavPanel({ + quickLinks, + onLinkClick +}: { + quickLinks: NavLink[]; + onLinkClick: (e: React.MouseEvent, to: string) => void; +}) { + return ( + + ); +} + +function HeroCopy({ stats }: { stats: Stat[] }) { + return ( +
+ + + +
+ ); +} + +function HeroSection({ + stats, + quickLinks, + onLinkClick +}: { + stats: Stat[]; + quickLinks: NavLink[]; + onLinkClick: (e: React.MouseEvent, to: string) => void; +}) { + return ( +
+ + +
+ ); +} + +function usePageNavigation() { + const pageRef = useRef(null); + const history = useHistory(); const handleLinkClick = (e: React.MouseEvent, to: string) => { e.preventDefault(); @@ -51,71 +137,43 @@ const Home: React.FC = () => { } }; + return handleLinkClick; +} + +function useHomeData() { + // TODO: 引用真实数据 + const stats: Stat[] = [ + { label: "文档篇章", value: "1200+" }, + { label: "活跃贡献者", value: "50+" } + ]; + + const quickLinks: NavLink[] = [ + { title: "新手入门", description: "了解教程定位、阅读指引与基础要求", to: "/intro" }, + { title: "Java 版核心", description: "高版本 Java 版服务器开服指南", to: "/Java/intro" }, + { title: "基岩版核心", description: "基岩版服务器开服指南", to: "/Bedrock/intro" } + ]; + + return { stats, quickLinks }; +} + +/** + * 首页主组件 + */ +const Home: React.FC = () => { + const { + siteConfig: { customFields, tagline } + } = useDocusaurusContext(); + const { description } = customFields as { description: string }; + + const handleLinkClick = usePageNavigation(); + const { stats, quickLinks } = useHomeData(); + return ( - - - {siteConfig.title} - - -
- {/* 装饰性模糊圆形 */} -
-
-
- -
-
-

- Cubic Wiki -

-

- 主要针对高版本 Java 版和基岩版服务器的开服指南。从零开始，手把手教你搭建和运营 Minecraft - 服务器。 -

-
- - 立即开始 - - - 参与贡献 - -
-
- {stats.map((item) => ( -
- {item.value} - {item.label} -
- ))} -
-
- -
+ +
+
+ +
); diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx new file mode 100644 index 000000000..26caa47dd --- /dev/null +++ b/src/theme/Navbar/index.tsx @@ -0,0 +1,28 @@ +import { useLocation } from "@docusaurus/router"; +import type { WrapperProps } from "@docusaurus/types"; +import Navbar from "@theme-original/Navbar"; +import type NavbarType from "@theme/Navbar"; +import { type ReactNode } from "react"; +import { HeroBackground } from "../../components/HeroBackground"; + +type Props = WrapperProps; + +export default function NavbarWrapper(props: Props): ReactNode { + const location = useLocation(); + + const combinedClassName = [ + "absolute left-0 w-full text-primary shrink-0 z-1 pointer-events-none transition-all", + location.pathname === "/" ? "opacity-100" : "opacity-30" + ] + .filter(Boolean) + .join(" "); + + return ( +
+ +
+ +
+
+ ); +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts deleted file mode 100644 index 20d4e130e..000000000 --- a/src/vite-env.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -declare module "*.module.scss" { - const content: Record; - export default content; -} - -declare module "*.module.css" { - const content: Record; - export default content; -} - -declare module "*.scss" { - const content: Record; - export default content; -} - -declare module "*.css" { - const content: Record; - export default content; -} diff --git a/tsconfig.json b/tsconfig.json index 743eecae7..0cd5024c9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "resolveJsonModule": true, "strict": true, "forceConsistentCasingInFileNames": true, + "types": ["docusaurus-plugin-sass"], "paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"],