Preface#
As a PKUer, I have struggled to adapt to the style of the teaching website since I enrolled; it really looks too ugly! How can this motivate anyone to learn?! Why do I keep slacking off? Isn't it because this teaching website makes me not want to study just by looking at it? (Shocking voice)
This dissatisfaction finally erupted this Thursday. I looked at the outdated and unattractive programming grid and couldn't stand it any longer. Since Friday and the weekend were free, I happily started slacking off in the library (actually, I only felt happy when I finally saw the results; during the process of adjusting various styles and selectors, I almost wanted to vomit blood, learning a lot of knowledge and syntax on the go), and I worked hard to produce the programming grid, the IAAA login page, and most of the CSS for the teaching website.
I really wanted to complain about that programming grid built with tables, the teaching website with a big black box on top, and that design that is simply out of this world, which made me really want to ask if they even registered a patent for that results page (it even used two layers of iframes!). But in the end, I still completed it. This led to the birth of PKU Art, named similarly to my other style, Baidu Art (advertisement: this is a nice style I created in my sophomore year and have been using ever since). Looking back, spending two days for a visual pleasure that will last for years is worth it!
Introduction#
PKU Art is a CSS stylesheet added to pages through a browser extension. It can override the original styles, thereby enhancing the visual experience of the teaching website. The first version was released last November and was relatively rudimentary. The recently updated second version has completely restructured the first version, perfectly supporting dark mode and adding more interactive effects and design improvements.
Documentation#
This document contains a more visually appealing and timely guide interface.
Download and Development#
Installation Links#
Project Link#
Github Repo not found
The embedded github repo could not be found…
Local Development#
-
Clone this project:
git clone [email protected]:zhuozhiyongde/PKU-Art.git -
After entering the working directory, install dependencies:
npm install -
Start the Vite server for a hot module replacement (HMR) development experience:
npm run dev -
Do not use
npm run buildto build the project; instead, use thecustom-builder.pyscript to generate the release version:python3 custom-builder.pyNote: The reason for this is that the script I actually use for building has a display bug that I currently cannot resolve. If you know how to fix it, feel free to let me know~
Also: Please refer to the existing
main.jsformat to write matching selectors (i.e., only one regular expression must be included at a time), otherwise thecustom-builder.pyscript may not be able to read and generate the release version properly.
Changelog#
See ChangeLog.md
Todo#
See Agenda.md
Effect Preview#
Due to space limitations, only the effects in dark mode are shown: )
To showcase the effects, some HTML nodes may have been modified, as there were too many recording interfaces to fit.
Download and Installation#
The following content may not be updated in a timely manner, so it is recommended to view the documentation.
PKU Art currently supports two installation methods: CSS installation and JS installation, compatible with Safari and Chrome (Edge). Both installation methods require the use of a browser extension, and the JavaScript installation will have some features that CSS alone cannot achieve. Therefore, it is recommended to use the JavaScript installation method.
Supplement: Some students reported that the JS installation method causes some pages to render with a "lag," which is suspected to be due to the order of JS injection. Therefore, it is suggested that students use the CSS installation for a more stable experience.This has been fixed.
JavaScript Installation#
Safari#
You need to install the Userscript extension from the App Store.
After installation, visit CDN for JavaScript, click the extension icon, and you should see the text Userscript Detected: Tap to install. Click to install. This installation method is highly recommended because it can automatically detect my subsequent updates.
You can also visit the JavaScript download link and click to install. If you have AdGuard on your computer, it may interfere with the installation, but using that script addition method does not affect the final result.
Additionally, you can download the JavaScript source file from Github Release and manually import it into the Userscript extension.
Chrome (Edge/Arc/Chromium)#
You need to install the TamperMonkey extension from the Chrome web store.
After installation, visit CDN for JavaScript and click to install. This installation method is highly recommended because it can automatically detect my subsequent updates.
You can also visit the JavaScript download link and click to install.
In addition, you can download the JavaScript source file from Github Release and manually import it into the TamperMonkey extension.
CSS Installation (with functionality limitations, JavaScript installation is recommended)#
Safari#
You need to install the Cascadea app from the App Store (￥18).
After installation, open the app and click the download button at the top.
Then enter the following URL to download:
https://cdn.arthals.ink/release/PKU-Art.user.css
Additionally, you can download the CSS source file from CDN for CSS or Github Release and manually import it into the Cascadea extension.
Chrome (Edge/Arc/Chromium)#
You need to install the xStyle or Stylish extension from the Chrome web store.
Note: Stylish's pricing policy has recently changed (allowing free use of a maximum of three styles) and it seems to be unstable, so it is recommended to install xStyle.
If you installed xStyle, after installation, you need to download the CSS source file from CDN for CSS or Github Release and manually import it into xStyle. The specific steps are as follows:
Obtain the source file text - Copy to clipboard - Open the xStyle panel - Click
WRITE A NEW STYLE- Paste the text directly into the editing area - In the right panel, checkEnabledand uncheckEnable less compiler.
If you installed Stylish, after installation, you can also visit the CSS download link and click Install Style.
Similarities and Differences Between CSS and JavaScript Installation Methods#
Both methods primarily serve to append the CSS styles I wrote to your page through different means, but there are the following differences in how they are added:
-
The CSS installation method directly uses the extension to introduce your local styles by appending a
<style>tag at the end of the page. -
The JavaScript installation method uses the extension to dynamically obtain your page URL and match it with a regular expression to introduce the CSS file I deployed on the CDN, specifically by appending a
<link>tag at the end of the page.
In simpler terms, the CSS installation method directly introduces the styles you downloaded, while the JavaScript installation method introduces them by requesting the files from my CDN. Although the browser has caching strategies, there may still be some delays, which could lead to "page flickering." However, the CSS installation method does not cause this issue.
Additionally, the two methods have the following functional differences:
- The JavaScript installation method introduces some features beyond just appending CSS, which cannot be achieved with CSS alone, such as avoiding sidebar collapse issues.
Usage Notes#
This style removes some control elements that I find useless, such as the sidebar collapse box (which is too ugly) and the navigation bar above the playlist (since there is a similar one below). This may lead to some functionalities being unavailable in special cases (for example, after collapsing the sidebar, it cannot be expanded again while the style is enabled). However, you can always disable this style in the extension to revert to the original interface.
Since the teaching website has just undergone an update, I cannot guarantee that the development progress covers all pages completely. Therefore, I advise all teaching assistants or teachers who need to use the teaching website not to install this style unless you clearly know how to disable the style when functionalities are missing.
This style covers all the interfaces I consider commonly used, but I am not a professional front-end maintainer of the teaching website, so I cannot modify all pages. However, if you think a certain page is very commonly used but has not been modified, feel free to contact me, open an issue on GitHub, leave a message in the tree hole, or directly add me on WeChat (at the end of this document, this is the most welcome way!).
If you like this style, please don't hesitate to click Star (both on the tree hole and GitHub!), as this is the greatest encouragement and affirmation for me!
Q&A#
Are there plans for mobile adaptation?#
No, making a mobile adaptive version is almost equivalent to a complete reconstruction. As one person maintaining this project, I am really too tired qwq...
Can it be used on iPad?#
Yes, the method is the same as using JavaScript installation on Safari.
Can I review the code and submit a PR?#
You are very welcome! You can always visit my GitHub, where all the code used in this project is available. I can assure you that the project does not contain any malicious code; it only changes the page style by appending CSS (distributed via CDN). If you are willing to submit a PR, I would be very happy to accept it!
Postscript#
I am not usually a very talkative person, but this crazy week has left me with a lot of feelings, and I feel like I need to write something down.
When I first entered Yanyuan last year, I couldn't stand the outdated design of the programming grid, so I spent a long time in the library just to make the programming grid look a little better (#2908869). At that time, I didn't even understand CSS container layouts very well; a lot of knowledge was learned seriously for the first time while coding. However, I didn't expect that this somewhat rough and crude style would receive a lot of recognition from my classmates. So I continued to work hard, and with my limited skills, I completed the beautification of the teaching website using various statements that now seem completely unacceptable. This also led me to decide to completely reconstruct the entire project, and I released PKU Art v1. Thanks to the support, after the release, I received a lot of praise from my classmates and gained the most stars on a tree hole & project to date. The happiest thing during that time was checking how many followers I gained on the tree hole every day and how many downloads I had on Stylish (so vain, haha). I am truly grateful for everyone's support!
After the happiness, I never forgot that it was just a superficial half-finished product, which could not withstand even a single code review. In fact, since the release, I had been using it myself and had not thought of ways to optimize it. After all, programmers often have an old saying—if the code runs, don't touch it. So I just let it be and set this project aside.
Time flew to August 1st of this year. Having always been very interested in front-end development, I systematically learned JS, Vue, React, and other commonly used front-end technologies in July, and I also gained some new understanding of CSS. Just like the me from last year, who was bored and didn't know what to do, I finally found something to do for myself—I wanted to reconstruct this pile of messy code!
The knowledge used in the reconstruction process is not significantly different from the first version, but with a systematic knowledge base, I gained a deeper understanding of the page structure. I no longer abused the universal translate property or added pseudo-classes randomly; instead, I chose suitable statements step by step according to the original structure to achieve the desired effects. At the same time, having become familiar with the teaching website's routing and nested iframes, I no longer stared blankly at an iframe for half a day, and I gained finer control over the URLs where styles would take effect through regular expressions.
If I were to say that I learned something this week, I think it would be nothing much. The attention to detail probably only tested my patience; I spent several hours on each page to be satisfied, used variables for every color to ensure usability in dark mode, and specifically searched for replacements on the IconPark website for every icon I thought was inadequate. My Mac told me that to complete this project, my related screen time reached 50 hours last week, not counting the time spent looking for references and choosing color schemes.
I have always been someone who invests at all costs in things I am interested in, but the time spent this time and the final lines of code written far exceeded my initial expectations.
During this period, I also felt weary at times. I asked myself, even if I spent so much time writing, how many people would actually use it in the end? Wasn't the time and effort I put in just for my own amusement? What if the teaching website updates its style like the programming grid? ... But I always comforted myself that I had already written so much (sunk cost, ahhh), how could I bear to give up halfway? So, in this process of both denying myself and questioning how the original code was written, while mechanically typing those properties and variables that I had used hundreds of times, I gradually polished out the final result—the brand new, dark mode-enabled PKU Art v2.
Thus, I finally believe that this version of PKU Art v2 is satisfactory enough for both me and everyone.
With this, the design issues of the teaching website's pages have finally been resolved. My next step is to use the new JS knowledge I have learned to address some functional interaction issues. For example, I found it inconvenient to download teaching website videos on the night before the final exam (unable to download in bulk, having strange source naming that is hard to find, etc.). Besides the teaching website, I also found various pain points from the comments of classmates while frequently visiting the tree hole: unable to export favorites, unable to unfollow in bulk... (I have also always wanted to add a time-limited function to the tree hole to limit my slacking off, haha).
I hope to find something to do for myself during the upcoming summer vacation, besides studying some prerequisite courses—that is, to complete a PKU Tool script/website to try to solve all the aforementioned issues! Although how much I can accomplish and how long it will take are unknowns, I will do my best, just like the me from last year who was slacking off in the library with PKU Art.