修改 solo - Bubble 皮肤

本贴最后更新于 1785 天前,其中的信息可能已经斗转星移

❤️ 定制皮肤

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

-- v1😎 (修改主页背景、添加 Aplayer、Typed.js)

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

😁 开发步骤

  • 1、拉取最新的 solo 博客代码到本地(建议先导入到 gitee, 再从 gitee 拉到本地)
  • 2、修改配置文件 lakte.propertieslocal.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.jsmeting.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>

具体参考:
cankao.jpg

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>

具体在:

type.jpg

修改 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.

1 操作
lonuslan 在 2020-04-24 21:00:09 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...