feat: use _data yaml file to manage friends link

layout/_partial/empty-page.ejs

@@ -1,5 +1,12 @@
 <div class="fade-in-down-animation">
     <div class="empty-page-container">
+
+        <% if (
+                theme.menu.Links && theme.links && (page.title === 'link' || page.title === 'links')
+        ) { %>
+            <%- partial('_partial/friends-link') %>
+        <% } %>
+
         <div class="empty-page-content markdown-body">
             <% if (page.content) { %>
                 <%- page.content %>

layout/_partial/friends-link.ejs

@@ -0,0 +1,24 @@
+<div class="friends-link-container">
+    <ul class="friends-link-list">
+        <% for (const f of theme.links) { %>
+            <li class="friends-link-item">
+                <a href="<%= f.link %>">
+                    <div class="content">
+                        <div class="avatar radius">
+                            <% if (f.avatar) { %>
+                                <img class="radius" alt="<%= f.name %>" src="<%= f.avatar %>">
+                            <% } else { %>
+                                <i class="fas fa-user-friends"></i>
+                            <% } %>
+                        </div>
+                        <div class="info">
+                            <div class="name"><%= f.name %></div>
+                            <div class="description"><%= f.description %></div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        <% } %>
+    </ul>
+    <div class="clear"></div>
+</div>

scripts/use-source-data.js

@@ -1,10 +1,26 @@
 hexo.on('generateBefore', function () {
-    const rootConfig = hexo.config;
+
-    if (hexo.locals.get) {
+  if (hexo.locals.get) {
-        const data = hexo.locals.get('data');
+    const data = hexo.locals.get('data');
-        if (data && data._config) {
+
-            hexo.theme.config = data._config;
+    if (data) {
-        }
+
+      // theme config file handle
+      if (data._config) {
+        hexo.theme.config = data._config;
+
+      } else if (data.keep) {
+        hexo.theme.config = data.keep;
+
+      } else if (data._keep) {
+        hexo.theme.config = data._keep;
+      }
+
+      // friends link file handle
+      if (data.links || data.link) {
+        hexo.theme.config.links = (data.links || data.link);
+      }
+
     }
-    hexo.theme.config.rootConfig = rootConfig;
+  }
 });

source/css/layout/_partial/empty-page.styl

@@ -1,3 +1,7 @@
+$friend-link-item-height = 82px;
+$friend-link-item-interval = 16px;
+$friend-link-item-border-radius = 6px;
+
 .empty-page-container {
 
   keep-container(1.005, 1.01, 30px, true);
@@ -12,4 +16,105 @@
 
     }
   }
+
+  if (hexo-config('menu.Links')) {
+    .friends-link-container {
+
+      .friends-link-list {
+        position: relative;
+
+        .friends-link-item {
+          box-sizing: border-box;
+          position: relative;
+          float: left;
+          width: 50%;
+          cursor: pointer;
+          height: $friend-link-item-height;
+          padding-bottom: $friend-link-item-interval;
+
+          &:nth-child(odd) {
+            padding-right: $friend-link-item-interval * 0.5;
+          }
+
+          &:nth-child(even) {
+            padding-left: $friend-link-item-interval * 0.5;
+          }
+
+          .content {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            box-shadow: 1px 1px 2px var(--shadow-color);
+            border-radius: $friend-link-item-border-radius;
+            padding-left: $friend-link-item-height - $friend-link-item-interval;
+            box-sizing: border-box;
+            transition();
+
+            &:hover {
+              box-shadow: 1px 1px 6px var(--shadow-color);
+            }
+
+            .radius {
+              border-top-left-radius: $friend-link-item-border-radius;
+              border-bottom-left-radius: $friend-link-item-border-radius;
+            }
+
+            .avatar {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: $friend-link-item-height  - $friend-link-item-interval;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 2em;
+              background: var(--second-background-color);
+              color: var(--second-text-color);
+
+              img {
+                box-sizing: border-box;
+                position: relative;
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .info {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              box-sizing: border-box;
+              padding: 10px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-items: flex-start;
+
+              .name {
+                width: 100%;
+                height: 60%;
+                font-size: 1.28em;
+              }
+
+              .description {
+                width: 100%;
+                height: 40%;
+                font-size: 1em;
+                color: var(--third-text-color);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
 }

source/css/layout/_partial/side-tools-container.styl

@@ -1,4 +1,4 @@
-$tools-item-width = 30px;
+$tools-item-width = 32px;
 
 .side-tools-container {
   position: relative;

source/css/layout/common/basic.styl

@@ -119,3 +119,10 @@ button {
   justify-content: center;
   align-items: center;
 }
+
+// ============================
+// clear float
+// ============================
+.clear {
+  clear: both;
+}

source/css/layout/common/keep-theme.styl

@@ -14,7 +14,7 @@ hover-style(scaleX, scaleY) {
     }
 
     if (hexo-config('style.hover.shadow')) {
-      box-shadow: 3px 3px 10px var(--shadow-hover-color);
+      box-shadow: 3px 3px 9px var(--shadow-hover-color);
     }
   }
 }