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/
envelope_comment:
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 font，First font net，Font world，Typewriter，Free 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-face{
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),
default;
}
/*Linked hand style*/
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}
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.
inject:
head:
- <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 */
#footer{
background: transparent!important;
}
/* Header transparency */
#page-header{
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*/
[data-theme="dark"]
#footer::before{
background: transparent!important;
}
[data-theme="dark"]
#page-header::before{
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
aplayer: 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) aplayerInject: enable: true per_page: true
Then insert the code into the footer
inject:
head:
bottom:
- <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 =[
"url(/img/bg1.JPG)",
"url(/img/bg2.jpg)",
"url(/img/bg3.jpg)",
"url(/img/bg4.jpg)"
];
//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 =[
"url(/img/bg1.JPG)",
"url(/img/bg2.jpg)",
"url(/img/bg3.jpg)",
"url(/img/bg4.jpg)"
];
//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
inject:
head:
bottom:
- <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/
electric_clock:
enable: true # switch
priority: 5 #Filter priority
enable_page: all # Application page
exclude:
# - /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 |