又一次博客优化记录 - 依然少年.王先森

不知道干什么我就折腾博客，首页的欢迎页面一直是用的图片，正好看到一个还不错的视频，于是拿来当动态欢迎图，效果还不错，写在主题设置里的，谁让typecho切换主题会清空设置呢，因老王非专业选手，过几天就忘了，故而代码放这里备忘下😣。
找了蛮多视频结果选择困难症犯了😄……，顺带在别处扣了个背景上飘浮的星星特效。
01｜背景图改为视频

tree
div 部分
- <video id="cat_index_topvideo" autoplay="" loop="" muted="" style="min-height: 100%;height: 100%;width: 100%;object-fit: cover;border-radius: .5rem;"> <source src="https://yrsn.cc/usr/themes/web/style/bg/welcome_1.mp4" type="video/mp4"> </video>

02｜背景添加星星效果

tree
style.css 添加
- #star-sky-banner {display: block;position: fixed;margin: 0;padding: 0;border: 0;outline: 0;left: 0;top: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;}
footer.php添加
- <canvas id="star-sky-banner" style="width: 100%;height: 100%;"></canvas>
- <script src="<?php $this->options->themeUrl('style/dark.js'); ?>" type="text/javascript"></script>

03｜左侧添加浮动菜单

style.css 添加

<style>.group {
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: -30px;
}
.group div {
  position: relative;
  left: calc(-100% + 7px);
  padding: 12px 10px 12px 0;
  background: rgba(255, 255, 255, .7);
  margin: 3px 0;
  transition: .5s;
}
.group div:nth-child(1) {
  background: #5c7ea8;
}
.group div:nth-child(2) {
  background: #667a57;
}
.group div:nth-child(3) {
  background: #a5a046;
}
.group div:hover {
  left: 0;
  border-radius: 0 5px 5px 0
}
.group div a {
  display: flex;
  color: #fff;
  line-height: 25px;
}
.group div a>* {
  display: inline-block;
  height: 25px;
  margin: 0 3px;
}
.group div a>img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
</style>

footer.php添加

<div class="group">
  <div>
      <a href="https://yrsn.cc/about.html" class="nopjax">
          <span>
              <i class="fa fa-address-card"></i> 关于
          </span>
      </a>
  </div>
  <div>
      <a href="https://yrsn.cc/gbook.html" class="nopjax">
          <span>
              <i class="fa fa-comments"></i> 留言
          </span>
      </a>
  </div>
  <div>
      <a href="https://yrsn.cc/links.html" class="nopjax">
          <span>
              <i class="fa fa-rss"></i> 收藏
          </span>
      </a>
  </div>
</div>

HELLO, WORLD!