Hexo博客Material-X主题个性化

Hexo博客Material-X主题个性化

文章列表扭七扭八

1. 在主题目录下/ayout/_partial/post.ejs里添加class=’banner’

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

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

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

   添加抖动元素(块级)

3. 将以下代码添加至主题目录/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;
   }

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

   添加血小板

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

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

7. 在主题目录/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>

8. 为了移动端更好的阅读效果，请将以下代码添加至主题目录/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: 80px;
           top: 15px;
       }
     }
     #live2d{
         width: 200px;
         height: 170px;
         bottom: -80px;
         left: 43px;
     }
   }

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

1. 将’https:/jiaobantang.github.io/cool/clicklove.js’另存在主题目录/source/下
2. 将’https:/jiaobantang.github.io/cool/cooltext.js’另存在主题目录/source/下
3. 将’https:/jiaobantang.github.io/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>