自定义css的有效存放位置

Hexo生成的网站，其自定义css实际上要放到/source/self（自定义内容）文件夹下。

因为主题的_config文件设置优先于hexo _config文件设置，所以，主题的_config文件中如下的inject设置：

image-20240130074250157

其地址实际上指向 hexo根目录/source/self/custom.css，只有这里的custom.css会于网站生效！（当然为免custom.css意外丢失，可以在hexo根目录下也备份一个self文件夹）上图中主题的 _config 配置会覆盖 Hexo 的 _config 配置（所以后者干脆留空即可）。

image-20240130074651315

应用自定义css时的选择器 (selector) 问题

我们常用自定义css来美化或达到某些网页显示目的，这个时候，就要先找到要更改内容部分的选择器，然后在该选择器中应用想要的新样式。

例如：Ai-china使用了文章封面 (cover) 并显示于首页，这样首页会显示文章封面、标题和简短说明，看起来美观许多。

image-20240130075346702

但你可能也看到了，右侧的封面图像并没有显示完全，实在有碍观瞻。所以，我们通过自定义css来改变一下，让它能够自适应尺寸，完整显示。

我们在需要更改的元素（本例是这个封面图片）上方右键点选 检查或inpect（chrome浏览器，其他也类似），出现类似下图的界面

image-20240130075926669

左侧 元素 选项卡下的高亮部分，就是你右键点选的图片部分的 HTML，右侧带箭头的方框是该元素的选择器，其中的高亮（黑色部分）是最直接作用的选择器。黑体显示的选择器表示这些样式是直接应用于当前选中的元素的。而那些灰色显示的选择器可能表示那些样式是由于某些继承或者更复杂的 CSS 选择机制应用在当前元素上的。

右下的红框内是控制我们想要改变显示方式图片的object-fit，注意：这里本来应该是不加删除线的，只因Ai-china已经用Custom.css覆盖掉了这条设置，所以它才显示被删除。那些被划掉的样式表示它们已经被其他更具优先级的样式覆盖了。

好，要实现目的，我们的完整选择器应该是#recent-posts > .recent-post-item .post_cover .post-bg，真正起作用的应该是其中的.post_cover，那为什么要使用这一长串的选择器呢？

这是因为.post_cover是一个类选择器，而#recent-posts > .recent-post-item .post_cover .post-bg是一个由元素ID、类和子元素组合而成的更复杂更具体的选择器，所以，这个复杂选择器的优先级更高，它的样式规则会覆盖单纯.post_cover选择器的样式规则。而且，.post_cover也可能包含于其他的复杂选择器当中，一旦只应用.post_cover这个类选择器，可能会出现其他不想被覆盖却又被覆盖的css效果。

在custom.css中添加如下语句：

1
2
3
4
/* 将所有.post_cover类的object-fit从cover改为contain以完整显示 */
#recent-posts > .recent-post-item .post_cover .post-bg {
  object-fit: contain;
}

object-fit:的值本是 cover，即充满该元素，这就导致长宽比与该元素不同的图片顾宽不顾高、顾高不顾宽，显示不完全。改为contain即可自适应完整显示。

保存后上传，即可看到图片已（缩小）完整显示。如果没效果，可能是该选择器的优先级不够，可以在后面添加 !important 强行提升优先级以生效。

1
2
3
4
/* 将所有.post_cover类的object-fit从cover改为contain以完整显示 */
#recent-posts > .recent-post-item .post_cover .post-bg {
  object-fit: contain !important;
}

image-20240130081610312

下面原来的样式的object-fit: cover被覆盖掉，加了划线。

image-20240130081742348

可以看出，的确已完整显示，但因为截图比例与封面本来提供的空间比例有些失调，也会不美观。所以截图时尽量照顾到这种比例，目测大概宽高比为5:4左右。