feat(friend_card color):友链块颜色添加 (#938)

经测试无问题。

Author: Catwb

_config.yml

@@ -202,6 +202,9 @@ pages:
   # 友链页面配置
   friends:
     layout_scheme: traditional # simple: 简单布局, traditional: 传统布局
+    link_block_color:
+      enable: false #友链块颜色开关，用 color: '颜色' 字段
+      unified_font: false # 是否统一友链块文字，true则所有文字都会成黑，false只有
 
 ############################### Article Layout ############################### > start
 # 文章布局

layout/friends.ejs

@@ -17,8 +17,15 @@
             <div class='friend-content'>
               <% getList(group.items).forEach(function(item){ %>
                 <% if (item.url && item.title) { %>
-                  <a class='friend-card'
-                    target="_blank" rel="external noopener noreferrer" href="<%- url_for(item.url || '/') %>">
+                  <a class='friend-card <% if (theme.pages.friends.link_block_color.enable === true && item.color) { %>color-bk-dark<% } %>'
+                    target="_blank" rel="external noopener noreferrer" href="<%- url_for(item.url || '/') %>"
+                    <% if (theme.pages.friends.link_block_color.enable === true) { %>
+                      style="<% if (item.color) { %>background-color: <%- item.color %>;<% } %> 
+                             <% if (theme.pages.friends.link_block_color.unified_font === true) { %>color: var(--link-color);<% } else { %>
+                               <% if (item.color) { %>color: var(--link-color);<% } %>
+                             <% } %>"
+                  <% } %>
+                  >
                     <div class='friend-left'>
                       <% if (item.avatar) { %>
                         <img class='avatar' src='<%- item.avatar || (theme.plugins.lazyload && theme.plugins.lazyload.loadingImg) %>'/>
@@ -47,7 +54,14 @@
             <div class='simpleuser-group'>
               <% getList(group.items).forEach(function(item){ %>
                 <% if (item.url && item.title) { %>
-                  <a class="simpleuser" target="_blank" rel="external noopener noreferrer" href="<%- url_for(item.url || '/') %>">
+                  <a class="simpleuser <% if (theme.pages.friends.link_block_color.enable === true && item.color) { %>color-bk-dark<% } %>" target="_blank" rel="external noopener noreferrer" href="<%- url_for(item.url || '/') %>" 
+                    <% if (theme.pages.friends.link_block_color.enable === true) { %>
+                      style="<% if (item.color) { %>background-color: <%- item.color %>;<% } %> 
+                             <% if (theme.pages.friends.link_block_color.unified_font === true) { %>color: var(--link-color);<% } else { %>
+                               <% if (item.color) { %>color: var(--link-color);<% } %>
+                             <% } %>"
+                  <% } %>
+                  >
                     <img src="<%- item.avatar || (theme.plugins.lazyload && theme.plugins.lazyload.loadingImg) %>"/>
                     <span><%- item.title %></span>
                   </a>

source/css/_first/base_first.styl

@@ -21,6 +21,7 @@
   --color-read-bkg: $color-read-bkg
   --color-read-post: $color-read-post
   --color-copyright-bkg: $color-copyright-bkg
+  --link-color: #00323c
 
 *
   box-sizing: border-box

source/css/_first/dark_first.styl

@@ -25,6 +25,7 @@ fitst_dark()
   --color-meta: $color-dark-meta
   --color-link: $color-dark-link
   --color-copyright-bkg: $color-dark-copyright-bkg
+  --link-color:rgb(228, 228, 228)
 
   img
     filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
@@ -75,3 +76,6 @@ if hexo-config('plugins.darkmode.enable')
       fitst_dark()
   [color-scheme='dark']
     fitst_dark()
+    .friend-card.color-bk-dark {
+      filter: brightness(0.8);
+    }