From e4886a7b49d3ad499412e67b051ceac32d1cf8c8 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Tue, 25 Jul 2023 22:21:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F-=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=80=9A=E8=AE=AF=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                                 |   2 +-
 templates/assets/zhheo/custom.css             | 136 ++++++++++++++++++
 templates/assets/zhheo/zhheoblog.css          |  30 ++--
 .../modules/widgets/aside/friend-link.html    |  52 +++++++
 4 files changed, 204 insertions(+), 16 deletions(-)
 create mode 100644 templates/modules/widgets/aside/friend-link.html

diff --git a/settings.yaml b/settings.yaml
index d13dcc0e..0851eff6 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -427,7 +427,7 @@ spec:
         - $formkit: group
           name: widgetss
           label: 侧边栏内容
-          help: 目前提供的小部件有：profile（站点资料）, wechat（微信）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
+          help: 目前提供的小部件有：profile（站点资料）, wechat（微信）,friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
           value:
             indexWidgets:
             postWidgets:
diff --git a/templates/assets/zhheo/custom.css b/templates/assets/zhheo/custom.css
index 4605dcdf..be6498a3 100644
--- a/templates/assets/zhheo/custom.css
+++ b/templates/assets/zhheo/custom.css
@@ -54,4 +54,140 @@ ul li {
 
 
 
+/* 通讯录 */
+:root {
+    --card-friend-class-desc-bgcolor: #e7e7e7;
+    --card-friend-name-color: #000;
+    --card-friend-item-hover: var(--text-bg-hover);
+    --card-friend-descr-color: #797979
+}
+
+[data-theme=dark] {
+    --card-friend-class-desc-bgcolor: #111;
+    --card-friend-name-color: #fff;
+    --card-friend-item-hover: var(--text-bg-hover);
+    --card-friend-descr-color: #797979
+}
+
+.card-widget.card-friend-link {
+    padding: 0.4rem 0.6rem !important;
+}
+
+
+.card-widget.card-friend-link .card-friend-link-container {
+    max-height: 460px;
+    overflow: scroll
+}
+
+.card-widget.card-friend-link .card-friend-link-container::-webkit-scrollbar {
+    display: none
+}
+
+.card-widget.card-friend-link summary.card-friend-class-desc {
+    padding: 0 15px
+}
+
+.card-widget.card-friend-link details.card-friend-class-name[open] summary.card-friend-class-desc {
+    position: sticky;
+    top: 0;
+    background: var(--card-friend-class-desc-bgcolor);
+    z-index: 1
+}
+
+.card-widget.card-friend-link a.card-friend-item {
+    padding: 0 15px;
+    height: 60px;
+    width: auto;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-align: center;
+    -moz-box-align: center;
+    -o-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-lines: single;
+    -moz-box-lines: single;
+    -o-box-lines: single;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap
+}
+
+.card-widget.card-friend-link a.card-friend-item:hover {
+    background-color: var(--heo-main);
+    border-radius: 12px;
+    -webkit-transition: all .3s ease-in-out;
+    -moz-transition: all .3s ease-in-out;
+    -o-transition: all .3s ease-in-out;
+    -ms-transition: all .3s ease-in-out;
+    transition: all .3s ease-in-out
+}
+
+.card-widget.card-friend-link img.card-friend-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin: 10px 10px
+}
+
+.card-widget.card-friend-link .offline-friend-link img.card-friend-avatar {
+    filter: grayscale(100%)
+}
+
+.card-widget.card-friend-link .card-friend-details {
+    width: auto;
+    height: 60px;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: box;
+    display: flex;
+    -webkit-box-lines: single;
+    -moz-box-lines: single;
+    -o-box-lines: single;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -o-box-orient: vertical;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -moz-box-pack: center;
+    -o-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -o-box-align: start;
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start
+}
+
+.card-widget.card-friend-link .card-friend-name {
+    color: var(--card-friend-name-color)
+}
+
+.card-widget.card-friend-link .card-friend-descr {
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    width: 14em;
+    color: var(--card-friend-descr-color)
+}
+/* 通讯录 */
+
+
 
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 4760587c..b6e69278 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -11456,7 +11456,7 @@ span.post-meta-position {
 }
 
 /* 文章details折叠 */
-details:not(.tk-admin-config-group) {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) {
     display: block;
     position: relative;
     margin-bottom: 1rem;
@@ -11467,11 +11467,11 @@ details:not(.tk-admin-config-group) {
     transition: border 0.3s;
 }
 
-details:not(.tk-admin-config-group):hover {
+details:not(.tk-admin-config-group):not(.card-friend-class-name):hover {
     border: var(--style-border-hover-always);
 }
 
-details:not(.tk-admin-config-group) summary {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary {
     position: absolute;
     padding: 0.5rem 1rem;
     background: var(--heo-card-bg);
@@ -11487,21 +11487,21 @@ details:not(.tk-admin-config-group) summary {
     text-overflow: ellipsis; /* 超出部分用省略号表示 */
 }
 
-details:not(.tk-admin-config-group) > *:nth-child(2) {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) > *:nth-child(2) {
     margin-top: calc(54px + 1rem) !important;
 }
 
-details[open]:not(.tk-admin-config-group) summary {
+details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) summary {
     background: var(--heo-main);
     color: var(--heo-white);
 }
 
-details:not(.tk-admin-config-group) summary::before {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary::before {
     content: '';
     padding: 4px;
 }
 
-details:not(.tk-admin-config-group) summary:hover {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:hover {
     cursor: pointer;
     background: var(--heo-main);
     color: var(--heo-white);
@@ -11509,31 +11509,31 @@ details:not(.tk-admin-config-group) summary:hover {
     box-shadow: var(--heo-shadow-main);
 }
 
-details:not(.tk-admin-config-group) summary:focus {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:focus {
     outline: none;
 }
 
-details:not(.tk-admin-config-group) summary::marker {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary::marker {
     color: var(--heo-main);
     transition: 0.3s;
 }
 
-details[open]:not(.tk-admin-config-group) summary::marker {
+details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) summary::marker {
     color: var(--heo-white);
 }
 
-details:not(.tk-admin-config-group) summary:hover::marker {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:hover::marker {
     color: var(--heo-white);
 }
 
-details[open]:not(.tk-admin-config-group) {
+details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) {
     border-radius: 12px;
     border: var(--style-border-hover-always);
     padding: 0 1.5rem;
     background: var(--heo-card-bg);
 }
 
-details:not(.tk-admin-config-group) summary:hover:after {
+details:not(.tk-admin-config-group):not(.card-friend-class-name) summary:hover:after {
     position: absolute;
     content: '+';
     text-align: center;
@@ -11543,12 +11543,12 @@ details:not(.tk-admin-config-group) summary:hover:after {
     line-height: 1;
 }
 
-details[open]:not(.tk-admin-config-group) > summary:hover:after {
+details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) > summary:hover:after {
     content: '-';
 }
 
 @media screen and (max-width: 768px) {
-    details[open]:not(.tk-admin-config-group) {
+    details[open]:not(.tk-admin-config-group):not(.card-friend-class-name) {
         padding: 0 16px;
     }
 }
diff --git a/templates/modules/widgets/aside/friend-link.html b/templates/modules/widgets/aside/friend-link.html
new file mode 100644
index 00000000..bc7e84d8
--- /dev/null
+++ b/templates/modules/widgets/aside/friend-link.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 最新评论 -->
+<div class="card-widget card-friend-link" th:fragment="friend-link">
+    <div class="item-headline"><i class="haofont hao-icon-tongxunlu07"
+                                  style="font-size: 0.9rem;font-weight: 700;"></i><span>通讯录</span></div>
+    <div class="card-friend-link-container"
+         th:if="${pluginFinder.available('PluginLinks')}"
+         th:with="groups = ${linkFinder.groupBy()}">
+        <th:block th:each="group,iterStat : ${groups}">
+            <details th:if="${group.spec.displayStyle != 'deprecated' && not #lists.isEmpty(group.spec.displayStyle)}"
+                     class="card-friend-class-name">
+                <summary class="card-friend-class-desc" th:title="${group.spec.description}">
+                    <sapn>[[${group.spec.displayName}]]</sapn>
+                    <sapn>[[${group.links.size}]]</sapn>
+                </summary>
+                <a th:each="link : ${group.links}"
+                   class="card-friend-item online-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
+                   target="_blank"><img class="no-lightbox card-friend-avatar"
+                                        th:src="${link.spec.logo}"
+                                        th:alt="${link.spec.displayName}">
+                    <div class="card-friend-details">
+                        <div class="card-friend-name">[[${link.spec.displayName}]]</div>
+                        <div class="card-friend-descr" >[[${link.spec.description}]]</div>
+                    </div>
+                </a>
+            </details>
+            <details th:if="${#strings.equals(group.spec.displayStyle,'deprecated') && not #lists.isEmpty(group.spec.displayStyle)}"
+                     class="card-friend-class-name">
+                <summary class="card-friend-class-desc" th:title="${group.spec.description}">
+                    <sapn>[[${group.spec.displayName}]]</sapn>
+                    <sapn>[[${group.links.size}]]</sapn>
+                </summary>
+                <a th:each="link : ${group.links}"
+                   class="card-friend-item offline-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
+                   target="_blank"><img class="no-lightbox card-friend-avatar entered loaded"
+                                        th:src="${link.spec.logo}"
+                                        th:alt="${link.spec.displayName}">
+                    <div class="card-friend-details">
+                        <div class="card-friend-name">[[${link.spec.displayName}]]</div>
+                        <div class="card-friend-descr" >[[${link.spec.description}]]</div>
+                    </div>
+                </a>
+            </details>
+
+        </th:block>
+
+    </div>
+
+
+</div>
+</html>
\ No newline at end of file