Butterfly Guide 1

Introduction

After a while, I believe this Hexo Blog already finished most parts of the development, so I decided to write a simple guide about this website.

This website is based on Hexo. It is a fast, simple & powerful blog framework. It is also an open sources Program. You can find more on its Offical Website. At the same time, this blog was based on a theme called Butterfly, you can find more at the footer of the website. The reason I chose to use the theme is it let your blog become more flexible, it gives you a lot of choices to control your website and you can change the sources code to meet your requirements.

Finally, many of the features or improvements on this blog come from other people (from the Internet), thank them for sharing. I will add some recommended sites. Hope this article can help you.(I’m also a layman. I’m just play for fun.)

The simple beautification will start in Part 5.

Part 1

Recommended sites(You can find lots of useful articles from these website about the Blog，they all do better than I do.)

Part 2

The development environment：

hexo: 6.0.0

hexo-cli: 4.3.0

Butterfly: 4.01

Mac OS: Monterey (arm64)

Ubuntu: 20.04.3 LTS (arm64)

Part 3

Main Steps(This article will pay more attention on simple beautification)

Buy a computer(Ex: RPI😁)
Install operating system
Install npm
Install node.js
Install Hexo
Chose a theme (This article use butterfly)
Read a lot of articles about the theme
Init hexo
Write something by using Markdown
Post it
Transfer to your server or other places
Review it

Part 4

Before you do anything on your Blog, please make a backup to prevent you break it.

Part 5

As the subject author Jerry said, it is best to create a file_config.butterfly.yml in the root directory of Hexo and copy the _config.yml content of the theme directory to _config.butterfly.yml, you only need to configure it in _config.butterfly.yml in the future.

Hexo automatically merges the configurations in_config.yml and _config.butterfly.yml in the theme. If there is a configuration with the same name, it will use the configuration of _config.butterfly.yml, which has a higher priority.

So I recommend you Inject Custom CSS first. It can prevent something stop working if you update the theme.

Go to _config.butterfly.yml

Click Command+F (Mac) and type “inject” in the search box. Find this.

inject:
   head:
  - <link rel="stylesheet" href="/css/mycss.css">
bottom:
    # - <script src="xxxx"></script>

After that you go to your myblog folder /hexo-theme-butterfly/soueces/css/ then you create a css file you may call it mycss.

Part 6

Just like I said, you can find a lot of resources on Internet, I put some CSS staff here and most of them are still from other websites, you can try to use and change this CSS, it won’t break your computer. Thank them for sharing again.

Arrow color change

/* Arrow color change */

#content-inner.layout h1::before {
    color: #ff4500 ;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem;
}
#content-inner.layout h2::before {
    color: #ff4500 ;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem;
}
#content-inner.layout h3::before {
    color: #ffbf00 ;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem;
}
#content-inner.layout h4::before {
    color: #a9e000 ;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem;
}
#content-inner.layout h5::before {
    color: #57c850 ;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0.0rem;
}
#content-inner.layout h6::before {
    color: #5ec1e0 ;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0.0rem;
}

Footer transparent

/* Footer transparent */
#footer{
  background: transparent!important;
}

Night mode pseudo-like mask layer is transparent

/*
 * Night mode pseudo-like mask layer is transparent
 */
 
[data-theme="dark"] #footer::before{
  background: transparent!important;
}
[data-theme="dark"] #page-header::before{
  background: transparent!important;
}