修改文章内链接样式｜ hexo

最新推荐文章于 2022-10-30 08:12:14 发布

原创最新推荐文章于 2022-10-30 08:12:14 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#hexo #样式

hexo 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Hexo的Next主题中自定义文章内链接的颜色与悬停效果，通过新增配置项与修改样式文件实现高度可配置的定制。

针对 hexo next 主题，不过其他主题也大同小异。

效果

以下是方法

新增配置

在主题配置文件theme/next/_config.yml，新增配置项：

custom_css:
  # the style of post body link
  post_body_a:
    enable: true
    normal_color: "#0593d3"
    hover_color: "#0477ab"

修改样式文件

next主题提供了用户自定义样式的扩展功能，我们只需要在theme/next/source/css/_custom/custom.styl里添加样式就可以新增或覆盖原来的样式。

// custom.styl
if hexo-config("custom_css.post_body_a.enable")
  .post-body
    a{
      color: convert(hexo-config("custom_css.post_body_a.normal_color"));
      border-bottom: none;
      &:hover {
        color: convert(hexo-config("custom_css.post_body_a.hover_color"));
        text-decoration: underline;
      }
    }