chore(*): update deps & docs

_config.icarus.yml

@@ -106,8 +106,6 @@ article:
         clipboard: true
         # Default folding status of the code blocks. Can be "", "folded", "unfolded"
         fold: unfolded
-    # Whether to show thumbnail image for every article
-    thumbnail: true
     # Whether to show estimated article reading time
     readtime: true
 # Search plugin configurations

package.json

@@ -9,7 +9,7 @@
     "bulma-stylus": "0.8.0",
     "hexo": "^5.0.2",
     "hexo-algolia": "^1.3.1",
-    "hexo-component-inferno": "^0.6.0",
+    "hexo-component-inferno": "^0.7.0",
     "hexo-deployer-git": "^2.0.0",
     "hexo-filter-github-emojis": "^2.1.0",
     "hexo-generator-archive": "^1.0.0",

scripts/tab.js

@@ -0,0 +1,37 @@
+hexo.extend.injector.register(
+  "body_end",
+  () => {
+    return `
+    <script>
+    (() => {
+        function switchTab() {
+            if (!location.hash) {
+              return;
+            }
+            Array
+                .from(document.querySelectorAll('.tab-content'))
+                .forEach($tab => {
+                    $tab.classList.add('is-hidden');
+                });
+            Array
+                .from(document.querySelectorAll('.tabs li'))
+                .forEach($tab => {
+                    $tab.classList.remove('is-active');
+                });
+            const $activeTab = document.querySelector(location.hash);
+            if ($activeTab) {
+                $activeTab.classList.remove('is-hidden');
+            }
+            const $tabMenu = document.querySelector(\`a[href="\${location.hash}"]\`);
+            if ($tabMenu) {
+                $tabMenu.parentElement.classList.add('is-active');
+            }
+        }
+        switchTab();
+        window.addEventListener('hashchange', switchTab, false);
+    })();
+    </script>
+    `;
+  },
+  "post"
+);

source/_posts/demo/Cyberpunk.md

@@ -1,5 +1,5 @@
 title: Cyberpunk Theme Variant
-date: 2018-10-22 19:23:58
+date: 2020-02-01
 tags:
 - Demo
 variant: cyberpunk
@@ -53,7 +53,8 @@ widgets:
     -
         position: right
         type: tags
-thumbnail: /gallery/thumbnails/CP77-KV-en.jpg
+cover: /gallery/covers/CP77-KV-en.jpg
+thumbnail: /gallery/covers/CP77-KV-en.jpg
 ---
 
 Icarus includes a new variant called Cyberpunk starting from version 3.0.0.

source/_posts/en/Configuring-Theme.md

@@ -1,6 +1,5 @@
 title: Icarus User Guide - Configuring the Theme
 date: 2020-03-01
-thumbnail: /gallery/thumbnails/vector_landscape_2.svg
 categories:
 - Configuration
 tags:
@@ -8,6 +7,8 @@ tags:
 - Icarus User Guide
 language: en
 toc: true
+cover: /gallery/covers/vector_landscape_2.svg
+thumbnail: /gallery/covers/vector_landscape_2.svg
 ---
 
 Icarus' default theme configuration file is `themes/icarus/_config.yml`.
@@ -251,30 +252,32 @@ Additionally, you can fold an individual code block in the Markdown file using t
 {% endcodeblock %}
 ```
 
-### Thumbnail
+### Cover & Thumbnail
 
-You can add a thumbnail image to your post in two steps:
+You can add a cover image to your post by adding the `cover` property in post's front-matter:
 
-1. Make sure the thumbnail is enabled in the theme configurations:
+{% codeblock post.md lang:yaml %}
+title: Getting Started with Icarus
+cover: /gallery/covers/cover.jpg
+---
+Post content...
+{% endcodeblock %}
 
-    {% codeblock themes/icarus/_config.yml lang:yaml %}
+Similarly, you may set the thumbnail of your post in the front-matter as well:
-    article:
-        thumbnail: true
-    {% endcodeblock %}
 
-2. Provide a path or URL to the thumbnail image file in the front-matter of your post:
+{% codeblock post.md lang:yaml %}
+title: Getting Started with Icarus
+thumbnail: /gallery/thumbnails/thumbnail.jpg
+---
+Post content...
+{% endcodeblock %}
 
-    {% codeblock post.md lang:yaml %}
+The thumbnail will show in the archive page as well as in the recent post widget.
-    title: Getting Started with Icarus
-    thumbnail: /gallery/thumbnails/desert.jpg
-    ---
-    Post content...
-    {% endcodeblock %}
 
-    If you choose to use the image path in the front-matter, you need to ensure the path is absolute
+If you choose to use the image path in the front-matter, you need to ensure the path is absolute
-    or relative to the source directory of your site.
+or relative to the source directory of your site.
-    For example, to use `<your blog>/source/gallery/image.jpg` as a thumbnail image, you need to put
+For example, to use `<your blog>/source/gallery/image.jpg` as a thumbnail image, you need to put
-    `thumbnail: /gallery/image.jpg` in the front-matter.
+`thumbnail: /gallery/image.jpg` in the front-matter.
 
 ### Read Time
 

source/_posts/en/FAQ.md

@@ -1,7 +1,10 @@
 title: FAQ
-date: 2020-02-01
+date: 2020-02-02
-thumbnail: /gallery/thumbnails/vector_landscape_3.svg
+tags:
+- Icarus User Guide
 toc: true
+cover: /gallery/covers/vector_landscape_3.svg
+thumbnail: /gallery/covers/vector_landscape_3.svg
 ---
 
 The article answers some frequently asked questions about Icarus.

source/_posts/en/Getting-Started.md

@@ -1,11 +1,13 @@
 title: Getting Started with Icarus
 date: 2020-04-01
-thumbnail: /gallery/thumbnails/vector_landscape_1.svg
 tags:
 - Getting Started
 - Icarus User Guide
 language: en
+cover: /gallery/covers/vector_landscape_1.svg
+thumbnail: /gallery/covers/vector_landscape_1.svg
 ---
+
 Welcome to the Icarus documentation site!
 Icarus is a simple, delicate, and modern theme for the static site generator Hexo.
 It strives to be elegant in design while simple and straightforward to use.
@@ -26,21 +28,54 @@ open to a sea of improvement possibilities.
 
 Before you continue to the installation of Icarus, take some time to review the 
 [Hexo documentation](https://hexo.io).
-To install Icarus, download the source code tarball from the GitHub and extract it to your Hexo site's theme 
+To install Icarus, take one of the following approaches:
-directory.
-Alternatively, you can use Git to clone the Icarus repository to the `themes` directory:
 
-{% codeblock "Git Bash/Shell" %}
+<div class="tabs is-boxed my-3">
-git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b <version number> --depth 1
+  <ul class="mx-0 my-0">
-{% endcodeblock %}
+    <li class="is-active">
+      <a href="#install-source">
+        <span class="icon is-small"><i class="fas fa-file-code" aria-hidden="true"></i></span>
+        <span>Install from source</span>
+      </a>
+    </li>
+    <li>
+      <a href="#install-npm">
+        <span class="icon is-small"><i class="fas fa-cubes" aria-hidden="true"></i></span>
+        <span>Install via NPM</span>
+      </a>
+    </li>
+  </ul>
+</div>
+<div id="install-source" class="tab-content">
+  Download the source code tarball from the GitHub and extract it to your Hexo site's theme 
+  directory.
+  Alternatively, you can use Git to clone the Icarus repository to the `themes` directory:
 
-You can omit `-b <version number>` to get the latest development version of Icarus.
+  {% codeblock "Git Bash/Shell" %}
-Leave `--depth 1` out if you want to download full Git commit history of Icarus as well.
+  git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b <version number> --depth 1
-Furthermore, you can install Icarus as a Git submodule with the following command:
+  {% endcodeblock %}
 
-{% codeblock "Git Bash/Shell" %}
+  You can omit `-b <version number>` to get the latest development version of Icarus.
-git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
+  Leave `--depth 1` out if you want to download full Git commit history of Icarus as well.
-{% endcodeblock %}
+  Furthermore, you can install Icarus as a Git submodule with the following command:
+
+  {% codeblock "Git Bash/Shell" %}
+  git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
+  {% endcodeblock %}
+</div>
+
+<div id="install-npm" class="tab-content is-hidden">
+  <span class="tag is-primary mb-3">New in Hexo 5.0 and Icarus 4.0</span>
+
+  To install Icarus as a node package via NPM, run the following command
+  from the root of your Hexo site:
+
+  {% codeblock "Git Bash/Shell" %}
+  npm install -S hexo-theme-icarus
+  {% endcodeblock %}
+</div>
+
+<hr>
 
 Next, activate Icarus in your site's `_config.yml` file:
 

source/_posts/zh-CN/Configuring-Theme.md

@@ -256,28 +256,30 @@ article:
 {% endcodeblock %}
 ```
 
-### 缩略图
+### 封面 & 缩略图
 
-你可以通过两步来为你的文章添加缩略图：
+若要为文章添加封面图，请在文章的front-matter中添加`cover`选项：
 
-1. 确保主题配置中缩略图功能已启用：
+{% codeblock post.md lang:yaml %}
+title: Icarus快速上手
+cover: /gallery/covers/cover.jpg
+---
+Post content...
+{% endcodeblock %}
 
-    {% codeblock themes/icarus/_config.yml lang:yaml %}
+类似地，你也可以在文章的front-matter中为文章设置缩略图：
-    article:
-        thumbnail: true
-    {% endcodeblock %}
 
-2. 在你的文章的front-matter中提供缩略图的路径或URL地址：
+{% codeblock post.md lang:yaml %}
+title: Icarus快速上手
+thumbnail: /gallery/thumbnails/thumbnail.jpg
+---
+Post content...
+{% endcodeblock %}
 
-    {% codeblock post.md lang:yaml %}
+文章的缩略图会显示在归档页面和最新文章挂件中。
-    title: Icarus快速上手
-    thumbnail: /gallery/thumbnails/desert.jpg
-    ---
-    文章内容...
-    {% endcodeblock %}
 
-    如果你在front-matter中使用的是图片的路径，你需要确保它是绝对或者相对于你的source目录的路径。
+如果你在front-matter中使用的是图片的路径，你需要确保它是绝对或者相对于你的source目录的路径。
-    例如，为使用`<your blog>/source/gallery/image.jpg`作为缩略图，你需要在front-matter中使用`/gallery/image.jpg`作为图片路径。
+例如，为使用`<your blog>/source/gallery/image.jpg`作为缩略图，你需要在front-matter中使用`/gallery/image.jpg`作为图片路径。
 
 ### 文章阅读时间
 

source/_posts/zh-CN/FAQ.md

@@ -1,6 +1,8 @@
 title: 常见问题
 date: 2016-01-03
 language: zh-CN
+tags:
+- Icarus用户指南
 toc: true
 providers:
     cdn: loli

source/_posts/zh-CN/Getting-Started.md

@@ -1,6 +1,5 @@
 title: Icarus快速上手
 date: 2016-01-04
-thumbnail: /gallery/thumbnails/chinese-painting.jpg
 tags:
 - Getting Started
 - Icarus用户指南
@@ -9,6 +8,8 @@ providers:
     cdn: loli
     fontcdn: loli
     iconcdn: loli
+cover: /gallery/covers/chinese-painting.jpg
+thumbnail: /gallery/covers/chinese-painting.jpg
 ---
 
 欢迎使用Icarus！
@@ -28,20 +29,52 @@ Icarus同时也提供了超多插件与挂件来满足你的多元的站点个
 <!-- more -->
 
 在你继续安装Icarus之前，请先花些时间阅览[Hexo文档](https://hexo.io)。
-如要安装Icarus，从GitHub的仓库中下载源码的压缩包并解压到你Hexo站点的主题目录中。
+如要安装Icarus，你可以选择如下两种方式中的任意一种：
-或者，你可以使用Git来克隆Icarus的代码仓库到`themes`目录下：
 
-{% codeblock "Git Bash命令行" %}
+<div class="tabs is-boxed my-3">
-git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b <version number> --depth 1
+  <ul class="mx-0 my-0">
-{% endcodeblock %}
+    <li class="is-active">
+      <a href="#install-source">
+        <span class="icon is-small"><i class="fas fa-file-code" aria-hidden="true"></i></span>
+        <span>从源码安装</span>
+      </a>
+    </li>
+    <li>
+      <a href="#install-npm">
+        <span class="icon is-small"><i class="fas fa-cubes" aria-hidden="true"></i></span>
+        <span>使用NPM安装</span>
+      </a>
+    </li>
+  </ul>
+</div>
+<div id="install-source" class="tab-content">
+  从GitHub的仓库中下载源码的压缩包并解压到你Hexo站点的主题目录中。
+  或者，你可以使用Git来克隆Icarus的代码仓库到`themes`目录下：
 
-你可以省略`-b <version number>`来获取Icarus的最新开发版本。
+  {% codeblock "Git Bash命令行" %}
-如果你想同时下载Git仓库的完整提交历史，请同时省略`--depth 1`。
+  git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus -b <version number> --depth 1
-另外，你也可以使用下面的命令将Icarus安装为Git子模块(submodule)：
+  {% endcodeblock %}
 
-{% codeblock "Git Bash命令行" %}
+  你可以省略`-b <version number>`来获取Icarus的最新开发版本。
-git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
+  如果你想同时下载Git仓库的完整提交历史，请同时省略`--depth 1`。
-{% endcodeblock %}
+  另外，你也可以使用下面的命令将Icarus安装为Git子模块(submodule)：
+
+  {% codeblock "Git Bash命令行" %}
+  git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
+  {% endcodeblock %}
+</div>
+
+<div id="install-npm" class="tab-content is-hidden">
+  <span class="tag is-primary mb-3">Hexo 5.0和Icarus 4.0新增功能</span>
+
+  若要使用NPM将Icarus安装为Node包，在你的Hexo站点根目录运行如下命令：
+
+  {% codeblock "Git Bash/Shell" %}
+  npm install -S hexo-theme-icarus
+  {% endcodeblock %}
+</div>
+
+<hr>
 
 接下来，在你的站点的`_config.yml`文件中的开启Icarus：
 

source/about/index.md

@@ -14,15 +14,25 @@ toc: true
 
 ### :cd: Installation
 
-Download & extract or `git clone` Icarus from GitHub to your blog's theme folder, and that's it!
+**Method 1: Direct download**
+
+Download & extract or `git clone` Icarus from GitHub to your blog's theme folder:
 
 ```shell
-$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
+$ git clone https://github.com/ppoffice/hexo-theme-icarus.git -b <version> themes/icarus
-$ hexo s // start a live server
 ```
 
-Once started, Icarus will remind you of any missing dependencies to install.
+**Method 2: Install via NPM (new in Hexo 5.0 and Icarus 4.0)**
-And it will create a theme configuration file (`_config.yml`) if it is not there.
+
+```shell
+$ npm install hexo-theme-icarus
+```
+
+Then, activate Icarus in Hexo's configuration file:
+
+```shell
+$ hexo config theme icarus
+```
 
 ### :gift: Features