<%- partial('_partial/totop') %>
Hexo博客Ayer主题自定义配置
Ayer主题，下面是我的部分配置，可以参考，希望能帮到你
效果：https://www.xxxzhy.com
文章目录
- 1 说说
- 2 统计
- 3 代码高亮 Highlight.js
- 4 封面标题闪烁
- 5 EVANYOU三角彩带背景
-
- 5.1 我的引入位置
- 5.2 原本例子
- 6 Valine评论框加背景
- 7 搞笑标题
- 8 鼠标点击显示文字特效
- 9 底部小牌子
-
- 9.1 CSS
- 9.2 HTML
- 10 运行天数
-
- 10.1 html
- 10.2 JS
- 11 自我介绍botui机器人
- 12 谷歌小恐龙游戏
- 13 百度推送
-
- 13.1 自动推送
- 13.2 主动推送
-
- 13.2.1 npm
- 13.2.2 配置_config.yml文件
- 13.3.3 检查url
- 13.3.4 加入deploy
- 13.3.5 实现原理
- 13.3.6 成功截图
- 14 二级导航
- 15 Hexo插件
-
- 15.1 git推送
- 15.2 站内搜索
- 15.3 RSS订阅
- 15.4 文章顶置
- 15.5 文章加密
- 15.6 页内音乐播放器
- 15.7 看板娘
- 总结链接：
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="lazy">div>
<div id="artitalk">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>
div>
div>
当自定义样式中的url连接为空，就是透明效果。
【Hexo\themes\ayer\layout\_partial\head.ejs】添加，如果已经添加了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}
{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，就可以不再添加了。
<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】
<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>
再将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】添加
<%= config.title %>
data-text属性改成自己的网页的
5 EVANYOU三角彩带背景
5.1 我的引入位置
路径：【Hexo\themes\ayer\layout\layout.ejs】
<%- partial('_partial/head') %>
<%- body %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<%- partial('_partial/modal') %>
<%- partial('_partial/after-footer') %>
<% if (theme.music&&theme.music.enable){ %>
<%- partial('_partial/music') %>
<% } %>