【置顶】Hexo更新日志

一、添加emoji显示功能

1
2
3
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

一般需要卸载原来的插件，但是我发现我的文件夹里并没有hexo-renderer-marked也就没有删了。

在_config.yml中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: false
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji  # add emoji
#  anchors:
#    level: 2
#    collisionSuffix: 'v'
#    permalink: false
#    permalinkClass: header-anchor
#    permalinkSymbol: ¶

由于那个链接的东西实在是太丑了，我就注释掉了😣

使用:persevere:这样的语法就可以显示上面那个表情啦。具体可以参考https://www.cnblogs.com/zhaoruiqing/articles/12870209.html

二、添加live2D

1
npm install --save hexo-helper-live2d

在_config.yml中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
live2d:
  enable: true  # 是否启动
  scriptFrom: local # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-tororo  ## 模型文件
  display:
    position: right # 定位方向 left right top bottom
    width: 150  # 小人宽度
    height: 300 #  小人高度
    hOffset: 5 # 向 偏移
    vOffset: -60  # 像 偏移
  mobile:
    show: false  # 手机端是否显示
  react:
    opacity: 1.0  # 模型透明度

再使用cmd命令下载模型

1
npm install live2d-widget-model-tororo

其他模型可以参考该仓库：https://github.com/xiazeyu/live2d-widget-models

在根目录里新建一个文件夹live2d_models，然后把模型放进去即可

三、添加音乐播放器（具有收入侧栏的功能）

事实上，我选用的主题fluid自带有aplayer音乐播放器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
aplayer:  # 音乐播放器，注意不能与 hexo-tag-aplayer 插件共用
  enable: true
  autoplay: false  # 音频自动播放
  loop: 'all'  # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'  # 播放顺序，可选值: 'list', 'random'
  theme: '#b7daff'  # 主题色
  songs:  # 歌曲列表，必须传入下列各参数，其中 url 与 cover 在本地需存于 source 目录，更多参数见文档：https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0
    - { name: 'Flaming', artist: '郑晟河', url: '/Wuhlan3/mp3/song1.mp3', cover: '/Wuhlan3/img/song1.jpg' }
    - { name: '流れ行く雲', artist: '岸部真明', url: '/Wuhlan3/mp3/song2.m4a', cover: '/Wuhlan3/img/song2.jpg' }
    - { name: '奇迹の山', artist: '岸部真明', url: '/Wuhlan3/mp3/song3.m4a', cover: '/Wuhlan3/img/song2.jpg' }
    - { name: 'Sunflower', artist: '孙培博', url: '/Wuhlan3/mp3/song5.mp3', cover: '/Wuhlan3/img/song3.jpg' }
    - { name: '少年の梦', artist: '岸部真明', url: '/Wuhlan3/mp3/song4.m4a', cover: '/Wuhlan3/img/song2.jpg' }
    - { name: 'like a star', artist: 'Youngso Kim', url: '/Wuhlan3/mp3/like a star.mp3', cover: '/Wuhlan3/img/like a star.jpg' }
    - { name: '境', artist: '刘嘉卓', url: '/Wuhlan3/mp3/境.mp3', cover: '/Wuhlan3/img/刘嘉卓.jpg' }
    - { name: '翼~you are the HERO~', artist: '押尾コータロー', url: '/Wuhlan3/mp3/wings.mp3', cover: '/Wuhlan3/img/押尾.jpg' }

只需要稍微修改一下参数就🆗啦，当然，我们会发现，播放器小框框一直显示在左下角，很碍眼。

通过该路径：\blog\themes\hexo-theme-fluid\source\css，新建一个文件custom.css，在里面放下这段代码即可。

1
2
3
4
5
6
7
8
9
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
  /* 默认情况下缩进左侧66px，只留一点箭头部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important;
  /* 鼠标悬停时左侧缩进归零，完全显示按钮 */
}

四、添加动态效果

添加动态效果的方法非常简单，在_config.yml中找到该代码块：

1
2
3
4
5
custom_js:  # 指定自定义 js 文件路径，路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js，支持列表
    - /js/dongtaicaidai.js # 动态彩带
    # - /js/bubble.js  #头部上升气泡
    #- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxuehua.js 
    #- //cdn.jsdelivr.net/gh/bynotes/texiao/source/js/daxuehua.js

可以直接按照格式调用JS代码，也可以通过本地的路径来调用JS代码

分享一个小仓库：https://cdn.jsdelivr.net/gh/bynotes/texiao@latest/source/js/

五、给Fluid添加一言

首先，我们如何进行句子的筛选呢？

句子类型（参数）

参数 说明
a 动画
b 漫画
c 游戏
d 文学
e 原创
f 来自网络
g 其他
h 影视
i 诗词
j 网易云
k 哲学
l 抖机灵
其他 作为 动画 类型处理

可选择多个分类，例如： ?c=a&c=c

最终我是用的是"https://v1.hitokoto.cn?c=i&max_length=20"

之后，我们只需要修改_config.yml就可以设置slogan为一言：

1
2
3
4
5
6
7
8
9
slogan:
  enable: true
  text: '少年何妨梦摘星,敢挽桑弓射玉衡'
  api:
    enable: true
    url: "https://v1.hitokoto.cn?c=i&max_length=20"
    method: "GET"
    headers: {}
    keys: ['hitokoto']

但是这样子限制得比较死，且只能够打印出诗句，而没有诗人和出处。可以通过修改typed.ejs来解决。该文件位于hexo-theme-fluid\layout\_partials\plugins\typed.ejs，修改为如下代码：

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
<% if(theme.fun_features.typing.enable && in_scope(theme.fun_features.typing.scope) && page.subtitle !== false) { %>
  <%- js_ex(theme.static_prefix.typed, '/typed.min.js') %>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      <% if (is_home() && theme.index.slogan.api && theme.index.slogan.api.enable) { %>
        jQuery.ajax({
          type: '<%= theme.index.slogan.api.method %>',
          url: '<%- theme.index.slogan.api.url %>',
          headers: <%- JSON.stringify(theme.index.slogan.api.headers || {}) %>,
          dataType: 'json',
          success: function(result) {
            var apiText;
            var hitokoto = '少年何妨梦摘星,敢挽桑弓射玉衡';
            var from = '';
            var from_who = '';
            if (result) {
              var keys = '<%= theme.index.slogan.api.keys %>'.split(',');
              if (result instanceof Array) {
                result = result[0];
              }
              for (const k of keys) {
                var value = result[k];
                if (typeof value === 'string'){
                  if(k == 'hitokoto'){
                    hitokoto = value
                  } else if (k == 'from'){
                    from = value
                  } else if (k == 'from_who'){
                    from_who = value
                  }
                }
              }
              if(from == '' || from_who == ''){
                apiText = `${hitokoto}`
              } else {
                apiText = `${hitokoto}<br>——${from_who}《${from}》`
              }
            }
            apiText ? typing(apiText) : typing(text);
          },
          error: function(xhr, status, error) {
            if (error) {
              console.error('Failed to request <%= theme.index.slogan.api.url %>:', error);
            }
            typing(text);
          }
        })
      <% } else { %>
        typing(text);
      <% } %>
    })(window, document);
  </script>
<% } %>

这里，我修改了keys的用法，所以_config.yml文件中的keys也要相应改变：

1
2
3
4
5
6
7
8
9
slogan:
  enable: true
  text: '少年何妨梦摘星,敢挽桑弓射玉衡'
  api:
    enable: true
    url: "https://v1.hitokoto.cn?c=i&max_length=20"
    method: "GET"
    headers: {}
    keys: ['hitokoto', 'from', 'from_who']

六、对文章进行加密

加入这个功能，会不会违背写博客这个初心呢？

1
2
//安装插件
yarn add hexo-blog-encrypt

修改配置文件

1
2
3
#文章加密
encrypt:
    enable: true

在文章开头加入一些信息

1
2
3
4
password: XXXXXX
message: 嘻嘻，有密码才能看喔
excerpt: 旧的文章概要
abstract: 新的文章概要
#Hexo博客相关
【置顶】Hexo更新日志
https://wuhlan3.github.io/2021/09/09/Hexo更新日志/
Author
Wuhlan3
Posted on
September 9, 2021
Licensed under