Arthals

前言#

PKUer として、入学以来、教学网のスタイルに適応できず、本当に醜いと思っています！これがどうやって学ぶ意欲を持たせるのでしょうか？！なぜ私はいつもサボってしまうのか？それはこの教学网を見ただけで学びたくなくなるからです！（震声

この不満はついに今週の木曜日に爆発しました。古臭くてダサいプログラミングのグリッドを見て、もう我慢できなくなり、ちょうど金曜日と週末は特に何もなかったので、図書館で楽しくサボり始めました（実際には最後に成果を見るときだけ楽しいです。その間、さまざまなスタイルやセレクタを調整していると、血を吐きそうになるほどで、多くの知識や文法は使いながら学んでいる状態でした）。プログラミングのグリッド、IAAA のログインページ、教学网のほとんどのページの CSS を徹夜で作成しました。

私は本当に、テーブルを使って作られたプログラミングのグリッド、大きな黒い枠の上にある教学网、そしてそのデザインがあまりにもひどく、特許を登録する価値があるのかと本当に聞きたくなるような成績ページ（なんと iframe が二重に入っている！）について文句を言いたいですが、最終的には完成しました。
これが、私の別のスタイルである Baidu Art（宣伝：これは私が高二の時に作り上げ、今でも使っている美しいスタイル）に似た名前の PKU Art の誕生です。
今振り返ると、2 日間の時間で今後数年の視覚的快感を得られるのは、価値があると言えます！

簡介#

PKU Art は、ブラウザのプラグインを通じてページに追加される CSS スタイルシートです。元のスタイルを上書きすることで、教学网の視覚体験を向上させることができます。第一版は昨年 11 月にリリースされ、比較的簡素でしたが、最近更新された第二版は第一版の完全な再構築を実現し、ダークモードを完璧にサポートし、さらに多くのインタラクティブなエフェクトとデザインの改善を追加しました。

文档#

PKU Art - Arthals' Docs

この文書には、より美しく、よりタイムリーなガイドインターフェースが含まれています。

下载与开发#

安装地址#

• Stylish
• GreasyFork
• Github Release
• CDN for CSS
• CDN for JavaScript

项目地址#

本地开发#

• このプロジェクトをクローンします：

  Copy

  git clone [email protected]:zhuozhiyongde/PKU-Art.git
  

• 作業ディレクトリに入った後、依存関係をインストールします：

  Copy

  npm install
  

• Vite サーバーを起動して HMR ホットリロード開発体験を得ます：

  Copy

  npm run dev
  

• プロジェクトをビルドするために npm run build を使用せず、custom-builder.py スクリプトを使用してリリースバージョンを生成します：

  Copy

  python3 custom-builder.py
  

  注：これを行う理由は、実際に使用しているビルドスクリプトに解決できない表示バグがあるためです。解決方法をご存知の方は、ぜひ教えてください～

  なお、既存の main.js フォーマットを参考にしてマッチングセレクタを書くことをお勧めします（つまり、一度にインポートするには正規表現が 1 つだけでなければなりません）。そうしないと、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 という文字が表示されるはずですので、インストールをクリックすれば OK です。このインストール方法は最も推奨されます。なぜなら、私の後続の更新を自動的に検出できるからです。

また、JavaScript ダウンロードリンク にアクセスし、インストールをクリックすることもできます。もしあなたのコンピュータに AdGuard がある場合、インストールが妨げられるかもしれませんが、そのスクリプト追加手段を使用しても最終的な効果には影響しません。

さらに、Github Release から JavaScript のソースファイルをダウンロードし、Userscript プラグインに手動でインポートすることもできます。

Chrome (Edge/Arc/Chromium)#

Chrome ウェブストアで TamperMonkey プラグインをインストールする必要があります。

インストールが完了したら、CDN for JavaScript にアクセスし、インストールをクリックすれば OK です。このインストール方法は最も推奨されます。なぜなら、私の後続の更新を自動的に検出できるからです。

また、JavaScript ダウンロードリンク にアクセスし、インストールをクリックすることもできます。

さらに、Github Release から JavaScript のソースファイルをダウンロードし、TamperMonkey プラグインに手動でインポートすることもできます。

CSS 安装（存在功能缺失，建议使用 JavaScript 安装）#

Safari#

App Store で Cascadea アプリ（￥18）をインストールする必要があります。

インストールが完了したら、アプリを開き、一番上のダウンロードボタンをクリックします。

次に、以下の URL を入力すればダウンロードできます：

https://cdn.arthals.ink/release/PKU-Art.user.css

また、CDN for CSS または Github Release から CSS のソースファイルをダウンロードし、Cascadea プラグインに手動でインポートすることもできます。

Chrome (Edge/Arc/Chromium)#

Chrome ウェブストアで xStyle または Stylish プラグインをインストールする必要があります。

注意：Stylish の料金ポリシーは最近変更され（最大で 3 つのスタイルを無料で使用）、アクセスもあまり安定していないようなので、xStyle のインストールをお勧めします。

xStyle をインストールした場合、インストールが完了したら、CDN for CSS または Github Release から CSS のソースファイルをダウンロードし、手動で xStyle にインポートする必要があります。具体的な操作手順は以下の通りです：

ソースファイルのテキストを取得 - クリップボードにコピー - xStyle パネルを開く - WRITE A NEW STYLE をクリック - テキストを直接編集エリアにコピー - 右側のパネルで Enabled にチェックを入れ、Enable less complier のチェックを外す

Stylish をインストールした場合、インストールが完了したら、CSS ダウンロードリンク にアクセスし、Install Style をクリックすれば OK です。

CSS と JavaScript のインストール方式の異同#

両者の主な機能は、異なる手段を通じて私が書いた CSS スタイルをあなたのページに追加することですが、追加手段には以下の違いがあります：

• CSS インストール方式は、プラグインを通じて、ローカルのスタイルをページの末尾に <style> タグを追加して直接引き入れます。

• JavaScript インストール方式は、プラグインを通じて、リアルタイムであなたのページの URL を取得し、正規表現でページの URL をマッチングさせ、私が CDN にデプロイした CSS ファイルを動的に引き入れます。その具体的な引き入れ方は、ページの末尾に <link> タグを追加して外部スタイルを引き入れます。

言い換えれば、CSS インストール方式は直接ダウンロードしたスタイルを引き入れますが、JavaScript インストール方式は私の CDN 上のファイルをリクエストして引き入れます。ブラウザにはキャッシュ戦略がありますが、一定の遅延が存在する可能性があり、これが「ページのちらつき」問題を引き起こす可能性があります。しかし、CSS インストール方式ではこの問題は発生しません。

さらに、両者には以下の機能上の違いもあります：

• JavaScript インストール方式は、CSS を追加する以外の機能も引き入れます。この機能は CSS だけでは実現できないもので、サイドバーの折りたたみ問題を回避するなどです。

使用须知#

本スタイルは、私が無用だと考えるいくつかのコントロール要素を削除しています。例えば、サイドバーの折りたたみボックス（これは本当に醜い）、再生リストの上にあるナビゲーションバー（下に同じものがあります）などです。これにより、特定の状況下で一部の機能が使用できなくなる可能性があります（例えば、サイドバーが折りたたまれた後、スタイルが有効な状態でサイドバーを再展開できなくなります）。しかし、いつでもプラグイン内でこのスタイルを無効にして元のインターフェースに戻すことができます。

最近、教学网が更新されたばかりなので、すべてのページを完全にカバーする開発進捗を保証することはできません。そのため、教学网を使用する必要がある助教や教師には、このスタイルをインストールしないことをお勧めします。機能が欠けている場合にどのようにスタイルを無効にするかを明確に理解している場合を除いて。

本スタイルは、私が常用だと考えるすべてのインターフェースをカバーしていますが、私は教学网の専門的なフロントエンドメンテナンス担当者ではないため、すべてのページを修正することはできません。しかし、特定のページが非常に一般的であるにもかかわらず修正されていないと感じた場合は、私に連絡してください。GitHub で issue を作成するか、ツリーホールにメッセージを残すか、または直接私の WeChat に追加する（文末に記載、これが最も歓迎されます！）ことができます。

このスタイルが気に入った場合は、ぜひ Star をクリックしてください（ツリーホールと GitHub のどちらでも！）。これは私にとって最大の励みと肯定です！

Q&A#

モバイル版の適応を考えていますか？#

考えていません。モバイル版の自動適応は、ほぼ再構築に等しい作業量です。一人でこのプロジェクトを維持するのは本当に疲れます qwq...

iPad で使用できますか？#

できます。方法は Safari で JavaScript をインストールするのと同じです。

コードをレビューしたり、PR を提出したりできますか？#

大歓迎です！いつでも私の GitHub にアクセスして、プロジェクトで使用されているすべてのコードを確認できます。プロジェクト内には悪意のあるコードは含まれておらず、単に CSS を追加する（CDN を通じて配布）ことでページのスタイルを変更しています。PR を提出していただければ、喜んで受け入れます！

后记#

普段の私はあまり話す人ではありませんが、この狂った一週間は本当に多くのことを感じさせ、何かを記録する必要があると思いました。

昨年、燕园に入ったばかりの私は、プログラミングのグリッドの古臭いデザインに耐えられず、図書館でしばらくサボって、プログラミングのグリッドを少しでも美しくするために（#2908869）、その時の私は CSS のコンテナレイアウトすらよく理解していませんでした。多くの知識はコードを書く過程で初めて真剣に学びましたが、あの少し粗雑な拙劣なスタイルが多くの同級生に評価されるとは思ってもみませんでした。そこで、私はさらに努力し、その三流の技術を駆使して、今では受け入れられないような文を乱用して教学网の美化を完成させました（このほとんどメンテナンス不可能なクソ山が私にプロジェクト全体を再構築する決意を与えました）。PKU Art v1 をリリースしました。多くの支持を受け、リリース後には多くの同級生から称賛を受け、今までで最も Star を獲得したツリーホールとプロジェクトを得ました。その時期、私が最も幸せだったことは、毎日ツリーホールをチェックしてどれだけフォロワーが増えたか、Stylish でどれだけダウンロードが増えたかを見ることでした（本当に虚栄心が強いです hhh）。皆さんのサポートに本当に感謝しています！

楽しい時間を過ごした後も、私は決して忘れませんでした。それはただの見かけだけの未完成品で、どんなコードレビューにも耐えられないものでした。実際、リリース以降、私はそれを使っていただけで、最適化する方法を考えていませんでした。結局、プログラマーたちはいつも言いますよね —— コードが動くなら触らないでおこう。こんな感じで、私はこのプロジェクトを放置しました。

時は流れ、今年の 8 月 1 日になりました。フロントエンドにずっと興味を持っていた私は、7 月に JS、Vue、React などのフロントエンドでよく使われる技術を体系的に学び、CSS についても新たな理解を得ました。昨年の私と同じように、何をしていいかわからない暇な時間を持っていた私は、ついに自分にやるべきことを見つけました —— このクソ山のコードを再構築することです！

再構築の過程で使用した知識は、実際には第一版と大きな違いはありませんが、体系的な知識を基に、ページ構造についてより深く理解し、万能の translate を乱用せず、適切な文を選んで効果を実現しました。同時に、何度も経験したことで、教学网のルーティングや iframe に対する理解も深まり、以前のように iframe を見て呆然とすることはなくなり、正規表現を通じてスタイルが有効になる URL をより細かく制御できるようになりました。

この一週間で本当に何を学んだかと言えば、特に何もないと思います。細部にこだわることで得られるのは、忍耐力の試練だけです。各ページは、満足するまで数時間かかり、色を使用するすべての場所で変数を使用してダークモードでの可用性を保証し、元のアイコンが気に入らない場所では IconPark のサイトで代替品を探して変更しました。Mac は、プロジェクトを完成させるために、先週の関連スクリーン使用時間が 50 時間に達したと教えてくれましたが、これは参考を探したり、配色を選んだりする時間を含んでいません。

私は常に、自分が興味を持つ事柄には惜しみなく時間を投資する人ですが、今回の費やした時間と最終的に書いたコードの行数は、最初の予想をはるかに超えています。

その間、私は決して飽きていなかったわけではありません。自問自答したこともありました。こんなに時間をかけて書いたとして、結局使う人はどれだけいるのか？私が費やした時間と労力は、自分を楽しませるためだけのものではないのか？万が一教学网もプログラミングのグリッドのようにスタイルを更新したらどうするのか？... しかし、私はいつも自分を慰めました。もうこんなに書いたのだから（埋没コストあああああ）、途中で投げ出すことはできないでしょう？そうして、自己否定しながら、元のコードがどう書かれたのかを疑問に思いながら、機械的に何百回も使った属性や変数を叩いているうちに、最終的な成果が徐々に磨かれていきました —— 全く新しい、ダークモードを持つ PKU Art v2。

これで、PKU Art v2 は私や皆さんを満足させるに足るものだと信じることができました。

これにより、教学网のページデザインの問題はついに解決されました。私が考えている次のステップは、新しく学んだ JS の知識を使って、機能的なインタラクションの問題を解決することです。例えば、期末試験前の大予習の夜に教学网の動画をダウンロードするのが不便だと感じた（バッチダウンロードができない、奇妙なソース名で探しにくいなど…）ことや、ツリーホールでの同級生たちのコメントからさまざまな痛点を見つけました：お気に入りをエクスポートできない、バッチでフォローを外せない…（私は自分のサボりを制限するためにツリーホールにタイムリミット機能を追加したいとも思っています hhh）。

次の夏休みには、先修課程を学ぶことに加えて、自分にやるべきことを見つけたいと思います —— それは、PKU Tool のスクリプト / ウェブサイトを完成させ、上記のすべての問題を解決することです！どれだけ完成できるか、どれだけの時間がかかるかは未知数ですが、私は全力を尽くして取り組むつもりです。昨年末に図書館でサボっていた PKU Art の私のように hhh。