Perf: optimize reading progress bar (#191)

This commit is contained in:
Cell
2022-09-12 15:02:18 +08:00
parent 2eb7605437
commit f9b92cbbd6
2 changed files with 17 additions and 8 deletions
@@ -1,11 +1,12 @@
.reading-progress-bar {
--progress: 0;
height: var(--progress-h, 2px);
width: var(--progress);
background-color: var(--bg-progress, $info);
background-color: var(--bg-progress, var(--fi-info));
z-index: 150;
position: fixed;
[data-theme="dark"] & {
background-color: var(--bg-progress-dark, darken($info, 5%));
background-color: var(--bg-progress-dark, var(--fi-info-dark));
}
}
+14 -6
View File
@@ -36,12 +36,20 @@
{{- $readingProgress := .Site.Params.readingProgress -}}
{{- if $readingProgress.enable -}}
{{- with $readingProgress -}}
<div class="reading-progress-bar" style="
{{- if .Reversed -}}width: calc(100% - var(--progress));{{- end -}}
{{- if .Light -}}--bg-progress: {{ .Light }};{{- end -}}
{{- if .Dark -}}--bg-progress-dark: {{ .Dark }};{{- end -}}
{{- .Start | default "left" -}}: 0;
{{- .Position | default "top" -}}: 0;height: {{ .Height | default "2px" }};"></div>
{{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}}
{{- if .Height | and (ne .Height "2px") -}}
{{- $style = printf "%v--progress-h: %v;" $style .Height -}}
{{- end -}}
{{- if .Reversed -}}
{{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}}
{{- end -}}
{{- if .Light -}}
{{- $style = printf "%v--bg-progress: %v;" $style .Light -}}
{{- end -}}
{{- if .Dark -}}
{{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}}
{{- end -}}
<div class="reading-progress-bar" {{ printf "style=\"%v\"" $style | safeHTMLAttr }}></div>
{{- end -}}
{{- end -}}