當頁面太長時,側邊欄會隨著滾動而消失,頁面看起來就不那麽整潔美觀了。 所以本文將介紹如何使用粘性部件來避免這個問題。

創建一個新的粘性小部件§

首先,在 layouts/parials 文件夾下創建一個模板,我們以 layouts/partials/custom/sticky-info.html 為例。

1<div class="row card component position-sticky" style="top: 84px;">
2    <div class="text-center py-3 px-1">
3        MY STICKY WIDGET
4    </div>
5</div>

文件名 custom/sticky-info 可以隨意改變,但我們建議使用一些更具體的名字,以避免以後覆蓋主題的模板。 比如 custommywidgets

然後使用 layouts/partials/hooks/sidebar-end.html 鉤子來包含粘性模板。

1{{- partial "custom/sticky-info" . }}

粘性小部件應該是側邊欄的最後一個小部件,否則會出現奇怪的問題。

使現有的小部件變得粘稠§

每個小部件都會有一個獨特的類名,這樣我們就可以在所需的小部件上應用 CSS,這裏我們以個人資料小部件為例。

1.sidebar {
2    .profile {
3        position: sticky !important;
4        top: 84px;
5        order: 5;
6    }
7}

我們需要指定order屬性,使個人資料部件成為側邊欄的最後一個部件。