Preface#
As a PKUer, I have struggled to adapt to the style of the teaching website since I started school; it's really too ugly! How can this motivate anyone to learn?! Why do I always slack off? Isn't it because this teaching website makes me not want to study just by looking at it? (Shocked)
This dissatisfaction finally erupted this Thursday. I looked at the outdated and clunky programming grid and could no longer hold back. Since Friday and the weekend had nothing planned, I happily started slacking off in the library (actually, I was only happy when I finally saw the results; the process of adjusting various styles and selectors almost made me want to vomit. I learned a lot of knowledge and syntax while using it), and I worked hard to produce the programming grid, the IAAA login page, and most of the CSS for the teaching website.
I really want to complain about that programming grid made 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 it was even worth registering a patent for the results page (it even uses two layers of iframe nesting!). 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). Now that I think about it, spending two days for a visual pleasure that will last for the next few years is worth it!
Introduction#
PKU Art is a CSS stylesheet added to pages via a browser extension. It can override the original styles, 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#
一个北大教学网的美化样式
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, please let me know~
Also: Please refer to the existing
main.jsformat to write matching selectors (i.e., only one regular expression must be introduced 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 demonstrate the effect, 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 both Safari and Chrome (Edge). Both installation methods require the use of a browser extension, and the JavaScript installation will have some functionalities 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 speculated to be due to the order of JS injection. Therefore, it is suggested that students use the CSS installation for a more stable experience.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 the most 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.
In addition, 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 the most 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 functional 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 (you can use a maximum of three styles for free), and access seems unstable, so it is recommended to install xStyle.
If you install 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 install 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 function to add 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 requests the files from my CDN, which may still have some delay despite the browser's caching strategy, potentially leading to "page flickering." However, the CSS installation method does not cause this issue.
In addition, there are also functional differences between the two:
- The JavaScript installation method introduces some functionalities beyond just adding CSS, which cannot be achieved solely through CSS, 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 for the teaching website, so I cannot modify all pages. However, if you think a certain commonly used page 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 (the latter is the most welcome!).
If you like this style, please don't hesitate to click Star (both in the tree hole and on GitHub)! This is the greatest encouragement and affirmation for me!
Q&A#
Are there plans to adapt it for mobile?#
No, making it mobile-responsive 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?#
Absolutely 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 simply changes the page style by adding CSS (distributed via CDN). If you are willing to submit a PR, I would be very happy to accept it!
Afterword#
I am not usually a very talkative person, but this crazy week has left me with a lot of feelings, and I feel I should write something down.
When I first entered Yanyuan last year, I couldn't stand the outdated design of the programming grid. I slacked off in the library for a long time just to make the programming grid look a bit better (#2908869). At that time, I didn't even understand CSS container layouts very well; I learned a lot of knowledge for the first time while coding. However, I didn't expect that this somewhat rough and clumsy 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 (it was this almost unmaintainable mess that made me determined to refactor the entire project), and released PKU Art v1. Thanks to everyone's 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. During that time, one of the happiest things for me was checking the tree hole every day to see how many followers I gained and how many downloads I received on Stylish (so vain, haha). I am truly grateful for everyone's support!
After the initial happiness, I never forgot that it was just a superficial half-finished product that couldn't withstand even a single code review. In fact, since the release, I had only been using it without trying to optimize it. After all, programmers have an old saying—if the code runs, don't touch it. So I just let it be and put this project aside.
Time flew to August 1st of this year. Having been very interested in front-end development, I systematically learned JS, Vue, React, and other commonly used front-end technologies in July, and 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 refactor this mess of code!
The process of refactoring didn't involve much new knowledge compared to the first version, but with a systematic foundation, I gained a deeper understanding of page structure. I no longer abused the universal translate property or randomly added pseudo-classes; 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 nesting, I no longer stared blankly at an iframe for half an hour, and I gained more precise control over the URLs where styles would take effect through regular expressions.
If I were to say that I learned something significant 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 until I was satisfied. I used variables for every place that involved color to ensure usability in dark mode, and I 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 colors.
I have always been someone who invests heavily in things I am interested in, but the time spent and the final lines of code written far exceeded my initial expectations.
During this time, I also felt weary at times. I asked myself, even if I spent so much time writing this, 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 fallacy!), how could I bear to give up halfway? So, amidst this self-doubt and questioning how the original code was written, while mechanically typing those properties and variables 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 good enough to satisfy both myself and everyone else.
With this, the design issues of the teaching website's pages have finally been resolved. My next anticipated step is to use the newly learned JS knowledge to address some functional interaction issues. For example, I found it inconvenient to download teaching website videos en masse the night before the final exam (unable to batch download, having strange source naming that is hard to search for, etc.). Besides the teaching website, I have also found various pain points from comments by classmates while frequently visiting the tree hole: unable to export favorites, unable to batch unfollow... (I have also always wanted to add a time-limited feature to the tree hole to limit my slacking off, haha).
I hope to find something to do 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 who was slacking off in the library with PKU Art last year, haha.