修改 solo - Bubble 皮肤

❤️ 定制皮肤

前景提示：本人是个纯后端接口开发(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.