feat: add games page and navigation menu

Author: RubberTale

_config.butterfly.yml

@@ -23,6 +23,7 @@ menu:
   Categories: /categories/ || fas fa-folder-open
   Tags: /tags/ || fas fa-tags
   Charts: /charts/ || fas fa-chart-bar
+  Games: /games/ || fas fa-gamepad
   # ...其他你不需要的可以在前面加 # 注释掉
 
 # --------------------------------------

reverse-app/vite.config.ts

@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: '/reverse-app/',
+  base: '/games/reverse-app/',
 })

source/games/index.md

@@ -0,0 +1,38 @@
+---
+title: 期货实验室 (Games)
+date: 2026-04-06 10:00:00
+aside: false
+---
+
+欢迎来到期货实验室！这里收集了一些互动的期货交易小游戏，帮助你在娱乐中理解市场逻辑。
+
+<div class="flink">
+  <div class="flink-list">
+    <div class="flink-list-item">
+      <a href="/games/reverse-app/" title="期货反转交易挑战" target="_blank">
+        <div class="flink-item-icon">
+          <img src="/img/avatar.png" onerror='this.onerror=null;this.src="/img/friend_404.gif"' alt="期货反转交易挑战">
+        </div>
+        <div class="flink-item-name">期货反转交易挑战</div>
+        <div class="flink-item-desc">测试你的反向思维，在极端行情中寻找转机。</div>
+      </a>
+    </div>
+    <!-- 可以在此处添加更多游戏卡片 -->
+  </div>
+</div>
+
+<style>
+.flink-list-item {
+  width: calc(33.333% - 15px) !important;
+}
+@media screen and (max-width: 768px) {
+  .flink-list-item {
+    width: calc(50% - 15px) !important;
+  }
+}
+@media screen and (max-width: 500px) {
+  .flink-list-item {
+    width: 100% !important;
+  }
+}
+</style>