HackPig520 的博客

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

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 blank screen time on the homepage. Can we make use of this time? After testing on the test site for a while, I found out that we can't because it doesn't support custom JavaScript.

Solutions#

Now let me explain my optimization plan for your reference.

Using Remote Resources#

Every time I update the custom CSS, I leave a mark on the chain. Therefore, I use @import url(...) to perfectly solve 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#

WARN: 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 Site

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 word "我" after the "Sponsor" button:

/* You need to copy the selector yourself because 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;
}

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

Demo (Mac English)	Demo (Windows Chinese)

Example: Removing the Bell Icon on the Homepage#

Simply use CSS display:none, but 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;
}

Conclusion#

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 because there were too many resources to load and couldn't 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.