本站架站紀錄_第三篇

2025年10月07日 1.2k 字大概 5 分鐘

修改配色、旋轉特效、修改平台連結、自我介紹頁面。

在配置教學中有寫到

在Kira-Hexo 中，為開發者預置了一套豐富的彩虹配色方案，同時允許開發者自行修改彩虹色配置。

以下是這是預設配色的code

color: # 配色方案，从first到seventh为优先级为1-7的颜色，默认为彩虹配色
    first: # 同时作为主题色
        r: 49
        g: 174
        b: 255
    second:
        r: 255
        g: 78
        b: 106
    third:
        r: 255
        g: 185
        b: 0
    fourth:
        r: 51
        g: 213
        b: 122
    fifth:
        r: 0
        g: 219
        b: 255
    sixth:
        r: 255
        g: 69
        b: 0
    seventh:
        r: 144
        g: 144
        b: 255

修改配色就是修改數值即可
數值可以參考這個網站：oschina
將色相環拉到你要的顏色後把數字填上去就行

我使用的配色(就是配合37的顏色XD)：

color:
  first:   { r: 101, g: 153, b: 179 }   # 主題色：霧藍青 #6599B3（髮色系）
  second:  { r: 188, g: 173, b: 118 }   # 暖金：花冠金 #BCAD76
  third:   { r: 129, g: 177, b: 177 }   # 海沫青 #81B1B1
  fourth:  { r: 127, g: 145, b:  85 }   # 橄欖綠 #7F9155
  fifth:   { r: 183, g: 150, b: 133 }   # 暖膚色 #B79685
  sixth:   { r:  72, g:  88, b: 104 }   # 石板藍 #485868（深色陰影/文字襯色）
  seventh: { r:  56, g:  72, b:  88 }   # 墨藍灰 #384858（備用深色）

修改媒體平台

這邊提其中一個的修改方式，你要改成其他的直接以此類推即可
(像是領英、信箱等等)

先在svgrepo找到你要放的連結圖標

接下來以youtube為例
下載下來然後儲存到source/img/brands/youtube.svg

在_config.kira.yml新增你要放的網站

widgets:
  - social

social:

  YouTube:
    - https://www.youtube.com/@你的頻道
    - icon-youtube
    - rgb(255,0,0)
    - rgba(255,0,0,.12)

接下來修改 myblog\node_modules\hexo-theme-kira\layout\_widget\social.ejs

<div class="kira-widget kira-social">
  <%
    // Name: [ href, icon, color, bg ]
    const MAP = {
      'icon-youtube':  '/img/brands/youtube.svg',
    };
    for (var name in theme.social) {
      const item  = theme.social[name] || [];
      const href  = item[0] || '#';
      const icon  = item[1] || '';
      const color = item[2] || 'inherit';
      const bg    = item[3] || 'transparent';
  %>
    <a class="mdui-ripple"
       href="<%- href %>"
       target="_blank"
       mdui-tooltip="{content: '<%- name %>'}"
       style="color:<%- color %>;background-color:<%- bg %>;font-size:18px">
      <% if (MAP[icon]) { %>
        <span style="
          display:inline-block;width:18px;height:18px;background-color:currentColor;
          -webkit-mask-image:url('<%= MAP[icon] %>');
          mask-image:url('<%= MAP[icon] %>');
          -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
          -webkit-mask-position:center;mask-position:center;
          -webkit-mask-size:contain;mask-size:contain;
        "></span>
      <% } else { %>
        <i class="kirafont"><%= icon %></i>
      <% } %>
    </a>
  <% } %>
</div>

除錯：
Kira 原本把 .kira-social 設為 font-size:0，若我們用 1em 會被吃掉，所以這裡直接在設 font-size:18px，並把的寬高寫死為 18px，不然LOGO會消失。
MAP 內把 icon-twitter / icon-youtube / icon-threads 對應到剛放好的 SVG 路徑。

旋轉特效

滑鼠移到社交媒體icon時會轉一圈，個人加上 ~~沒什麼用的~~ 小東西
加上source/brands.css

.kira-sidebar .kira-social{
  text-align: center;
}
.kira-sidebar .kira-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
}
.kira-sidebar .kira-social a > span{
  transition: transform .45s ease;
  will-change: transform;
}
.kira-sidebar .kira-social a:hover > span,
.kira-sidebar .kira-social a:focus-visible > span{
  transform: rotate(360deg);
}
.kira-social a::before{
  content: none !important;
  display: none !important;
}
@media (prefers-reduced-motion: reduce){
  .kira-sidebar .kira-social a > span{
    transition: none;
  }
}

最後記得在header加入引用：

1	`<link rel="stylesheet" href="<%- url_for('/brands.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);
}

自我介紹頁面。

我把自我介紹頁面移到頭像，點擊我的頭像就會進到自我介紹頁面。

// 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/';
    });
  });
});

同樣寫完後在header.ejs內引用

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

這樣就能跳轉至自我介紹頁面了。

文章待續。

留言區從原本需要登入github才能留言的方式改成使用 Twikoo 不須登入即可留言
如果你要匿名的話姓名、郵箱、網址可以隨便打沒關係
留QQ郵箱的話可以自動偵測郵箱頭像
有想多交流的話可以留網址我看到會過去逛逛