唉其實我六日都不碰3C產品的，連手機都不碰XDD
上兩周為了發文還假日特別打開電腦
昨天一不小心就忘記中斷了
接下來我就挑一些寫的比較完整的文章PO好了(其實已經寫完30篇了XDD)

原本的預設其他媒體平台是QQ、BiliBili等我平常沒用的平台

所以這邊我打算改成我其他有註冊的平台(雖然也不常用但至少有註冊XDD

在這邊我們要找到平台提供的官方SVG

SVG（Scalable Vector Graphics）是一種基於XML的開放標準，用於描述二維向量圖形，可無限縮放而不失真，並可透過CSS進行樣式化，透過JavaScript實現互動和動畫效果。

簡單來說就是人家的LOGO

這邊我找了三個，我自己是沒用翠啦但想說之後可以註冊一下

將下載的官方 SVG 放到：

source/img/brands/x.svg
source/img/brands/youtube.svg
source/img/brands/threads.svg

然後是修改我們的social欄位

在根目錄 _config.kira.yml 填上我要的三個按鈕：

widgets:
  - social
  - category
  - tagcloud
  - archive

social:
  X / Twitter:
    - https://x.com/你的ID   # X 的網址不要加 @，一開始以為出BUG原來是多加了@
    - icon-twitter
    - rgb(0,0,0)
    - rgba(0,0,0,.10)

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

  Threads（脆）:
    - https://www.threads.net/@你的ID
    - icon-threads
    - rgb(0,0,0)
    - rgba(0,0,0,.10)

接下來修改 myblog\node_modules\hexo-theme-kira\layout\_widget\social.ejs，將內容替換為下面這份：

<div class="kira-widget kira-social">
  <%
    // Name: [ href, icon, color, bg ]
    const MAP = {
      'icon-twitter':  '/img/brands/x.svg',
      'icon-youtube':  '/img/brands/youtube.svg',
      'icon-threads':  '/img/brands/threads.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 會被吃掉，所以這裡直接在 <a> 設 font-size:18px，並把 <span> 的寬高寫死為 18px，不然LOGO會消失。
• MAP 內把 icon-twitter / icon-youtube / icon-threads 對應到剛放好的 SVG 路徑。

我自己另外加了特效(滑鼠移過去轉圈圈，在DAY9中也有用到頭像轉圈圈)：

編輯**source/brands.css**，加入：

/* 置中整排社群按鈕 */
.kira-sidebar .kira-social{
  text-align: center;
}

/* 統一按鈕內圖示對齊與間距（<a> 已在模板設定 font-size:18px） */
.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);
}

/* 若先前有用偽元素 a::before 畫圖示，防止重複 */
.kira-social a::before{
  content: none !important;
  display: none !important;
}

/* 手機不動 */
@media (prefers-reduced-motion: reduce){
  .kira-sidebar .kira-social a > span{
    transition: none;
  }
}

最後，把這份 CSS 放到 themes/kira/layout/_partial/header.ejs 引用：

<link rel="stylesheet" href="<%- url_for('/brands.css') %>">

記得存檔重啟

這樣就能有X YT跟翠ㄌ

一些錯誤

(一開始在寫的時候忘了加置中只有三個鈕會靠左很奇怪)

(大小設定錯誤導致整個LOGO被吃掉)

(設定特效時沒把前面的LOGO拿掉變成雙LOGO)

(荒謬到笑出來)