Hexo+Matery-主题个性化修改二

一.添加动态诗词

​ 打开 themes/matery/source/css/matery.css 文件，有一个.bg-color 属性，修改其属性值即可，代码如下：

1
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

​ 然后再将 /themes/matery/layout/_partial/bg-cover-content.ejs 中的 <%= config.description %> 修改为 <%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>，这个使用前提是将主题配置文件的 subtitle 的值改为 false。

二.鼠标点击文字特效

​ 引入 js 文件，在主题文件下的 /source/js/ 下新建 click_show_text.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
26
27
28
29
30
31
32
var a_idx = 0;
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function () {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

三.添加鼠标彩虹星星掉落跟随效果

​ 在 themes/matery/source/js 目录下新建 cursor.js 文件。打开这个网址传送门，将内容复制粘贴到 cursor.js 即可。

​ 然后在 themes/matery/layout/layout.ejs 文件内添加下面的内容：

1
<script src="/js/cursor.js"></script>

四.鼠标点击烟花爆炸效果

​ 在 themes/matery/source/js 目录下新建 fireworks.js 文件，打开这个网址传送门，将内容复制粘贴到 fireworks.js 即可。

​ 然后再 themes/matery/layout/layout.ejs 文件内添加下面的内容：

1
2
3
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

​ 然后在 themes/matery/layout/layout.ejs 文件内添加下面的内容：

1
2
3
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

五.添加动态科技线条背景

​ 在 themes/matery/layout/layout.ejs 文件中添加如下代码：

1
2
3
4
<!--动态线条背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

其中：

  • color：表示线条颜色，三个数字分别为 (R,G,B)，默认：（0,0,0）
  • opacity：表示线条透明度（0~1），默认：0.5
  • count：表示线条的总数量，默认：150
  • zIndex：表示背景的 z-index 属性，css 属性用于控制所在层的位置，默认：-1

六.配置音乐播放器

​ 要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 是否在首页显示音乐
music:
  enable: true
  title:     	    # 非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   # require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    # require song, playlist, album, search, artist
  id: 503838841     # require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

  • server可选：

    netease（网易云音乐），

    tencent（QQ音乐），

    kugou（酷狗音乐），

    xiami（虾米音乐），

​ baidu（百度音乐）。

  • type可选

    song（歌曲），

    playlist（歌单），

    album（专辑），

    search（搜索关键字），

    artist（歌手）

  • id获取方法示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，playlist的id即为这串数字。QQ音乐则手机分享歌单，链接里id后一串数字即是。

七.添加 RSS 订阅支持

​ 用到了 hexo-generator-feed 的 Hexo 插件来做 ,RSS安装命令如下：

1
npm install hexo-generator-feed --save

​ 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

1
2
3
4
5
6
7
8
9
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

八.看板娘模块的安装和使用

模块安装：

1
npm install hexo-helper-live2d --save

​ 下载完成后，可以在node_modules文件夹中找到自己安装的插件。然后下载你想要的看板娘模块（可以自己到网上找哪个合心意的），执行命令：

1
2
npm install {packagename}
# 例如npm install live2d-widget-model-haru

​ 下载完成后，回到blog根目录下配置_config.yml，添加以下代码（model要根据自己情况设置）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-z16
  display:
    position: right
    width: 200
    height: 400
  mobile:
    show: false

在右下角有看板娘啦！

九.主页新增关注我的Bilibili

​ 进入主题路径\layout\_partial\social-link.ejs,新增以下代码：

1
2
3
4
5
<% if (theme.socialLink.bilibili) { %>
    <a href="<%= theme.socialLink.bilibili %>" class="tooltipped" target="_blank" data-tooltip="关注我的Bilibili" data-position="top" data-delay="50">
        <i class="fas fa-play-circle"></i>
    </a>
<% } %>

​ 进入主题配置文件_config.yml，添加:

1
2
3
# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
bilibili: #https://space.bilibili.com/xxx