🐯完善自部署路由，美化前端展示页面，适配移动端

.github/workflows/friend_circle_lite.yml

@@ -64,7 +64,7 @@ jobs:
     - name: Commit changes
       run: |
         mkdir pages
-        cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico all.json errors.json pages/
+        cp -r main ./static/index.html ./static/readme.md ./static/favicon.ico ./static/bg-light.webp all.json errors.json pages/
         cd pages
         git init
         git add .

readme.md

@@ -11,6 +11,12 @@
 
 ## 开发进度
 
+### 2024-09-28
+
+* 更新自部署的api地址，统一为all.json，提高js兼容性
+* 美化展示页面UI(@JLinMr)，添加背景图片
+* 优化作者卡片弹窗动效(@JLinMr)
+
 ### 2024-09-22
 
 * 修复 #18 提出的，由于rss倒序导致限制抓取错误的问题，改为先全部获取后，按照时间排序，再选择性获取
@@ -20,14 +26,13 @@
 * 更新部署方式，将静态文件放到page分支下，主分支不放数据文件
 * 前后端分离，部署方式不变但更加直观方便
 
-### 2024-09-03
-
-* 添加特定RSS选项，用于指定部分友链特殊RSS地址
-* 更新文档，添加特定RSS选项配置部分
-
 <details>
 <summary>查看更多</summary>
 
+<h3>2024-09-03</h3>
+
+* 添加特定RSS选项，用于指定部分友链特殊RSS地址
+* 更新文档，添加特定RSS选项配置部分
 
 <h3>2024-08-28</h3>
 

server.py

@@ -1,5 +1,6 @@
 from fastapi import FastAPI
-from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
 from starlette.middleware.cors import CORSMiddleware
 import json
 import random
@@ -9,6 +10,9 @@ from friend_circle_lite.get_conf import load_config
 
 app = FastAPI()
 
+# 设置静态文件目录
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
 # 添加 CORS 中间件
 app.add_middleware(
     CORSMiddleware,
@@ -17,15 +21,19 @@ app.add_middleware(
     allow_methods=["*"],
     allow_headers=["*"],
 )
+# 返回图标图片
+@app.get("/favicon.ico", response_class=HTMLResponse)
+async def favicon():
+    return FileResponse('static/favicon.ico')
+
+# 返回背景图片
+@app.get("/bg-light.webp", response_class=HTMLResponse)
+async def bg_light():
+    return FileResponse('static/bg-light.webp')
 
 @app.get("/", response_class=HTMLResponse)
 async def root():
-    try:
-        with open('./static/index.html', 'r', encoding='utf-8') as f:
-            html_content = f.read()
-        return HTMLResponse(content=html_content)
-    except FileNotFoundError:
-        return HTMLResponse(content="<h1>File not found</h1>", status_code=404)
+    return FileResponse('./static/index.html')
 
 @app.get('/all.json')
 async def get_all_articles():

static/index.html

@@ -11,7 +11,7 @@
 </head>
 <style>
     body {
-        background-image: url('https://i.p-i.vip/30/20240927-66f6cb77cbd1b.webp');
+        background-image: url('./bg-light.webp');
         background-size: cover;
         background-attachment: fixed;
         background-repeat: no-repeat;
@@ -42,7 +42,13 @@
         width: 100%;
         margin-top: 40px;
         max-width: 1100px;
-        padding: 40px;
+    }
+    
+    @media (max-width: 1200px) {
+        .root-container {
+            max-width: 95%;
+            margin-top: 20px;
+        }
     }
 
     .avatar {
@@ -82,11 +88,6 @@
         height: fit-content !important;
     }
 
-    #friend-circle-lite-root {
-        padding: 10px 0;
-        margin: 10px auto;
-        max-width: 1200px;
-    }
     .scroll-down-icon {
         position: absolute;
         bottom: 20px;
@@ -144,7 +145,7 @@
             // 点击加载更多时，一次最多加载几篇文章，默认20
             page_turning_number: 24,
             // 头像加载失败时，默认头像地址
-            error_img: 'https://i.p-i.vip/30/20240815-66bced9226a36.webp', // https://pic.imgdb.cn/item/6695daa4d9c307b7e953ee3d.jpg
+            error_img: './favicon.ico' // 'https://i.p-i.vip/30/20240815-66bced9226a36.webp'
         }
     }
 </script>