hexo 主题配置

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 6.1k | 阅读时长 ≈ 6 分钟

首页概览

搭建好hexo后，我们发现正常的情况下首页显示的为一片博客的全部内容，这样就会导致我们一直下拉才可以找到下一篇博客，很繁琐，我们想要看到该博客的概览即可。

打开theme主题下的_config.yml，找到auto_excerpt，将enable改为true。

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

下面有两个对比图，一个为改之前的，一个为改之后的。

自定义样式

在使用的过程中发现hexo 6 默认的为水平实线为虚线，看起来好丑。故才进行改动。

在进行改动的过程中发现使用F12快捷键。

首先打开我们的F12，选择选择器，查看信息。

将hr的标签内容复制下，然后改为我们想要的结果。自定义样式放在theme==>next==>source==>css==>_custom==>custom.style文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Custom styles.
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   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);
  }
 //将hr改为实线
  hr {
  margin: 40px 0;
  height: 3px;
  border: none;
  background-color: #ddd;
  background-image: none;
}
//将h2、h3、h4、h5、h6标签的颜色进行改变
h2,h3,h4,h5,h6 {
  color: #92b10b;
}

上述为我的修改内容，上面注释也很清楚

看板娘

也就是下面的小姑娘了。

安装 hexo-helper-live2d

1
npm install --save hexo-helper-live2d

安装模板

1
npm install live2d-widget-model-z16

配置在主题配置文件中增加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-z16
  display:
    position: right
    width: 280
    height: 700
  mobile:
    show: true

模板预览地址：https://huaji8.top/post/live2d-plugin-2.0/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

加载速度

hexo的加载速度太慢，每次进行打开时会经过相对来说较长的时间。

采用压缩js、css、html的方式来提高速度。

安装gulp

1
npm install -g gulp

安装依赖：

1
2
3
4
5
gulp-htmlclean // 清理html
gulp-htmlmin // 压缩html
gulp-minify-css // 压缩css
gulp-uglify // 混淆js
gulp-imagemin // 压缩图片

执行命令：

1
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

在博客根目录下创建文件gulpfile.js

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
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');

// 压缩html
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'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}),
        imagemin.jpegtran({'progressive': true}),
        imagemin.optipng({'optimizationLevel': 7}),
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', gulp.parallel(
    'minify-html','minify-css','minify-js','minify-images'
));

第一次先运行hexo clean ==> hexo g ==> gulp

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
$ gulp
[07:41:28] Using gulpfile F:\github\hexo\gulpfile.js
[07:41:28] Starting 'default'...
[07:41:28] Starting 'minify-html'...
[07:41:28] Starting 'minify-css'...
[07:41:28] Starting 'minify-js'...
[07:41:28] Starting 'minify-images'...
[07:41:29] gulp-imagemin: ✔ algolia_logo.svg (saved 36 B - 0.8%)
[07:41:30] Finished 'minify-css' after 1.83 s
[07:41:30] gulp-imagemin: ✔ cc-by-nc-nd.svg (saved 7.46 kB - 67.5%)
[07:41:30] gulp-imagemin: ✔ cc-by-nc-sa.svg (saved 7.86 kB - 66.7%)
[07:41:30] gulp-imagemin: ✔ avatar.gif (saved 1.14 kB - 39%)
[07:41:30] gulp-imagemin: ✔ cc-by-nc.svg (saved 6.69 kB - 68.3%)
[07:41:30] gulp-imagemin: ✔ alipay.jpg (saved 25.9 kB - 21.7%)
[07:41:30] gulp-imagemin: ✔ cc-by-nd.svg (saved 6.45 kB - 67.9%)
[07:41:30] gulp-imagemin: ✔ apple-touch-icon-next.png (saved 190 B - 12.3%)
[07:41:30] gulp-imagemin: ✔ cc-by-sa.svg (saved 7 kB - 67.5%)
[07:41:30] gulp-imagemin: ✔ cc-by.svg (saved 5.83 kB - 69.4%)
[07:41:30] gulp-imagemin: ✔ cc-zero.svg (saved 2.15 kB - 34.3%)
[07:41:30] Finished 'minify-js' after 2.38 s
[07:41:30] gulp-imagemin: ✔ logo.svg (saved 780 B - 73.7%)
[07:41:30] gulp-imagemin: ✔ quote-l.svg (saved 414 B - 46.4%)
[07:41:30] gulp-imagemin: ✔ quote-r.svg (saved 410 B - 46.6%)
[07:41:31] gulp-imagemin: ✔ loading.gif (already optimized)
[07:41:31] gulp-imagemin: ✔ favicon-16x16-next.png (saved 150 B - 34.5%)
[07:41:31] gulp-imagemin: ✔ favicon-32x32-next.png (saved 152 B - 23.8%)
[07:41:31] gulp-imagemin: ✔ placeholder.gif (already optimized)
[07:41:31] gulp-imagemin: ✔ searchicon.png (saved 37 B - 4.8%)
[07:41:31] gulp-imagemin: ✔ wechatpay.jpg (saved 17.7 kB - 17.9%)
[07:41:31] gulp-imagemin: ✔ wsylp.jpg (saved 21.5 kB - 31.5%)
[07:41:31] gulp-imagemin: ✔ wsylp1.jpg (saved 21.1 kB - 33.9%)
[07:41:31] gulp-imagemin: Minified 20 images (saved 133 kB - 31%)
[07:41:31] Finished 'minify-images' after 3 s
[07:41:33] Finished 'minify-html' after 4.76 s
[07:41:33] Finished 'default' after 4.77 s

进行发布 hexo d

本文标题:hexo 主题配置

文章作者:wsylp

发布时间:2019年06月03日 - 22:06

最后更新:2020年01月02日 - 10:01

原始链接:http://wsylp.github.io/2019/06/03/hexo-主题配置/

许可协议: 本文为 wsylp 版权所有 转载请保留原文链接及作者。

-------------本文结束感谢阅读-------------