代码能跑就别动

但是太久没更新，主题落后了一个大版本。之前陆陆续续出现了头像加载问题，css文件加载问题，明显感觉到旧版主题正在失去维护。

这几天发现嵌入页面的css文件也没了，嵌入全变成了一串链接，属于比较严重的问题了。闭门造车修不如直接更新，于是升了一下新版主题(ver3.0.4)。

出现问题

Blog的h2标题出现了这样的错误划线，标题的划线也错位。标题的划线动画关了就好了，正文的怎么办呢？

排查过程

F12选一下这个蓝色气泡，随便乱改了一下CSS发现是.entry-content h2:after的样式导致的。

解决问题不如解决提出问题的人

定位到产生问题的css文件路径在/wordpress/wp-content/themes/Sakurairo/css/content-style/sakura.css （其实是蒙出来的，看链接https://love.nimisora.icu/wp-content/themes/Sakurairo/css/?iro_header&sakura&wave&minify&3.0.4 发现这是个合成后的css文件，依稀记得sakurairo里正文样式可以选sakura样式和github样式，于是就找到了）

.entry-content h2:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 30%;
    right: 0;
    width: 0; //改成了0
    height: 0.7em;
    background-color: var(--article-theme-highlight,var(--theme-skin-matching));
    opacity: 0.4;
    z-index: 0;
    border-radius: 30px;
    transition: all 0.3s ease;
}

改完之后运行sudo systemctl reload nginx 发现没变化，猜测是缓存作妖

打开开发者调试工具，长按刷新键选择清空缓存并硬刷新

新发现

这个蓝条不见了，但把鼠标放上去就又有了，豁原来这应该是个鼠标放上去就会变长表示强调的划线动画

那改改hover前后的厚度和偏移应该就行了

.entry-content h2:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 0;
    height: 0.3em;
    background-color: var(--article-theme-highlight,var(--theme-skin-matching));
    opacity: 0.4;
    z-index: 0;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.entry-content h2:hover:after {
	width: 100%;
  	left: 0;
	opacity: 0.7;
}

随便改了改，动画顺眼了，就这样了

发现评论区标题comments-list-title有相同问题

去github项目搜了一下发现h3#comments-list-title 在theme文件夹下根目录的style.css 里面

h3#comments-list-title::after {
	content: '';
	position: absolute;
	bottom: -2px;
  left: 15%;
	width: 0%;
	height: 0.4em;
	background-color: var(--article-theme-highlight,var(--theme-skin-matching)) !important;
	opacity: 0.4;
	z-index: 0;
	border-radius: 30px;
	transition: all 0.3s ease;
}

h3#comments-list-title:hover::after {
	width: 85%;
	opacity: 0.7;
}
// 发现left得留出15%，不然蓝线直接贴页面边缘了，怪

总结

稍微学到了一点点（真的只有一点点）CSS的知识

留个记录防止以后自己不记得改了什么