优化首页样式

docs/Frontend/TypeScript/90.高级类型.md

@@ -145,6 +145,7 @@ function doStuff(q: A | B) {
 
 ## 可辨识联合类型
 
+```typescript
 interface Square {
 kind: "square";
 size: number;
@@ -164,3 +165,4 @@ case "square": return s.size _ s.size;
 case "rectangle": return s.width _ s.height;
 }
 }
+```

docusaurus.config.js

@@ -30,7 +30,7 @@ const config = {
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
 
-  // 即使不使���国际化，也必须在此设置有用的元数据
+  // 即使不使用国际化，也必须在此设置有用的元数据
   // 例如，中文网站可将"en"替换为"zh-CN"
   i18n: {
     defaultLocale: "zh-CN",
@@ -119,6 +119,11 @@ const config = {
           rel: "stylesheet",
           href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap",
         },
+        {
+          tagName: "link",
+          rel: "stylesheet",
+          href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap",
+        },
       ],
       navbar: navbar,
       footer: {

package.json

@@ -24,6 +24,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-icons": "^5.4.0",
     "sass": "^1.82.0"
   },
   "devDependencies": {

sidebars.js

@@ -1,13 +1,5 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // Resource
-  resourceSidebar: [
-    {
-      type: "autogenerated",
-      dirName: "Resource",
-    },
-  ],
-
   // Backend
   goSidebar: [
     {
@@ -221,6 +213,14 @@ const sidebars = {
       dirName: "Other/Notes",
     },
   ],
+
+  // Resource
+  resourceSidebar: [
+    {
+      type: "autogenerated",
+      dirName: "Resource",
+    },
+  ],
 }
 
 module.exports = sidebars

src/components/NeonButton/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+export default function NeonButton({ children, to, className, ...props }) {
+  return (
+    <a
+      className={`${styles.neonButton} ${className || ''}`}
+      href={to}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+} 

src/components/NeonButton/styles.module.scss

@@ -0,0 +1,96 @@
+.neonButton {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.8rem 2rem;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #fff;
+  background: var(--ifm-color-primary);
+  border: none;
+  border-radius: 8px;
+  text-decoration: none;
+  cursor: pointer;
+  z-index: 1;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    border-radius: 10px;
+    transition: 0.3s ease-in-out;
+  }
+
+  &::before {
+    z-index: -2;
+    background: linear-gradient(
+      90deg,
+      #00fff3,
+      // 霓虹青色
+      #ff00c1,
+      // 霓虹粉
+      #00ff8f,
+      // 荧光绿
+      #9600ff,
+      // 紫罗兰
+      #00fff3 // 回到霓虹青色
+    );
+    background-size: 300%;
+    filter: blur(5px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &::after {
+    z-index: -1;
+    background: var(--ifm-color-primary);
+    border-radius: 8px;
+  }
+
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+
+    &::before {
+      opacity: 1;
+      animation: glowing 2s linear infinite;
+    }
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+@keyframes glowing {
+  0% {
+    background-position: 0% center;
+    opacity: 0.8;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    background-position: -100% center;
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.8;
+  }
+  100% {
+    background-position: -200% center;
+    opacity: 0.8;
+  }
+}
+
+// 暗色主题只改变背景色
+[data-theme='dark'] .neonButton {
+  &::after {
+    background: var(--ifm-color-primary-darker);
+  }
+}