blogger widget

_config.yml

@@ -272,8 +272,10 @@ widget:
   # blogger info widget
   blogger:
     class: blogger
-    display: [desktop] # [desktop, mobile]
+    display: [desktop, mobile] # [desktop, mobile]
     avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png
+    shape: rectangle # circle, rectangle
+    url: /about/
     title:
     subtitle:
     jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails.

layout/_widget/blogger.ejs

@@ -1,11 +1,17 @@
 <%- partial('_pre') %>
 <section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %>">
   <div class='content'>
-    <% if(item.avatar) { %>
-      <div class='avatar'>
-        <img class='avatar' src='<%- item.avatar %>'/>
-      </div>
-    <%} %>
+    <% if (item.avatar) { %>
+      <% if (item.url) { %>
+        <a class='avatar flat-box' href='<%- url_for(item.url) %>'>
+          <img src='<%- item.avatar %>'/>
+        </a>
+      <% } else { %>
+        <div class='avatar'>
+          <img src='<%- item.avatar %>'/>
+        </div>
+      <% } %>
+    <% } %>
     <% if (item.title || item.subtitle || item.jinrishici) { %>
       <div class='text'>
         <% if (item.title){ %>

source/css/_layout/sidebar.styl

@@ -7,11 +7,13 @@
   @media screen and (max-width: $device-tablet)
     width: 100%
   .widget
+    overflow: hidden
     >.content
+      max-height: "calc(100vh - %s)" % ($gap * 5 + $navbar-height)
+      overflow: auto
+      scrollbar()
       text-align: justify
       font-size: $fontsize-meta
-      $offset = $navbar-height + 12.5 * $gap
-      max-height: "calc(100% - %s)" % $offset
       max-width: 100%
 
 
@@ -108,42 +110,52 @@
     trans()
     .content
       padding: 0
-      div.avatar
-        display: flex
-        justify-content: center
-
-      img
-        padding: 0
-        margin: 0
-        display: flex
-        justify-content: center
-        width: $sidebar
-        height: $sidebar
+      text-align: center
+      display: flex
+      flex-direction: column
+      align-items: stretch
+      >.avatar
+        align-self: center
+        overflow: hidden
+        position: relative
         border-top-left-radius: $border-card
         border-top-right-radius: $border-card
-
+        line-height: 0
+        if hexo-config('widget.blogger.shape') == 'circle'
+          border-radius: 100%
+          width: 128px
+          height: 128px
+          margin-top: $gap * 2
+          margin-bottom: $gap-row
+          img
+            display: block
+            position: absolute
+            top: 50%
+            left: 50%
+            transform: translate(-50%, -50%)
         @media screen and (max-width: $device-tablet)
-          width: 96px
-          height: 96px
+          width: 80px
+          height: 80px
           border-radius: 100%
-          margin-top: $gap * 0.5
-          padding: $gap * 0.5
-
+          border: 2px solid white
+          img
+            display: block
+            top: 50%
+            left: 50%
+            transform: translate(-50%, -50%)
+            position: absolute
+      .text
+        :first-child
+          margin-top: $gap
       h2
-        text-align: center
         font-weight: bold
         margin: $gap * 0.5
-        margin-top: $gap
         @media screen and (max-width: $device-tablet)
           margin: $gap * 0.5
-
-
       p
         font-weight: bold
-        text-align: center
         margin: $gap * 0.5 $gap * 0.5 0 $gap * 0.5
         empty-cells: hide
-
       .social-wrapper
         display: flex
         justify-content: space-between
@@ -169,19 +181,16 @@
               background: bgcolor($color-theme)
               color: $color-theme
 
-
-
         @media screen and (max-width: $device-tablet)
           justify-content: center
           display: none
 
-
-
     @media screen and (max-width: $device-tablet)
       box-shadow: none
       background: transparent !important
       margin-top: 2 * $gap
       backdrop-filter: none
+      color: $color-site-inner
 
 
 

source/css/_layout/toc.styl

@@ -12,9 +12,6 @@
     top: 0
     padding-bottom: $gap * 0.25
   .content
-    max-height: "calc(100vh - %s)" % ($gap * 5 + $navbar-height)
-    overflow: auto
-    scrollbar()
     a
       border-left: $border-line solid transparent
       &:hover