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

本贴最后更新于 1452 天前,其中的信息可能已经水流花落

默认看板娘

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;
}

添加动态背景图片

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

preload="meta" muted>
你的浏览器不支持播放此视频,请使用高级浏览器访问此页面。

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

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

  background-image: url(https://b3logfile.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://b3logfile.com/file/2020/04/sakura2-d2e9f3b8.gif',
    'https://b3logfile.com/file/2020/04/sakura3-ce8f5465.gif',
    'https://b3logfile.com/file/2020/04/sakura4-527ebe22.gif',
    'https://b3logfile.com/file/2020/04/sakura5-c6b39f52.gif',
    'https://b3logfile.com/file/2020/04/sakura6-90b69bc1.gif',
    'https://b3logfile.com/file/2020/04/sakura7-498d8afa.gif',
    'https://b3logfile.com/file/2020/04/sakura8-456c4a4d.gif',
    'https://b3logfile.com/file/2020/04/sakura9-39eea852.gif',
    'https://b3logfile.com/file/2020/04/sakura10-82df20c2.gif',
    'https://b3logfile.com/file/2020/04/sakura11-3e0085a6.gif',
    'https://b3logfile.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

  • 配置到 HTML head 中:
.solo-kanbanniang {
  background-size: cover;
  background-image: url(https://b3logfile.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://b3logfile.com/file/2020/04/sakura2-d2e9f3b8.gif',
    'https://b3logfile.com/file/2020/04/sakura3-ce8f5465.gif',
    'https://b3logfile.com/file/2020/04/sakura4-527ebe22.gif',
    'https://b3logfile.com/file/2020/04/sakura5-c6b39f52.gif',
    'https://b3logfile.com/file/2020/04/sakura6-90b69bc1.gif',
    'https://b3logfile.com/file/2020/04/sakura7-498d8afa.gif',
    'https://b3logfile.com/file/2020/04/sakura8-456c4a4d.gif',
    'https://b3logfile.com/file/2020/04/sakura9-39eea852.gif',
    'https://b3logfile.com/file/2020/04/sakura10-82df20c2.gif',
    'https://b3logfile.com/file/2020/04/sakura11-3e0085a6.gif',
    'https://b3logfile.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 添加文章内容过期提醒,其内容包含要配置到签名档的原因说明。

最终效果

preload="meta" muted>
你的浏览器不支持播放此视频,请使用高级浏览器访问此页面。

其他更新

2020-04-04

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

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

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

欢迎来到这里!

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

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