feat(widget): 允许侧边栏卡片的粘性定位

添加 sticky: true 设定固定
volantis-x · Jun 10, 2022 · 5d5c9d5 · 5d5c9d5 · MHuiG · Jun 11, 2022
1 parent 2e2e05d
commit 5d5c9d5
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 27 deletions.
diff --git a/_config.yml b/_config.yml
@@ -482,6 +482,7 @@ sidebar:
     toc:
       class: toc
       display: [desktop, mobile] # [desktop, mobile]
+      sticky: true
       header:
         icon: fa-solid fa-list
         title: 本文目录

diff --git a/layout/_widget/_pre.ejs b/layout/_widget/_pre.ejs
@@ -7,20 +7,15 @@ if (item.display) {
 } else {
   pf = ['desktop', 'mobile'];
 }
-if (item.sticky == true) {
-  page.widget_style = 'sticky '
-} else {
-  page.widget_style = ''
-}
 if (where == 'sidebar') {
   page.widget_style += theme.custom_css.sidebar.effect.join(' ');
 } else if (where == 'body') {
   page.widget_style += theme.custom_css.body.effect.join(' ');
 }
 page.widget_platform = pf.join(' ');
-if (item.pjaxReload || item.pjaxReload===undefined){
-  page.widget_pjax = "pjax"
+if (item.sticky !== true  && (item.pjaxReload || item.pjaxReload===undefined)){
+  page.widget_pjax = "pjax";
 }else{
   page.widget_pjax = ""
 }
-%>
+%>
diff --git a/layout/_widget/blogger.ejs b/layout/_widget/blogger.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <div class='content'>
     <% if (item.avatar) { %>
       <% if (item.url) { %>

diff --git a/layout/_widget/category.ejs b/layout/_widget/category.ejs
@@ -1,6 +1,6 @@
 <% if (site.categories.length){ %>
   <%- partial('_pre') %>
-  <section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+  <section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <ul class="entry navigation">

diff --git a/layout/_widget/copyright.ejs b/layout/_widget/copyright.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <div class='content'>
     <% if (item.blockquote == true) { %>
       <blockquote>

diff --git a/layout/_widget/grid.ejs b/layout/_widget/grid.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <div class="grid navigation<%- item.fixed ? ' fixed' : '' %>">

diff --git a/layout/_widget/lastupdate.ejs b/layout/_widget/lastupdate.ejs
@@ -19,7 +19,7 @@ function genList() {
 }
 %>
 <%- partial('_pre') %>
-<section class="widget <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <%- genList() %>

diff --git a/layout/_widget/list.ejs b/layout/_widget/list.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class == 'list' ? item.class : 'list ' + item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class == 'list' ? item.class : 'list ' + item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <ul class="list entry navigation">

diff --git a/layout/_widget/load.ejs b/layout/_widget/load.ejs
@@ -1,15 +1,32 @@
+<%
+  let widget_library_temp = [];
+%>
 <% (widgets||[]).forEach(function(widget){ %>
   <% if (theme.sidebar.widget_library && (widget in theme.sidebar.widget_library)){ %>
     <% let w = theme.sidebar.widget_library[widget]; w.id = widget; %>
-    <%- partial(w.class, {item: w, where: where}) %>
+    <% if(w.sticky) { %>
+      <% widget_library_temp.push(w)  %>
+    <% } else { %>
+      <%- partial(w.class, {item: w, where: where}) %>
+    <% } %>
   <% } %>
 <% }) %>
+
+<div class="widget-sticky pjax">
+<% if(widget_library_temp.length !== 0) { %>
+  <% widget_library_temp.forEach( w => { %>
+  <%- partial(w.class, {item: w, where: where}) %>
+  <% }) %>
+<% } %>
+</div>
+
 <%
 let widget_pjax_length = 0;
 page.sidebar.forEach(function(e){
   if (e&&theme.sidebar.widget_library&&theme.sidebar.widget_library[e]) {
     let widget_pjax_flag = theme.sidebar.widget_library[e].pjaxReload
-    if (widget_pjax_flag || widget_pjax_flag===undefined) {
+    let widget_stickys = theme.sidebar.widget_library[e].sticky
+    if (widget_stickys !== true && (widget_pjax_flag || widget_pjax_flag===undefined)) {
       widget_pjax_length ++;
     }
   }
@@ -21,4 +38,4 @@ let widget_pjax_place_length = Object.keys(theme.sidebar.widget_library).length
   <div class="pjax">
     <!-- pjax占位 -->
   </div>
-<% } %>
+<% } %>
diff --git a/layout/_widget/music.ejs b/layout/_widget/music.ejs
@@ -1,6 +1,6 @@
 <%- partial('_pre') %>
 <% if (theme.plugins.aplayer.enable == true) { %>
-  <section class='widget <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %> <%- item.class %>'>
+  <section class='widget <%- page.widget_platform %> <%- page.widget_pjax %> <%- item.class %>'>
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <%- partial('../_plugins/aplayer/layout', {post: null, where: 'widget'}) %>

diff --git a/layout/_widget/page.ejs b/layout/_widget/page.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <% site.pages.forEach(function(post){ %>

diff --git a/layout/_widget/qrcode.ejs b/layout/_widget/qrcode.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content article-entry'>
     <% (item.images||[]).forEach(function(url){ %>

diff --git a/layout/_widget/related_posts.ejs b/layout/_widget/related_posts.ejs
@@ -1,6 +1,6 @@
 <% if(page.layout == 'post' && page.content && page.path != undefined){ %>
   <%- partial('_pre') %>
-  <section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+  <section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
     <%- partial('header', {item: item}) %>
     <div class="content">
       <%- popular_posts( { maxCount: item.max_count , ulClass: 'popular-posts' , PPMixingRate: 0.2 } , page ) %>

diff --git a/layout/_widget/tagcloud.ejs b/layout/_widget/tagcloud.ejs
@@ -1,6 +1,6 @@
 <% if (site.tags.length){ %>
   <%- partial('_pre') %>
-  <section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+  <section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
     <%- partial('header', {item: item}) %>
     <div class='content'>
       <%- tagcloud(site.tags, {

diff --git a/layout/_widget/text.ejs b/layout/_widget/text.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <% (item.content||[]).forEach(function(row){ %>

diff --git a/layout/_widget/toc.ejs b/layout/_widget/toc.ejs
@@ -1,7 +1,7 @@
 <%- partial('_pre') %>
 <% var realcontent = (page.encrypt == true) ? page.origin : page.content; %>
 <% if (realcontent && page.toc != false && toc(realcontent).length > 0) { %>
-  <section class="widget toc-wrapper <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>" id="toc-div" <% if (page.encrypt == true) { %>style="display:none" <% } %>>
+  <section class="widget toc-wrapper <%- page.widget_platform %> <%- page.widget_pjax %>" id="toc-div" <% if (page.encrypt == true) { %>style="display:none" <% } %>>
     <%- partial('header', {item: item}) %>
     <div class='content'>
         <%- toc(realcontent, {list_number: item.list_number, min_depth: item.min_depth, max_depth: item.max_depth}) %>

diff --git a/layout/_widget/webinfo.ejs b/layout/_widget/webinfo.ejs
@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- page.widget_style %> <%- page.widget_platform %> <%- page.widget_pjax %>">
+<section class="widget <%- page.widget_platform %> <%- page.widget_pjax %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <div class="webinfo">

diff --git a/source/css/_style/_layout/sidebar.styl b/source/css/_style/_layout/sidebar.styl
@@ -358,3 +358,7 @@
     white-space: nowrap  // 不换行
     overflow: hidden  // 超出宽度部分隐藏
     text-overflow: ellipsis  // 超出部分以点号替代
+
+.widget-sticky
+  position: sticky
+  top: $navbar-height + $gap
diff --git a/source/css/_style/_layout/toc.styl b/source/css/_style/_layout/toc.styl
@@ -2,8 +2,8 @@
   z-index: 1
   overflow: hidden
   border-radius: $border-card
-  position: sticky
-  top: $navbar-height + $gap
+  //position: sticky
+  //top: $navbar-height + $gap
   trans()
   line-height: 1.6
   header