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

一、丰富背景样式

1. 浮层样式集合

(花瓣飘落、文字,爱心,连线,飘动的彩带)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改\Sakura\layout\_partial目录下的footer.ejs

说明:加在footer而不是header是提高页面加载速度,
以下cdn都引用于walllweap大神的素材库

	<!--浏览器搞笑标题-->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
	<!-- 🌸飘落 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>
	<!-- 雪花飘落 -->
	<!-- <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/snow1.js"></script> -->
	<!-- // 文字 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
	<!-- // 烟花 -->
	<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
	<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
	<script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/fireworks.js"></script>
	<!-- // 星星跟随坠落 -->
	<script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.1.2/js/cursor.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/cdn@latest/js/piao.js" type="text/javascript"></script>
	 <!--背景切换-->
	 <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

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

背景切换(pages功能)和访问量统计(不蒜子网页计数)
在这里插入图片描述
不蒜子网页计数使用教程:
>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实现网页在线通讯功能

  1. 首先在DaoVoice官网上注册一个账号

  2. 应用设置,安装到网站,仅匿名用户下获得id,我们是采用js语言,选择对应复制
    在这里插入图片描述
    修改界面样式:
    在这里插入图片描述

  3. sakura\_config.yml中末尾加上:

    # Online contact ##在线聊天
    daovoice: true
    daovoice_app_id: f6b2a0b1 ##这里替换成你DaoVoice上的appid
    
  4. \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>
      <% } %>
    

    不同的主题配置格式和位置有所不同,还要注意其中的id数字。

    在这里插入图片描述

  5. 三连访问:

    hexo clean && hexo g && hexo s
    

    发送信息:在这里插入图片描述
    站内查看访问者具体信息:
    在这里插入图片描述
    绑定的邮箱会接收到相应信息:在这里插入图片描述

  6. 绑定微信(在daovoice的右上角)
    在这里插入图片描述
    关注公众号后打开小程序,就可以实时收发消息,有新的消息也会通过微信通知。

演示页面:https://cungudafa.gitee.io/

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页