本站架站紀錄_第二篇

2025年10月06日 1.8k 字大概 9 分鐘

滑鼠特效、隨機圖、音樂撥放器。

套用滑鼠特效

本網站套用特效： canvas-nest.js
滑鼠擺著那些線就會被吸引，無聊時看著挺好玩的。
額外推薦特效：particles.js
滑鼠移動過去線就會閃開
早期滑鼠特效： 90s Cursor Effects
我最喜歡那個泡泡的特效

我們在layout\layout.ejs中加入套用特效

<script>
(function () {
  if (window.__canvasNestLoaded) return;      // 防重複載入
  window.__canvasNestLoaded = true;

  var prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var isMobile = Math.min(window.innerWidth, window.innerHeight) < 640;
  if (prefersReduced || isMobile) return;

  var s = document.createElement('script');
  s.src = 'https://cdnjs.cloudflare.com/ajax/libs/canvas-nest.js/2.0.0/canvas-nest.js';

//我一開始用藍色但發現還是黑色比較顯眼最後固定黑色了
  s.setAttribute('color', '0,0,0');       // 線條顏色：黑
  s.setAttribute('pointColor', '0,0,0');  // 節點顏色：黑
  s.setAttribute('opacity', '0.40');      // 透明度
  s.setAttribute('count', '140');         // 顆數
  s.setAttribute('zIndex', '-1');         // 最底層

  document.body.appendChild(s);
})();
</script>

然後是加入特效位置(當然是撲滿整個網站了！)
在我們的source/style.css中加入position:fixed

/* 讓 canvas-nest 鋪滿整個視窗（覆蓋它的 inline style） */
body > canvas[style*="pointer-events: none"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important; /* 看不到就改 1~10 試試 */
}

存檔後重新啟動
1
hexo clean && hexo s
我很常忘記clean直接hexo s就沒吃到更新…各位要記得或是就直接把兩個指令綁定一起打。

在程式碼中有加上低效能與視窗過小就不會載入特效
所以若沒看到滑鼠特效可以檢查

1	`window.matchMedia('(prefers-reduced-motion: reduce)').matches`

是否開啟

1	`Math.min(window.innerWidth, window.innerHeight)`

是否小於640

隨機圖

這是我看到還滿多人會用的，讓自己的blog塞隨機圖就能看到不同的圖片
或是你也可以作一個自己的隨機圖庫?
隨機圖LoliAPI

使用方式很簡單
跟寫文章時一樣接加在最前頭的cover即可
使用方法跟前面文章一模一樣：直接加在文章cover裡面

---
title: ...
cover: https://www.loliapi.com/bg/
---

LoliApi 端點總覽：
- 自適應：/acg/依裝置回傳 PC/PE
- PC：/acg/pc/可 ?type=url|img|json、可 ?id=
- 手機：/acg/pe/（同上）
- 混合背景：/bg/（PC/PE 隨機擇一）
- 頭像：/acg/pp

如果有圖片大小問題就和第一篇文章一樣，進行裁切遮罩等
一樣是在source/style.css修改即可

/* 統一封面比例 + 強制視覺裁切（cover） */
:root { --cover-w: 16; --cover-h: 9; }        /* 想 21:9 就改 21/9；想 4:3 就 4/3 */

/* 1) 固定封面容器比例（覆蓋主題在元素上的 inline padding-bottom） */
.kira-post-cover{
  padding-bottom: calc(var(--cover-h) / var(--cover-w) * 100%) !important;
}

/* 2) 封面圖裁切填滿 */
.kira-post-cover img,
.kira-post-cover-image{
  position: absolute !important;
  inset: 0 !important;              /* = top/right/bottom/left:0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;     /* 視覺裁切 */
  object-position: center !important;
  display: block !important;
}

撥放台灣獨立音樂人的歌曲

想聽各種沒聽過的新歌時我都會去的網站–街聲
街聲本身就有支援嵌入，可以直接到喜歡的歌曲中按分享然後複製嵌入碼即可

具體效果可以看鐵人賽介紹用文章那篇

不過他們提供的大小都是固定的，如果你要修改成與文章同樣大小則需要額外設定修改大小

新增source/js/fit-embeds.js

// StreetVoice 內嵌：滿版等比 + 可視高度裁切 + 標題列
(function(){
  const BASE_W = 330, BASE_H = 100;
  const selector = 'iframe[src*="streetvoice.com/music/embed"]';

  function ensureCard(iframe){
    // 外層卡片
    let card = iframe.closest('.sv-card');
    if(!card){
      card = document.createElement('div');
      card.className = 'sv-card';
      iframe.parentElement.insertBefore(card, iframe);
      card.appendChild(iframe);
    }
    // 內層容器
    let box = iframe.closest('.sv-embed');
    if(!box){
      box = document.createElement('div');
      box.className = 'sv-embed';
      card.insertBefore(box, iframe);
      box.appendChild(iframe);
    }
    // 標題列（只建一次；可用 data-sv-title 覆蓋文字）
    let title = card.querySelector('.sv-titlebar');
    const text = iframe.dataset.svTitle || '來聽點音樂吧～';
    if(!title){
      title = document.createElement('div');
      title.className = 'sv-titlebar';
      title.textContent = text;
      card.insertBefore(title, box);
    }else if(iframe.dataset.svTitle){
      title.textContent = text;
    }

    // 基本外觀
    card.style.borderRadius = '16px';
    card.style.padding = '14px 16px';
    card.style.margin = '12px 0 18px';
    card.style.background = 'linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75))';
    card.style.boxShadow = '0 8px 24px rgba(0,0,0,.08)';
    card.style.backdropFilter = 'blur(6px)';

    box.style.width = '100%';
    box.style.overflow = 'hidden';
    box.style.borderRadius = '12px';

    iframe.style.border = '0';
    iframe.style.display = 'block';
    iframe.style.transformOrigin = 'top left';

    return { card, box };
  }

  function getCrop(iframe){
    const v =
      iframe.dataset.svCrop ||
      iframe.closest('.sv-card')?.dataset.svCrop ||
      iframe.closest('.sv-embed')?.dataset.svCrop;
    const r = parseFloat(v);
    return (r > 0 && r <= 1) ? r : 1; // 預設不裁
  }

  function getAlign(iframe){
    const v =
      (iframe.dataset.svAlign ||
       iframe.closest('.sv-card')?.dataset.svAlign ||
       iframe.closest('.sv-embed')?.dataset.svAlign || 'center').toLowerCase();
    return (v === 'top' || v === 'bottom') ? v : 'center';
  }

  function fitOne(iframe){
    const { box } = ensureCard(iframe);

    const w = box.clientWidth || BASE_W;
    const scale = w / BASE_W;

    // 固定原始尺寸，再用 scale 放大
    iframe.style.width  = BASE_W + 'px';
    iframe.style.height = BASE_H + 'px';

    // 計算裁切後高度
    const crop  = getCrop(iframe);       // 0~1
    const fullH = BASE_H * scale;
    const visH  = fullH * crop;

    // 垂直對齊
    const align = getAlign(iframe);
    let offsetY = 0;
    if (crop < 1) {
      if (align === 'center')      offsetY = (fullH - visH) / 2;
      else if (align === 'bottom') offsetY = (fullH - visH);
    }

    iframe.style.transform = `translateY(-${offsetY}px) scale(${scale})`;
    box.style.height = visH + 'px';
  }

  function fitAll(){
    document.querySelectorAll(selector).forEach(fitOne);
  }

  document.addEventListener('DOMContentLoaded', ()=>{
    fitAll();
    setTimeout(fitAll, 300);
    setTimeout(fitAll, 1000);
  });
  window.addEventListener('resize', fitAll);
})();

我額外加了點特效(滑鼠移動過去會放大)
修改source/style.css

/* StreetVoice 卡片外觀與 hover 動效 */
.sv-card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.sv-card:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* 標題列樣式 */
.sv-titlebar{
  font-weight: 700;
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.sv-titlebar::before{
  content: "🎵";
  font-size: 16px;
  opacity: .9;
}

/* 內嵌容器，維持圓角 */
.sv-embed{ width:100%; overflow:hidden; border-radius:12px; }
.sv-embed iframe{ border:0; display:block; }

記得要在header中引用寫好的大小設定

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

鐵人賽介紹用文章那篇中的寫法

<iframesrc="https://streetvoice.com/music/embed/?id=609974"
  frameborder="0" scrolling="no" allow="autoplay"
  data-sv-title="來聽點音樂吧～"  <!-- 顯示在卡片上方；不寫則用預設句 -->
  data-sv-crop="0.5"               <!-- 顯示 50% 高度；0.35~0.8 都可 -->
  data-sv-align="center"           <!-- top / center / bottom -->
></iframe>

KIRA主題自帶可用播放器

播放器介紹

首先安裝我們的aplayer

1	`npm install --save hexo-tag-aplayer`

使用範例：

標籤參數
- title : 曲目標題
- author: 曲目作者
- url: 音樂檔案 URL 位址
- picture_url: (可選) 音樂對應的圖片位址
- narrow: （選購）播放器袖珍風格
- autoplay: (選購) 自動播放，行動裝置瀏覽器暫時不支援此功能
- width:xxx: (可選) 播放器寬度 (預設: 100%)
- lrc:xxx: （可選）歌詞檔案 URL 位址
  
  圖片同樣可以用前面介紹的隨機圖

鐵人賽介紹用文章那篇中的寫法

1	`{% aplayer "Demo" "Me" "By Myself - The Grey Room _ Clark Sims.mp3" %}`

Bilibili 播放器

使用方法非常簡單

1	`{% biliplayer 影片編號 11 1 %}`

比如說要使用 https://www.bilibili.com/video/BV1Yb411a7ty/ 這部影片的話
在你的文章中將BV1Yb411a7ty這段貼到影片編號上

1	`{% biliplayer BV1Yb411a7ty 1 %}`

文章待續。

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