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

This article was last updated days ago, some of the information may be outdated.

不知不觉间,用 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)

然而 (没错我又要说然而了) ,当我以为一切完美大功告成的时候, Chrome 又给了我当头一棒。

b2t 按钮定位异常

你怎么跑到上面去了啊喂!!!

通过注释排除大法,我找到了问题所在——就是 backdrop-filter 属性,一旦我将其注释掉,b2t 按钮的位置就恢复正常了。(明明是 fixed 定位,还能出这种 bug ,就离谱)

谷歌搜了一圈,发现似乎是 Chrome 的兼容性问题

CSS backdrop-filter 简介与苹果 iOS 毛玻璃效果》的评论区:

吴同学:

​ 元素设置 backdrop-filter 后,子元素的 position:fixed 不再基于浏览器窗口定位而是基于这个元素定位了,但是还是会固定在页面上,不跟随浏览器的滚动条滚动,就很坑 ==

zhangdi:

​ 目前发现在父级设置毛玻璃后,子孙级再设置不起作用,请问有办法解决吗?

所以说问题很明显了,只要我把 b2t 按钮放在 header 以外的地方就好了

于是:

然后把 css 选择器改一下就好啦

总结

虽说博客这种东西是拿来写作的,Cards 的作者也在主题文档中写道:

…就像「Cards」一直试图表达的,专注于内容输出而非沉溺在无尽的折腾中…

但是嘛,对于我这种一点文笔都没有,技术也是半桶水的人来说,折腾博客主题也是我的一大乐趣呀🥳

Author: ZnS

Permalink: https://zns.moe/articles/how-I-beautify-my-blog/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可,使用时请注意遵守协议。

Comments

Unable to load Disqus, please make sure your network can access.