Hexo butterfly magic modification record

Using the hexo butterfly framework to build a personal blog

Here, I will record the steps of setting up my own (Magic reform / copying others) personal blog, which will be convenient to find in the future.

Message board envelope

come from https://akilar.top/posts/e2d3c450/

Here you can use the npm installation configuration directly. The installation method is reproduced here:

Blog root directory execution

npm install hexo-butterfly-envelope --save

Add configuration items in the site configuration file or theme configuration file (yes, either. But don't write both)

# envelope_comment
# see https://akilar.top/posts/58900a8/
  enable: true #switch
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg # letterhead cover
  message: #Letterhead content, supporting multiple lines
    - What do you want to ask?
    - What do you want to say?
    - What do you want to make complaints about?
    - Even if you have anything to eat, you can tell me~
  bottom: Automatic Secretary dolls serve you wholeheartedly! #The end of the letterhead can only be a single line
  height: #Adjust the height of the letterhead. The default value is 1050px
  path: #[optional] path name of comments. The default is comments, and the generated page is comments/index.html
  front_matter: #[optional] front of comments page_ Matter configuration
    title: Message Board
    comments: true

Font style modification

Modify the font style and directly import the css file and font package.

1. First of all, look for favorite fonts. Some fonts are very good-looking and free non-commercial. We can use them.

Here are some websites recommended for reference: Founder fontFirst font netFont worldTypewriterFree font

2. Put the font files to be used into the blog directory. I put them in blog/source/butterfly/css to facilitate the introduction of css files.

3. If there is a css file, continue writing at the bottom; If not, create a new css file with any filename

  font-family: 'FZFW' ;  /* Custom font name */
  src: url('FZFWZhu.ttf'); /* Path to import font file */
/*The font family will use the font family in order when it is applied in the body and placed first. If the first one is not found, the second one will be found, and so on.*/
body {
font-family: FZFW,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif

Mouse style modification

What is used here is Well off blog Mouse style. If you only want to modify the mouse style, add the following code in the css file, and then import it.

/*Pointer style*/
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
/*Linked hand style*/
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),

Well off blog css modification

Here, I directly use the ready-made files of the boss, and introduce css files into inject in the theme configuration.

    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css">

Picture transparency modification

The modification scheme of Akilar boss is used here. I prefer one picture flow, which is more in line with my aesthetics.

/* Footer transparent */
  background: transparent!important;
/* Header transparency */
  background: transparent!important;
/*top-img The black transparent glass effect is removed, and it is not recommended to add it unless you stick to the complete image flow or the contrast color of the background image is obvious */
#page-header.post-bg:before {
  background-color: transparent!important;
/*Night mode pseudo class mask layer transparent*/
      background: transparent!important;
    background: transparent!important;

Because the css of Xiaokang blog was used earlier, the fuzzy frosted glass effect of the footer was not removed. After reviewing the elements on page F12, it was found that there was a problem with the selector #footer, #footer:before. The modification is as follows:

#footer, #footer:before {
    background: transparent!important

This makes the footer transparent.

Add background music

Here refer to the author's Global bottom suction Aplayer tutorial , in order to facilitate subsequent reference, it is specially extracted.

First, install the hexo tag aplayer plug-in, Official github

Blog root installation:

npm install --save hexo-tag-aplayer

Since aplayer and measuring resources need to be inserted globally, in order to prevent the insertion of duplicate resources, it is necessary to insert the asset_inject is set to false

In the configuration file of hexo

  meting: true
  asset_inject: false

In the topic configuration file, enable is set to true and per_ Set page to true

# Inject the css and script (aplayer/meting)
  enable: true
  per_page: true

Then insert the code into the footer

    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

Run Hexo and you can see Aplayer in the lower left corner of the page

Finally, if you want to switch pages, the music won't stop. Set pjax of the topic configuration file to true.

Parameter interpretation:

option Default value describe
data-id Required value Song id / playlist id / album id / search keyword
data-server Required value Music platform: netease, tencent, kugou, xiami, baidu
data-type Required value song, playlist, album, search, artist
data-fixed false Turn on fixed mode
data-mini false Turn on mini mode
data-loop all List loop mode: all, one,none
data-order list List playback mode: list, random
data-volume 0.7 Player volume
data-lrctype 0 Lyrics format type
data-listfolded false Specifies whether the music playlist is collapsed
data-storagename metingjs The key name of the storage player setting in LocalStorage
data-autoplay true Auto play, the mobile browser does not support this function temporarily
data-mutex true When this option is on, if there are other aplayer s playing on the same page, the player will pause
data-listmaxheight 340px Maximum length of playlist
data-preload auto Music file preload mode, options: none, metadata, auto
data-theme #ad7a86 Player style color settings

Random background map

Refer to the modification scheme of Akilar boss.

First, you must set the website background image, find and configure it in the theme configuration. I configured it as' #efef '

# Website Background
# can set it to color or image
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

After configuration, the home page uses #web_bg's div is used to store the background picture, and #page header is used to store the banner picture. Use js to randomly select a picture, and then reset it according to the id value, so that the random background picture can be displayed every time you switch or refresh.

I created a new rdmbkg.js file under blog/source/butterfly/js

//An array of random background pictures. Pictures can be replaced with picture bed links. Note that there should be no comma after the last one
var backimg =[
//Get the total number of background pictures and generate random numbers
var bgindex =Math.ceil(Math.random() * (backimg.length-1));
//Reset background picture
document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
//Random banner array, pictures can be replaced with picture bed links. Note that there is no comma after the last one
var bannerimg =[
//Get the total number of banner pictures and generate random numbers
var bannerindex =Math.ceil(Math.random() * (bannerimg.length-1));
//Reset banner picture
document.getElementById("page-header").style.backgroundImage = bannerimg[bannerindex];

Finally, js is introduced into the topic configuration file

    - <script async data-pjax src="/js/randombg.js"></script>

Sidebar clock

Refer here , I directly used it after npm installation. The following contents are extracted from the original blog.

Blog root execute command

npm install hexo-butterfly-clock --save

Add the following configuration information in the hexo configuration or topic configuration. Choose one from two. Don't add both.

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
  enable: true # switch
  priority: 5 #Filter priority
  enable_page: all # Application page
    # - /posts/
    # - /about/
  layout: # Mount container type
    type: class
    name: sticky_layout
    index: 0
  loading: /img/loading.gif #Load animation customization

Parameter description

parameter Alternative value / type interpretation
priority number [optional] filter priority. The smaller the value, the earlier the execution. The default value is 10. Optional
enable true/false [required] control switch
enable_page path/all [optional] fill in the relative path (i.e. routing address) of the page to be applied. For example, fill in '/' for the root directory and '/ categories /' for the classification page. To apply to all pages, fill in 'all', which defaults to all
exclude path [optional] fill in the pages you want to block. You can have multiple pages. See the example for the writing method. The principle is to match the contents of the shielding items one by one in the current path. If the current path contains any shielding items, it will not be mounted.
layout.type id/class [optional] mount container type. Fill in id or class. If it is not filled in, it defaults to id
layout.name text [required] name of mounting container
layout.index 0 and positive integers [optional] the premise is that layout.type is class, because there may be multiple classes on the same page. This item is used to confirm the order
loading URL [optional] picture of electronic clock loading animation

Posted on Thu, 11 Nov 2021 15:33:52 -0500 by jayd1985