看板娘太单调?让你的看板娘不再孤独!

子兮子兮 No can, but will. 本文由博客端 https://zixizixi.cn 主动推送
本贴最后更新于 240 天前,其中的信息可能已经水流花落

默认看板娘

solo1.png

终于,我还是对看板娘下手了....

众所周知,Solo 博客系统自带看板娘,一定程度上可以吸引访客,提高人气,为我们的博客增色不少,但时间长了总觉得缺点什么,感官上给人很是单调,不够猛男。所以我们可以把看板娘装饰的更漂亮更可爱一点,以达到锦上添花的效果。

添加背景颜色和边框

首先我们要知道,Solo 博客的看板娘的页面元素全部都放在一个 class 属性值为 solo-kanbanniangdiv 中,这样就可以基于此 div 来进行一系列的修饰。

访问博客时看板娘默认在页面的左下角,看上去好像也没有什么不妥,但当我们把看板娘向上拖动之后,水平的底部看上去就让人很不舒服,破坏了页面的协调性,让整个页面看上去很有割裂感:

image.png

所以为了让看板娘看上去更加协调,我们可以在 solo-kanbanniang div 的边框和背景样式入手,因为看板娘上面的部分是不规则的,而底部是水平的,可以给 div 加上一个顶部大圆弧、底部小圆弧的边框,来平衡看板娘的平面空间,效果如下:

image.png

这样看上去就协调多了,选择虚线的原因是由于个人感觉虚线比实线看上去更加舒服,更加 Open trollface 。这里的边框风格值是 dashed,当然如果你想要看板娘看上去更加可爱,还可以使用圆点虚线 dotted

为了让看板娘看上去更加充实,可以为其再添加一下背景颜色,这里我们姑且先用简约的白色,为了让背景和边框不完全遮挡其后面的页面内容,颜色值一律使用具有透明度的 rgba 模式,效果如下:

image.png

细心的同学应该已经发现了底部的边框是被隐藏掉的,不要问为什么,总而言之言而总之,颜值就是正义...... 因为如果不隐藏掉的话,边框溢出看板娘底部的水平线,看上去会更加不协调。

说了这么多,有的同学该疑惑了 🤔 ,Talk is cheap, show me the code.。别着急,好戏才刚刚开始,重头戏还在后面呢,先上代码:

.solo-kanbanniang {
  background-color: rgba(255, 255, 255, 0.8);
  /* 如果改成粉色那就再猛男不过了 */
  border-color: rgba(0, 0, 0, 0.3);
  /* dotted 风格也是不错的,最后一个 none 就是用来隐藏底部边框的 */
  border-style: dashed dashed none;
  /* 上面两个角的弧度为 50%,下面两个角的弧度为 30% */
  border-radius: 50% 50% 30% 30%;
  /* 妈妈说边框要粗一点才有存在感哟 */
  border-width: 6px;
  /** 这个加不加无所谓 */
  overflow: visible;
}

添加动态背景图片

重头戏也许会迟到,但从来不会缺席。废话少说,先上效果图:

怎么样,粉嘟嘟啊有木有,卡哇伊啊有木有。 huaji

要实现以上效果,直接在上述 CSS 代码的基础上添加背景图片的样式即可,同时应该设置一下背景图片的大小,这里使用 contain,可以显示更多图片内容,为保险起见建议使用 cover,以防止小图留白:

  background-image: url(https://img.hacpai.com/file/2020/04/sakura6-90b69bc1.gif);
  background-size: contain;

可以毫不吝啬的告诉你,像这样猛男的图片,我有满满一硬盘 👇 doge

猛男专属樱花飘落粉嘟嘟动态图:点我!点我!点我!
  1. sakura2.gif

  1. sakura3.gif

  1. sakura4.gif

  1. sakura5.gif

  1. sakura6.gif

  1. sakura7.gif

  1. sakura8.gif

  1. sakura9.gif

  1. sakura10.gif

  1. sakura11.jpg

  1. sakura1.gif

  • 最后一张为背景透明的樱花飘落动态图,若介意看板娘背景遮挡内容,可以使用此图。

更多猛男专属樱花飘落粉嘟嘟动态图


你以为这就结束了?NO~ NO~ NO~,👆 上面的图我都想要怎么办?没问题!看代码:

  var kbnBgArr = [
    'https://img.hacpai.com/file/2020/04/sakura2-d2e9f3b8.gif',
    'https://img.hacpai.com/file/2020/04/sakura3-ce8f5465.gif',
    'https://img.hacpai.com/file/2020/04/sakura4-527ebe22.gif',
    'https://img.hacpai.com/file/2020/04/sakura5-c6b39f52.gif',
    'https://img.hacpai.com/file/2020/04/sakura6-90b69bc1.gif',
    'https://img.hacpai.com/file/2020/04/sakura7-498d8afa.gif',
    'https://img.hacpai.com/file/2020/04/sakura8-456c4a4d.gif',
    'https://img.hacpai.com/file/2020/04/sakura9-39eea852.gif',
    'https://img.hacpai.com/file/2020/04/sakura10-82df20c2.gif',
    'https://img.hacpai.com/file/2020/04/sakura11-3e0085a6.gif',
    'https://img.hacpai.com/file/2020/04/sakura1-7c5c89a9.gif',
  ], kbnBgImgRandom = function() {
    document.querySelector('.solo-kanbanniang').style.backgroundImage = ['url(', kbnBgArr[parseInt(Math.random() * kbnBgArr.length, 10)], ')'].join('');
  };

最后在 Solo 后台管理中将上述 CSS 和 JS 代码复制到信息配置的 HTML head 或页脚,然后在其他位置调用 kbnBgImgRandom() 方法即可。

完整代码

CSS

.solo-kanbanniang {
  background-size: cover;
  background-image: url(https://img.hacpai.com/file/2020/04/sakura1-7c5c89a9.gif);
  background-color: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.3);
  border-style: dashed dashed none;
  border-radius: 50% 50% 30% 30%;
  border-width: 6px;
}

JS

  var kbnBgArr = [
    'https://img.hacpai.com/file/2020/04/sakura2-d2e9f3b8.gif',
    'https://img.hacpai.com/file/2020/04/sakura3-ce8f5465.gif',
    'https://img.hacpai.com/file/2020/04/sakura4-527ebe22.gif',
    'https://img.hacpai.com/file/2020/04/sakura5-c6b39f52.gif',
    'https://img.hacpai.com/file/2020/04/sakura6-90b69bc1.gif',
    'https://img.hacpai.com/file/2020/04/sakura7-498d8afa.gif',
    'https://img.hacpai.com/file/2020/04/sakura8-456c4a4d.gif',
    'https://img.hacpai.com/file/2020/04/sakura9-39eea852.gif',
    'https://img.hacpai.com/file/2020/04/sakura10-82df20c2.gif',
    'https://img.hacpai.com/file/2020/04/sakura11-3e0085a6.gif',
    'https://img.hacpai.com/file/2020/04/sakura1-7c5c89a9.gif',
  ], kbnBgImgRandom = function() {
    try {
      document.querySelector('.solo-kanbanniang').style.backgroundImage = ['url(', kbnBgArr[parseInt(Math.random() * kbnBgArr.length, 10)], ')'].join('');
    } catch(ignore) {}
  };
(function() {
  kbnBgImgRandom();
})();

具体配置方式可参考我的另一篇有关 Solo 优化的文章: 为 Solo 添加文章内容过期提醒,其内容包含要配置到签名档的原因说明。

最终效果

其他更新

2020-04-04

刚刚通过移动端访问发现,移动端是默认关闭了看板娘的,但是加了背景后会有一片空白一闪而过,解决方式是添加以下 CSS 代码:

@media screen and (max-width: 768px) {
  .solo-kanbanniang { background: none!important; border: 0 none!important; }
}

🎉 另外,看板娘的此优化已被 D 大V 姐 纳入了官方代码库,Solo 的下个版本发布后看板娘将自带背景图片和边框修饰,并且在刷新页面、切换文章、点击看板娘的聊天和换装按钮后都会切换随机背景图。届时更新 Solo 客户端的小伙伴们要注意删除自己添加的相关配置。

赞助商 我要投放

欢迎来到这里!

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

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

    真不错 @Vanessa 加到默认版本里吧 😊

    1 回复
  • iTanken
    捐赠者 作者

    huaji 嘿嘿,那最好不过了

  • Vanessa

    可以提个 pr 么?

    2 回复
  • mymoshou

    作为猛男,对于樱花我表示恶心心

    1 回复
  • iTanken 8 评论
    捐赠者 作者

    很久没改过 Solo 的源码了,普通的 JS 和 CSS 还行,纯前端的东西就不会了

    你就说你提不提吧
    Vanessa
    @Vanessa 我刚看了一下,CSS 是不是要在看板娘的独立项目 里面改,但是 JS 我还不知道应该改哪个 doge
    iTanken
    @iTanken HTML 在 solo 的 src/main/resources/plugins/kanbanniang/plugin.ftl
    Vanessa
    @Vanessa 这个我也知道,但是我要实现的效果是每次切换页面都能换一个背景,应该怎样监听 pjax 的加载事件?
    iTanken
    @Vanessa 嗯嗯,这个模板也知道
    iTanken
    @iTanken 还有这高级功能,src/main/resources/js/common.js 118 行
    Vanessa
    @Vanessa 好的,收到~
    iTanken
  • iTanken
    捐赠者 作者

    我们所理解的怕不是同一个猛男,你是在说直男吧。doge

    1 回复
  • mymoshou

    喜欢看猫片,难道还不是猛男?

    1 回复
  • iTanken
    捐赠者 作者

    那你最猛男了 😆

  • ghostsf
    捐赠者

    有点意思。可以感觉是开了个窗户,从二次元世界出来的画面

    1 回复
  • iTanken
    捐赠者 作者

    trollface 没错,就是要这个感觉,Open Your Window. 哈哈哈

    1 回复
  • ghostsf 1 赞同
    捐赠者

    trollface 我也弄个

  • iTanken 2 评论
    捐赠者 作者

    image.png
    4.00 KiB/s 这是一个痛苦的过程 😭

    1 回复
    学学 D,多摸下鱼回来就好了
    Vanessa
    @Vanessa 😭
    iTanken
  • d1y 1 1 赞同

    用淘宝镜像美滋滋

    Git clone https://github.com.cnpmjs.org/itanken/kanbanniang

    1 回复
  • iTanken
    捐赠者 作者

    666,还可以这么用,感谢感谢

  • 233333 1 赞同
    捐赠者

    doge 很好看,试着偷走

    1 回复
  • iTanken
    捐赠者 作者

    哈哈哈,欢迎借鉴huaji

  • cloudlang

    我不是猛男我喜欢 😂

    1 回复
  • iTanken
    捐赠者 作者

    哈哈哈,你怎么知道你不是 trollface

    1 操作
    iTanken 在 2020-04-04 12:03:35 更新了该回帖
  • cloudlang

    最后一步为什么还要配置到签名档?

    1 回复
  • iTanken
    捐赠者 作者

    这样的话使用了签名档的文章每次切换文章的时候都可以换一个背景

    1 回复
  • cloudlang

    原来如此 👍

  • Eddie 1 赞同
    捐赠者

    我以为你要把看板娘换成猛男。。。。。

    2 回复
  • Vanessa

    我一开始也以为是要加小哥哥呢

    1 回复
  • Eddie 1 评论
    捐赠者

    😂 到最后都没看到猛男,失望了。

    没看到就算了,还要去写代码
    Vanessa
  • iTanken
    捐赠者 作者

    哈哈哈,你一定是看错了,你再仔细看看 huaji

  • MingGH

    6

请输入回帖内容 ...