Hexo Architecture + Redefine Theme | Books, Movies & Music with NeoDB

I. Frontend Implementation Ideas (Effects and Logic)

Frontend Final Effects

• Seamless Dual-View Switching: Two toggle buttons (“Grid View” and “Feed Detail View”) are provided at the top of the page. Clicking them switches between the “Poster Cover Grid” and “Detailed Feed Cards” in real time without a page refresh.
• Waterfall Grid View: Displays book, movie, and music covers in a clean grid wall with a subtle hover offset animation, perfect for quick browsing.
• Feed Detail Cards: Shows complete item details, including covers, titles (with external links), user comments, and ratings.
• Spoiler / Sensitive Content Collapse: Automatically detects comment text. If a comment contains >! and !<, the text between them is blurred, requiring users to click to reveal it and prevent accidental spoilers.
• Timeline Feature: On mobile or narrow screens, all cards are stacked at the bottom of the timeline; on desktop wide screens, all cards line up neatly on the right side of the timeline.
• PJAX Single-Page Compatibility: Fully compatible with themes using PJAX routing (like Redefine), ensuring dynamic components re-render automatically without blank pages or broken event listeners when navigating.

Frontend Implementation Methods

• Dual-View Switching: Uses vanilla JavaScript to manipulate CSS display properties (toggling between grid, flex, and none) for instant visibility toggling.

• Spoiler Logic: Uses regular expressions or string matching (.includes()) while parsing JSON data. When keywords/symbols are detected, the comment is wrapped inside native HTML <details> and <summary> tags.

• Robust Event Binding: Replaces inline onclick attributes in HTML (preventing Hexo/Markdown compiler escaping issues) with document.getElementById().onclick or addEventListener in JS.

• Route Listening: Listens to both DOMContentLoaded and PJAX-specific pjax:complete events to ensure rendering triggers properly on initial page loads and asynchronous navigation.

• Timeline Implementation:

  1. HTML / DOM Structure: Fetches local data via fetch('/neodb_data.json') and iterates through the array. DOM strings are constructed by parsing JSON date fields into .timeline-date elements, wrapping potential spoiler comments in <details> elements, and appending them to the timeline container.

  2. CSS Pseudo-element Line: Uses position: relative on the outer .timeline-container combined with a CSS pseudo-element (.timeline-container::before) to draw an absolute-positioned vertical line (e.g., 2px wide) through the section without extra HTML markup.

II. Backend Implementation Ideas (Fetching and Passing Data)

Backend Fetched Data

The backend script extracts user-marked public data from NeoDB, specifically including:

• Item Title (title): Name of the book, movie, or music track.
• Cover Image URL (cover): Poster or book cover image link.
• Detail Page Link (link): Full URL linking to the NeoDB item page.
• User Comment / Review (comment): Text logs written on NeoDB (used for frontend spoiler filtering and display).
• User Rating & Category (rating / category): Star rating and item type (movie/book/music, etc.).
• Time Fields (created_at / marked_at): Timestamps/date strings.

Data Fetching Method

• Build-Time Fetching (Hexo Generator): Abandons browser-side fetching (which suffers from CORS restrictions) for a Node.js plugin script placed in Hexo’s scripts/ directory. It runs on the server/locally during Hexo compilation (hexo generate or hexo server).
• API Authentication with Access Token: Uses Node.js native https module to send GET requests to the NeoDB API. By attaching the obtained access token (e.g., Authorization: Bearer <Your_Token>) to the HTTP headers, it gains authorized API access to directly fetch and parse full JSON data.

Data Passing to Frontend

• Generating Static JSON Source: After fetching and sanitizing data, the Node.js script uses Hexo’s hexo.extend.generator.register API to serialize the array into a JSON string and export a static /neodb_data.json file in the site’s root directory.
• Same-Origin Fetch Request: The frontend fetches the local file using a same-origin relative path fetch('/neodb_data.json'). This completely bypasses CORS restrictions, third-party RSS proxy instability, and API Token leak risks.

III. Additional Key Summary Points

• Defensive Design & Graceful Degradation: Includes try...catch error handling in the backend fetching logic. If NeoDB times out or fails, Hexo compilation will not crash; it degrades gracefully by returning an empty array or warning message, keeping site builds stable.
• Decoupled Architecture: Completely separates data fetching (Node.js generator) from view rendering (frontend DOM construction). The backend only updates neodb_data.json, and the frontend only reads and renders JSON, significantly reducing future maintenance costs when tweaking styles or changing themes.