前言

如果浏览了星语小木屋，就发现网站的有侧多了个显示日期+古诗一言。

效果

教程

<style>
.wiiuii-suiji-main span{color:#fff}.wiiuii-suiji-main{background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer;height:320px;border-radius:var(--main-radius);position:relative}.wiiuii-suiji-header{display:flex;justify-content:space-between}.xingyu-dt-ty{padding:20px;display:flex;flex-direction:column}.xingyu-dt-day{font-size:60px;font-weight:700;color:#fff}.xingyu-sj-date{font-size:16px;font-weight:700;color:#fff}.xingyu-sjzt-ty{line-height:25px;height:200px;writing-mode:vertical-rl;padding:15px;color:#fff;font-size:15px}.xingyu-sj-qhbtn{position:absolute;bottom:30px;padding:10px}.xingyu-sj-qhbtn>span>i{font-size:16px}.xingyu-sj-qhbtn span:hover{color:#f44336}.xingyu-sjtitle-ty{position:absolute;bottom:0;text-align:center;left:0;right:0;bottom:0;padding:5px}
</style>
<div class=\"wiiuii-suiji-main\">
<div class=\"wiiuii-suiji-header\">  
  <div class=\"xingyu-dt-ty\">
    <span class=\"xingyu-dt-day wiiuiiDay\"></span>
    <p class=\"xingyu-sj-date\">
      <span class=\"wiiuiiYear\"></span>  
      <span class=\"wiiuiiMonth\"></span>
    </p>
  </div>
  <div class=\"xingyu-sjzt-ty\">
    <span class=\"xingyu-yiyin\"></span>  
  </div>
  </div>
 <div class=\"xingyu-sj-qhbtn\">
   <span id=\"xingyu-qh-btn\"><i class=\"fa fa-paper-plane\" aria-hidden=\"true\"></i> 换一句</span>
  </div>  
  <div class=\"xingyu-sjtitle-ty\">
   <span>——更多教程，关注维哲博客——</span>
  </div>
</div>
<script type=\"text/javascript\" src=\"https://www.atbkw.cn/aotian/js/yiyin-img.js\"></script>

后台添加[自定义HTML小工具]

这里就不在说如何添加自定义HTML小工具了，把它添加到侧边，然后把下面的代码放进去，然后保存就好啦！

关于JS文件

如果大家不觉得麻烦的话，可以自己修改背景图和一言，代码放到下面，自己创建一个JS文件然后复制进去，自己修改后调用。如果觉得麻烦可以自己用本站的就好。

[重要]：一言修改或者添加在“wiiuiiYiYan”这里面，背景图修改或者添加在“wiiuiiYiYanBg”里面。

好啦！教程就到这里！

版权的维哲博客