Construction and beautification of personal blog

Bloggers don't know much about front-end knowledge , I just want to build my own platform , Leave a trace of yourself , There is a small Internet world of its own . Therefore, the blog configuration is also a very simple configuration , Blogs are also relatively simple , Basically for little white , Therefore, the tutorial notes should be well reproduced . If you have any questions, please leave a comment ~
My personal blog home page ： At home GuoDong の Blog , Overseas deployment platform Click here .CSDN Rendering may be different from personal blog rendering , Welcome to my home page . The blog will be updated synchronously on the two platforms . Welcome to my home page .
Hexo-Butterfly The theme version is 4.2.0. Bloggers don't know much about front-end knowledge , I just want to build my own platform , Leave a trace of yourself , There is a small Internet world of its own . Therefore, the blog configuration is also a very simple configuration , Blogs are also relatively simple , Basically for little white , Therefore, the tutorial notes should be well reproduced . If you have any questions, please leave a comment ~ This tutorial will be continuously updated

Basic framework construction

The basic configuration section will not be introduced , Refer to the official manual Butterfly Installation document ( One ) Quick start , Here is a summary of some important points

About theme profiles _config.yml

stay hexo Create a file in the root directory of _config.butterfly.yml, And put the... Of the subject directory _config.yml Copy content to _config.butterfly.yml Go to .( Be careful : The copy is themed _config.yml , instead of hexo Of _config.yml)_
Be careful ： Don't put... In the subject directory _config.yml Delete
Be careful ： In the future, we just need to _config.butterfly.yml Just configure it .
If used _config.butterfly.yml, Configure the theme _config.yml It won't work .
Hexo Will automatically merge... In the theme _config.yml and _config.butterfly.yml In the configuration of the , If there is a configuration with the same name , Will use _config.butterfly.yml Configuration of , It has a higher priority .

hexo Of _config.yml To configure

Deploy

Need to install plug-ins

npm install hexo-deployer-git --save

The following is the configuration deployed by bloggers

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  - type: git
    repo: [email protected]:tyxiumud/tyxiumud.github.io.git
    ##  The base address 
    branch: gh-pages
    ##  Branch name 
  - type: git
    repo: https://gitee.com/xiumud/xiumud.git
    branch: gh-pages

Then use the default triple connection

Preview Sanlian ： hexo clean && hexo g && hexo s

Deploy the third company ： hexo clean && hexo g && hexo d

Reference resources ：https://hexo.io/docs/one-command-deployment

Check url To configure

• url It should be your address
• permalink It is recommended to set it in the following form , It's in the form of a static address

url: https://tyxiumud.github.io
permalink: posts/:hash/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Examples are as follows , It needs to be installed first

deploy:
  - type: git
    repo: [email protected]:tyxiumud/tyxiumud.github.io.git
    ##  The base address 
    branch: gh-pages
    ##  Branch name 
  - type: git
    repo: https://gitee.com/xiumud/xiumud.git
    branch: gh-pages

Advanced part

Add comments

This blog uses Twikoo,Vercel Deploy , free , The disadvantage is slow speed … For details, please refer to the comments at the bottom of this website .

Talk about the benefits , The tutorial is complete , There are corresponding QQ Group communication , The author's Deployment tutorial . Quickly define email notification comments , Comment management is convenient . Click the gear to configure . The page is very friendly .

Picture compression

Butterfly If the theme needs to use a lot of pictures . Especially visit github perhaps gitee It's not always fast . The picture is too big , It will seriously slow down the loading speed of the website . Image compression can effectively alleviate this problem .

• Online website Online picture files can be compressed . For the drawing bed, it is recommended to use imgbot Compress the whole drawing bed .
• imgbot Is a Github plug-in unit . After installation , You upload pictures to Github Go to ,imgbot Will automatically compress the picture and push PR, Just merge PR Just fine. You can configure imgbot Detection method 、 Compression method （ lossy / Nondestructive ）, You can view the documentation of the plug-in .
• caesium Local software image compression
  It is recommended to use the website or local software to compress the pictures used by the website , Use imgbot Used to compress the drawing bed file .

Customization function realization

Hexo-Butterfly Add a music player

The revised part is divided into two sections , Normal music playback and global fixed mode . The effect demonstration is as follows , Please refer to... For details of configuration and addition method {% btn ‘https://tyxiumud.github.io/posts/91597d56b19f/’, Click here %}

Ordinary player interface

Global bottom suction Aplayer Pattern

/*  hide  Aplayer  Global bottom suction Music Label , stay css Add  */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important
}

Beautification of footer

Achieve beating heart function

The effect is as follows

Realization way ： Add the following code , To themes\butterfly\layout\includes\footer.pug

<i id="heartbeat" class="fa fas fa-heartbeat"></i>

Copy it to By And ${config.author} In the middle of the , Pay attention to the 6 With the first 8 All lines need to be copied , Then copy the following instructions to the last line of the file . Or will By Deletion is also possible , It depends on your preferences .

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/[email protected]/others/heartbeat.min.css">

Reference resources ：https://blog.csdn.net/weixin_42429718/article/details/105723193

Footer year and copyright settings

stay custom_text: Enter the following command under

# Blog year 
footer:
  owner:
    enable: true
    since: 2022
  copyright: false # Copyright of theme and framework    
  custom_text: <p>  <a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title=" The blog framework is Hexo"></a>  <a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title=" The theme is butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title=" The project of this website consists of Gtihub trusteeship "></a><a style="margin-inline:5px" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title=" This website adopts the signature of knowledge sharing - Noncommercial use - Share in the same way 4.0 International license agreement to license "></a></p>

Reference resources ：https://www.cnblogs.com/yyyzyyyz/p/15542401.html

Mouse style

Reference resources yyyz Set up . In my themes\butterfly\source\css Create a new one in the directory css file . Name it my.css

Write the following

/* Pointer style */
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/Hexo/img/default.cur),
        default;
}
/* Link little hand style */
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/[email protected]/Hexo/img/pointer.cur),
        default;
}

Just import in the theme configuration file . Here is my own configuration , Use according to your own css Modify the name

inject:
  head:
    - <link rel="stylesheet" href= "/css/my.css">
  bottom:
    #- <script src="/js/catch-the-cat.js"></script>
    #- <div class="aplayer no-destroy" data-id="7422861869" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-lrcType="-1"> </div> 

Reference resources ：https://yyyzyyyz.cn/posts/2d51c9bd3490/

Font settings

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

1、 First, find your favorite font , Some fonts are nice and free non-commercial , We can use it .

Here are some websites recommended for reference ： Founder Library , First font net , Font world , Typographer , Free font

2、 Put the font file you need to use into the blog Directory , I put it here themes\butterfly\source\css Next , convenient css The file import .

3、 If there is css file , Continue writing at the bottom ; without , Then create a new one css file , The file name is optional . Write save . The reference method is the same as that of mouse style .

@font-face{
  font-family: 'FZQianLXSJW' ;  /*  Custom font name  */
  src: url(FZQianLXSJW.tff); /*  The path of the imported font file  */
}
/* Apply to body Corporeal , Put it first ,font-family Will use font families in order . If you don't find the first one, you'll find the second one , And so on .*/
body {
font-family: FZQianLXSJW,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif
}

Put your font in your root directory themes\butterfly

Reference resources ：https://yyyzyyyz.cn/posts/2d51c9bd3490/

About Me- Self introduction. botui robot

Page effects {% btn ‘https://tyxiumud.github.io/about//’, Click to see %}

The code is as follows , download srcJelly.js File can , Put it here. githhub Or put it locally . To put it locally is to put it in themes\butterfly\source\js The following directory is sufficient . Download address Click here . The contents are as follows , Change it to what you want to change .

Modify corresponding index.xml The file is shown below

<div class="entry-content">
  <div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
    <center>
    <p>
    </p>
    <h4>
     And &nbsp;<ruby>
    Jelly&nbsp;<rp>
    （</rp>
    <rp>
    ）</rp>
    </ruby>
     In the call ：</h4>
    <p>
    </p>
    </center>
    <bot-ui></botui>
  </div>
</div>
<script src="../js/jelly.js"></script>
<link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">

Reference resources ：https://blog.csdn.net/qq_35982918/article/details/106728754?spm=1001.2014.3001.8078#comments_21134639

The transparent background setting is adapted to the dark mode

css The documents are as follows . You can create a new , It can also be written directly into the previous file . Use vscode You can see the basic form . Use F12, Analyze web page elements to view the corresponding styles , Need to have a foundation for the front end . No, you can directly use the information provided by the blogger css file .

/* Article page background *//* Category page *//* Timeline page */
.layout #post, .layout #page , .layout #archive , .layout #category{
    /*  The following represents transparency 0.5  Can be modified by yourself */
	background:rgba(255, 255, 255, .9);
}
/* Sidebar page */
#aside-content .sticky_layout .card-widget , #aside-content .card-widget{
    background: rgba(255,255,255,.8);
}
/*  All page backgrounds  */
#recent-posts>.recent-post-item, .read-mode .layout_post>#post{
    /*  The following represents transparency 0.5 */
    background: rgba(255,255,255,.8);
}
#page-header #nav {
    /*  The following represents transparency 0.5 */
    background: transparent!important;
}

/* The transparent cover is shown below */
#page-header.full_page::before {
    background-color: transparent!important;
  }

/* Article page background *//* Category page *//* Timeline page */
[data-theme = dark] .layout>#post,[data-theme = dark] .layout #page ,[data-theme = dark] .layout #archive ,[data-theme = dark] .layout>#category{
    /*  The following represents transparency 0.5  Can be modified by yourself */
	background:rgba(0, 0, 0, 0.9);
    }   
/* Sidebar page */
[data-theme = dark] #aside-content .sticky_layout .card-widget , [data-theme = dark] #aside-content .card-widget{
    background:rgba(0, 0, 0, 0.9);
}
/*  All page backgrounds  */
[data-theme = dark] #recent-posts>.recent-post-item,[data-theme = dark]  .read-mode .layout_post>#post{
    /*  The following represents transparency 0.5 */
    background:rgba(0, 0, 0, 0.9);
}

There are two ways to view and configure . It can help you view and modify your own configuration as needed .
{% tabs %}

Use F12 How to find styles

Use vscode Check the style

{% endtabs %}

Reference resources ：

https://www.cnblogs.com/glory-yl/p/15399411.html

https://www.yyyzyyyz.cn/posts/2d51c9bd3490/#%E5%9B%BE%E7%89%87%E9%80%8F%E6%98%8E%E5%BA%A6%E4%BF%AE%E6%94%B9

Random background

stay bottom Insert the following code at . stay backimg Replace the picture links you want in the array . that will do . See the author's blog for the effect .

inject:
  head:
  bottom:
    - <script> let backimg =["url(/img/background.png)","url(/img/background1.png)","url(/img/background2.png)"];let index =Math.ceil(Math.random() * (backimg.length));document.getElementById("web_bg").style.backgroundImage = backimg[index]</script>

Recommend two websites , You can download HD pictures , Remember to use the above compression software for image compression .

Reference resources ：

https://zfe.space/post/55346.html

https://akilar.top/posts/ebf20e02/#%E9%9A%8F%E6%9C%BA%E8%83%8C%E6%99%AF%E6%88%96banner%E6%95%88%E6%9E%9C

Both are big guys ~