flag

开发日志：布局与横幅实现

2026.02.13 | 开发日志
Date: 2026-02-13
Author: Seon-Bi V (Assist by AI)

Overview


This session focused on overhauling the blog's layout to a dense, information-rich "Wiki-style" and implementing a robust banner management system.

Key Changes



1. 3-Column Layout


  • Structure: Transitioned from a single centered column to a full-width 3-column layout:

    • - Left Sidebar: Navigation, Language Selector, Theme Toggle.
    - Center: Main Content.
    - Right Sidebar: Banners and Ad Content.
  • Responsiveness:

    • - Desktop: All 3 columns visible. Left sidebar togglable.
    - Mobile: Left sidebar hidden (hamburger menu), Right sidebar moves to bottom.

    2. Navigation Improvements


  • Mobile Header: Moved the hamburger menu button ($\equiv$) to the left side for better UX.

  • Desktop Toggle: Added a toggle button for the left sidebar on desktop, saving the state in localStorage.

  • Language Switcher: Fixed an issue where switching languages reset the URL parameters. Now preserves the current page/post ID.


    • 3. Banner Management System


  • Admin Interface:

    • - Replaced the simple text area with a Dynamic Banner List.
    - Support for adding/removing multiple banners.
    - Image Upload: Integrated image upload functionality directly into the banner settings.
    - Link Support: Images can have clickable destination URLs.
    - HTML Mode: Fallback to raw HTML for AdSense or scripts.
  • Frontend:

    • - Banners render stack vertically in the right sidebar.
    - Images are automatically resized to 100% width for responsiveness.

    4. Code Refactoring Update


  • admin/settings.php: extensively modified for banner logic.

  • components/sidebar_right.php: wrapper logic for banner rendering.

  • assets/css/style.css: styling for the new layout and components.


    • Next Steps


  • Monitor user feedback on the dense layout.

  • further condense the post list view if needed.




    • Mobile Admin UI & Voice Blog Optimization



    1. Mobile Admin Interface Overhaul
    The administration panel has been redesigned for mobile devices to improve usability and density, inspired by the utilitarian Namuwiki style.
  • Card Layout: Tables in posts.php, categories.php, and settings.php now transform into compact cards on mobile.

  • High Density: Reduced padding and margins to maximize screen real estate.

  • Visual Clarity: Removed unnecessary shadows and rounded corners in favor of clean, flat borders.

  • Header Fix: Resolved issues where the fixed header would obscure content.


    • 2. Voice Blog Implementation
  • Added a dedicated "Voice Blog" button in the mobile header.

  • Implemented real-time audio recording, uploading, and automatic transcription using Gemini API.

  • Integrated seamless workflow: Record -> Transcribe -> Generate Post -> Redirect.


    • 3. System Improvements
  • SQLite Migration: Successfully migrated from JSON processing to a robust SQLite database.

  • Settings Page: Refined for mobile with optimized form inputs and compact sections.

  • Performance: Added cache busting for CSS to ensure UI updates are immediately visible.

    • 相关文章

    评论

    暂无评论。成为第一个分享想法的人吧！

    © 2026 My Blog. All rights reserved.