Hexo Theme Morgan

Hexo Theme Morgan is a blog theme for the Hexo static site generator, built on the Tocas UI framework, that turns a default Hexo site into a styled blog with configurable colors, Disqus comments, code highlighting, and animated header slogans.

What is Hexo Theme Morgan?

Morgan is a theme for Hexo, the Node.js-based static site generator, and it is styled with Tocas UI, a CSS component library. It takes a standard Hexo blog (with posts in Markdown) and outputs a static site with a custom header, navigation menu, article list, and a sidebar that includes an About Me widget. The theme is open source under the MIT License and is maintained by hpcslag on GitHub, currently with 21 stars in its repository.

Key Features

• Tocas UI styling — The theme is built on Tocas UI, giving every component (buttons, cards, menu, etc.) a consistent visual style without requiring a custom CSS framework.
• Disqus comment integration — Enable comments by setting enabled_disquzs to true in the theme config and providing your Disqus embed.js URL in disqus_url; no other plugin is needed.
• Code highlighting with hexo-prism-plugin — To display syntax-highlighted code blocks, install hexo-prism-plugin, disable Hexo's built-in highlight in the main _config.yml, and set prism_plugin.mode to preprocess, theme to default, and line_number to false.
• Animated multilingual slogan — The header can display an array of slogans (e.g., greetings in Dutch, Chinese, Korean, English, Japanese, and Arabic) with an animation that plays when two or more slogans are configured; optional slogan_random_display shows a random one on each visit.
• Extensive color customization — Separate config keys control the blog title color and background, menu text and background, and the normal/hover/active colors of article titles on the index page, all as CSS color values like #404040 or white.
• About Me widget — Show or hide a sidebar widget with your own heading and text via enabled_about_me, about_me_text, and about_me_content.
• Custom footer content — Set footer_big_content and footer_small_content for your own copyright or tagline; leaving them empty falls back to the theme default.

Who should use Hexo Theme Morgan?

• Hexo bloggers — Users who want a clean, UI-framework-based blog without hand-writing CSS; they can get a complete layout by cloning the theme into the themes folder.
• Developers who like YAML configuration — The theme is configured entirely through _config.yml files, so anyone comfortable editing YAML can change colors, disable widgets, or add a Disqus URL directly.
• Multilingual or international bloggers — The slogan feature accepts an array of strings in any language, making it easy to greet visitors in multiple languages on the same header.

What can you do with Hexo Theme Morgan?

• Personal blog: Publish Markdown posts and get a styled blog with a menu, footer, and optional About Me sidebar; customize the title colors to match your personal brand.
• Developer blog: Use hexo-prism-plugin to display code snippets with syntax highlighting in a preprocess mode, and update the theme with a simple git pull command.
• Comment-enabled site: Hook up Disqus by setting two config keys, turning a static Hexo site into one with interactive discussions on each post.

How does Hexo Theme Morgan work?

Installation follows the standard Hexo theme workflow: clone the repository into your site's themes folder (e.g., git clone https://github.com/hpcslag/hexo-theme-morgan.git themes/tocas-ui-morgan), set theme: tocas-ui-morgan in the main _config.yml, and restart the Hexo server. For code highlighting, add hexo-prism-plugin via npm, disable the native highlight option, add the prism_plugin block to your config, and run hexo clean to rebuild.

FAQ

Is Hexo Theme Morgan free?

Yes, the theme is released under the MIT License, so it is free to use, modify, and redistribute. You can view the license in the GitHub repository at https://github.com/hpcslag/hexo-theme-morgan/blob/master/LICENSE.

How do I enable Disqus comments?

In /themes/tocas-ui-morgan/_config.yml, set enabled_disquzs to true and paste your Disqus embed URL (like https://your-site-name.disqus.com/embed.js) into disqus_url. Create your Disqus account first and register your site to get that URL.

How do I change the colors of the theme?

The theme exposes a set of color keys in its config file: title_color and title_background_color for the big title, menu_text_color and menu_background_color for the menu, and article_color, article_color_hover, and article_color_active for index article titles. Values accept CSS color names, hex codes, rgb(), or rgba().

How do I update the theme?

Enter the theme's directory and run git pull: cd themes/tocas-ui-morgan/ && git pull && cd ../... This fetches the latest commit from the repository and preserves any files you haven't modified.

Can I use it without Tocas UI knowledge?

Yes. The theme comes fully styled with Tocas UI, so you do not need to write any Tocas classes yourself. All customization is done through the config keys listed above, and the default look works out of the box.