增加网站更新日志

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.4.0",
+    "react-markdown": "^9.0.3",
     "react-router-dom": "^7.0.2",
     "tailwind-merge": "^2.5.5",
     "tailwindcss": "^3.4.17",
@@ -60,6 +61,7 @@
   },
   "devDependencies": {
     "prettier": "3.4.2",
+    "raw-loader": "^4.0.2",
     "react-scripts": "^5.0.1",
     "react-snap": "^1.23.0",
     "typescript": "^4.9.5"

src/App.jsx

@@ -13,6 +13,7 @@ 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";
 
 const App = () => {
     // semi-design的主题默认为暗色
@@ -81,6 +82,7 @@ const App = () => {
                         <Route path="/tools" element={<Tools />} />
                         <Route path="/urls" element={<Urls />} />
                         <Route path="/pictures" element={<Pictures />} />
+                        <Route path="/changelog" element={<ChangeLog />} />
                         <Route path="*" element={<NotFound />} />
                     </Routes>
 

src/CHANGELOG.md

@@ -0,0 +1,37 @@
+2025-01-20 增加网站更新日志
+
+2025-01-19 拆分工作经历组件，增加项目经验
+
+2025-01-08 重构图片页面，优化瀑布流的显示流畅度
+
+2025-01-10 重构获取数据从py改为js
+
+2025-01-06 封装BackTop组件，使得有进度条
+
+2025-01-06 增加prettier来格式化代码
+
+2024-12-24 增加提交数等显示
+
+2024-12-17 增加水印
+
+2024-12-17 增加回到顶部
+
+2024-12-17 增加[wakatime](https://wakatime.com/)更新时间
+
+2024-12-13 增加照片墙界面，使用瀑布流
+
+2024-12-10 增加开源项目组件
+
+2024-12-01 新增urls页面
+
+2024-12-02 新增tools界面
+
+2024-12-02 新增动画
+
+2024-11-20 初步完成需求
+
+2024-12-02 新增tools界面 
+
+2024-12-02 新增动画
+
+2024-11-20 初步完成需求

src/util/ChangeLog.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import md from '!!raw-loader!../CHANGELOG.md';
+import { pageVariants } from '../config.js';
+import { Button } from '@douyinfe/semi-ui';
+import { motion } from 'framer-motion';
+import { IoIosArrowBack } from 'react-icons/io';
+
+const ChangeLog = () => {
+    return (
+        <motion.div
+            className="w-[60%] 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">
+                <Button
+                    theme="outline"
+                    type="tertiary"
+                    onClick={() => navigate('/')}>
+                    <IoIosArrowBack />
+                    返回首页
+                </Button>
+            </div>
+            <Markdown className="mt-10 text-2xl leading-loose">{md}</Markdown>
+        </motion.div>
+    );
+};
+
+export default ChangeLog;

webpack.config.js

@@ -2,4 +2,12 @@ module.exports = {
     resolve: {
         extensions: ['.js', '.jsx', '.json', '.tsx'],
     },
-};
+    module: {
+        rules: [
+            {
+                test: /\.md$/,
+                use: 'raw-loader',
+            },
+        ],
+    },
+};