用HEXO打造更个性化的个人博客4

第四波攻势来临啦~
还是对hexo-next做优化、美化♣️
这次我想加入折叠功能、鼠标放置后图片放大、分类和标签界面显示年份、可爱的十二生肖、分类层级显示、文章阅读后评分、侧栏加音乐

Todo list:

  • 折叠功能
  • 鼠标放置后图片放大
  • 分类和标签界面显示年份
  • 年份后显示十二生肖
  • 分类&标签层级显示
  • 文章阅读后评分
  • 侧栏加音乐
  • live2d看板娘
  • 推荐两个emoji的复制网站

让我为你点一首歌吧!♪一直陪着你ヾ(·▽·ヾ)
开始静静享受歌曲吧!

折叠功能

有大段的东西想要放上去,但又不想占据大量的位置。折叠是最好的选择。2

(其实也可以用tabs功能,请看3)

下面在Hexo的主题上定制添加折叠功能。
next主题的主要js位于themes/next/source/js/src/post-details.js,在里面找合适的位置,添加如下代码:

1
2
3
4
5
6
7
8
$(document).ready(function(){
$(document).on('click', '.fold_hider', function(){
$('>.fold', this.parentNode).slideToggle();
$('>:first', this).toggleClass('open');
});
//默认情况下折叠
$("div.fold").css("display","none");
});

在主题的scripts下添加一个tags.js, 位于themes/next/scripts/tags.js

themes/next/scripts/tags.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
@haohuawu
修复 Nunjucks 的 tag 里写 ```代码块```,最终都会渲染成 undefined 的问题
https://github.com/hexojs/hexo/issues/2400
*/
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
data.content = data.content.replace(rEscapeContent, function(match, content) {
return escapeContent(content);
});
return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
data.content = data.content.replace(rPlaceholder, function() {
return cache[arguments[1]];
});
return data;
});

再继续添加一个fold.js:

themes/next/scripts/fold.js
1
2
3
4
5
6
7
8
/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
var text = args[0];
if(!text) text = "点击显/隐";
return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

最后,添加几个自定义样式,

位置themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11

.hider_title{
font-family: "Microsoft Yahei";
cursor: pointer;
}
.close:after{
content: "▼";
}
.open:after{
content: "▲";
}

使用方法:在我们需要折叠的地方前后添加便签,示例用法:

1
2
3
{% fold 点击显/隐内容 %}
something you want to fold, include code block.
{% endfold %}

分类和标签界面显示年份

修改分类年份

打开 \themes\next\layout\category.swig

查找

1
2
3
{% for post in page.posts %}
{{ post_template.render(post) }}
{% endfor %}

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
{% for post in page.posts %}
{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
</div>
{% endif %}
{# endshow #}
{{ post_template.render(post) }}
{% endfor %}

添加

1
2
3
4
5
6
7
{% block script_extra %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}

修改标签年份

打开\themes\next\layout\tag.swig
查找:

1
2
3
{% for post in page.posts %}
{{ post_template.render(post) }}
{% endfor %}

改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
{% for post in page.posts %}
{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
</div>
{% endif %}
{# endshow #}
{{ post_template.render(post) }}
{% endfor %}

添加

1
2
3
4
5
6
7
{% block script_extra %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}

修改分类&标签层级显示

分类层级

\themes\next\layout\_macro\post.swig查找1

1
{{ __('symbol.comma') }}

将其改为

1
{{ __('>') }}

则显示如下:

分类于:xx>>xx

标签层级

\themes\next\source\css\_custom\custom.styl中添加:

1
2
3
4
.category-list ul
list-style none
li:before
content '>> '

则显示如下:

侧栏加音乐「aplayer」

https://qianling.pw/hexo-optimization/#23-%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%B7%BB%E5%8A%A0-APlayer

打开 \themes\next\source\js\src\custom\

放置 APlayer.min.js
复制这个页面的内容

打开 \themes\next\layout\_custom\
在 sidebar.swig写入 

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
<div id="aplayer" class="aplayer"></div>
<script src="/js/src/custom/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
element: document.getElementById('aplayer'), // Optional, player element
narrow: false, // Optional, narrow style
autoplay: false, // Optional, autoplay song(s), not supported by mobile browsers
showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
mutex: true, // Optional, pause other players when this player playing
theme: '#e6d0b2', // Optional, theme color, default: #b7daff
mode: 'random', // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
preload: 'metadata', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
listmaxheight: '513px', // Optional, max height of play list
music: [{
title: '双笙 囧菌 - 世末歌者',
author: '双笙 囧菌',
url: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%8F%8C%E7%AC%99%20%E5%9B%A7%E8%8F%8C%20-%20%E4%B8%96%E6%9C%AB%E6%AD%8C%E8%80%85.mp3',
pic: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%8F%8C%E7%AC%99%20%E5%9B%A7%E8%8F%8C%20-%20%E4%B8%96%E6%9C%AB%E6%AD%8C%E8%80%85.webp',
}, {
title: '幹物女(WeiWei)',
author: '封茗囧菌',
url: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%B0%81%E8%8C%97%E5%9B%A7%E8%8F%8C%20-%20%E5%B9%B9%E7%89%A9%E5%A5%B3(WeiWei).mp3',
pic: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%B0%81%E8%8C%97%E5%9B%A7%E8%8F%8C%20-%20%E5%B9%B9%E7%89%A9%E5%A5%B3(WeiWei).webp',
}]
});
</script>

live2d看板娘:star2:

像我博客右下角的小人,有至少三种以上的方式,就来按照从简单到难、从随波逐流到自定义来介绍吧!

直接引用

没错,就是直接引用别的大大的【看板娘】,他们已经写好了代码,我们就不需要再写、添加到文件夹里面的,只需要在themes/next/layout/_custom/head.swig里面添加这些代码,就是引用了。

优点是简单、方便,推荐如我一样的小白,或者只需要最基础的功能的朋友使用
缺点是自定义程度小,比如我想修改看板娘说的话等等,都很难。

位置:themes/next/layout/_custom/head.swig
1
2
3
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" />
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

安装插件

hexo-next有一个插件,这里是安装live2d的插件!安装就可以用了。
这里插件很多哟!

优点是相对来说比较简单,可以换模型
缺点是插件不带对话等功能,就相当于一个不会说话的漂亮娃娃
然鹅,一个不会说话、表达的娃娃怎么比得上会聊天、会撩的看板娘呢???所以,我就使劲折腾着……

自定义

下载大佬[3]的文件后,自己去折腾吧(╭(╯╰)╮我才不会告诉你,我个小白折腾了好久,虽然有成功过,但是最后发现加载太坑了我对自定义已经不抱太大希望了!)

推荐几枚大佬:

  1. https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
  2. https://github.com/stevenjoezhang/live2d-widget
  3. https://www.fghrsh.net/post/123.html

优点是自定义程度大,推荐有丰富代码经验的人食用
缺点是会导致博客加载速度过慢

emoji🤕🤜🏻😹🤑👿表😬🙄👽🤝情🤤🤐👻😅🤯帝😧☠😦😂

我看到有人会安装插件,然鹅,我的不需要安装插件也可以使用emoji,可能大家也不需要安装那些emoji插件哦!所以,看到喜欢的、想用emoji,可以到下面的网站去copy哦!
不过,我的网站显示的emoji可能会不同别太介意啦

  • https://www.emojicopy.com/
  • https://www.webfx.com/tools/emoji-cheat-sheet/

    1. 1.https://qianling.pw/hexo-optimization/#8-%E4%BF%AE%E6%94%B9%E5%88%86%E7%B1%BB%E5%B1%82%E7%BA%A7%E6%98%BE%E7%A4%BA
    2. 2.https://blog.rmiao.top/hexo-fold-block/
    3. 3.https://github.com/stevenjoezhang/live2d-widget
本文结束咯(o゚▽゚)o感谢您的阅读