This article is translated from ChatGPT.
Suggestions
- Avoid placing personal files/images in the
sourcefolder 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 | aplayer: |
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:
- hexo-douban automatically generates pages, so you don't need to create them manually.
- 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
Click to GoClick to GoAdding Global Aplayer Tutorial
Click to GoIcon
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.
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.
An open-source software that supports Windows and macOS. It allows batch image compression without any limitations.
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
This plugin converts permalinks to numerical values. It is easy to configure, and it automatically converts them to numbers during generation.
This plugin generates RSS files.
It adds
rel="noopener external nofollow noreferrer"to all external links on your website, which can enhance SEO and prevent loss of link juice.This plugin generates a sitemap.
As the name suggests, this plugin is specifically for generating a sitemap for Baidu.