Eagmi

hexo增加个性插件

  • ~12.46K 字

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

Todo list:

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

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

Clsr (Aash Mehta Flip) - The Chainsmokers / Aash Mehta / Halsey

Hey, I was doing just fine before I met you (嘿 遇到你之前我一切安好)

I drink too much and that’s an issue but I’m okay (虽酩酊大醉 看上去一团糟 但我感觉很好)

Hey, you tell your friends it was nice to meet them (嘿 告诉你的朋友很高兴和他们相遇)

But I hope I never see them again (但我希望再也看不到他们的身影)

I know it breaks your heart (我知道这会伤了你的心)

Moved to the city in a broke down car (驾着一辆破汽车 驶向一座陌生的城市)

And four years, no calls (一去四年 杳无音讯)

Now you’re looking pretty in a hotel bar (现在你的美貌闪耀在酒吧的聚光灯下)

And I can’t stop, no, I can’t stop (我忍俊不禁浮想联翩)

So baby pull me closer in the backseat of your Rover (宝贝 同我咫尺之遥 在你后座上耳语呢喃 如胶似漆)

That I know you can’t afford (缠绵于这辆永远付不起的路虎车上)

Bite that tattoo on your shoulder (让我的舌尖滑过你肩上的纹身)

Pull the sheets right off the corner (迫不及待的推开车里的钢板)

Of the mattress that you stole (放上舒适的床垫让你我共缠绵)

From your roommate back in Boulder (那张你从博尔德的室友那偷来的床垫)

We ain’t ever getting older (今夜我们激情永葆)

You look as good as the day I met you (回首过去我遇到你的那日多美好)

I forget just why I left you, I was insane (我也忘记我为何离你而去 大概是脑子一热)

Stay and play that Blink-182 song (彻夜未眠 放着Blink-182（乐队）的歌)

That we beat to death in Tucson, okay (那曲我们曾在图森恣意敲打的节奏)

I know it breaks your heart (我知道这会伤了你的心)

Moved to the city in a broke down car (驾着一辆破汽车 驶向一座陌生的城市)

And four years, no calls (一去四年 杳无音讯)

Now I’m looking pretty in a hotel bar (现在我的闪耀在酒吧的聚光灯下)

And I can’t stop (我忍俊不禁)

No, I can’t stop (浮想联翩)

So baby pull me closer in the backseat of your Rover (宝贝 同我咫尺之遥 在你后座上耳语呢喃 如胶似漆)

That I know you can’t afford (缠绵于这辆永远付不起的路虎车上)

Bite that tattoo on your shoulder (让我的舌尖滑过你肩上的纹身)

Pull the sheets right off the corner (迫不及待的推开车里的钢板)

Of the mattress that you stole (放上舒适的床垫让你我共缠绵)

From your roommate back in Boulder (那张你从博尔德的室友那偷来的床垫)

We ain’t ever getting older (今夜我们激情永葆)

Baby pull me closer in the backseat of your Rover (宝贝 同我咫尺之遥 在你后座上耳语呢喃 如胶似漆)

That I know you can’t afford (缠绵于这辆永远付不起的路虎车上)

Bite that tattoo on your shoulder (让我的舌尖滑过你肩上的纹身)

Pull the sheets right off the corner (迫不及待的推开车里的钢板)

Of the mattress that you stole (放上舒适的床垫让你我共缠绵)

From your roommate back in Boulder (那张你从博尔德的室友那偷来的床垫)

We ain’t ever getting older (今夜我们激情永葆)

We ain’t ever getting older (no we ain’t ever getting older) (我们的青春永不褪色…)

We ain’t ever getting older (no we ain’t ever getting older) (我们的青春永不褪色…)

We ain’t ever getting older (we ain’t ever getting older) (我们的青春永不褪色…)

We ain’t ever getting older (no we ain’t ever getting older) (我们的青春永不褪色…)

00:00 / 00:00

折叠功能

有大段的东西想要放上去，但又不想占据大量的位置。折叠是最好的选择。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

复制

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
themes/next/scripts/tags.js
/*
  @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:

复制

1
2
3
4
5
6
7
8
9
themes/next/scripts/fold.js
/* 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});

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

复制

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

.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 '>> '

则显示如下：
img

侧栏加音乐「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里面添加这些代码，就是引用了。

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

复制

1
2
3
4
位置：themes/next/layout/_custom/head.swig
<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可能会不同别太介意啦

本文结束咯(oﾟ▽ﾟ)o感谢您的阅读

欢迎你来阅读相关文章哦(๑•̀ㅂ•́)و✧

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可