The article answers some frequently asked questions about Icarus. If your question is not answered here, you can also refer to Icarus User Guide, Hexo documentation, and GitHub Issues. Additionally, you may find help from other Icarus users on GitHub Discussions.

Site

Icarus 5 runs on Node.js 12.4.0 or a newer version. It also requires Hexo 6.0.0 or a newer version. Apart from that, make sure you have all the Node.js dependencies installed. You can find them in the dependencies section of the <icarus_directory>/package.json file. Also, remove all unused Node.js dependencies from your site, or they may cause strange problems to Icarus.

Open the site configuration file _config.yml under the root directory. Change the following setting:

1
2

- language: en
+ language: <language_name>

You can find all available translations under the <icarus_directory>/languages directory. The <language_name> is the translation file name without the .yml extension.

Layout

To change the page width, edit the style file <icarus_directory>/include/style/responsive.styl. It defines the container width under different screen sizes.

To change the width of the widgets or main content, edit <icarus_directory>/layout/common/widgets.jsx and <icarus_directory>/layout/layout.jsx. Find the CSS class names like is-12, is-8-tablet, and is-4-widescreen in these files. The number in the class names marks the number of columns a widget or main content takes. The screen size after the number, such as tablet and widescreen, refers to the condition when the column sizes take effect. Change the number in the class names such that the column count of main column and widget column(s) add up to 12 under the same screen size.

For example, to have the main content column wider on widescreen, you can make the following changes:

1
2
3
4
5
6
7
8

 <div class={classname({
     column: true,
     'order-2': true,
     'column-main': true,
     'is-12': columnCount 
-    'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+    'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
     'is-8-tablet is-8-desktop is-6-widescreen': columnCount 

1
2
3
4
5
6
7

 function getColumnSizeClass(columnCount) {
     switch (columnCount) {
         case 2:
-            return 'is-4-tablet is-4-desktop is-4-widescreen';
+            return 'is-4-tablet is-4-desktop is-3-widescreen';
         case 3:
             return 'is-4-tablet is-4-desktop is-3-widescreen';

You can refer to Bulma documentation for more details on the column system.

Here are some tips for creating a one/two/three-column layout:

• You can remove all widgets from your theme configurations to create a one-column layout.
• You can move all your widgets to the same side of the page to create a two-column layout.
• You can place widgets on both sides of the page to create a three-column layout.

To change the layout for a single or all posts/pages, refer to Configuration Files and Priority.

The layout files for plugins and widgets have been moved to a separate Node.js package called hexo-component-inferno. This help theme developers better reuse common components across different themes and make overriding these components easy for average users.

To customize these components, copy the layout files from the hexo-component-inferno repository and place them in the corresponding directories under <icarus_directory>/layout. For example, if you want to customize the Valine comment plugin, you can copy src/view/comment/valine.jsx from the hexo-component-inferno repository to <icarus_directory>/layout/comment/valine.jsx. Also, remember to fix Node.js imports like the following:

1
2

- const { cacheComponent } = require('../../util/cache');
+ const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

Finally, hexo clean your site before regenerating the HTML.

Similarly, you can override static files like asset/js/insight.js in the same way.

Icarus caches the layout files when you start the local Hexo server with the hexo server command. To make the layout changes take effect, restart the local server.

Other times some intermediate data may be cached by Hexo in the memory or db.json database. Execute hexo clean before running hexo server or hexo generate should resolve this issue.

Content

Make sure you use the absolute paths to your images. For example, your site is in a subdirectory of your domain name like https://ppoffice.github.io/hexo-theme-icarus and your image image.jpg under source/gallery/. You should include your image like this: /hexo-theme-icarus/gallery/image.jpg.

You can also use Hexo’s {% img %} tag like the following to include an image automatically:

1

{% img /gallery/image.jpg "Image title" %}

In this case, you may omit the subdirectory from your image path. You can refer to Hexo documentation for more details.

Put a <!-- more --> tag in your post. Post content before this tag will be marked as an excerpt. Content after this tag will not show up on index pages.

You can also specify a custom excerpt in the post’s front-matter.

1
2
3
4
5

title: Some Post
date: 2020-01-01
excerpt: This is an article about ...
---

Use third-party Hexo plugins such as hexo-blog-encrypt.

Refer to Bulma documentation for all available elements and styles. Copy the HTML snippets and put them in your Markdown files directly.

Those alerts usually show up when you miss out on some plugin or widget configurations. If you don’t want to enable a certain plugin or widget, delete it or comment it out from your theme configurations.

For example, you can disable the comment plugins by commenting out the following lines:

1
2
3
4
5
6

- comment:
-     type: disqus
-     shortname: 
+ # comment:
+ #     type: disqus
+ #     shortname: 

Vector Landscape Vectors by Vecteezy