MacCMS 選集按鈕太多怎麼排：保留當前集與鍵盤焦點

一部劇有 40 集，選集區如果是一串細小文字，訪客很容易看錯集數。改排版時先保住三件事：順序能掃讀、目前集數有明確標記、鍵盤移動時看得出焦點在哪裡。這些是選集清單的呈現問題，不需要靠更換播放器來解決。

先拿真正的長清單比較

不要只用兩三集測排版。選一筆自己有權使用、集數較多的內容，核對清單是否完整，再觀察它佔用了多少空間。長集名、特輯與第 100 集也可能比「第 1 集」更寬，格子不能只按最短文字設計。

第 53 套 Demo 的演示影片 1979 詳情頁提供第 1 至第 40 集入口，適合觀察長清單。這份 Demo 的入口可以作對照，但你自己的模板仍要以實際資料、選集方式及目前集數標記驗收，不把某一張商品截圖當完成。

MacCMS 的來源組與集數是分開的。調整選集排列時，不改原本每一集的來源序號及目的地址；也別為了每排集數整齊，重新排序或刪掉特輯。先記下原清單的名稱與 href，改完逐項對照。

先讓每個入口有穩定空間

可在選集連結的容器使用 Grid，讓可用寬度決定每排容納幾格。下面只示範你自己的 .episode-list 區塊，不套到全站的連結或按鈕：

.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 10px;
}
.episode-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px;
  border: 1px solid #718097;
  border-radius: 6px;
}

84px、44px 與 10px 是這份排版示例的起點，不是所有模板的合格門檻。實際集名較長時，讓文字換行或加寬格子，再看清單高度。不要只把字縮得很小來保住一排固定集數，也不要把關鍵集名截到全部長得一樣。

在下面的 40 集排版示例中，第 12 集是目前項目，鍵盤焦點停在第 14 集。深色底與外框分別表示兩個狀態，訪客能知道自己正在看哪集，以及按 Enter 將前往哪集。

目前集數應由目的頁決定

對代表目前頁面的集數連結，可使用 aria-current="page"；樣式再依這個狀態處理。這個屬性是告知目前項目，不會自己判斷影片、來源或集數。仍需要模板依實際播放頁參數設定，不能固定把第 1 集標成目前集。

.episode-list a[aria-current="page"] {
  background: #244eac;
  color: #fff;
  font-weight: bold;
}
.episode-list a:focus-visible {
  outline: 3px solid #141d2b;
  outline-offset: 3px;
}

同一份當下顯示的選集清單，通常只應有一個目前頁面標記。切到另一個來源的清單時，也要確認目前播放來源是否相同；兩個來源都有「第 2 集」，不能只用文字或 nid 相同就把它們都標成目前播放。

若點第 13 集後到了第 13 集頁面，標記卻還停在第 12 集，應查狀態如何產生，不能只把顏色改成更鮮明。若網頁有非同步切換，網址、選集狀態與實際播放區仍需按模板的流程同步；上述 CSS 不會替你完成那段邏輯。

焦點外框留給正在操作的人

Tab 用來移到下一個可操作項目，Shift+Tab 可往回。讓選集保留原生連結，按 Enter 前往它的 href；不要為了能點，就把所有項目改成沒有連結目的的 div。也不需要給每一集編一個正數 tabindex，讓順序與畫面排列分離。

焦點停在第 14 集時，目前集可以仍是第 12 集。只有真的啟動入口、進入新的目的頁，才更新目前頁面的標記。把 focus 與 current 用同一個 class 表示，很容易造成只移動鍵盤就看起來換了影片。

測外框時要按鍵盤，不只用滑鼠點一下看有沒有顏色。:focus-visible 依瀏覽器判斷是否需要顯示焦點提示；如果你把原生 outline 移除，就要提供另一個清楚的提示，不能讓鍵盤使用者只能猜現在停在哪一集。

清單放進捲動區時，別切掉焦點

長清單可能需要限制高度，但先查容器的 overflow。外框畫在項目之外，容器若緊貼格子又裁切，就可能把第一排或最後一排的焦點切掉。保留容器內距，並試著把焦點移到邊界項目，確認整個外框可見。

若用「1–20、21–40」分組，分組是顯示方式，不是改播放集數。切換分組後，應能找到目前集；隱藏清單中的連結也不應繼續混入鍵盤順序。新加展收功能時，先釐清焦點回到哪裡、已選項目是否可見，再考慮加動畫。

用幾個邊界位置走完選集

先測第 1 集、中間集與最後一集，再找一個較長名稱。核對標籤、連結與目的頁集數一致；視窗縮窄時格子能重排，文字不重疊，焦點不被遮住。回到長清單時，觀看中的項目仍應找得到。

在本文的排版示例裡，焦點從第 13 集按 Tab 到第 14 集，按 Enter 會前往第 14 集目的頁。目前第 12 集的標記在啟動前保持不變。這說明兩個狀態可以分開；套進自己的 MacCMS 模板後，還要用真實集數地址與資料重走，不能把示例頁當播放器功能已驗收。

若目的頁打開正常，卻沒有畫面或聲音，那是另外的播放檢查；不要因此把選集區全部重做。涉及多來源時，可接著閱讀播放頁的來源與集數約定，先保留正確資料映射，再調整版面。

參考資料