定制皮肤

前景提示：本人是个纯后端接口开发(java)，对于前端涉略较浅，这篇文章的目的是为了方便那些同道中人或者前端小白能够基于现有的solo皮肤简单开(bai)发(piao)出一套适合自己的博客样式，其间若有冒犯，欢迎来犯，一起进步！

-- v1（修改主页背景、添加Aplayer、Typed.js）

样例： https://www.lonuslan.com

开发步骤

• 1、拉取最新的solo博客代码到本地（建议先导入到gitee, 再从gitee拉到本地）
• 2、修改配置文件 lakte.properties 和 local.properties

lakte.properties：

# latke.properties 将运行模式设为生产模式
#runtimeMode=DEVELOPMENT
runtimeMode=PRODUCTION

local.properties.

# 修改数据库配置信息
jdbc.username=lonuslan
jdbc.password=***
jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.URL=jdbc:mysql://*****:3306/solo?useUnicode=yes

• 3、参考 皮肤开发指南 搭建皮肤开发环境
  这里建议安装好 npm 之后，更改npm的下载源；
  或者再安装 cnpm , 使用 cnpm操作 （推荐使用，亲测）

npm install -g cnpm --registry=https://registry.npm.taobao.org;
cnpm build;
cnpm update;
// 生产环境
cnpm run dev;
//部署环境
cnpm run build;

启动server.java，本地访问 https://localhost:8080 测试

修改主页背景

修改common.js

仿照修改以下代码：

changeBackground: function () {
    // 设置主页图片
    imgBeds = {
    //用以随机的图片地址；
      homeTopImg: [
        "https://img.lonuslan.com/lonuslan/2020012/AXsi94kr5YSl.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/o6RVlf8Tym1S.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/4Xw4pJJ6wA7X.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/d4yH2omtFThg.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/QOBHhXHWcgBu.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/XznCEJWcH0oG.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/G0pKoHpLTSqp.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/9P2HW1O4DSNl.jpg",
        "https://img.lonuslan.com/lonuslan/2020012/IRiGYHISNvks.jpg"
      ]
    }
    let homeTopImg = imgBeds.homeTopImg, bgImg;

    homeTopImg.length > 0 ?
        (homeTopImg.length > 1 ? bgImg = homeTopImg[randomNum(0, homeTopImg.length - 1)] : bgImg = homeTopImg[0])
        : bgImg = "";
    $('.header--index').css({
      'background': '#222 url('+bgImg+')  center center no-repeat',
      'background-size': 'cover'
    });
  }
  
  function randomNum(minNum,maxNum) {
  switch(arguments.length){
    case 1:
      return parseInt(Math.random()*minNum+1);
      break;
    case 2:
      return parseInt(Math.random()*(maxNum-minNum+1)+minNum);
      break;
    default:
      return 0;
      break;
  }
};

over.

添加Aplayer音乐播放器

将获取aplayer.js 和 meting.js 的代码放在博客后台管理页-工具-偏好设定-公告内：

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

我试过放在其他地方或者直接放在页面内，但是页面间不能共享？

注：千万不要放在后台管理页的HTML head内, 会出现后台管理按钮点击无法反映的bug， 可在数据库b3log_solo_options，找到htmlhead字段，删除添加的内容即可恢复!

再将播放器样式放进页面内（index.ftl）中：

<meting-js
        server="netease"
        type="playlist"
        id="3002544701"
        theme="#33ccff"
        fixed="true"
        list-max-height="150px"
        list-folded="true">
</meting-js>

具体参考：

在base.scss添加以下样式：

//添加音乐插件播放样式
.aplayer.aplayer-fixed .aplayer-body {
  max-width: 260px!important;
  margin-bottom: 50px!important;
}
.aplayer.aplayer-fixed{
  margin-bottom:49px!important;
  max-width:260px!important;
}
.aplayer.aplayer-fixed .aplayer-list{
  margin-bottom: 66px!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
  left: -66px!important;
}
.aplayer .aplayer-lrc p{
  font-size: 15px!important;
  color: greenyellow!important;
  text-shadow: none!important;
}
.aplayer .aplayer-miniswitcher{
  background: #00cc00!important;
}

over.

网站标题打字机效果

在博客后台管理页-工具-偏好设定-公告内添加：

<!-- require typed.js-->
<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>

修改macro-header.ftl页面：

<h1 class="header__h1 fn__flex-inline">
       <a href="${servePath}" rel="start" id="elements">${blogTitle}</a>
</h1>

具体在：

修改common.js:

const elementsString = $('#elements').text();
$('#elements').empty();
//console.log(elementsString);
const options = {
        // 闪烁光标必须得有：上面的css和下面字符串内添加 ^1000 ，只要是当输入到^1000就解析闪烁的时间，1000ms。
        strings: [elementsString + '^1000'],
        typeSpeed: 200,
        loop: true,
        cursorChar: '|'
      };
const typed = new Typed("#elements", options);

over. enjoy it.