今天來加入Butterfly中我挺喜歡的頭像旋轉功能

加入旋轉特效（CSS）

把下面這段加到你的 source/style.css 最後面：

/* Avatar hover 旋轉一圈 */
.site-avatar img,
.avatar img,
.kira-avatar img,
.site-author-image img {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
  will-change: transform;
}
.site-avatar:hover img,
.avatar:hover img,
.kira-avatar:hover img,
.site-author-image:hover img {
  transform: rotate(360deg);
}

再來是跳轉功能

KIRA的主題是按頭像就會跳轉到原圖網址

這邊我們改成按頭像就會跳到自我介紹的頁面

我們在source底下新增/js/avatar-redirect.js

因為他本身影響頭像的有sidebar.ejs跟header.ejs，用這個方法一次去處理兩個檔

source/js/avatar-redirect.js

// source/js/avatar-redirect.js
document.addEventListener('DOMContentLoaded', () => {
  const selectors = [
    'header .site-avatar img',
    'header .avatar img',
    'header .kira-avatar img',
    'header .site-author-image img',
    '.sidebar .site-avatar img',
    '.sidebar .avatar img',
    '.sidebar .kira-avatar img',
    '.sidebar .site-author-image img',
    '.site-avatar img',
    '.avatar img',
    '.kira-avatar img',
    '.site-author-image img',
  ].join(', ');

  const avatars = document.querySelectorAll(selectors);
  if (!avatars.length) return;

  avatars.forEach((img) => {
    const clickTarget = img.closest('a') || img;
    clickTarget.style.cursor = 'pointer';
    clickTarget.addEventListener('click', (e) => {
      if (e.metaKey || e.ctrlKey) return; // 允許 Ctrl/Cmd 新分頁
      e.preventDefault();
      window.location.href = '/about/';
    });
  });
});

之後我們在\node_modules\hexo-theme-kira\layout\components的header.ejs

在最後面加入引用

<script src="<%= url_for('/js/avatar-redirect.js') %>"></script>

這樣我們就能有一個會旋轉的頭像跟重定位(跳轉網頁)的功能了

P.S每次修改完記得重啟才會看到修改後的結果喔