Hexo主题(Next)美化、配置、优化这一篇就够了

前言

最近一段时间把我的博客重新美化了一番,今天就对这些工作做一个总结,并把方法归纳出来分享给大家,希望大家也能把自己的博客做成自己想要的样子,大概工作如下:

  • 实时更新Next主题
  • 添加可爱的小猫挂件
  • 添加Chat聊天挂件
  • 添加分享挂件
  • 添加音乐界面
  • 添加Valine评论邮件通知
  • 添加相册界面

这些美化功能大部分只需要你花费半个小时左右就可以搞定了,我们马上开始吧!

开始工作

实时更新Next主题

我们的博客工程的themes目录下往往是另一个小工程(主题),所以这个要使用到git的子模块了,这样就可以实时从Next主题的仓库拉取最新代码了。

将Hexo仓库变为子模块clone到工程

git submodule add git@github.com:theme-next/hexo-theme-next.git hexo

现在你就可以在themes目录下看到hexo工程,执行git status可以看到:

$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#      new file:   .gitmodules
#      new file:   hexo

然后你会注意到工程中多了一个.gitmodules文件,这是一个配置文件,保存了项目 URL 和你拉取到的本地子目录。

$ cat .gitmodules
[submodule "next"]
      path = next
      url = git@github.com:theme-next/hexo-theme-next.git

添加可爱的小猫挂件

这个是使用了一个live2d的开源hexo插件库,查看项目

安装方法很简单:

第一步:安装模块

npm install --save hexo-helper-live2d

第二步:配置hext主题的_config.yml文件

live2d:
  enable: true
  scriptFrom: local #注意:我这里使用的是local
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: true # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
      use: hijiki # npm-module package name
      # use: hijiki # 博客根目录/live2d_models/ 下的目录名
      # use: ./wives/hijiki # 相对于博客根目录的路径
      # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json # 你的自定义 url
      scale: 1
      hHeadPos: 0.5
      vHeadPos: 0.5
  display:
      superSample: 2
      width: 100
      height: 100
      position: left
      hOffset: 30
      vOffset: 20
  mobile:
      show: false
      scale: 0.05
  react:
      opacityDefault: 0.6
      opacityOnHover: 0.2

第三步:安装模型

在您博客根目录下创建一个 live2d_models 文件夹,在此文件夹内新建一个子文件夹hijiki,在此文件夹内放入Live2D模型。

模型下载地址,点这里跳转

live2d_models
    └─hijiki
        │  .gitignore
        │  package-lock.json
        │  package.json
        │
        └─assets
            │  hijiki.model.json
            │  hijiki.pose.json
            │
            ├─moc
            │  │  hijiki.moc
            │  │
            │  └─hijiki.2048
            │          texture_00.png
            │
            └─mtn
                    00_idle.mtn
                    01.mtn
                    02.mtn
                    03.mtn
                    04.mtn
                    05.mtn
                    06.mtn
                    07.mtn
                    08.mtn

第四步:配置live2d标签

这一步如果你上面配置的tagMode: false则可以跳过和忽略,如果将设置为tagMode: true则需要在主题目录themes\next\layout_custom\header.swig中添加自定义判断,代码如下:

{% if is_home() || page.live2d %}
  {{ live2d() }}  
{% endif %}

配置后你就可以在需要显示的页面上添加live2d:true标签:

---
title:
date: 2017-11-10 17:54:02
live2d: true
---

添加Chat聊天挂件

在最新版Next v7.1.0版本中有支持chatratidio两个实时聊天插件,本博客使用的是后者。

去tidio注册一个账号,然后获取key即可,接下来要做的就是设置显示样式了

tidio:
  enable: true
  key: 10xxxrze18xnnn9khduyyyym5xmjddss

tidio设置界面

添加分享挂件

分享挂件比较好用的就两个,刚开始我使用的是needmoreshare2,它支持国内的各大平台(例如微信、QQ、微博、印象笔记等),样子扁平化,配置也很简单,但是为了适应国际范,我决定将分享挂件换成更酷的likely,个人认为分享挂件只不过是一个装饰品而已,没有几个人会分享你的博客,既然这样当然选择漂亮好看的了。

likely分享挂件

likely:
  enable: true
  look: normal # available values: normal, light, small, big
  networks:
    twitter: Tweet
    facebook: Share
    linkedin: Link
    gplus: Plus
    vkontakte: Share
    odnoklassniki: Class
    telegram: Send
    whatsapp: Send
    pinterest: Pin

这个挂件在hexo内支持四种,分别是:浅色底中号、浅色底小号、浅色底大号、深色底中号。

添加音乐界面

我的音乐界面使用的是由mePlayer提供的一个开源音乐插件,我略微修改了一下在hexo中的展示样式,另外添加了一个歌曲列表,循环播放,顺序播放,随机播放功能。

请参考并下载源码修改,点击查看源码

音乐播放器

这个音乐列表,我将音乐相关资源配置到了一个json文件中,然后通过javascript加载json文件内容显示到页面上。

var lastIndex;
var musicJsons;
$.getJSON("../demo/music/music.json", function (data) {
  musicJsons = data;
    for(var i = 0; i < musicJsons.length; i++){
       musicJsons[i].loop = false;
       var $li = $('<li><span>' + musicJsons[i].title + '</span> ---- [' + musicJsons[i].author + ']</li>')
       $li.attr('id', i);
       $li.css('list-style-type', 'none');
       $li.css('height', '40px');
       $li.css('color', '#888888');
       $li.click(function(event){
          playMusic(musicJsons[this.id]);
          $('#musiclist #' +lastIndex).css('color', '#888888');
          $(this).css('color','#FF6932');
          lastIndex = this.id;
          mePlayerMethod.play();
       });
       var $musiclist = $('#musiclist');
       $musiclist.append($li);
    }
    var $loopbutton = $('#musicarea #music-loop');
    $loopbutton.text('列表循环')
    $loopbutton.click(function(){
      if(window.Notification && Notification.permission !== "denied" && Notification.permission !== "granted") {
        Notification.requestPermission(function(status) { });
      }
      if('单曲循环' == $(this).text()){
        $(this).text('列表循环')
        for(var j = 0; j < musicJsons.length; j++){
          musicJsons[j].loop = true;
        }
      }else{
        if('列表循环' == $(this).text()){
          $(this).text('随机播放');
        }else{
          $(this).text('单曲循环');
        }
        for(var j = 0; j < musicJsons.length; j++){
            musicJsons[j].loop = false;
        }
      }
    })
    var index = Math.floor(Math.random()*musicJsons.length);
    $('#musiclist #' + index).css('color','#FF6932');
    lastIndex = index;
    playMusic(musicJsons[index]);
    //document.querySelector('button').addEventListener('click', function() {
    //  mePlayerMethod.toggleTheme()
    //})
});

function playMusic(data, playendcallback){
  document.title = data.title + '--' + data.author;
  mePlayer({
    theme: 'default',
    music: data,
    target: '.music',
    autoplay: false
  }, function(){
      if('单曲循环' == $('#musicarea #loop').text()){
        playMusic(musicJsons[lastIndex]);
      } else {
        var index;
        if('列表循环' == $('#musicarea #loop').text()){
          index = lastIndex+1;
          if(index >= musicJsons.length){
            index = 0;
          }
        }else{
          index = Math.floor(Math.random()*musicJsons.length);
        }
        playMusic(musicJsons[index]);
        $('#musiclist #' +lastIndex).css('color', '#888888');
        $('#musiclist #' +index).css('color','#FF6932');
        lastIndex = index;
      }
      mePlayerMethod.play();
  });
  //$('#musiclrc').html($(lyricArea).html());
  //window.setTimeout(mePlayerMethod.play, 500);
}

添加Valine邮件通知

项目地址:https://github.com/zhaojun1998/Valine-Admin

请参考文章:《Hexo 优化 — 支持邮件通知的评论 Valine 增强版》

简要步骤:

第一步:点击 云引擎 -> 设置 填写代码库地址(https://github.com/zhaojun1998/Valine-Admin)并保存。 第二步:切换到部署标签页,分支使用 master,点击部署即可。 第三步:点击云引擎的设置页,设置如下信息。

环境变量说明
SITE_NAME网站名称
SITE_URL网站地址, 最后不要加 /
SMTP_USERSMTP 服务用户名,一般为邮箱地址
SMTP_PASSSMTP 密码,一般为授权码,而不是邮箱的登陆密码,请自行查询对应邮件服务商的获取方式
SMTP_SERVICE邮件服务提供商,支持 QQ、163、126、Gmail、”Yahoo”、…… ,全部支持请参考 : Nodemailer Supported services
SENDER_NAME寄件人名称

我使用的是我的163邮箱,在 设置->常规设置->客户端授权密码 中设置开启授权密码(也就是上面的SMTP_PASS)

开启163邮箱授权密码

添加相册界面

相册功能是这几个里面最最简单的,你只需要如下配置即可:

---
layout: post
date: 2019-02-01 09:05:00
photos:
- /images/photo/thumb/image1.jpg
- /images/photo/thumb/image2.jpg
- /images/photo/thumb/image3.jpg

这个时候最后打开_config.yml中的fancybox: truelazyload: true,这样你就可以愉快的浏览相册了,其实这个相册界面展示的并不是很完美,但是目前对于我来说已经够用了,也就不折腾了,你可以尝试对相册分类并做成很多相册集。