[opt] paginator

layout/_partial/main/post_list/paginator.ejs

@@ -1,13 +1,9 @@
 <% if (is_home() && page.total > 1) { %>
   <div class='paginator-wrap dis-select'>
-    <a class='paginator prev<%- page.prev != 0 ? "" : " disable" %>' href='<%- url_for(page.prev_link) %>'>
-      <img src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/arrow/f049bbd4e88ec.svg'/>
-    </a>
-    <div class='paginator current'>
-      <%- page.current %><span class='sep'></span><%- page.total %>
-    </div>
-    <a class='paginator next<%- page.next != 0 ? "" : " disable" %>' href='<%- url_for(page.next_link) %>'>
-      <img src='https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/arrow/064b95430caf4.svg'/>
-    </a>
+  <%- paginator({
+    prev_text: '',
+    next_text: '',
+    force_prev_next:true
+  }) %>
   </div>
 <% } %>

source/css/_layout/partial/paginator.styl

@@ -9,17 +9,27 @@
   border-radius: $border-card
   overflow: hidden
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.03)
-  &:hover
-  .paginator
+  a.page-number 
+    padding: 4px 8px
+    border-radius: 8px
+    background: var(--block)
+  .extend
     text-align: center
+    background-size: contain
+    width: 1rem
+    height: 1rem
+    background-origin: content-box
+    background-clip: content-box
     &.next
       border-left: 1px dashed var(--block-border)
+      background-image: url('https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/arrow/064b95430caf4.svg')
     &.prev
       border-right: 1px dashed var(--block-border)
+      background-image: url('https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/arrow/f049bbd4e88ec.svg')
   .current
     font-family: $ff-code
     color: var(--text-p3)
-  a.paginator
+  .extend
     color: var(--text-p3)
     padding: 1rem
     line-height: 0
@@ -28,6 +38,7 @@
       height: 1rem
     &.disable
       pointer-events: none
-      opacity: 0.25
-  a.paginator:hover
+  span.extend
+    opacity: 0.25
+  a.extend:hover
     filter: unset