破壞我自己的 Wikipedia 體驗：90 年代 Cyberpunk GeoCities 風格改造

維基百科堪稱奇蹟。它是我們這個時代的亞歷山大圖書館，一個精心整理的人類知識寶庫，其使用者介面卻極為實用，相較之下，醫院走廊都顯得像個狂歡派對。

但有時候，當我凌晨兩點還在維基百科上鑽研「擁有偽造文憑的動物名單」之類的文章時，那單調的白色背景就顯得……不夠完美。我並不想要那種冷峻的極簡主義。我想要的是古人設想中的網路：霓虹粉的海洋，Comic Sans字體的海洋，以及像素化的貓咪。

於是，我決定編寫一個自訂的維基百科User Script ，將網站變成 1998 年 GeoCities 賽博龐克狂熱夢境。

我沒有從零開始編寫，而是想看看現代的LLM（語言學習模組）在編寫小眾的MediaWiki API腳本方面表現如何。以下是我使用Gemini 3.1 Pro Preview建構這個「怪物」的實戰報告。

使用維基百科特有的語法為 Gemini 打下基礎

LLM（語言學習模組）擅長編寫原生 JavaScript，但維基百科使用者腳本依賴一些特定的、略顯過時的 MediaWiki 全域變數（例如mw.loader.using和mw.util.addCSS ）。如果你只是盲目地要求 LLM “把維基百科變成粉紅色”，它通常會產生瀏覽器擴充功能或通用的 Tampermonkey 腳本。

為了繞過這個問題，我打開了Google AI Studio ，載入了Gemini 3.1 Pro Preview模型。

秘訣在於使用了URL 上下文功能。我啟用了 URL 上下文功能，然後貼上了維基百科自訂腳本文件的 URL：

https://en.wikipedia.org/wiki/Wikipedia:User_scripts

我的提示很簡單，但卻有些離譜：

「請參考維基百科用戶腳本文件，為我的 Special:MyPage/common.js 文件編寫一個腳本，使我的維基百科瀏覽體驗看起來像 90 年代賽博朋克風格的 GeoCities 頁面。我想要粉紅色/青色的網格背景、發光的 Comic Sans 字體標題、巨大的滾動式文章標題<marquee> 、巨大的動畫螢幕、巨大的動畫滑鼠軌跡，以及一群巨大的貓假螢幕。

因為 Gemini 3.1 Pro Preview 的上下文視窗中包含了實際的文件，所以它知道如何透過 MediaWiki 的實用函數安全地註入 CSS，並給了我一個即插即用的腳本。

圖片描述

劇本解析

最終生成的腳本完美地融合了現代 DOM 操作和極具冒犯性的 90 年代美學。

1. 主打標題

如果我們要讀到關於鴯鶓戰爭的文章，標題就需要移動。腳本會抓取#firstHeading元素，並生硬地將其內部 HTML 包裹在<marquee>標籤中。

var $title = $('#firstHeading');
var titleText = $title.html();
$title.html('<marquee scrollamount="15" behavior="alternate">' + titleText + '</marquee>');

註：2026 年的現代瀏覽器仍然能夠解析和執行<marquee>標籤，這證明了網路擁有牢不可破的向後相容性。它就像數位時代的殘餘尾巴一樣。

2. 閃光之路（節流課）

為了建立滑鼠軌跡，該腳本監聽mousemove事件，並將包含賽博朋克符號（ ✦ 、 ★ 、 ✨ ）的絕對定位<span>元素加入到 DOM 中。

為了防止我的 GPU 立即過熱（當每秒生成數百個 DOM 節點時，這是一個非常現實的威脅），該模型巧妙地實現了時間戳節流：

var now = Date.now();
if (now - lastSparkleTime < 40) return; // Only spawn a sparkle every 40ms
lastSparkleTime = now;

然後，它對每個閃光應用 CSS @keyframes動畫，使它們緩慢向下漂移，旋轉 180 度，並淡入到opacity: 0 ，然後在一秒鐘後被setTimeout垃圾回收。

3. 貓走路的數學

Gemini 3.1 沒有使用笨拙的 JS setInterval來移動貓，而是採用了純粹的、硬體加速的 CSS 動畫。

它建立了一個固定的頭部容器（設定pointer-events: none ，這樣我仍然可以透過貓咪虛幻的身體點擊搜尋欄）。然後，它應用了兩個不同的動畫。

第一個動畫將整個隊伍從100vw （螢幕右側）滑動到-100% （螢幕左側）。

第二個動畫創造了「行走」的錯覺。如果你仔細觀察一隻像素貓行走的幾何形狀，它本質上就是一個正弦波。為了實現這一點，腳本對每隻貓應用了 10px 的垂直彈跳（ transform: translateY(-10px) ）。

為了使其看起來像一支混亂的小隊而不是一支整齊劃一的閱兵式，劇本使用了nth-child(even)偽類來抵消每隔一隻貓的動畫延遲：

.walking-cat {
    animation: catBounce 0.4s alternate infinite ease-in-out;
}
.walking-cat:nth-child(even) {
    animation-delay: 0.2s; /* Phase offset for the bounce! */
}

我們本質上是透過改變貓科動物的垂直振盪相位來模擬獨立運動。