Blumid is a blog theme designed for Ghost with a core philosophy of "content-first." In an era of information overload, many blogs aim for poster-level visual impact, which can often distract readers. Blumid opts for restraint and elegance, creating an immersive and pleasant reading environment through gentle visual guidance.
It fully implements all official Ghost features (such as search, members, content cards, and native comments) and incorporates significant effort into its design philosophy and functional details.
Blumid's core style is summarized as "Crystalmorphism & Morandi," aiming to highlight the content itself while providing a comfortable visual experience.
- Modular & Modern: Content is organized into clean, rounded-corner cards with a clear information hierarchy. The overall interface is minimalist, reducing visual clutter to keep the focus on the core content.
- Soft Atmosphere: The page background features a gentle gradient of the theme color, while containers like the navigation bar, main body, and sidebar use a frosted glass effect. A subtle shadow is present in light mode, and a faint border glow appears in dark mode, creating a light and comfortable visual layering.
- Color System: The main color palette is inspired by the popular Morandi colors, which are soft and understated. The background color is fully customizable. The theme also supports automatic switching between light and dark modes based on OS preferences, with a manual override option.
- Intuitive Interaction: The layout is fully responsive, adapting seamlessly to various screen sizes. All key elements, including the navigation bar, sidebar, and cards, are meticulously designed for a consistent and smooth interactive experience on any device.
- Lightweight & Native: Blumid adheres to using native CSS and JavaScript, minimizing dependencies on third-party frameworks to ensure the theme is lightweight and efficient.
- Icon System: Inline SVG icons are embedded using Handlebars Partials, ensuring a unified style that adapts to size and theme color.
Blumid enhances content display with various effects and offers extensive customization options to meet individual needs.
- Click-to-Zoom Images: Images in posts and the sidebar can be clicked to view the original in detail.
- Sticky-Note Info Cards: Post metadata like tags and dates are displayed in a unique sticky-note style, with an integrated one-click share function.
- Code Highlighting:
Prism.jsis used for code highlighting, supporting language display, one-click copy, and adapting to light/dark modes. - Mermaid Charts: Native support for
Mermaidsyntax allows rendering code blocks into flowcharts, sequence diagrams, etc., by specifying the language in Markdown or HTML. - LaTeX Formulas: Mathematical formulas are rendered in posts using
KaTeX. For best results, it's recommended to write formulas inmathorlatexcode blocks. - Optimized Content Cards: Tables, quotes, and all official Ghost content cards are designed for a beautiful and responsive display on all devices.
All settings can be easily configured in the Ghost admin under Design & branding, with more advanced customization available via Code injection.
An optional immersive homepage to display a beautiful background image and site metadata. Users can smoothly transition to the post list by scrolling or clicking the arrow.
The header and footer navigation bars display the primary and secondary navigation items set in the Ghost admin. The header bar auto-hides on scroll and collapses on smaller screens.
The sidebar is intelligently responsive and offers natural interactions:
- Mobile/Tablet: Swipe from the left edge of the screen to reveal it; tap outside the content area to hide it.
- Desktop: Show or hide it by clicking the icon in the navigation bar.
On post pages, the sidebar automatically generates a table of contents. On list pages (homepage, tag pages, etc.), you can choose to display one of three content types:
- Site Info: The default mode, showing the site logo, author information, and a tag cloud.
- RSS Feed: Subscribe to and display external RSS feeds, perfect for aggregating content from other platforms.
- Code Injection: Embed chat boxes, personal status updates, or other unique modules via custom scripts.
- Members-Only Content: You can set the RSS Feed or Code Injection sidebar content to be "members-only."
The background color is fully customizable. You can freely adjust the top and bottom colors for both light and dark modes.
Recommended Colors:
- Light:
#A0C4FF,#FFFFE0,#E4F9E0,#FFFFFF - Dark:
#000000,#2C003E,#C76D00,#7D7D7D
The theme includes an elegant font fallback solution and allows you to import custom fonts. The "pen-nib" icon on the post separator is also replaceable.
The theme comes with built-in English and Chinese support and automatically switches based on the language setting in Ghost admin. You can easily add more language files in the locales folder.
- Download the latest
Blumid.zipfile from the GitHub Releases. - Log in to your Ghost admin panel.
- Go to Settings -> Design & branding -> Themes.
- Click Upload a theme and select the downloaded zip file.
- Once uploaded, click Activate.
Due to the browser's same-origin policy, fetching third-party RSS feeds directly on the front end may encounter CORS restrictions. It is recommended to use a CORS proxy service.
This feature provides an anchor element <div id="initChatBox" class="sidebar-section"></div>, allowing you to embed any dynamic content in the sidebar. It is highly recommended for use with Cactus Comments to create a powerful website chatroom.
- 100% Gscan Passed: The project has been fully checked with Ghost's official
gscantool. - Code Quality: The code is well-structured and follows the BEM naming convention.
- Accessibility: Follows WCAG standards for an accessible experience.
- SEO Optimized: Includes comprehensive structured data for better search engine visibility.