Hexo博客Material-X主题个性化

我的博客个性化

文章列表扭七扭八

添加方式
在主题目录下/ayout/_partial/post.ejs里添加class=”banner”

<article class="post reveal banner<%= (post.title) ? "" : "no-title" %>">

引入js文件
在主题目录/layout/_partial/footer.ejs里引入js文件

<script type="text/javascript" src="/cool/banner.js"></script>

添加抖动元素(块级)

添加方式
将以下代码添加至主题目录/source/less/_base.less文件下

.shake:hover {
  transition: all 0.3s ease;
}
@-webkit-keyframes spaceboots {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

使用方法
在标签元素class类中添加shake

添加血小板

添加方式
1.live2d资源目录添加至主图目录/source下
2.在主题目录/layout/_partial/head.ejs文件中引入live2dcss文件

<!-- 血小板-->
<link rel="stylesheet" href="/live2d/css/live2d.css" />

3.在主题目录/layout/_partial/footer.ejs文件中添加以下代码

<!-- 血小板 -->
<div id="landlord">
  <div class="message" style="opacity:0"></div>
  <canvas id="live2d" width="560" height="500" class="live2d"></canvas>
  <div class="hide-button">隐藏</div>
</div>
<!-- 血小板-->
<script type="text/javascript">
  var message_Path = '/live2d/'
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
  loadlive2d("live2d", "/live2d/model/xiaoban/model.json");
</script>

4.为了移动端更好的阅读效果，请将以下代码添加至主题目录/source/less/_footer.less文件下

@media (max-width: @on_phone) {
  #footer{
      background-color:transparent;
      padding-bottom: 180px ;
  }
  #landlord{
      width: 200px;
      height: 170px;
      .message{
        width: 200px;
        left: 43px;
        top: 15px;
    }
  }
  #live2d{
      width: 200px;
      height: 170px;
      bottom: -80px;
      left: 43px;
  }
}

添加页面点击小心心特效,文本输入特效、运行时间

添加方式
注意：由于博客使用了防盗链，请将脚本另存为
1.将’https://blog.treelo.xin/cool/clicklove.js'另存在主题目录/source/下
2.将’https://blog.treelo.xin/cool/cooltext.js'另存在主题目录/source/下
3.将’https://blog.treelo.xin/cool/sitetime.js'另存在主题目录/source/下
4.修改sitetime.js参数
5.在主题目录/layout/_partial/footer.ejs文件中引入

<!-- 点击特效，输入特效 运行时间 -->
<script type="text/javascript" src="/cool/cooltext.js"></script>
<script type="text/javascript" src="/cool/clicklove.js"></script>
<script type="text/javascript" src="/cool/sitetime.js"></script>

6.在主题目录/layout/_partial/footer.ejs文件中上方添加

<div id="sitetime"></div>