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

发表于 · 更新于 · 分类于
· 本文字数： 9.2k · 阅读时长 ≈ 8 分钟

第四波攻势来临啦~
还是对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感谢您的阅读
欢迎你来阅读相关文章哦(๑•̀ㅂ•́)و✧