Hexo（sakura）背景动画、壁纸、通讯栏（自定义样式）

程序员文章站 2022-06-02 19:54:38

...

一、丰富背景样式

1. 浮层样式集合

（花瓣飘落、文字，爱心，连线，飘动的彩带）
Hexo（sakura）背景动画、壁纸、通讯栏（自定义样式）
修改\Sakura\layout\_partial目录下的footer.ejs
>说明：加在footer而不是header是提高页面加载速度，
>以下cdn都引用于walllweap大神的素材库

	<!--浏览器搞笑标题-->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/aaa@qq.com/js/hititle.js"></script>
	<!-- ????飘落 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/aaa@qq.com/js/sakura.js"></script>
	<!-- // 文字 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
	<!-- // 爱心 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>
	 <!-- // 连线 -->
	 <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
	 <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
	 <!-- 样式二（飘动的彩带） -->
	 <script src="https://cdn.jsdelivr.net/gh/wallleap/aaa@qq.com/js/piao.js" type="text/javascript"></script>
	 <!--背景切换-->
	 <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

2. 背景切换和访问量统计

背景切换（pages功能）和访问量统计（不蒜子网页计数）
Hexo（sakura）背景动画、壁纸、通讯栏（自定义样式）
不蒜子网页计数使用教程：
>http://busuanzi.ibruce.info/

```
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
```

<footer id="colophon" class="site-footer" role="contentinfo">
  <div class="site-info">
    <div class="footertext">
      。。。。。
    </div>
    <div class="footer-device">
    <p style="font-family: 'Ubuntu', sans-serif;">
        <span style="color: #b9b9b9;">Theme <a href="https://github.com/honjun/hexo-theme-sakura" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Sakura</a> <i class="iconfont icon-sakura rotating" style="color: #ffc0cb;display:inline-block"></i> by <a href="https://2heng.xin/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Mashiro</a>&<a href="https://www.hojun.cn/" target="_blank" style="color: #b9b9b9;;text-decoration: underline dotted rgba(0, 0, 0, .1);">Hojun</a>, Powered by Hexo, Hosted by Coding Pages</a>
        </span>
      </p>
    </div>
    <!-- <i class="fa fa-fire" aria-hidden="true"></i> -->
    <span style="color: #ccc;padding-left: 20px;">
      <i class="fa fa-clock-o" aria-hidden="true"></i>
      <span id="time" align="center">载入时间中...</span>
      <script>
        var now = new Date(); 
        function createtime() { 
          var grt= new Date("2020-02-11 17:20:00");//在此处修改你的建站时间
          now.setTime(now.getTime()+250); 
          days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
          if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
          mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
          snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
          document.getElementById("time").innerHTML = "小站已经苟活 "+ dnum +" 天 "+hnum + " 小时 " + mnum + " 分 " + snum + " 秒";      
       } 
       setInterval("createtime()",250);
      </script>
      <!--不蒜子网页计数器-->
      <span style="color:#ccc;padding-left: 20px;"><i class="fa fa-eye" aria-hidden="true"></i>访问量: <span id="busuanzi_value_site_pv"></span>次</span>
    </span>
  </div><!-- .site-info -->
  <!--壁纸切换-->
  <div class="skin-menu no-select" id="mainskin"  style="position: fixed">
      <div class="theme-controls row-container">
          <ul class="menu-list">
              <li id="white-bg"> <i class="fa fa-television" aria-hidden="true"></i></li>
              <li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li>
              <li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li>
              <li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li>
              <li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li>
              <li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li>
              <li id="bing-bg"> <i class="iconfont icon-bing"></i></li>
              <li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li>
          </ul>
      </div>
      <div class="font-family-controls row-container">
          <button type="button" class="control-btn-serif selected" data-mode="serif" onclick="mashiro_global.font_control.change_font()">Serif</button>
          <button type="button" class="control-btn-sans-serif" data-mode="sans-serif" onclick="mashiro_global.font_control.change_font()">Sans Serif</button>
      </div>
  </div>   
  <canvas id="night-mode-cover"></canvas> 
    <div class="changeSkin-gear no-select">
      <div class="keys" id="setbtn"> <span id="open-skinMenu"> 切换壁纸 | SCHEME TOOL 
        &nbsp;<i class="iconfont icon-gear inline-block rotating"></i> </span></div>
  </div><!--skin.end-->
</footer>

二、在线通讯

Hexo+DaoVoice实现网页在线通讯功能

首先在DaoVoice官网上注册一个账号
在应用设置，安装到网站，仅匿名用户下获得id，我们是采用js语言，选择对应复制

修改界面样式：

在sakura\_config.yml中末尾加上：

# Online contact ##在线聊天
daovoice: true
daovoice_app_id: f6b2a0b1 ##这里替换成你DaoVoice上的appid

在\sakura\layout\_partial目录下的footer.ejs末尾加上：
(依然是加快网站访问速度，将head的引用加在了foot中)

  <% if (theme.daovoice){ %>
  <script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/f6b2a0b1.js","daovoice")
    daovoice('init', {
      app_id: "<%= theme.daovoice_app_id%>"
    });
    daovoice('update');
  </script>
  <% } %>