feat: add background image and enhance styles across the application

- Added a new background image (bg.jpg) for the site.
- Updated styles in styles.css to implement a fixed background overlay.
- Modified site configuration seed to include the new background image path.
- Removed unused log4js import in main.js.
- Enhanced footer styles with a semi-transparent background and blur effect.
- Updated base layout to dynamically set the background image.
- Changed navigation label from "留言板" to "收藏".
- Revamped about page styles for a more modern look with transparency and blur.
- Simplified the home page layout and adjusted styles for better visual appeal.

entrypoint.sh

@@ -4,15 +4,24 @@ set -e
 # 数据库文件路径（可根据实际环境调整）
 DB_FILE=./database/db.sqlite3
 
+# 检查 bun 是否存在
+if command -v bun >/dev/null 2>&1; then
+  RUNNER="bun run"
+  START="exec bun src/main.js"
+else
+  RUNNER="npx"
+  START="exec npm run start"
+fi
+
 # 如果数据库文件不存在，先 migrate 再 seed
 if [ ! -f "$DB_FILE" ]; then
   echo "Database not found, running migration and seed..."
-  bun run npx knex migrate:latest
-  bun run npx knex seed:run
+  $RUNNER npx knex migrate:latest
+  $RUNNER npx knex seed:run
 else
   echo "Database exists, running migration only..."
-  bun run npx knex migrate:latest
+  $RUNNER npx knex migrate:latest
 fi
 
 # 启动主服务
-exec bun src/main.js
+$START

public/styles.css

@@ -3,7 +3,6 @@ body {
     margin: 0;
     padding: 0;
     height: 100%;
-    background-color: #f9f9f9;
     font-family: Arial, sans-serif;
     color: #333;
 }
@@ -14,6 +13,22 @@ body {
     flex-direction: column;
 }
 
+body::after {
+    content: "";
+    position: fixed;
+    pointer-events: none;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--bg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-color: #f9f9f9;
+    filter: brightness(.55);
+    z-index: -1;
+}
+
 .navbar {
     height: 49px;
     display: flex;
@@ -35,7 +50,7 @@ body {
 }
 
 .page {
-        width: 100%;
+    width: 100%;
     display: flex;
     flex-direction: row;
     flex: 1;
@@ -63,11 +78,13 @@ body {
     width: 80px;
     padding: 40px 0;
     border-radius: 80px;
-    background: linear-gradient(135deg, #4fd1ff 0%, #ff6a6a 100%);
+    /* background: linear-gradient(135deg, #4fd1ff 0%, #ff6a6a 100%); */
     /* 更明亮的渐变色 */
-    box-shadow: 0 8px 32px 0 rgba(80, 80, 200, 0.18), 0 2px 16px 0 rgba(255, 106, 106, 0.12);
+    /* box-shadow: 0 8px 32px 0 rgba(80, 80, 200, 0.18), 0 2px 16px 0 rgba(255, 106, 106, 0.12); */
     /* 更明显的阴影 */
-    transition: background 0.3s, box-shadow 0.3s;
+    /* transition: background 0.3s, box-shadow 0.3s; */
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
 }
 
 .flota-nav .item {
@@ -98,4 +115,12 @@ body {
     background: #fff200;
     color: #ff6a6a;
     box-shadow: 0 4px 20px 0 rgba(255, 242, 0, 0.22);
+}
+
+.card {
+    padding: 56px 40px 44px 40px;
+    border-radius: 28px;
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(18px);
+    color: #fff;
 }

src/db/seeds/20250621013324_site_config_seed.mjs

@@ -7,6 +7,7 @@ export const seed = async (knex) => {
     { key: 'site_title', value: '🥔未野明的小屋' },
     { key: 'site_description', value: '一屋很小，却也很大' },
     { key: 'site_logo', value: '/static/logo.png' },
+    { key: 'site_bg', value: '/static/bg.jpg' },
     { key: 'keywords', value: 'blog' },
     { key: 'base', value: '/' }
   ]);

src/main.js

@@ -5,7 +5,6 @@ import "./jobs/index.js"
 // 第三方依赖
 import Koa from "koa"
 import os from "os"
-import log4js from "log4js"
 
 // 应用插件与自动路由
 import LoadMiddlewares from "./middlewares/install.js"

src/views/htmx/footer.pug

@@ -10,7 +10,8 @@
                 a(href="/privacy") 隐私
     style.
         .footer-panel {
-            background: #222;
+            background: rgba(34,34,34,.6);
+            backdrop-filter: blur(12px);
             color: #eee;
             padding: 40px 0 24px 0;
             font-size: 15px;

src/views/layouts/base.pug

@@ -34,7 +34,7 @@ html(lang="zh-CN")
     //- +css('https://unpkg.com/simplebar@latest/dist/simplebar.css', true)
     //- +css('simplebar-shim.css')
     //- +js('https://unpkg.com/simplebar@latest/dist/simplebar.min.js', true)
-  body
+  body(style="--bg:url("+($site && $site.site_bg || '#fff')+")")
     noscript
       style.
         .simplebar-content-wrapper {

src/views/layouts/page.pug

@@ -11,7 +11,7 @@ block content
       - const navs = [];
       - navs.push({ href: '/', label: '首页' });
       - navs.push({ href: '/articles', label: '文章' });
-      - navs.push({ href: '/article', label: '留言板' });
+      - navs.push({ href: '/article', label: '收藏' });
       - navs.push({ href: '/about', label: '关于' });
       nav.nav
         ul.flota-nav

src/views/page/about/index.pug

@@ -23,28 +23,28 @@ block pageContent
     .about-container {
       margin: 32px auto 0 auto;
       padding: 56px 40px 44px 40px;
-      background: linear-gradient(120deg, #e3f3ff 0%, #fafdff 100%);
       border-radius: 28px;
-      box-shadow: 0 8px 36px rgba(126,198,247,0.13), 0 2px 12px rgba(255,140,168,0.08);
-      border: 1.5px solid #b2ebf2;
+      background: rgba(255, 255, 255, 0.25);
+      backdrop-filter: blur(18px);
+      
       //- max-width: 900px;
       //- min-width: 340px;
     }
     .about-container h1 {
       font-size: 2.7em;
-      color: #2196f3;
+      color: rgb(80, 168, 255);
       margin-bottom: 28px;
       text-align: center;
       font-weight: 900;
       letter-spacing: 2.5px;
       text-shadow: 0 2px 16px rgba(33,150,243,0.10);
-      background: linear-gradient(90deg, #2196f3 30%, #7ec6f7 100%);
+      background: linear-gradient(90deg,rgb(80, 168, 255) 30%, #7ec6f7 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
     .about-container p {
       font-size: 1.18em;
-      color: #333;
+      color: #fff;
       margin-bottom: 26px;
       line-height: 1.85;
     }
@@ -58,11 +58,11 @@ block pageContent
     }
     .about-section h2 {
       font-size: 1.22em;
-      color: #1976d2;
+      color:rgb(80, 168, 255);
       margin-bottom: 10px;
       font-weight: 700;
       letter-spacing: 1.2px;
-      background: linear-gradient(90deg, #1976d2 60%, #7ec6f7 100%);
+      background: linear-gradient(90deg,rgb(80, 168, 255) 60%, #7ec6f7 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -72,12 +72,12 @@ block pageContent
     }
     .about-section li {
       font-size: 1.08em;
-      color: #444;
+      color: #fff;
       margin-bottom: 8px;
       line-height: 1.7;
     }
     .about-container a {
-      color: #2196f3;
+      color:rgb(80, 168, 255);
       text-decoration: underline;
       font-weight: 600;
       transition: color 0.2s, background 0.2s;

src/views/page/index/index.pug

@@ -3,28 +3,16 @@ extends /layouts/page.pug
 block pageContent
   .home-hero
     h1 #{$site.site_title}
-    //- p.subtitle #{$site.site_description}
-    .actions
-      a.btn-primary(href="/about") 了解更多
-      a.btn-secondary(href="/contact") 联系我们
-
-  .features
-    .feature
-      h2 🚀 极速开发
-      p 使用 Koa3 和现代前端技术，快速搭建高效网站。
-    .feature
-      h2 🔒 安全可靠
-      p 内置多项安全机制，保障数据与用户安全。
-    .feature
-      h2 🌈 易于扩展
-      p 结构清晰，方便二次开发和功能拓展。
+    p.subtitle #{$site.site_description}
 
   style.
     .home-hero {
       text-align: center;
       padding: 60px 0 40px 0;
       margin: 20px 20px;
-      background: linear-gradient(90deg, #4fc3f7 0%, #1976d2 100%);
+      //- background: linear-gradient(90deg, #4fc3f7 0%, #1976d2 100%);
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(12px);
       color: #fff;
       border-radius: 12px;
       margin-bottom: 40px;