看板娘太单调？让你的看板娘不再孤独！

默认看板娘

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

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

添加背景颜色和边框

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

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

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

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

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

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

说了这么多，有的同学该疑惑了 🤔 ，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>
你的浏览器不支持播放此视频，请使用高级浏览器访问此页面。

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

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

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

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

你以为这就结束了？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 客户端的小伙伴们要注意删除自己添加的相关配置。