HackPig520: "在参观了xLog 里的其他博客后，发现了许多自定义的CSS效果。今天来给大家分享一下我博客的样式优化。遇到的问题 "

xFeedBeta

@hackpig520

HackPig520·a year ago

在参观了xLog 里的其他博客后，发现了许多自定义的CSS效果。今天来给大家分享一下我博客的样式优化。

遇到的问题

博客页面无法加速，需要加载的资源太多了¹，而且无法使用 CloudFlare 等CDN缓存服务²。

既然这样，全站只能优化用户的视觉效果了，在测试网站打开速度之后，发现首页会有 3~5 秒的白屏时间，那么这一段时间能否利用起来呢？在测试站点上测试了一小会后发现——并不能，~~因为不支持自定义 JavaScript~~。

解决方案

下面我来说一下我的优化方案，仅供参考。

使用远程资源

每次更新自定义CSS，都会在链上留下一条标记，因此我采用了@import url(...)的方式，较完美的解决了自定义CSS需要刷新两下³才能更新的问题，并且更方便调试了。

使用层叠样式表的伪元素

WARN: 不建议学习

编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
CSS 布局主要是基于盒子模型。
—— 源站点

::after
伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效⁴。
::before
伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效⁴。
::first-letter
::first-line
::selection
::placeholder

之所以只讲前两个，是因为我们只用到它们，下面是一个示例代码，将“赞助”按钮后面添加一个字“我”：

/* 由于 xLog 可能会更新样式，您需要自行复制选择器 */
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;
}

/**
 * 复制元素选择器的方法
 * 1. 打开 Chrome 控制台
 * 2. 导航到“元素”Tab 页面
 * 3. 右键单击某个元素 -> 复制 -> 复制选择器
 * 下方是图片演示
 */

演示(Mac English)	演示(Windows Chinese)

实例: 去除首页的小铃铛

使用 CSS 的 display:none 即可，后来发现小铃铛的位置会变，因此采用列举法⁵把所有可能的元素全部 display:none 了。

代码如下：

/* 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;
}