个性化设置next主题

个性化设置next主题

五月 25, 2018

个性化设置 next 主题

设置背景图片

在 theme/next/source/css/_custom 文件夹下打开 custom.styl 文件,往里面添加以下代码:

1
2
3
4
5
6
7
8
9
# 图片链接需要线上地址,从这里面找 https://source.unsplash.com/
# 我这里使用的是随机图片地址 https://source.unsplash.com/random/1600x900
body{
background:url(图片链接);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

设置文章背景色以及透明度

也在 theme/next/source/css/_custom 文件夹下打开 custom.styl 文件,往里面添加以下代码:

1
2
3
4
.main-inner {
background: rgba(91,91,91,0.8) none repeat scroll;
opacity: 0.8;
}

tips: 到了样式这一步,其实有了前2条作为参考,直接F12观察页面结构,随意自定义CSS即可。自定义样式在theme/next/source/css/_custom/custom.styl书写。

生成音乐播放器

有两种方法

  • 方法一
  1. 打开网易云音乐,比如 Rolling In The Deep-Adele
  2. 点击–生成外链播放器
  3. 默认就是选择iframe插件,复制下方的iframe代码
  4. 将复制的代码保存在 /themes/nextlayout//source/sidebar.swig 文件中
  5. 刷新浏览器可见效果

    tips:

  • 方法二
  1. 下载播放器插件APlayer,将dist文件夹中的
    APlayer.min.js文件放置在/themes/next/source/js/src 目录下

  2. 将以下代码复制并保存代码保在/themes/next/layout/_custom/sidebar.swig 文件中

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
<div id="player1" class="aplayer"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
element: document.getElementById('player1'),
narrow: false,
autoplay: true, mobile browsers
showlrc: 0,
mutex: true,
theme: '#e6d0b2',
mode: 'random',
preload: 'metadata',
listmaxheight: '513px',
music: {
# 必选, 音乐名称
title: 'Preparation',
# 必选, 音乐作者
author: 'Hans Zimmer/Richard Harvey',
# 必选, 音乐链接地址
url: 'http://ra01.sycdn.kuwo.cn/resource/n3/32/56/3260586875.mp3',
# 可选,播放器图片
pic: 'http://imge.kugou.com/stdmusic/20160109/20160109173242362674.jpg',
# 可选,歌词
lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
}
});
</script>

tips: 参考教程生成mp3外链地址教程

隐藏网页底部powered By Hexo / 强力驱动 文字

打开themes/next/layout/_partials/footer.swig,使用<!-- -->隐藏之间的代码即可,或者直接删除。位置如图:
QQ截图20180123114005

实现点击出现桃心效果

浏览器输入地址 http://7u2ss1.com1.z0.glb.clouddn.com/love.js 。在任意位置新建一个 love.js 文件,将浏览器中内容复制到love.js 并放置/themes/next/source/js/src里面。

然后打开 \themes\next\layout\_layout.swig 文件,在末尾添加以下代码:

1
<script type="text/javascript" src="/js/src/love.js"></script>

添加顶部加载条

配置文件_config.yml修改

1
2
pace: true
pace_theme: pace-theme-corner-indicator

博文压缩

  • 根据 gulpfile.js 中的配置,对 public 目录中的静态资源文件进行压缩。

    安装压缩需要的依赖包

    1
    2
    $ npm install gulp -g
    $ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --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
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');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 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'))
});
// 压缩 public/js 目录 js,以*.min.js为后缀的文件排除
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

package.json 添加指令
写完新文章,不使用 hexo generate 生成,而是使用 npm run generate

1
2
3
"scripts":{
"generate" :"hexo clean && hexo g && gulp"
},

其他参考资料

hexo细节配置