hexo Ayer主题个性化设置

换主题啦~啦啦啦啦啦

之前的NexT主题是这样的,截个图纪念一下hhhhh


☀️Ayer是个很好看很有设计感的主题,作者的教程写的非常用心,所以作者教程中已经给出的配置我就直接罗列了,有需要的可以去看作者的说明,也可以直接看主题配置文件里的注释:

  • 搜索功能,需要安装插件hexo-generator-searchdb
  • RSS订阅,需要安装插件hexo-generate-feed
  • 文章置顶,hexo-generator-index-pin-top
  • 文章加密,hexo-blog-encrypt
  • 播放音乐,hexo-tag-aplayer
  • 播放视频,hexo-tag-dplayer
  • 二次元看板娘,hexo-helper-live2d
  • 相册
  • 文章悬浮目录,tocbot解析标题
  • 百度和谷歌统计
  • busuanzi访问量统计

☀️以下是一些我自己的修改,加了一些我喜欢的或是习惯的小美化和小功能(((o(*゚▽゚*)o)))

  • github丝带
  • 下雪特效
  • 百度自动递交链接
  • live2d看板娘
  • 设置不显示版权信息
  • 自定义友链页面
  • 「阅读全文」图标定制
  • 打赏页面自定义样式
  • 邮件评论回复
  • more截断自动(有bug)
  • 文章显示leancloud阅读次数

0 github丝带

💡本博客现在没用这个啦

Ribbon或者Corners获取喜欢的样式的代码,加上自己的github地址,然后复制到/themes/ayer/layout/layout.ejs<body>标签内的开头部分

我的效果如右上角:

1 下雪特效

💡本博客现在没用这个啦

原教程:JQuery+Html5实现超真实3D雪花飞舞特效中下载snow.js文件,放在/themes/ayer/source/js/snow.js

ayer/layout/layout.ejs里在body标签内部(</body>前)添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 漂亮雪花 -->
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/snow.js"></script>
<style type="text/css">
.snow-container{
position:fixed;
top:0;left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:100001;
}
</style>
<div class="snow-container"></div>

注意此处的js路径要根据自己放的路径来,比如在NexT主题下我放在了next/source/js/src/snow.js下,那么对应的路径写的就是/js/src/snow.js

效果如图:

2 百度自动递交链接

百度收录和两年前相比真的好慢呀ORZ,不知道这玩意儿还有没有用,先加上再说吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--百度自动递交链接-->
<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>

3 live2d

💡本博客现在没用这个啦

这个网上有许多版本,我是以前下载的别人写好的一个(不是用插件的那种),如果用插件那种的话作者的文档中已经给出了一个选择:hexo-helper-live2d

这里就说明一下我调用的地方:

ayer/layout/layout.ejs里最后(</html>结束前)加上<footer></footer>标签,然后在footer标签内部加上调用live2d的代码

4 设置不显示版权信息

主题配置中的版权信息设置如下:

1
2
3
# 版权声明
# 版权声明type设定:0-关闭版权声明; 1-文章对应的md文件里有copyright: true属性,才有版权声明; 2-所有文章均有版权声明
copyright_type: 2

为了避免每个文章都写上copyright: true,肯定是选2号模式,但是这样又会有一个问题,就是如果是一些自定义的页面(友链什么的),写上版权信息就感觉怪怪的

所以这里参考no_reward的实现,在ayer/layout/_partial/article.ejs里加了个!post.no_copyright的判断条件

1
2
3
4
<!-- copyright -->
<% if (((theme.copyright_type === 2) || (theme.copyright_type === 1 && post.copyright)) && !index && !post.no_copyright){ %>

……

这样如果在copyright_type: 2模式下,md文件里有no_copyright: true,就不会显示版权信息

5 自定义友链页面

新建页面

终端输入hexo new page friends新建一个友链页面

然后修改source/friends/index.md开头,加上type

1
2
3
4
5
6
---
title: 友链
type: "friends"
no_reward: true
no_copyright: true
---

在主题配置文件的menu部分加上这个页面:

1
2
3
4
5
6
7
menu:
主页: /
归档: /archives
分类: /categories
标签: /tags
友链: /friends
关于: /about

css/js/json

然后添加source/friends/links.jsonsource/friends/friends.csssource/friends/friends.js

css内容如下,大小颜色啥的根据自己的主题调一调:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
#links{
margin-top: 5rem;
}
.links-content{
margin-top:1rem;
}
.link-navigation::after {
content: " ";
display: block;
clear: both;
}
.card {
width: 380px;
height: 70px;
font-size: 1rem;
padding: 10px 10px 10px 10px;
border-radius: 10px;
transition-duration: 0.15s;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
/*margin-bottom: 1rem;*/
display:flex;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card:nth-child(odd) {
float: left;
}
.card:nth-child(even) {
float: right;
#float: left;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.card a {
border:none;
}
.card .ava {
width: 5rem!important;
height: 5rem!important;
margin:0!important;
margin-right: 1em!important;
border-radius:4px;
}
.card .card-header {
font-style: italic;
overflow: hidden;
width: 236px;
font-size: 1.6rem!important;
}
.card .card-header a {
font-style: normal;
color: #adbbd5;
font-weight: bold;
text-decoration: none;
}
.card .card-header a:hover {
color: #8899dd;
text-decoration: none;
}
.card .card-header .info {
font-style:normal;
color:#a3a3a3;
font-size:14px;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

js内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
link = {
init:function() {
const that=this;
$.getJSON("links.json",
function(data){
that.render(data);
});
},
render:function(data){
let name,site,info,avatar,li="";
for(let i=0;i<data.length;i++){
name=data[i].name;
site=data[i].site;
info=data[i].info;
avatar=data[i].avatar;
li+='<div class="card">'+'<img class="ava" src="'+avatar+'"/><div class="card-header"><div><a href="'+site+'" target="_blank">'+name+'</a></div><div class="info">'+info+'</div></div></div>';
}
$(".link-navigation").append(li);
}
};
link.init();

source/friends/index.md中添加内容为:

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="friends.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="friends.js" type="text/javascript"></script>

<div id="links">
<div class="links-content">
<div class="link-navigation"></div>
</div>
</div>

如果出现显示不出来可以看下控制台报的啥错:如果是Uncaught ReferenceError: $ is not defined这样的错的话不要慌,可能是因为js引入顺序的问题,jquery.min.js必须在自己写的js前面引入

links.json文件格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
{
"name": "这里写名称",
"site": "https://leflacon.top/",
"info": "这里随便写写信息",
"avatar": "https://tva1.sinaimg.cn/large/006y8mN6ly1g9613jrgg4j30ku0ku452.jpg"
},
{
"name": "这里再写一个名称",
"site": "https://leflacon.top/",
"info": "这里还是随便写写信息",
"avatar": "https://tva1.sinaimg.cn/large/006y8mN6ly1g9613jrgg4j30ku0ku452.jpg"
}
]

我这显示的效果是这个样子的:

参考教程:Hexo-NexT 新增友链

6 「阅读全文」图标定制

首先在主题配置文件里可以修改文字,excerpt_link默认是“阅读更多…”

感觉原来的按钮有点呆呆的想改一改_(:з」∠)_,在ayer/source/dist/main.css里搜索article-more-link,这个就是阅读全文按钮对应的样式设置(PS:原先的css代码被压缩成一行了,不太容易读,可以用sublime的CSS Format插件👍格式化一下)

改完是这样的,我就是想加个hover,这样鼠标移上去的时候会换一下样式,有transition真是好看啊:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.articles .article-entry .article-more-link {
display: inline-block;
float: right;
background-color: #ffffff;
padding: .5rem 1rem;
border: 2px solid #555555;
border-radius: 2px;
color: #222222;
font-size: 12px;
text-decoration: none;
transition: background-color 0.3s ease-in-out 0s;
margin:20px 0px 5px 5px;
}

.articles .article-entry .article-more-link:hover {
border-color: #222222;
color: #ffffff;
background: #222222;
}

平时的样子:

鼠标放上去的样子:

7 打赏页面自定义样式

就我个人而言,感觉原来的打赏页面和整个主题的风格不是很搭呀😂所以自己改了改

原先是这样的:

themes/ayer/layout/_partial/modal.ejs

只改动了main.css里的两块:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#reward {
position: absolute;
z-index: 9999;
left: 50%;
top: 20%;
transform: translateX(-50%);
margin: 60px 0;
padding: 0 20px 20px;
/*background-color: #dbedff;*/
background-color: rgba(255,255,255,0.8);
border-radius: 30px;
box-shadow: 7px 7px 13px 7px rgba(0,0,0,0.3);
display: none
}
……
#reward .reward-p {
color: #222222;
font-weight: 700;
font-size: 18px;
text-align: center;
/*text-shadow: 1px 1px 1px #888888*/
}

改完是这个样子哒:

8 评论邮件回复

参考自这个教程:Hexo 优化 — Valine 扩展之邮件通知

因为以前NexT主题的时候就做了这个功能,都是在leancloud里设置设置就行了,这里就不重新做一遍了(选择这个主题的原因之一就是他是支持Valine的)

9 more截断自动

我不想显示全文,这样会很长,但是作者只提供了两种截断模式:

  • 一种是手动截断,每篇文章都要手动加more标记
  • 一种是excerpt_all设置成true,这样首页显示成归档

所以对于我这种又需要截断又懒得一个一个添加more标记的人来说,这两种模式都不适合,所以加一个自动截断

⚠️前排提示,我的实现是有bug的(很大很大的bug,可能还是手动添加more标记更方便,仅供参考)

写在这篇里➡️hexo的Ayer主题添加首页文章自动截断功能

实现的效果是这样的(截断200个字符,然后加上省略号):

10 文章显示leancloud阅读次数

主题中自带的阅读次数显示的是busuanzi记录的当前页面的阅读次数,因为我之前用的是leancloud的阅读数统计,所以还是想继续用那个

这个内容比较多所以另起了一篇➡️hexo的Ayer主题文章内显示leancloud阅读次数(和NexT无缝衔接)

实现的效果是这样的(只能在post里面看,index里不显示,因为我debug不出来ORZ,明明document.getElementById然后设置text了但是就是不显示啊,不会唉):


end

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

奶茶一杯 快乐起飞

支付宝
微信