[杂记] 我是如何美化我的博客的

本文最后更新于天前，文中部分描述可能已经过时。

不知不觉间，用 Cards 这个主题也有两年了，一直很喜欢这个主题，也经历了很多次的更新，在此记录下我个人对其进行的个性化的小小改造和美化。

美化超链接

这个主题默认的超链接样式很普通也很常见，但我就喜欢一些花里胡哨的，于是…

这个动效是我基于 Variable powered underline transition 😎 改的，相比原作增加了线条粗细的变化，贴上代码

a
    color var(--body-color)
    text-decoration none
    background-image linear-gradient(90deg, var(--bg-color), var(--bg-color)),linear-gradient(90deg, var(--underline-color), var(--underline-color))
    background-size var(--underline-block-width) var(--underline-width), 100% var(--underline-width)
    background-repeat no-repeat
    background-position-x calc(var(--underline-block-width) * -1 ), 0
    background-position-y 100%
    transition var(--underline-transition)

    &:hover
        text-decoration none
        background-image linear-gradient(90deg, var(--bg-color), var(--bg-color)),linear-gradient(90deg,var(--underline-color-hover),var(--underline-color-hover))
        background-size var(--underline-block-width) var(--underline-width-hover), 100% var(--underline-width-hover)
        background-position-x calc(100% + var(--underline-block-width)), 0

锚点跳转平滑过渡

由于 Cards 的文章目录和返回顶部都是纯原生实现（挺多网页用的 js ），所以平滑过渡也很简单，css 里面加上这句就行

body,html{
  scroll-behavior:smooth;
}

~~不过我常用的 Safari 似乎不支持这个属性🤷‍♂️~~

Safari 15.4 之后已经支持 smooth-behavior 属性了

为导航栏增加毛玻璃特效

在 Cards 的默认配置下，导航栏是不固定的，通过设置属性

navbar:
	sticky: true

使导航栏固定在顶端。

然而，主题作者似乎忘记了给导航栏加上背景颜色（当然也可能是出于其他考量），导致导航栏与页面内容重叠。

导航栏与页面内容重叠

作为一个强迫症，这我肯定不能忍，打开页面检查器，找到相应的 css 片段，用半透明背景色和 backdrop-fliter 属性造出一个毛玻璃特效

@media screen and (min-width: 1080px) {
  .header {
    transition: color 0.6s, background-color 0.6s;/* 暗色模式和浅色模式的过渡效果 */
    position: sticky;
    
    background-color: var(--bg-header-color);/* 设置背景色 */
    /* 这里我没有直接设置颜色而使用变量，是为了让亮色模式和暗色模式能有不同的背景色，效果更和谐一点 */
    
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);/* 设置模糊效果 */
    
    -webkit-box-shadow: 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.12);
    -moz-box-shadow: 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.12);
    box-shadow: 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.12);/* 添加阴影 */
  }
}

毛玻璃特效

效果尚可，于是将这些修改写到主题里去，相关的文件为 主题文件夹 /source/css/style/_functions/header.styl 。

if (hexo-config('navbar.sticky'))
    @media screen and (min-width: 1080px)
        .header
            transition color 0.6s, background-color 0.6s
            position sticky
            background-color var(--bg-header-color)
            -webkit-backdrop-filter blur(20px)
            backdrop-filter blur(20px)
            -webkit-box-shadow 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.12)
            -moz-box-shadow 0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.12)
            box-shadow 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.12)