xuzai's Blog

学海无涯，回头是岸！

0%

hexo+next主题美化二

发表于 更新于 分类于 ， 阅读次数： Valine：

Hexo+Next主题 优化博客

1、配置Next主题

1
2
3
4
5
6
7
(1) 首先，下载next主题
	git clone https://github.com/theme-next/hexo-theme-next themes/next
（2）修改站点配置文件_config.yml，把主题改成next主题
    ## Themes: https://hexo.io/themes/
    theme: next
(3) 修改语言配置，（站点配置文件_config.yml）
	language: zh-Hans

2、在主题配置文件中，修改主题

1
2
3
4
5
6
修改next文件夹下的_config.yml文件
# 主题中的主题
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

3、菜单设置

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home  #首页
  about: /about/ || fa fa-user  #关于  
  tags: /tags/ || fa fa-tags    #标签
  categories: /categories/ || fa fa-th  # 分类
  archives: /archives/ || fa fa-archive # 归档
  schedule: /schedule/ || fa fa-calendar #日程表
  sitemap: /sitemap.xml || fa fa-sitemap # 站点地图
  #commonweal: /404/ || fa fa-heartbeat

​ 效果图：

​

4、图片懒加载

1
2
在主题配置文件中修改：
	lazyload: true

5、点击出现桃心效果

1
2
3
4
5
6
(1)在主题/source/js/下新建文件 clicklove.js，添加内容如下
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

(2)修改_layout.swig  添加一下内容
    <!-- 页面点击小红心 -->
    <script type="text/javascript" src="/js/clicklove.js"></script>

6、在文章末尾添加“文章结束”标记

1
2
3
4
5
6
  (1)第一步：在主题/layout/_macro 下新建 passage-end-tag.swig 文件，并添加以下代码:
<div>{% if not is_index %} <div style="text-align:center;color:#bfbfbf;font-size:16px;"> <span>-------- 本文结束 </span> <i class="fa fa-paw"></i> <span> 感谢阅读 --------</span> </div> {% endif %}</div>
（2）打开文件，路径：themes\next\layout\_macro\post.swig，在post-body之后，post-footer之前（如果找不到位置的按照我下图的位置添加）添加以下代码：
<div>{% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}</div>
（3）打开主题配置文件，在最后位置添加以下代码：
	post_end_tag:enabled: true # 是否开启文末的本文结束标记

7、修改主题页面布局为圆角

1
2
3
4
5
打开文件，路径：\themes\next\source\css\_variables\Gemini.styl ，添加以下代码：

// 修改主题页面布局为圆角
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

8、配置站内搜索

1
2
3
4
5
6
7
8
9
10
11
12
(1)首先安装插件，输入以下两个命令：
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
(2)在站点配置里末尾增加以下代码：
search:
	path: search.xml 
	field: post 
	format: html 
	limit: 10000
(3)在主题配置文件里搜索找到local_search修改为如下
	local_search:
		enable: true

9、设置分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 安装相应的插件
npm install --save hexo-generator-index
npm install --save hexo-generator-archive

# 更改站点的配置文件
cd 博客目录
vim _config.yml

# 这一段默认就有的
index_generator:
  path: ''
  per_page: 5
  order_by: -date

# 归档页面
archive_generator:
  per_page: 50
  yearly: true
  monthly: true

10、阅读全文设置

1
2
3
4
5
6
7
8
(1)使用npm安装hexo-excerpt
	npm install hexo-excerpt --save
(2)在站点配置文件中添加
	excerpt:
      depth: 3
      excerpt_excludes: []
      more_excludes: []
      hideWholePostExcerpts: true

11、添加APlayer音乐播放器

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
57
58
1、先下载Aplayer源码：APlayer：https://codechina.csdn.net/mirrors/moeplayer/aplayer?utm_source=csdn_github_accelerator
2、在目录blog/themes/next/source/dist下添加music.js文件，添加音乐，示例格式如下：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: true,
    audio: [
	  {
        name: 'Film out',
        artist: 'BTS',
        url: 'http://music.163.com/song/media/outer/url?id=1834176131.mp3',
        cover: '/images/5.jpg',
      },
      {
        name: "Boy With Luv",
        artist: 'BTS',
        url: 'http://music.163.com/song/media/outer/url?id=1375569365.mp3',
        cover: '/images/xingxing.jpg',
      },
      {
        name: '这就是爱吗',
        artist: '十豆',
        url: 'http://music.163.com/song/media/outer/url?id=1412242872.mp3',
        cover: '/images/zjsam.jpg',
      },
      {
        name: 'Alone',
        artist: 'Alan Walker / Noonie Bao',
        url: 'http://music.163.com/song/media/outer/url?id=444269135.mp3',
        cover: '/images/alone.jpg',
      },
	  {
        name: 'Umbrella (Matte Remix)',
        artist: 'Matte / Ember Island',
        url: 'http://music.163.com/song/media/outer/url?id=164209623.mp3',
        cover: '/images/1.jpg',
      },
	  {
        name: '大眠 (完整版)原唱：王心凌',
        artist: '小乐哥',
        url: 'http://music.163.com/song/media/outer/url?id=3778678.mp3',
        cover: '/images/2.jpg',
      },
	  {
        name: '世间美好与你环环相扣',
        artist: '柏松',
        url: 'http://music.163.com/song/media/outer/url?id=1363948882.mp3',
        cover: '/images/3.jpg',
      },
	  {
        name: '飞',
        artist: '王恩信Est / 二胖u',
        url: 'http://music.163.com/song/media/outer/url?id=1386259535.mp3',
        cover: '/images/4.jpg',
      }
    ]
});

12、文章末尾添加版权说明

1
2
3
4
5
6
找到主题配置文件，将creative_commons这一项中的 post配置改为true，如下配置：
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

13、添加阅读访问次数

1
2
3
4
5
6
7
8
9
找到主题配置文件中的  busuanzi_count 开启即可
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

14、添加评论功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
找到主题配置文件，valine 开启就行，然后配置好自己的leancloud 中的appid 和appkey
valine:
  enable: true
  appid: --- # Your leancloud application appid
  appkey: --- # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

15、添加 博文压缩

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
（1）首先安装包
	$ npm install gulp -g
	$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
（2）在站点目录下新建gulpfile.js 在文章填写一下代码：
	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
    gulp.task('minify-js', function() {
        return gulp.src('./public/**/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('./public'));
    });
    // 执行 gulp 命令时执行的任务
    gulp.task('default', [
        'minify-html','minify-css','minify-js'
    ]);
  （3）生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。
-------- 本文结束 感谢阅读 --------