Hexo博客Ayer主题自定义配置

Ayer主题,下面是我的部分配置,可以参考,希望能帮到你😋

1 说说

2 统计

3 代码高亮 Highlight.js

4 封面标题闪烁

5 EVANYOU三角彩带背景

6 Valine评论框加背景

7 搞笑标题

8 鼠标点击显示文字

9 底部小牌子

10 运行天数

11 自我介绍botui机器人

12 谷歌小恐龙游戏

13 百度推送

14 二级导航

15 Hexo插件

16 总结链接

1 说说

官方文档:https://artitalk.js.org/

路径:【Hexo\source\shuoshuo\index.md】

---
title: shuoshuo
date: 
layout: "shuoshuo"
---

路径:【Hexo\themes\ayer\layout\shuoshuo.ejs】


<div class="shuoshou-center ">

    <style type="text/css">
            #contentss {
                position: relative;
                max-width: 800px;
                margin:0 auto;
            }
    </style>

    <h1 class="page-type-title" style="border-left:0;text-align:center;" itemprop="name">说   说</h1>

    <div id="contentss">

      <script>
        var img = "https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/images/%E5%A4%B4%E5%83%8F.png"; //说说旁边显示的头像
        var appID = "V2cHEUQkT7eTM0IvmkhhzvYU-MdYXbMMI";
        var appKEY = "rDRkfX2SKy9FHJlDHWRQH4vY";
        var per = "5"; //每页显示说说的数量
        var username = "XXXZhy"; //Leancloud中设置的用户名
        var placeholder1="请发表你的感言!"; //在编辑说说的输入框中的占位符
        var placeholder2="头像URL";  //在编辑密码的输入框中的占位符
        var lazy = 1; //是否开启懒加载动画
      </script>
      <div id="artitalk_main"></div>
      <script type="text/javascript" src="https://unpkg.com/artitalk"></script>
        <!-- 自定义样式 -->
          <style>
            .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
              background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/images/shuoshuo.jpg") 0px 0px;
              color: white;
            }
            .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
              border-right-color:  rgba(255, 165, 150, 0.5);
            }
            .cbp_tmtimeline>li .cbp_tmlabel {
              background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("h"), url("https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/images/shuoshuo.jpg") 0px 0px;
              color: white;
            }
            .cbp_tmtimeline>li .cbp_tmlabel:after {
              border-right-color:  rgba(0, 228, 255, 0.35);
            }
            .button {
              background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/images/shuoshuo.jpg") 0px 0px;
              color: white;
            }

          </style>
          <!-- 自定义样式.end -->

    </div>
</div>

当自定义样式中的url连接为空,就是透明效果。

【Hexo\themes\ayer\layout\_partial\head.ejs】添加,如果已经添加了jquery,就可以不再添加了。

<!-- jquery,懒加载、统计、说说需要的jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2 统计

路径:【Hexo\source\analytics\index.md】

---
title: analytics 
date: 
layout: "analytics"
---

路径:【Hexo\themes\ayer\layout\analytics.ejs】

<div class="pattern-center-blank">
</div>
<div class="pattern-center ">
  <div class="pattern-attachment-img">

  </div>
        <style type="text/css">
                #contentss {
                    position: relative;
                    width: 800px;
                    height: 950px;
                    max-height: 1200px;
                    margin: 15px;
                    padding-top: 15px;
                    text-align: center;
                    border: 0;
                    border-radius: 10px;
                    color: rgba(0, 0, 0, .87);
                    background: #fff 50%;
                    background-size: cover;
                    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
                    margin:0 auto;
                }
            </style>
  <header class="pattern-header ">
    <h1 class="page-type-title" style="border-left:0;text-align:center;" itemprop="name">
  文章数据统计
</h1>
  </header>
</div>
<div id="contentss">
<%- partial('_widget/post-charts') %>
</div>

路径:【Hexo\themes\ayer\layout\_widget\post-charts.ejs】

<!-- 百度统计——文章统计 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/js/echarts.min.js"></script>

<style type="text/css">
    #posts-chart,
    #categories-chart,
    #tags-chart {
        width: 100%;
        height: 300px;
        margin: 0.5rem auto;
        padding: 0.5rem;
    }
</style>

<div id="postCharts" class="post-charts">
    <div class="title center-align" data-aos="zoom-in-up">
    </div>
    <div class="row">
        <div class="chart col s12 m6 l4" data-aos="zoom-in-up">
            <div id="posts-chart"></div>
        </div>

        <div class="chart col s12 m6 l4" data-aos="zoom-in-up">
            <div id="categories-chart"></div>
        </div>

        <div class="chart col s12 m6 l4" data-aos="zoom-in-up">
            <div id="tags-chart"></div>
        </div>
    </div>
</div>


<script>
    let postsChart = echarts.init(document.getElementById('posts-chart'));
    let categoriesChart = echarts.init(document.getElementById('categories-chart'));
    let tagsChart = echarts.init(document.getElementById('tags-chart'));

    <%
    /* calculate postsOption data. */
    var startDate = moment().subtract(1, 'years').startOf('month');
    var endDate = moment().endOf('month');

    var monthMap = new Map();
    var dayTime = 3600 * 24 * 1000;
    for (var time = startDate; time <= endDate; time += dayTime) {
        var month = moment(time).format('YYYY-MM');
        if (!monthMap.has(month)) {
            monthMap.set(month, 0);
        }
    }

    // post and count map.
    site.posts.forEach(function (post) {
        var month = post.date.format('YYYY-MM');
        if (monthMap.has(month)) {
            monthMap.set(month, monthMap.get(month) + 1);
        }
    });

    // xAxis data and yAxis data.
    var monthArr = JSON.stringify([...monthMap.keys()]);
    var monthValueArr = JSON.stringify([...monthMap.values()]);
    %>

    let postsOption = {
        title: {
            text: '文章发布统计图',
            top: 0,
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: <%- monthArr %>
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '<%- __("postsNumberName")  %>',
                type: 'line',
                color: ['#6772e5'],
                data: <%- monthValueArr %>,
                markPoint: {
                    symbolSize: 45,
                    color: ['#fa755a','#3ecf8e','#82d3f4'],
                    data: [{
                        type: 'max',
                        itemStyle: {color: ['#3ecf8e']},
                        name: '<%- __("maximum")  %>'
                    }, {
                        type: 'min',
                        itemStyle: {color: ['#fa755a']},
                        name: '<%- __("minimum")  %>'
                    }]
                },
                markLine: {
                    itemStyle: {color: ['#ab47bc']},
                    data: [
                        {type: 'average', name: '<%- __("average")  %>'}
                    ]
                }
            }
        ]
    };

    <%
    /* calculate categoriesOption data. */
    var categoryArr = [];
    site.categories.map(function(category) {
        categoryArr.push({'name': category.name, 'value': category.length})
    });

    var categoryArrJson = JSON.stringify(categoryArr);
    %>

    let categoriesOption = {
        title: {
            text: '文章分类统计图',
            top: 1,
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '<%- __("categories")  %>',
                type: 'pie',
                radius: '50%',
                color: ['#6772e5', '#ff9e0f', '#fa755a', '#3ecf8e', '#82d3f4', '#ab47bc', '#525f7f', '#f51c47', '#26A69A'],
                data: <%- categoryArrJson %>,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    <%
    /* calculate tagsOption data. */
    // get all tags name and count,then order by length desc.
    var tagArr = [];
    site.tags.map(function(tag) {
        tagArr.push({'name': tag.name, 'value': tag.length});
    });
    tagArr.sort((a, b) => {return b.value - a.value});

    // get Top 10 tags name and count.
    var tagNameArr = [];
    var tagCountArr = [];
    for (var i = 0, len = Math.min(tagArr.length, 10); i < len; i++) {
        tagNameArr.push(tagArr[i].name);
        tagCountArr.push(tagArr[i].value);
    }

    var tagNameArrJson = JSON.stringify(tagNameArr);
    var tagCountArrJson = JSON.stringify(tagCountArr);
    %>

    let tagsOption = {
        title: {
            text: 'Top10标签统计图 ',
            top: 2,
            x: 'center'
        },
        tooltip: {},
        xAxis: [
            {
                type: 'category',
                data: <%- tagNameArrJson %>
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                type: 'bar',
                color: ['#82d3f4'],
                barWidth : 18,
                data: <%- tagCountArrJson %>,
                markPoint: {
                    symbolSize: 45,
                    data: [{
                        type: 'max',
                        itemStyle: {color: ['#3ecf8e']},
                        name: '<%- __("maximum")  %>'
                    }, {
                        type: 'min',
                        itemStyle: {color: ['#fa755a']},
                        name: '<%- __("minimum")  %>'
                    }],
                },
                markLine: {
                    itemStyle: {color: ['#ab47bc']},
                    data: [
                        {type: 'average', name: '<%- __("average")  %>'}
                    ]
                }
            }
        ]
    };

    // render the charts
    postsChart.setOption(postsOption);
    categoriesChart.setOption(categoriesOption);
    tagsChart.setOption(tagsOption);
</script>

【Hexo\themes\ayer\layout\_partial\head.ejs】添加,如果已经添加了jquery,就可以不再添加了。

<!-- jquery,懒加载、统计、说说需要的jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3 代码高亮 Highlight.js

路径:【Hexo\themes\ayer\layout\_partial\head.ejs】

<!-- Highlight.js -->
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/9.18.1/styles/a11y-dark.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>  hljs.initHighlightingOnLoad();</script>

最后在<script></script>中加入hljs.initHighlightingOnLoad();初始化函数。

我在本文章md的代码框里加了<script> hljs.initHighlightingOnLoad();</script>但是却不显示,这可能是Highlight.js的bug,生成页面后调用了,所以<script> </script>看着中间是空白的。如果有谁能解决留个言吧!

再将Hexo根目录的_config.yml中的highlight关闭:

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

4 封面标题闪烁

【Hexo\themes\ayer\layout\_partial\head.ejs】添加

<!-- 封面标闪烁 -->
<link rel="stylesheet" href="/css/zhyBlogTitle.css">

【Hexo\themes\ayer\source\css文件夹】添加【zhyBlogTitle.css】

/*网站标题鼠标停留闪烁*/    
.center-text{margin:auto;font-family:'Ubuntu',sans-serif;font-size:80px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.glitch{position:relative;color:#fff;mix-blend-mode:lighten}
.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;width:100%;background:rgba(0,0,0,0);clip:rect(0,0,0,0)}
.glitch:before{left:-1px;text-shadow:1px 0 #ff3f1a}
.glitch:after{left:1px;text-shadow:-1px 0 #00a7e0}
.glitch:hover:before{text-shadow:4px 0 #ff3f1a;animation:glitch-loop-1 .8s infinite ease-in-out alternate-reverse}
.glitch:hover:after{text-shadow:-5px 0 #00a7e0;animation:glitch-loop-2 .8s infinite ease-in-out alternate-reverse}
@-webkit-keyframes glitch-loop-1{0%{clip:rect(36px,9999px,9px,0)}25%{clip:rect(25px,9999px,99px,0)}50%{clip:rect(50px,9999px,102px,0)}75%{clip:rect(30px,9999px,92px,0)}100%{clip:rect(91px,9999px,98px,0)}}
@keyframes glitch-loop-1{0%{clip:rect(36px,9999px,9px,0)}25%{clip:rect(25px,9999px,99px,0)}50%{clip:rect(50px,9999px,102px,0)}75%{clip:rect(30px,9999px,92px,0)}100%{clip:rect(91px,9999px,98px,0)}}
@-webkit-keyframes glitch-loop-2{0%{top:-1px;left:1px;clip:rect(65px,9999px,119px,0)}25%{top:-6px;left:4px;clip:rect(79px,9999px,19px,0)}50%{top:-3px;left:2px;clip:rect(68px,9999px,11px,0)}75%{top:0;left:-4px;clip:rect(95px,9999px,53px,0)}100%{top:-1px;left:-1px;clip:rect(31px,9999px,149px,0)}}
@keyframes glitch-loop-2{0%{top:-1px;left:1px;clip:rect(65px,9999px,119px,0)}25%{top:-6px;left:4px;clip:rect(79px,9999px,19px,0)}50%{top:-3px;left:2px;clip:rect(68px,9999px,11px,0)}75%{top:0;left:-4px;clip:rect(95px,9999px,53px,0)}100%{top:-1px;left:-1px;clip:rect(31px,9999px,149px,0)}}

【Hexo\themes\ayer\layout\_partial\ayer.ejs】添加

<!-- 特效标题 <h1><a href="<%- url_for() %>"><%= config.title %></a></h1> -->
<h1 class="center-text glitch" data-text="XXXZhy丶Blog"><%= config.title %></h1>

data-text属性改成自己的网页的

5 EVANYOU三角彩带背景

5.1 我的引入位置

路径:【Hexo\themes\ayer\layout\layout.ejs】

<%- partial('_partial/head') %>
<body>
  <div id="app">
    <main class="content on">
      <%- body %>
      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
      <div class="float_btns">
        <%- partial('_partial/totop') %>
      </div>
    </main>
    <aside class="sidebar on">
      <%- partial('_partial/sidebar') %>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <%- partial('_partial/modal') %>
    <%- partial('_partial/after-footer') %>

    <% if (theme.music&&theme.music.enable){ %>
    <%- partial('_partial/music') %>
    <% } %>
  </div>
  <!-- 三角彩带背景 -->
  <canvas id="evanyou-canvas" style="opacity: 0.3; position: fixed; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; pointer-events: none;"></canvas>
  <script src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/js/evanyou_canvas.js"></script>
</body>
</html>

5.2 原本例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas></canvas>
</body>
<script>
var c = document.getElementsByTagName('canvas')[0],
    x = c.getContext('2d'),
    pr = window.devicePixelRatio || 1,
    /*devicePixelRatio
     *devicePixelRatio = screenPhysicalPixels/deviceIndependentPixels
     *eg.iPhone4s,Resolution:960*640
     *   screenPhysicalPixels=640px
     *   deviceIndependentPixels=320px
     *   devicePixelRatio=640/320=2
     *You need set diff-size imgs to fit the devicePixelRatio.
     */
    w = window.innerWidth,
    h = window.innerHeight,
    f = 90, // InitialDistance
    q,
    z = Math.random,
    r = 0
    u = Math.PI * 2,
    v = Math.cos

c.width = w * pr
c.height = h * pr
x.scale(pr, pr) // Synchronization with devicePixelRatio
x.globalAlpha = 0.6 // gloabalAlpha set or return the opacity-value of draw

function i() {
  x.clearRect(0, 0, w, h) // clear all rect
  q = [{x: 0, y: h * .7 + f},{x: 0, y: h * .7 - f}]
  while(q[1].x < w + f)d(q[0], q[1]); // w + f
}

function d(i ,j) {
  x.beginPath()
  x.moveTo(i.x, i.y)
  x.lineTo(j.x, j.y)
  var k = j.x + (z() * 2 - 0.25) * f,
  // x->[-0.25 * f, 1.75 * f]
  // x_average = 0.75 * 90 = 67.5
  // number_rects = 1080 / 67.5 = 16
      n = y(j.y)
  /*When k < 0:
  *The first rect will be invisable, it is in the window's left.
  *So we can see the first line on the window sometimes changes the initial position.
  */
  x.lineTo(k ,n)
  x.closePath()
  r -= u / -50
  x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
  /*ColorSelectionAlgorithm
  * v=Math.cos,u=2*Math.Pi,r = n * Math.PI/25(n=0,1,2...)
  * (R,G,B)=>Hexadecimal === (R << 16|G << 8|B).toString(16)
  * 0xFFFFFF = 16777215
  * It's equate to:
  *   R = cos(r)*127+128
  *   G = cos(r+2*PI/3)*127+128
  *   B = cos(r+4*PI/3)*127+128
  * 128 << 16 === 128 * (2 ** 16)
   */
  x.fill()
  q[0] = q[1] // old point -> new q[0]
  q[1] = {x: k, y: n} // new point(k, n) -> new q[1]
  // constant line
}

function y(p) {
  var t = p + (z() * 2 - 1.1) * f
  return (t > h || t < 0) ? y(p) : t
  // y->[-1.1, 0.9)
}
document.onclick = i
i()
</script>
<style>
html, body {
  overflow: hidden;
  margin: 0;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /*pointer-events
   *DefaultValue: Auto
   *Inheritable: Yes
   *Animated: No
   *Computed: Appoint
   *Value: 
   *  auto
   *  none--element will never be the target of mouse-events
   *Ins:
   *BasicSupport:IE(11.0+)FF(3.6+)Chrome(4.0+)Safari(6.0)Opera(15.0)
   */
}
</style>
</html>

6 Valine评论框加背景

路径:【Hexo\themes\ayer\layout\_partial\post\valine.ejs】

<% if (!index && theme.leancloud && theme.leancloud.enable){ %>
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!-- <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/Valine.min.js'></script> -->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<!-- 评论背景 -->                                                         
<style>
    #veditor{min-height: 10rem;
        background-image: url(https://gitee.com/cungudafa/source/raw/master/img/gif/katon/pinkcoolpig.gif);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        background-color: rgba(255,255,255,0);
        resize: none;}
</style>
<!-- Valine配置 --> 
<script>
    new Valine({
        el: '#vcomments',
        enableQQ: true,
        app_id: '<%- theme.leancloud.app_id %>',
        app_key: '<%- theme.leancloud.app_key %>',
        path: window.location.pathname,
        //notify: '<%- theme.valine.notify %>',
        //verify: '<%- theme.valine.verify %>',
        avatar: '<%- theme.valine.avatar %>',
        placeholder: '<%- theme.valine.placeholder %>',
        recordIP: true,

        // 设置Bilibili表情包地址
        emojiCDN: 'https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/valine_emoticon/', 
        // 表情title和图片映射
        emojiMaps: {
            "墙角滑稽": "害怕滑稽.gif",
            "仙女下凡": "仙女下凡.webp",
            "听歌": "听歌.webp",
            "嫌弃": "嫌弃.webp",
            "害羞": "害羞.webp",
            "彩虹滑稽": "彩虹滑稽.webp",
            "快走": "快走.webp",
            "扯脸": "扯脸.webp",
            "摸脸": "摸脸.webp",
            "流汗": "流汗.webp",
            "滑滑板": "滑滑板.webp",
            "点赞": "点赞.webp",
            "转圈圈": "转圈圈.webp",
            // ... 更多表情
        }     
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>

<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>
<% } %>

7 搞笑标题

路径:【Hexo\themes\ayer\layout\_partial\head.ejs】加入

<script type="text/javascript">
// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (location.href != "https://www.xxxzhy.com/"){//主页不变
        if (document.hidden) {
            //$('[rel="icon"]').attr('href', "/funny.ico");
            document.title = '/(ㄒoㄒ)/你弄丢了XXXZhy';
            clearTimeout(titleTime);
        }else {
            //$('[rel="icon"]').attr('href', "/favicon.ico");
            document.title = '(ฅ>ω<*ฅ) 噫又好啦~' + OriginTitle;
            titleTime = setTimeout(function () {
                document.title = OriginTitle;
            }, 2000);
        }
    }
});
</script>

8 鼠标点击显示文字特效

路径:【Hexo\themes\ayer\layout\_partial\head.ejs】加入

<script type="text/javascript">
// 鼠标点击显示文字
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array
        ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "font-size":"18px",
            "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
            3000,
            function() {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});
</script>

9 底部小牌子

9.1 CSS

路径:【Hexo\themes\ayer\layout\_partial\head.ejs】加入

/*底部标签*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #ABBAC3;
  margin-bottom: 5px;
}
.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-brightgreen {
    background-color: #4DC820 !important;
}
.github-badge .bg-cyan {
    background-color: #008B8B !important;
}
.github-badge .bg-orange {
    background-color: #FFA500 !important;
}
.github-badge .bg-yellow {
    background-color: #D8B024 !important;
}
.github-badge .bg-blueviolet {
    background-color: #8833D7 !important;
}
.github-badge .bg-pink {
    background-color: #F26BAE !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-black {
    background-color: #000000 !important;
}
.github-badge .bg-blue {
    background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

9.2 HTML

路径:【Hexo\themes\ayer\layout\_partial\footer.ejs】加入

<!-- 底部标牌 -->
    <ul>
        <li>
        <div class="github-badge"><a style="color: #fff" href="https://hexo.io" target="_blank" title="Hexo强力驱动"><span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank" title="主题Ayer"><span class="badge-subject">Theme</span><span class="badge-value bg-cyan">Ayer</span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="https://www.aliyun.com" target="_blank" title="网站托管于阿里云"><span class="badge-subject">Hosted</span><span class="badge-value bg-red">Aliyun</span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="https://su.baidu.com" target="_blank" title="百度云加速整站"><span class="badge-subject">DNS</span><span class="badge-value bg-blueviolet">Baidu</span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="https://www.jsdelivr.com" target="_blank" title="jsDelivr加速静态"><span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="https://console.upyun.com/register/?invite=rkCZBHo38" target="_blank" title="又拍云全站加速"><span class="badge-subject">CDN</span><span class="badge-value bg-black"><img src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/valine_emoticon/又拍云_logo6.png" width="34px" style="margin: -1.5px auto;"/></span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="" target="_blank" title="本站访客数"><span class="badge-subject">UV</span><span class="badge-value bg-brightgreen" id="busuanzi_value_site_uv"></span></a></div>&nbsp;
        <div class="github-badge"><a style="color: #fff" href="" target="_blank" title="本站访问量"><span class="badge-subject">PV</span><span class="badge-value bg-pink" id="busuanzi_value_site_pv"></span></a></div>
        </li>
    </ul>

10 运行天数

10.1 html

路径:【Hexo\themes\ayer\layout\_partial\footer.ejs】加入

<!-- 运行天数 -->
    <ul>
        <li><span id="runtime_span"></span></li>
    </ul>

10.2 JS

路径:【Hexo\themes\ayer\layout\_partial\footer.ejs】加入,在runtime_span标签后加

<script type="text/javascript">            
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("02/22/2020 22:22:22");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "小站在各种崩坏中坚持了: " + A + "天" + B + "小时" + C + "分" + D + "秒"
    }
    show_runtime();
</script>

11 自我介绍botui机器人

路径:【FHexo\source\about\index.md】

---
title: about
date: 2020-05-09 19:23:38
---

<div class="entry-content">
  <div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
    <center>
    <p>
    </p>
    <h4>
    与&nbsp;<ruby>
    XXXZhy&nbsp;<rp>
    (</rp>
    <rp>
    )</rp>
    </ruby>
    通话中:</h4>
    <p>
    </p>
    </center>
    <bot-ui></botui>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/js/botui_xxxzhy.js"></script>

<link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">

将上面这个的botui_xxxzhy.js下载下来,里面最后的对话改成自己的,再引进便可以了。

<script src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/js/botui_xxxzhy.js"></script>

12 谷歌小恐龙游戏

<div id="container"></div>
<script src="https://cdn.jsdelivr.net/gh/XXXZhy/Blog_Image/js/runner.js"></script>
<script>
 initRunner('#container');
function cancelSpace(e){
    var e = e|| window.event;  
    var elm = e.srcElement || e.target;
    var key = e.keyCode || e.charCode;
    if(key == 32){     
        if(elm.tagName.toLowerCase()=="input" && elm.type.toLowerCase()=="text" || elm.tagName.toLowerCase() == "textarea"){   
            return;         
        }  
        if(window.event){         
            e.returnValue = false;    
        }  
        else{      
            e.preventDefault();      
        }      
    }
}
document.onkeypress=cancelSpace;
</script>

13 百度推送

13.1 自动推送

【Hexo\themes\ayer\layout\_partial\head.ejs】添加

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

13.2 主动推送

作者:https://github.com/huiwang/hexo-baidu-url-submit

13.2.1 npm

npm install hexo-baidu-url-submit --save

13.2.2 配置_config.yml文件

baidu_url_submit:
  count: 2 ## 提交最新的一个链接
  host: www.xxxzhy.com ## 在百度站长平台中注册的域名
  token: XXXXXXXXXX ## 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

13.3.3 检查url

其次,记得查看_config.yml文件中url的值, 必须包含是百度站长平台注册的域名(一般有www), 比如:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.blogzhy.top
root: / #gitee用:/blog/
permalink: :year/:month/:day/:title/
permalink_defaults:

13.3.4 加入deploy

deploy:
- type: git
  repo: [email protected]:/www/repo/hexoBlog.git
  branch: master
- type: baidu_url_submitter

13.3.5 实现原理

推送功能的实现,分为两部分:

新链接的产生,hexo generate会产生一个文本文件,里面包含最新的链接
新链接的提交,hexo deploy会从上述文件中读取链接,提交至百度搜索引擎。

13.3.6 成功截图

14 二级导航

作者:MJ’s Blog,原文:https://justlovesmile.top/2020/06/17/hexo添加二级菜单/

【Hexo\themes\ayer\layout\_partial\sidebar.ejs】

<button class="navbar-toggle"></button>
<nav class="navbar">
  <% if (theme.logo){ %>
  <div class="logo">
    <a href="<%- url_for() %>"><img src="<%- theme.logo %>" alt="<%= config.title %>"></a>
  </div>
  <% } %>
  <ul class="nav nav-main">
    <% for (var i in theme.menu){ %>
    <li class="nav-item">
    <!-- 找到这里,添加代码 -->
      <a class="nav-item-link" href="<%- url_for(theme.menu[i].path) %>"><%= i %></a>      
            <% if (theme.menu[i].submenus) { %>
            <ul class="sub-menu">
              <% for (var submenu in theme.menu[i].submenus){ %>
                <li>
                  <small><a class="nav-item-link" href="<%- url_for(theme.menu[i].submenus[submenu].path) %>"><%= submenu %>
                  </a></small>
                </li>
              <% } %>
            </ul>
          <% } %>
    <!-- 到这里结束 -->
    </li>
    <% } %>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <% if (theme.search){ %>
      <a class="nav-item-link nav-item-search"  title="<%= __('search') %>">
        <i class="ri-search-line"></i>
      </a>
      <% } %>
      <% if (theme.rss){ %>
      <a class="nav-item-link" target="_blank" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>">
        <i class="ri-rss-line"></i>
      </a>
      <% } %>
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <%- partial('post/search') %>
</div>

<!-- 二级导航CSS -->
<style>
.nav-main li ul{
    display: none;
}
.nav-main li:hover ul{
    display:block;
}
.sub-menu{
    position: absolute;
    background: #fff;
    padding: 5px;
    width: 8rem;
    z-index:1000;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 1px 40px -8px rgba(0,0,0,.5);
    -webkit-animation: fadeInUp .3s .1s ease both;
    list-style:none;
}
.nav-main li ul::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}
</style>

最后是css可以自行更改或者换到其他地方去,我就直接偷懒了。

【Hexo\themes\ayer\_config.yml】

# 侧边栏菜单
menu:
  主页: { path: / }                    #原本是 /
  归档: { path: /archives,submenus: {  #有二级的地方加:submenus:{}
      分类: { path: /categories },     #原本是 /categories
      标签: { path: /tags }            #原本是 /tags
        } }      
  网盘: { path: https://googledrive.blogzhy.top/ }    
  说说: { path: /shuoshuo }
  留声: { path: /musicList }
  友链: { path: /friendlink }
  关于: { path: /about  }
  统计: { path: /analytics  }
  导航: { path: /WebNav.html,submenus: {  #有二级的地方加:submenus:{}
      github: { path: https://github.com/XXXZhy },
      gitee: { path: https://gitee.com/XXXZhy },
      leancloud: { path: https://www.leancloud.cn/ },
      评论管理: { path: https://server.xxxzhy.com/ },
        } }

15 Hexo插件

15.1 git推送

npm install hexo-deployer-git --save

15.2 站内搜索

npm install hexo-generator-searchdb --save
# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html

15.3 RSS订阅

npm install hexo-generator-feed --save
feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
    order_by: -date

15.4 文章顶置

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
index_generator:
  path: ''
  per_page: 10
  order_by: -date

15.5 文章加密

npm install --save hexo-blog-encrypt

快速使用

---
title: Hello World
date: 2016-03-30 21:18:02
password: mikemessi
---

配置_config.yml文件

# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

15.6 页内音乐播放器

pm install --save hexo-tag-aplayer

公式

<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

配置_config.yml文件

aplayer:
  meting: true

15.7 看板娘

npm install --save hexo-helper-live2d

配置_config.yml文件

##看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hijiki  #模板目录,在node_modules里
  display:
    position: left
    width: 150 
    height: 300
    hOffset: 80
    vOffset: -70
  mobile:
    show: true #是否在手机进行显示
    scale: 0.5  

总结链接:

基于LeanCloud的说说/微语的JS——说说:https://artitalk.js.org/

Valine评论系统:https://valine.js.org/

Valine评论邮件系统:https://github.com/DesertsP/Valine-Admin

Valine评论邮件系统改进:https://www.antmoe.com/posts/2380732b/index.html

文章数据分析:https://cndrew.cn/2020/03/03/post-charts/

自我介绍聊天机器人聊天:

小标牌:https://shields.io/

静态图标库:http://www.fontawesome.com.cn/

动态图标库:https://l-lin.github.io/font-awesome-animation/

打字机特效:https://github.com/mattboldt/typed.js/

全站黑白滤镜:https://m1314.cn/375.html

网站运行时间:https://m1314.cn/140.html

鼠标点击特效:https://github.com/djzhao627/JSClickBubble

背景樱花特效:https://hylpq.com/archives/sakuracss3/

鼠标触碰音效:https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/

博客念两句诗:https://m1314.cn/210.html

懒加载:

二级导航:https://justlovesmile.top/2020/06/17/hexo添加二级菜单/

服务器监控:

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

客官,赏一瓶怡宝吧。

支付宝
微信