feat: 适配“无效友链”

添加无效友链功能，用于展示当前不可访问的友链。

TODO: “无效友链”默认折叠，点击展示更多

Author: Mintimate

_config.yml

@@ -1047,6 +1047,18 @@ links:
       avatar: "/img/favicon.png"
     }
 
+  # 失效/未激活的友链
+  inactive:
+    enable: false
+    label: "异常友链 | 长时间不可访问站点"
+    inactiveItems:
+        - {
+          title: "404 Links",
+          intro: "404 Links",
+          link: "https://hexo.fluid-dev.com/404",
+          avatar: "/img/favicon.png"
+        }
+
   # 当成员头像加载失败时，替换为指定图片
   # When the member avatar fails to load, replace the specified image
   onerror_avatar: /img/avatar.png

layout/links.ejs

@@ -12,11 +12,12 @@ page.comment = theme.links.comments.type
   <% for(const each of theme.links.items || []) { %>
     <% if (!each.title || !each.link) continue %>
     <div class="card col-lg-4 col-md-6 col-sm-12">
-      <a href="<%= url_for(each.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener">
+      <a href="<%= url_for(each.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener" aria-label="<%= `访问 ${each.title}` %>">
         <div class="card-content">
           <% if (each.avatar || each.image) { %>
             <div class="link-avatar my-auto">
               <img src="<%= url_for(each.avatar || each.image) %>" alt="<%= each.title %>"
+                   loading="lazy"
                    onerror="this.onerror=null; this.src=this.srcset='<%= url_for(theme.links.onerror_avatar) %>'"/>
             </div>
           <% } %>
@@ -30,6 +31,37 @@ page.comment = theme.links.comments.type
   <% } %>
 </div>
 
+<% if (theme.links.inactive && theme.links.inactive.enable && theme.links.inactive.inactiveItems) { %>
+  <hr/>
+  <% if (theme.links.inactive.label) { %>
+    <p class="inactive-label"><%- theme.links.inactive.label %></p>
+  <% } %>
+
+  <div class="row links">
+    <% for(const item of theme.links.inactive.inactiveItems || []) { %>
+      <% if (!item.title || !item.link) continue %>
+      <div class="card col-lg-4 col-md-6 col-sm-12">
+        <a href="<%= url_for(item.link) %>" class="card-body hover-with-bg" target="_blank" rel="noopener" aria-label="<%= `访问 ${item.title}` %>">
+          <div class="card-content">
+            <% if (item.avatar || item.image) { %>
+              <div class="link-avatar my-auto">
+                <img src="<%= url_for(item.avatar || item.image) %>" alt="<%= item.title %>"
+                      loading="lazy"
+                      onerror="this.onerror=null; this.src=this.srcset='<%= url_for(theme.links.onerror_avatar) %>'"/>
+              </div>
+            <% } %>
+            <div class="link-text">
+              <div class="link-title"><%- item.title %></div>
+              <div class="link-intro"><%- item.intro || '' %></div>
+            </div>
+          </div>
+        </a>
+      </div>
+    <% } %>
+  </div>
+<% } %>
+
+
 <% if(theme.links.custom && theme.links.custom.enable && theme.links.custom.content) { %>
   <!-- Custom -->
   <div class="custom mx-auto">