Butterfly document - Advanced Tutorial

Suggestions

1. Avoid placing personal files/images in the source folder of the main theme. During theme upgrades, these files may be overwritten or deleted. Instead, create a separate folder in the Hexo root directory to store personal files/images.
   To reference these files, use /folder_name/file_name.

Music

The music interface uses the plugin hexo-tag-aplayer. Please refer to the plugin documentation for usage.

To create the music page, simply create a regular page like any other page.

The following content is for optional configuration.

Note: You still need to install the hexo-tag-aplayer plugin.

The plugin will inject js and css into every file, but to avoid this, version 3.0 of the theme includes the necessary aplayer css and js.

First, in the Hexo root directory, configure _config.yml to set asset_inject to false:

1
2

aplayer:
  asset_inject: false

Then, in the Front-matter of the pages where you want to use aplayer, add the following line:

1

aplayer: true

This will only insert the necessary js and css for the pages where you need aplayer.

For instructions on how to add a global Aplayer at the bottom, refer to this article.

Movies

The movie interface uses the plugin hexo-douban. Please follow the plugin's documentation for usage.

Note:

1. hexo-douban automatically generates pages, so you don't need to create them manually.
2. If you encounter a problem where no movies are loaded, and you see the message "INFO 0 movies have been loaded in xxx ms, because you are offline or your network is bad", please try again after some time, as this might be a temporary network issue.

Chat

Artitalk

Install the plugin hexo-butterfly-artitalk.

For specific configurations, refer to the plugin documentation.

HexoPlusPlus Talk

Install the plugin hexo-butterfly-hpptalk.

For specific configurations, refer to the plugin documentation.

Custom Code Colors

Custom Sidebar

Adding Global Aplayer Tutorial

Icon

The Butterfly theme comes with Font Awesome V5 icons, currently updated to version 5.13.0, with a total of 1,588 free icons. However, some icons from this source might not be supported on websites in certain countries. If needed, you can import icons from other icon providers.

iconfont

One of the most famous domestic icon libraries is iconfont. It is a powerful vector icon library with a rich collection of icons. Many icons that are not supported by Font Awesome can be found here. Additionally, iconfont allows you to select the icons you need and generate CSS links, reducing unnecessary CSS loading.

Registering an Account

To get started with iconfont, open the website and click on the "User" icon in the navigation bar. This will prompt you to register an account as per the instructions.

Adding Icons to Your Library

Select the icons you need by hovering your mouse over them. Three buttons will appear (Add to library, Favorite, Download). Click on "Add to library" to add the icon to your collection.

After adding icons to your library, you will see a "Shopping Cart" icon with a number "1" displayed in the upper right corner of the website. This indicates that the icon has been added to your library. Click on the "Shopping Cart" icon to view the details.

Selected icons will be displayed on top. You can repeat the above steps to add the icons you need and then click "Add to Project."

Next, you will be prompted to choose a project name. If you don't have one, create a new project.

Generating CSS Links

After adding the icons to your project, you will be taken to the project details page. Click on "Font class" and then click on "No code, click to generate" text. The website will automatically generate a CSS link, which you just need to copy.

Adding the Link to the Theme Configuration File

Open the "Theme Configuration File" and find the "inject" configuration. Add the CSS link as instructed.

In the places where you want to use the icons, use the format iconfont icon-iconName, for example, iconfont icon-Menu.

After running Butterfly, you will see the icon for the menu.

Other Methods of Adding Icons

In addition to using CSS links to include icons, iconfont also supports other methods of usage. For specific details, refer to the iconfont official usage documentation.

Other Icon Providers

Apart from iconfont, there are other providers like RemixIcon and Flaticon, offering a wide range of icons to choose from. For the usage methods, please refer to their respective documentation.

Image Compression

Butterfly theme uses many images, and if these images are too large, they can significantly slow down your website's loading speed. Image compression can effectively alleviate this issue.

In addition to using gulp-imagemin for image compression, you can also use online compression websites and software. The following are two tools that I personally use. There are many such tools available online; you can choose one that suits you best.

• tinypng

  An online compression website. The compressed images retain high quality. It is highly recommended on platforms like Zhihu. However, the free version has some limitations.

  

• caesium

  An open-source software that supports Windows and macOS. It allows batch image compression without any limitations.

  

• imgbot

imgbot is a GitHub plugin.

Once installed, when you upload images to GitHub, imgbot will automatically compress them and create a pull request. You just need to merge the PR.

You can configure imgbot's detection and compression methods (lossy/lossless). For specific details, please check the plugin's documentation.

Recommended Plugins

• hexo-abbrlink

  This plugin converts permalinks to numerical values. It is easy to configure, and it automatically converts them to numbers during generation.

• hexo-generator-feed

  This plugin generates RSS files.

• hexo-filter-nofollow

  It adds rel="noopener external nofollow noreferrer" to all external links on your website, which can enhance SEO and prevent loss of link juice.

• hexo-generator-sitemap

  This plugin generates a sitemap.

• hexo-generator-baidu-sitemap

  As the name suggests, this plugin is specifically for generating a sitemap for Baidu.