又一次博客优化记录

22Sep2024 王叔书 0

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

{collapse-item label="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://9413.love/usr/themes/web/style/bg/welcome_1.mp4" type="video/mp4"> </video>

{/collapse-item}

02｜背景添加星星效果

{collapse-item label="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;}

{/collapse-item}
{collapse-item label="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>

{/collapse-item}

03｜左侧添加浮动菜单

{collapse-item label="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>

{/collapse-item}
{collapse-item label="footer.php添加"}

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

{/collapse-item}