next主题中超链接颜色与样式的修改

2024-07-10 11:06| 来源: 网络整理| 查看: 265

本文首发于我的个人博客

修改超链接样式问题描述

Next主题自带的超链接样式仅仅是将超链接的文字添加了下划线且文字颜色仍未改变，显示效果很差且不明显翻了很多博客发现都让在./themes/next/source/css/_custom/custom.styl文件中添加新的超链接CSS样式，但是我使用的Next主题的文件夹中并没有发现这个文件夹🤷，查阅Next的更新说明后发现next已经在7.3.0版本中就已经移除了这个文件，而我的Next主题为8.2.1版本，所以根本不可能有这个文件。

解决方案

主题样式是在\hexoBlog\themes\next\source\css,这里面保存了Muse,Mist和Pisces三个主题的css文件,例如,字体的边框的颜色还有字体图片的大小等就保存在next\source\css\_variables里. 而我要修改的body超链接的样式在themes\next\source\css\_common\components\post\post-body.styl里,在这里添加条目:

a { color: #428BCA; font-weight: bold; }

这样就可以把超链接的样式改为蓝色，粗体

然鹅并没有完全成功😠，虽然我们已经成功将超链接颜色修改了，但是阅读全文按钮也被修改成了蓝色加粗，淦，这怎么行，参考别人的代码思考了一下之后魔改了一下：

a:not(.btn){ color: #f89fa0; border-bottom: none; &:hover { color: #ff7a7a; font-weight: bold; text-decoration: underline; } }

成功将超链接样式修改而不修改阅读全文的按钮🤪

然鹅，在本地localhost:4000看着实现得好好的功能，部署上线服务器之后就完全没有效果。。。此问题。。。超出了我的知识能力范围，，，尚未解决😭

睡一觉起来它就好了。。。真是玄学🌝

PS:可能原因猜测：服务器的同步速度较慢，在deploy之后还尚未更新完

【本文地址】

公司简介

联系我们