Featured image of post Stack 主题下 Waline 美化
建站记录

Stack 主题下 Waline 美化

前言

这篇文章只是简单修改了下 Waline 的配色以及 a 标签的样式
可以先参考 「建站技术 | 使博客更好地接入 Waline」 配置好 Waline

Waline 美化

assets\scss\custom.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// Waline
:root {
    --waline-theme-color: var(--accent-color) !important;
    --waline-active-color: var(--accent-color-darker) !important;
}

.wl-panel {
    border-radius: var(--card-border-radius) !important;
}

.wl-action:first-child {
    display: none;
}

.wl-content a {
    text-decoration: none;
    box-shadow: 0 -2px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
    transition: all .3s ease;

    &:hover {
        color: var(--waline-theme-color) !important;
        box-shadow: 0 calc(-1rem * 2.2) rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
    }
}

.wl-header-item input {
    color: var(--card-text-color-secondary);
    font-size: .75em !important;
}

比较难绷的是如果你的标题只是 waline 的话，会因为 id=“waline” 而把评论显示在标题位置

附录

参考文献

  1. 建站技术 | 使博客更好地接入 Waline

文章封面

遙@RSyaooooo