修复返回首页报错

移动链接位置

Author: buyfakett

src/App.jsx

@@ -13,7 +13,8 @@ import Pictures from './components/Pictures';
 import Watermark from '@hi-ui/watermark';
 import BackToTop from './components/BackToTop';
 import { Helmet } from 'react-helmet';
-import ChangeLog from "./util/ChangeLog.jsx";
+import ChangeLog from './util/ChangeLog';
+import Coffee from './components/Coffee';
 
 const App = () => {
     // semi-design的主题默认为暗色
@@ -83,6 +84,7 @@ const App = () => {
                         <Route path="/urls" element={<Urls />} />
                         <Route path="/pictures" element={<Pictures />} />
                         <Route path="/changelog" element={<ChangeLog />} />
+                        <Route path="/coffee" element={<Coffee />} />
                         <Route path="*" element={<NotFound />} />
                     </Routes>
 

src/CHANGELOG.md

@@ -1,3 +1,7 @@
+2025-01-24 移动链接位置
+
+2025-01-24 修复返回首页报错
+
 2025-01-20 增加网站更新日志
 
 2025-01-19 拆分工作经历组件，增加项目经验

src/components/AboutMe/Links.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { Typography } from '@douyinfe/semi-ui';
+// import { FaCoffee } from 'react-icons/fa';
+
+const Links = () => {
+    const { Paragraph } = Typography;
+
+    return (
+        <motion.div
+            className="dark:bg-gray-900 dark:text-gray-300 text-center mb-2"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.5 }}>
+            <h1 className="text-4xl font-bold mb-4">About Me</h1>
+            <div className="flex items-center justify-center">
+                <Paragraph
+                    copyable={{
+                        content: 'https://blog.tteam.icu/rss.xml',
+                        copyTip: 'copy',
+                    }}
+                    className="text-sm font-bold dark:hover:text-blue-400 transition-colors duration-200 cursor-pointer">
+                    Follow Me
+                </Paragraph>
+                <span className="mx-2">|</span>
+                <Link
+                    to="/changelog"
+                    className="text-sm font-bold dark:hover:text-blue-400 transition-colors duration-200">
+                    Change Logs
+                </Link>
+                {/*<span className="mx-2">|</span>*/}
+                {/*<Link*/}
+                {/*    to="/coffee"*/}
+                {/*    className="text-sm font-bold dark:hover:text-blue-400 transition-colors duration-200 flex items-center">*/}
+                {/*    <FaCoffee className="mr-1" />*/}
+                {/*    Buy Some Coffee*/}
+                {/*</Link>*/}
+            </div>
+        </motion.div>
+    );
+};
+
+export default Links;

src/components/AboutMe/index.jsx

@@ -4,7 +4,8 @@ import HeadPortrait from './HeadPortrait';
 import LanguageSection from './LanguageSection';
 import WorkExperience from './WorkExperience';
 import { pageVariants } from '../../config';
-import OpenSourceProjects from './OpenSourceProjects.jsx';
+import OpenSourceProjects from './OpenSourceProjects';
+import Links from './Links';
 
 const AboutMe = ({ wakatimeData }) => {
     return (
@@ -17,14 +18,7 @@ const AboutMe = ({ wakatimeData }) => {
             transition={{ duration: 0.5 }}>
             <HeadPortrait />
 
-            <motion.h1
-                className="text-4xl font-bold mb-4"
-                initial={{ opacity: 0, y: 50 }} // 从下方开始 (y 设为正值)
-                animate={{ opacity: 1, y: 0 }} // 最终回到原始位置
-                transition={{ duration: 1 }} // 动画持续 1 秒
-            >
-                About Me
-            </motion.h1>
+            <Links />
 
             <LanguageSection
                 start_time={wakatimeData.start_time}

src/components/Coffee/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { pageVariants } from '../../config';
+import { Button } from '@douyinfe/semi-ui';
+import { IoIosArrowBack } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
+
+const Coffee = () => {
+    const navigate = useNavigate();
+
+    return (
+        <motion.div
+            className="w-[80%] mx-auto min-h-screen dark:bg-gray-900 text-white flex flex-col items-center p-4 mt-3"
+            variants={pageVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{ duration: 0.5 }}>
+            <div className="w-full flex justify-start text-white mb-10">
+                <Button
+                    theme="outline"
+                    type="tertiary"
+                    onClick={() => navigate('/')}>
+                    <IoIosArrowBack />
+                    返回首页
+                </Button>
+            </div>
+        </motion.div>
+    );
+};
+
+export default Coffee;

src/components/NavBar.jsx

@@ -40,11 +40,6 @@ const NavBar = () => {
                         className="items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200 hidden md:flex">
                         Pictures
                     </Link>
-                    <Link
-                        to="/changelog"
-                        className="items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200 hidden md:flex">
-                        ChangeLog
-                    </Link>
                     <a
                         href={skipUrl.note}
                         target="_blank"

src/components/Pictures/index.jsx

@@ -7,8 +7,10 @@ import {
     IllustrationConstructionDark,
 } from '@douyinfe/semi-illustrations';
 import { IoIosArrowBack } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
 
 const Pictures = () => {
+    const navigate = useNavigate();
     const [loadedPhotos, setLoadedPhotos] = useState([]);
     const [currentIndex, setCurrentIndex] = useState(0);
     const [pictureList, setPictureList] = useState({ urls: [], count: 0 });