前言#
作為一名 PKUer ，我從入學開始就對教學網的樣式適應不來，這做的真的太醜了！這怎麼會讓人有學習的動力呢？！我為什麼老摸魚？不就是因為這教學網讓我看了就不想學習嗎！（震聲
這種不滿終於這個週四爆發了。我看著又土又老的編程網格，再也忍不下去了，正好週五加週末沒啥事，於是開始快樂地在圖書館摸魚（其實只有最後看到成果的時候才快樂，期間調各種樣式啊選擇器啊的時候讓我簡直要吐血，好多知識和語法還是邊用邊學的），爆肝出了編程網格、IAAA 登錄頁、教學網大部分頁面的 CSS。
我真的很想吐槽那用 Table 搭出來的編程網格、大黑框頂頭上的教學網，還有那設計簡直離天下之大譜、讓我甚至真的想問就這還註冊專利嗎的成績頁面（它居然還用 iframe 套娃套了兩層！），但最終，我還是完成了。這就是和我的另外一個樣式 Baidu Art （打廣告：這是一個我高二折騰出來並用到現在的好看樣式）類似取名的 PKU Art 的誕生了。現在想想，兩天的時間換未來幾年的視覺快感，也算是值了！
簡介#
PKU Art 是一款通過瀏覽器插件，向頁面附加的 CSS 樣式表。它可以完成對於原有樣式的覆蓋，從而增強教學網視覺體驗。第一版發布於去年 11 月，相對簡陋，最近更新的第二版實現了對第一版完整的重構，完美支持了暗色模式，並且增加了更多的交互動效和設計改進。
文檔#
此文檔內包含更好看、更及時的指導界面。
下載與開發#
安裝地址#
項目地址#
一个北大教学网的美化样式
本地開發#
-
克隆本項目：
git clone [email protected]:zhuozhiyongde/PKU-Art.git -
進入工作目錄後安裝依賴：
npm install -
啟動 Vite 服務器以獲得 HMR 熱更新開發體驗：
npm run dev -
不要使用
npm run build來構建項目，而是使用custom-builder.py腳本來生成發布版本：python3 custom-builder.py注：這麼做的原因是我實際使用其構建的腳本存在我目前無法解決的顯示 bug，如果你知道怎麼解決，歡迎告訴我～
另：請參考現有的
main.js格式來寫匹配選擇（即一次引入必須只有一個正則表達式），否則custom-builder.py腳本可能無法正常讀取並生成發布版本。
更新日誌#
參見 ChangeLog.md
Todo#
參見 Agenda.md
效果預覽#
篇幅所限，只放黑暗模式下的效果: )
為展示效果，可能對 html 節點有删改，如錄播界面太多了放不下
下載安裝#
以下內容可能不會得到較為及時的更新，建議觀看文檔。
PKU Art 目前支持 css 安裝與 js 安裝兩種安裝方式，兼容 Safari 與 Chrome（Edge）兩大瀏覽器。兩種安裝方式都需要借助瀏覽器插件，同時，JavaScript 安裝會具有一些僅 CSS 無法實現的功能。所以建議大家通過 JavaScript 安裝方式。
補充：有同學反映說 js 安裝方式會導致一些頁面的渲染會 “卡一下”，猜測是 js 注入順序導致的問題，所以建議同學們採用 css 安裝以獲得更穩定的體驗。已修復。
JavaScript 安裝#
Safari#
需要在 App Store 安裝 Userscript 插件。
安裝完成後，訪問 CDN for JavaScript ，點擊插件圖標，應當有Userscript Detected:Tap to install字樣，點擊安裝即可。這種安裝方式是最推薦的，因為它可以自動檢測到我後續的更新。
你也可以訪問 JavaScript 下載鏈接，點擊安裝即可，如果被您的電腦上有 AdGuard 可能會被搶占安裝，但使用那種腳本附加手段其實並不影響最終效果。
除此之外，你也可以通過 Github Release 來下載 JavaScript 源文件，並手動導入到 Userscript 插件中。
Chrome (Edge/Arc/Chromium)#
需要在 Chrome web store 安裝 TamperMonkey 插件。
安裝完成後，訪問 CDN for JavaScript ，點擊安裝即可。這種安裝方式是最推薦的，因為它可以自動檢測到我後續的更新。
你也可以訪問 JavaScript 下載鏈接，點擊安裝即可。
除此之外，你還可以通過 Github Release 來下載 JavaScript 源文件，並手動導入到 TamperMonkey 插件中。
CSS 安裝（存在功能缺失，建議使用 JavaScript 安裝）#
Safari#
需要在 App Store 安裝 Cascadea 應用（￥18）。
安裝完成後，打開應用，點擊最上面的下載按鈕
然後輸入以下網址就可以下載啦：
https://cdn.arthals.ink/release/PKU-Art.user.css
除此之外，你也可以通過 CDN for CSS 或者 Github Release 來下載 CSS 源文件，並手動導入到 Cascadea 插件中。
Chrome (Edge/Arc/Chromium)#
需要在 Chrome web store 安裝 xStyle 或者 Stylish 插件。
注意：Stylish 的收費政策最近有所改變（最多免費使用三個樣式）且訪問不是很穩定的樣子，所以建議安裝 xStyle。
如果你安裝的是 xStyle，那麼安裝完成後，你需要通過 CDN for CSS 或者 Github Release 來下載 CSS 源文件，並且手動導入到 xStyle 中，具體操作步驟如下：
獲得源文件文本 - 複製到剪貼板 - 打開 xStyle 面板 - 點擊
WRITE A NEW STYLE- 將文本直接拷貝到編輯區 - 在右側面板中勾選Enabled並 取消勾選Enable less complier
如果你裝的是 Stylish，那麼安裝完成後，你同樣可以訪問 CSS 下載鏈接，然後點擊 Install Style 即可。
CSS 和 JavaScript 安裝方式的異同#
兩者主要功能都是通過不同手段將我寫的 CSS 樣式附加到你的頁面上，但添加手段上存在如下差異：
-
CSS 安裝方式會直接通過插件，將你本地的樣式通過在頁面末附加
<style>標籤來引入本地樣式。 -
JavaScript 安裝方式會通過插件，即時獲得你的頁面 URL，並且根據正則匹配頁面 URL，動態引入我部署在 CDN 上的 CSS 文件，其具體引入方式是通過在頁面末附加
<link>標籤來引入外部樣式。
說人話就是，CSS 安裝方式會直接將你下載好的樣式引入，而 JavaScript 安裝方式會通過請求我 CDN 上的文件來引入，雖然瀏覽器有緩存策略，但是可能還是會存在一定的延遲，這可能會導致 “頁面閃爍” 的問題出現。但 CSS 安裝方式不會導致此問題。
除此之外，兩者還具有以下功能上的差異：
- JavaScript 安裝方式會引入一些除了附加 CSS 之外的功能，這部分功能無法僅通過 CSS 實現，如避免側邊欄收起問題。
使用須知#
本樣式移除了一些我覺得沒有用處的控件元素，如側欄的收起框（這個太醜了），播放列表上方的導航欄（下方有一樣的），這可能會導致一些特殊情況下，某些功能不可用（如側邊欄收起後，在樣式啟用的狀態下，現在無法重新展開側邊欄）。但你可以隨時在插件內禁用本樣式，以恢復到原有界面。
因為最近教學網剛剛經歷了更新，所以我並不能保證開發進度完全覆蓋所有頁面，因此我建議所有需要使用教學網的助教或者老師不要安裝此樣式，除非您明確知曉出現功能缺失時如何禁用樣式。
本樣式覆蓋了所有我認為常用的界面，但我畢竟不是教學網的專業前端維護人員，所以我並不能做到對全部的頁面加以修改。但如果你認為某個頁面十分常用但卻沒有被修改，歡迎聯繫我，在 Github 提 issue，在樹洞下留言，抑或是直接加我微信的方式（在文末，這個最歡迎！）都可以。
如果你喜歡這個樣式，請不要吝嗇點擊 Star（樹洞和 Github 的都可以！），這是對我最大的鼓勵與肯定！
Q&A#
有適配手機版的打算嗎？#
沒有，做手機版自適應工程量幾乎等於重構，一個人維護這個項目，我真的太累了 qwq...
可以在 iPad 上使用嗎？#
可以，方式等同於在 Safari 上使用 JavaScript 安裝。
我可以審閱代碼、提交 PR 嗎？#
十分歡迎！你可以隨時訪問我的 Github，哪裡有本項目用到的所有代碼。我可以保證項目內不含有任何惡意代碼，僅僅是通過附加 css（通過 CDN 分發）來改變頁面樣式。如果你願意提交 PR，那我會十分樂意接受的！
後記#
平日裡的我並非是個話很多的人，但這堪稱瘋狂的一週，實在是讓我感觸頗豐，總覺得還是得記下點什麼。
去年剛剛進入燕園的我，因為受不了編程網格的老土設計，在圖書館摸了好半天，就為了把編程網格做的好看了一點（#2908869），彼時的我甚至連 css 的容器佈局都不甚了解，好多知識都是在敲代碼的過程中才去第一次認真學習，可我沒想到的是那個略顯粗糙的拙劣樣式，卻得到了很多同學的肯定。於是我再接再厲，憑藉著那三腳貓的功夫，濫用各種現在看起來簡直不可接受的語句完成了對於教學網的美化（也正是這爛到幾乎不可維護的屎山讓我下定決心重構整個項目），發布了 PKU Art v1。承蒙厚愛，發布以後我得到了很多同學的讚揚，收穫了至今為止 Star 最多的一個樹洞 & 項目。那段時間我最快樂的一件事情就是每天刷樹洞看看漲了多少關注，在 Stylish 上看看漲了多少下載（好虛榮啊 hhh），真是相當感謝大家的支持！
開心過後的我，卻也從未忘記，那只是一個徒有其表的半成品，根本經不起哪怕一次 code review。事實上，自從發布以後，我自己也就是用著，而並沒有想辦法去優化。畢竟程序員們不總是有句老話嘛 —— 代碼能跑就不要動。就這麼湊合著，我搁置了這個項目。
時光轉眼來到今年的八月一日。對前端一直很感興趣的我，在七月份剛剛系統化學了一遍 js，vue，react 等前端常用技術，也對 css 有了一些新的了解。就如同去年的我一樣，閒到不知道幹什麼的我，終於還是給自己找起了事情做 —— 我要重構這一坨屎山代碼！
重構的過程，用到的知識其實相較第一版並沒有太大的差異，但有了系統化知識的打底，我對於頁面結構有了更深的理解，沒有再濫用萬能的 translate，也沒有隨意亂加偽類，而是順著原有的結構一步步選擇適合的語句去實現我想要的效果。同時，一回生二回熟的我，也對教學網的路由和套娃諳熟於心，沒有再像之前一樣對著一個 iframe 愣半天，也通過正則表達式對於樣式生效的網址有了更精細的控制。
要說這一週真的學到了什麼，我想，也沒有什麼。抠細節帶來的大概只有對於耐心的考驗，每個頁面，我大概都要寫數個小時才能滿意，每個用到顏色的地方我都使用了變量來保證在黑暗模式下的可用性，每個我覺得原先圖標不行的地方我都專門去 IconPark 網站上找了替代品並加以更換。Mac 告訴我，為了完成這個項目，我的相關螢幕使用時間在上週達到了 50 個小時，然而這還不算我找參考，挑配色的時間。
我向來是一個對於自己感興趣的事物會不惜代價去投入的人，可是這次所花費的時間和最終寫出的代碼行數都遠遠超出了我最開始的預期。
期間，我也不是沒有心生厭倦，我曾問過自己，就算花了這麼久時間去寫，最後能用上的又有多少人？我付出的時間精力難道不是自娛自樂嗎？萬一教學網也像編程網格一樣更新了樣式怎麼辦？... 但我卻總是安慰自己，已經寫了這麼多了（沉沒價值啊啊啊啊），怎麼能忍心半途而廢呢？於是，就在這種一邊否定自己，一邊懷疑原有代碼究竟是怎麼寫出來的，一邊機械化的敲著已經用了數百遍的那些屬性和變量的過程中，我還是漸漸磨出了最終的成果 —— 全新的、帶黑暗模式的 PKU Art v2。
於是，我終於相信，這一版的 PKU Art v2，足夠讓我、讓大家滿意。
至此，教學網的頁面設計問題終於被我解決，我預想的下一步是，通過新學到的 js 知識，解決一些功能交互方面的問題。譬如說期末考試前大預習的晚上發現下載教學網視頻多有不便（不能批量下載、有這奇怪的 source 命名難以查找等…）除了教學網之外，常年閒逛於樹洞的我更是從同學們的評論中找到了各種痛點：收藏夾無法導出、無法批量取關…（我也一直很想給樹洞加一個限時功能來限制自己的摸魚 hhh
我希望能夠在接下來的暑假，除了學一學先修課之外，再為自己找點事情做 —— 那就是，完成一個 PKU Tool 腳本 / 網站，嘗試解決上述所有提出的問題！雖然能完成多少、要花多長時間完成都是一個未知數，但是我會盡力去做，就像去年年末那個成天在圖書館摸魚 PKU Art 的我一樣 hhh。