Hexo Theme Shana

Hexo Theme Shana is an anime-styled theme for the Hexo static site generator, created to celebrate the character Shana's 2016 Best Girl win. It prioritizes PC viewing with extensive CSS animations, a customizable right-click GalMenu, and optional math formula rendering.

What is Hexo Theme Shana?

Hexo Theme Shana is a theme built on Hexo 3.2 that transforms a Hexo blog into an anime-inspired site. It takes standard Hexo content (Markdown posts, tags, categories) and outputs a static website with a custom homepage, archive page, tag page, and code-highlighted article layouts. The theme is developed by ShanaMaid and available as an open-source repository on GitHub.

Key Features

• GalMenu — A right-click context menu on desktop and long-press menu on mobile, with configurable menu items and optional sound effects via the mp3play setting.
• Anime-centric design — Custom animations throughout the UI, including animated background effects that can be replaced by editing bg.css in the theme's plugin folder.
• Math formula support — Supports LaTeX-style math by swapping hexo-renderer-marked for hexo-renderer-markdown-it-plus and enabling math: true in post front matter.
• Customizable code highlighting — Syntax highlighting colors can be adjusted by editing highlight.styl in source/css_partial.
• Sidebar widgets — Displays navigation, about, categories, tag cloud, and archive widgets with configurable position (sidebar: left or right).
• Third-party integrations — Supports RSS feed, Fancybox image lightbox, Google Analytics, CNZZ statistics, Leancloud visitor counters, and social/friend links.
• Fully configurable menu and links — Menu items, social links, and friend links are set in the theme's _config.yml.

Who is it for?

• Anime fans and fans of the character Shana — they get a theme that celebrates the 2016 Best Girl winner with a distinct visual style.
• Hexo bloggers who prioritize desktop presentation — the theme is built with PC experience first, and mobile support is secondary.
• Developers who want to customize a theme — the theme is written with Stylus for styles and EJS for templates, making it straightforward to tweak animations, backgrounds, and layout.

What can you do with Hexo Theme Shana?

• Personal blogging with flair: Write standard Hexo posts and enjoy an animated, anime-styled presentation that stands out from default Hexo themes.
• Technical writing with math: Use the markdown-it-plus renderer to embed math formulas in posts, ideal for engineering or science blogs.
• Showcase code snippets: Take advantage of the custom code highlighter to match the theme's aesthetic.
• Customize the look: Replace the default background images and highlight colors without touching the core template.

How does Hexo Theme Shana work?

1. Clone the repository into your Hexo site's themes directory.
2. Set theme: shana and language: zh-CN in the site's _config.yml.
3. Copy the tags and categories folders from themes/shana/_source/ into your site's source folder.
4. Optionally enable math formulas by switching the Markdown renderer and adding the markdown_it_plus config.
5. Run hexo generate to produce the static site.

Pros and cons

• Pros: Unique anime design; GalMenu interaction; math support; easy customization of background and highlight styles; free and open source.
• Cons: Not compatible with older browsers; heavy animations can cause lag on low-end mobile devices; the default third-party comment system (Uyan) does not support HTTPS, so secure blogs cannot use it.

Pricing

The theme is free and open source, hosted on GitHub.

Alternatives

Other Hexo themes include NexT, which offers a more minimal and widely used design with a modular architecture.

FAQ

Is Hexo Theme Shana free?

Yes, the theme is open source and available at no cost on GitHub.

Does Hexo Theme Shana support math formulas?

Yes. Uninstall hexo-renderer-marked, install hexo-renderer-markdown-it-plus, set math: true in each post's front matter, and add the markdown_it_plus configuration to the site's config file.

Why don't comments appear on my HTTPS blog?

The built-in Uyan comment system does not support the HTTPS protocol. If your site uses HTTPS (has a green padlock), the comments won't load even if you set the uyan uid. For HTTPS sites, you'd need to modify the template to use a different comment service.

How do I update the theme?

Run git pull origin master inside the themes/shana directory to fetch the latest changes.

Why does my site lag on mobile?

The theme includes many CSS animations. On low-end phones, these animations can cause stuttering during mobile browsing. The developer notes that PC performance is the priority and mobile is secondary.