Fork me on GitHub

Blog Personalization

Posted on | In | Comments: | Views:
Symbols count in article: 9.5k | Reading time ≈ 17 mins.

All guides have been tested on Hexo.NexT only.

This post is intended to list most of the personalization methods included in my blog, key references I have used are written below. Hope this will help you set up your own blog.

  • First, You should check _config.yml in your blog root for details.

  • Next, please note that the Hexo theme NexT provides various kinds of Third Party Services, check _config.yml in /themes/next/ for further information.

  • Afterwards, These guides may help.

Guidance on Hexo: Hexo documentation.
Guidance on NexT: Getting-started. ( Written in Chinese)

Decorate the article frame using a shadow effect

Open themes/next/source/css/_custom/custom.styl, add codes below:

1
2
3
4
5
6
7
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

Three additional style in article writing

Highlight colors

Open custom.styl in themes/next/source/css/_custom, add codes below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// yellow
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// green
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// blue
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// purple
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}

Insert codes as needed while writing:

1
2
3
4
<span id="inline-blue"> Example blue </span>
<span id="inline-purple"> Example purple </span>
<span id="inline-yellow"> Example yellow </span>
<span id="inline-green"> Example green </span>

The results are as follows:

Example blue
Example purple
Example yellow
Example green

Open themes/next/source/css/_custom/custom.styl, copy codes below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}

Insert codes as needed while writing:

1
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>

The result is as follows:
Download Now

Insert Font Awesome Icons

1
<i class="fa fa-pencil"></i> Markdown + Font Awesome

The result is as follows:

Markdown + Font Awesome

Make everything transparent

Only for Pisces & Gemini.

Content plate

Open themes\next\source\css\_schemes\Pisces\_layout.styl, find .content-wrap label, change background: white to

1
background: rgba(255,255,255,0.7); //transparency is 70%

Open themes\next\source\css\_schemes\Pisces\_layout.styl, find .header-inner label, change background: white to

1
background: rgba(255,255,255,0.7); //transparency is 70%

Open themes\next\source\css\_schemes\Pisces\_sidebar.styl, find .sidebar-inner label, change background: white to

1
background: rgba(255,255,255,0.7); //transparency is 70%

Then open themes\next\source\css\_schemes\Pisces\_layout.styl, find .sidebar label, change background: $body-bg-color to

1
background: rgba(255,255,255,0.7); //transparency is 70%

Adding background image

Open themes/next/source/css/_custom/custom.styl, add codes below:

1
2
3
4
5
6
7
body{
    background:url(/images/bg.jpg); //Enter your background image address.
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

Add your waifu (live2d support)

Install module

1
npm install --save hexo-helper-live2d

Support pages:

Install model

Use exist models

Search for the model of your waifu.

The storage of live2d models: live2d-widget-models

Use custom model

If your waifu does not exist in the storage above, you need to prepare your own Live2D® model.

Browse hexo-helper-live2d official pages for support, Check this out.

Config

Change live2d-helper settings as you need in _config.yml, Take mine for example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  
  model:
    use: live2d-widget-model-shizuku # npm-module package name
    scale: 1
    hHeadPos: 0.5 # Horizontal position of model's head
    vHeadPos: 0.618 # Vertical position of model's head

  display:
    position: right
    superSample: 2  # Super sampling rate
    width: 150
    height: 300
    hOffset: 0 # Horizontal offset of the canvas
    vOffset: -20 # Vertical offset of the canvas
    
  mobile:
    show: false # Show on mobile device or not
    scale: 0.3
    
  react:
    opacityDefault: 1 # Default opacity
    opacityOnHover: 0.7 # OnHover opacity

Title background colour

Only for Pisces & Gemini.

Way 1

In this way, you need to modify the source code, remember to backup.
Open source/css/_schemes/Pisces/_brand.styl

1
2
3
4
5
6
7
8
9
10
11
.site-meta {
  padding: 20px 0;
  color: white;
  background: $black-deep; //Change colour as you want.
  +tablet() {
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
  }
  +mobile() {
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
  }
}

Way 2

Instead of modifying the source code, you can just type codes to custom styles files.
Open next/source/css/_custom/custom.styl, add codes:

1
2
3
.site-meta {
  background: $blue-dodger; //Change colour as you want.
}

Change split line between two articles

Open themes/next/source/css/_common/components/post/post-eof.styl, change the parameter.

1
2
3
4
5
6
7
8
9
10
.posts-expand {
  .post-eof {
    display: block;
  //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
    width: 0%; //change width
    height: 0px; //change height
    background: $grey-light;
    text-align: center;
  }
}

Open themes/next/source/css/_custom/custom.styl, add codes below:

1
2
3
4
5
6
7
8
9
10
11
// Hyperlink style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Add ending mark at every article

Create a new file passage-end-tag.swig in /themes/next/layout/_macro

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #F08080;font-size:14px;">---<i class="fa fa-bell"></i> The following is a wasteland without any knowledge.---</div>
    {% endif %}
</div>

Open themes/next/layout/_macro/post.swig, add codes below:

1
2
3
4
5
<div>
    {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
    {% endif %}
 </div>

Open themes/next/_config.yml, add codes below:

1
2
3
# Add ending mark
passage_end_tag:
enabled: true

Compressing static resources

Open git bash, cd to your blog root directory, install gulp

1
$ npm install gulp -g

1
2
3
4
5
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save

Create a new file gulpfile.js in root

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// compress css file
gulp.task('minify-css', function() {
  return gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// compress html file
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
  .pipe(htmlclean())
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))
  .pipe(gulp.dest('./public'))
});
// compress js file
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// compress iamges in 'public/demo'
gulp.task('minify-images', function() {
    gulp.src('./public/demo/**/*.*')
        .pipe(imagemin({
           optimizationLevel: 5, //default：3  range：0-7
           progressive: true, //default：false lossless compression jpg
           interlaced: false, //default：false interlaced scan gif
           multipass: false, //default：false multipass svg
        }))
        .pipe(gulp.dest('./public/uploads'));
});
// default tasks
gulp.task('default', [
  'minify-html','minify-css','minify-js','minify-images'
]);

Run gulp after you generate:

1
2
$ hexo g
$ gulp

To be continued..

--- The following is a wasteland without any knowledge.---