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


一.添加动态诗词

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

<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,其代码如下:

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 文件内添加下面的内容:

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

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

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

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

<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 文件内添加下面的内容:

<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 文件中添加如下代码:

<!--动态线条背景-->
<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配置即可:

# 是否在首页显示音乐
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获取方法示例: 浏览器打开网易云音乐,点击我喜欢的音乐歌单,浏览器地址栏后面会有一串数字,playlistid即为这串数字。QQ音乐则手机分享歌单,链接里id后一串数字即是。

七.添加 RSS 订阅支持

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

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

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

模块安装:

npm install hexo-helper-live2d --save

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

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

下载完成后,回到blog根目录下配置_config.yml,添加以下代码(model要根据自己情况设置):

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,新增以下代码:

<% 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,添加:

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

文章作者: 因是
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 因是 !
评论
  目录