HackPig520 的博客

After visiting other blogs in xLog, I discovered many custom CSS effects. Today, I'm here to share the style optimization of my blog with everyone.

Problems Encountered#

The blog page couldn't be accelerated because there were too many resources to load ¹, and I couldn't use CDN caching services like CloudFlare ².

Since that's the case, I can only optimize the visual effects for the entire site. After testing the website's loading speed, I found that there is a 3-5 second white screen time on the homepage. Can this time be utilized? After testing on the test site for a while, I found out that it cannot because it doesn't support custom JavaScript.

Solution#

Now, let me explain my optimization plan for reference.

Using Remote Resources#

Every time I update the custom CSS, I leave a mark on the chain. Therefore, I use the @import url(...) method, which perfectly solves the problem of needing to refresh twice to update the custom CSS ³, and it is more convenient for debugging.

Using Pseudo-elements of Cascading Style Sheets#

WARNING: Not recommended for learning

When writing CSS, you will find that your work seems to revolve around boxes - setting sizes, colors, positions, and so on. Most HTML elements in a page can be seen as a stack of boxes.
CSS layout is mainly based on the box model.

• Source

1. ::after
   The pseudo-element ::after can insert some content after the specified element. In ::after, the content property needs to be used to define the content to be appended, and the content property must be defined in ::after to take effect ⁴.

2. ::before
   The pseudo-element ::before can insert some content before the specified element. Similar to ::after, the content property needs to be used in ::before to define the content to be appended, and the content property must be defined in ::before to take effect ⁴.

3. ::first-letter

4. ::first-line

5. ::selection

6. ::placeholder

The reason for only discussing the first two is that we only use them. Here is an example code that adds the letter "我" after the "Sponsor" button:

/* You need to copy the selector yourself as xLog may update the style */
body > div.xlog-page.xlog-page-index.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.flex.py-12.w-full > div > div > div.flex.space-x-0.sm\:space-x-5.space-y-2.sm\:space-y-0.flex-col.sm\:flex-row.text-sm.sm\:text-base > span.xlog-site-patron > button > span > span::after {
	content: "我";
	color: grey;
}
body > div.xlog-page.xlog-page-post.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.flex.py-12.w-full > div > div > div.flex.space-x-0.sm\:space-x-5.space-y-2.sm\:space-y-0.flex-col.sm\:flex-row.text-sm.sm\:text-base > span.xlog-site-patron > button > span > span::after {
	content: "我";
	color: grey;
}

/**
 * How to copy element selectors
 * 1. Open Chrome DevTools
 * 2. Navigate to the "Elements" tab
 * 3. Right-click on an element -> Copy -> Copy selector
 * The image below demonstrates the process
 */

Demo (Mac English)	Demo (Windows Chinese)

Example: Removing the Bell Icon on the Homepage#

Simply use CSS display:none. Later, I found that the position of the bell icon would change, so I used the enumeration method ⁵ to set all possible elements to display:none.

Here is the code:

/* https://github.com/xiaozhu2007/cdn/blob/60b809e092fc2dac569bf5c6527d900168f3a36d/xLog/main.css#L92-L97 */
body > div.xlog-page.xlog-page-index.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.text-gray-500.flex.items-center.justify-between.w-full.mt-auto > div.xlog-site-connect.pl-1 > div > div > svg {
	display: none;
}
body > div.xlog-page.xlog-page-post.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.text-gray-500.flex.items-center.justify-between.w-full.mt-auto > div.xlog-site-connect.pl-1 > div > div > svg {
	display: none;
}

Summary#

This article provides a detailed introduction on how to optimize the style of a blog. The author first mentioned that the blog page couldn't be accelerated due to too many resources to load and the inability to use CDN caching services like CloudFlare. Then, the author proposed using remote resources and using pseudo-elements of cascading style sheets to optimize the style of the blog. Finally, the author summarized the effects of these optimization methods.

This article is very helpful for blog authors. Blog authors can use these optimization methods to improve the loading speed of their blogs and enhance the user experience.

I hope this blog article is helpful to you.