Merge pull request #225 from chengzhongxue/main

友联优化

templates/assets/zhheo/zhheoblog.css

@@ -1545,6 +1545,10 @@ blockquote footer cite::before {
     transition: all 0.3s ease 0s;
 }
 
+.flink#article-container .flink-list.mini>.flink-list-item {
+    height: 60px;
+}
+
 @media screen and (max-width: 1200px) {
     .flink#article-container .flink-list > .flink-list-item {
         width: calc(25% - 12px) !important;
@@ -1588,25 +1592,39 @@ blockquote footer cite::before {
     transition: all 0.3s ease 0s;
 }
 
+.flink#article-container .flink-list.mini>.flink-list-item a img {
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    min-height: 30px;
+}
+
 .flink#article-container .flink-list > .flink-list-item a .img-alt {
     display: none;
 }
 
 .flink#article-container .flink-list > .flink-list-item a .flink-item-name {
     display: block;
-    padding: 16px 10px 0px 0px;
-    height: 40px;
+    padding: 0px 10px 0px 0px;
     font-weight: 700;
     font-size: 1.43em;
+    max-width: calc(100% - 12px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .flink#article-container .flink-list > .flink-list-item a .flink-item-desc {
     display: block;
-    padding: 16px 10px 16px 0px;
+    padding: 4px 10px 0px 0px;
     height: 50px;
     font-size: 0.93em;
 }
 
+.flink#article-container .flink-list.mini>.flink-list-item a .flink-item-desc {
+    display: none;
+}
+
 .flink#article-container .site-card-group {
     display: flex;
     flex-wrap: wrap;
@@ -14277,12 +14295,13 @@ figure.gallery-group:hover .gallery-group-name::after {
 /* 炙焰友链间距 */
 .flink#article-container .flink-list {
     padding: 0;
-    margin: 1rem -6px 0 -6px;
+    margin: 0.5rem -6px 1rem -6px;
     overflow-x: hidden;
 }
 
 .flink#article-container .flink-desc {
     margin: 0;
+    color: var(--heo-secondtext);
 }
 
 /* 友情描述 */
@@ -14306,17 +14325,21 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 /* 友链标题 */
 .flink-list-item .flink-item-info {
-    max-width: 136px;
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: calc(100% - 90px);
+    height: fit-content;
 }
 
 .flink-list-item:hover .flink-item-info {
-    max-width: 100%;
+    min-width: calc(100% - 20px);
 }
 
 .flink#article-container .flink-list > .flink-list-item a .flink-item-name {
     text-align: left;
     font-size: 19px;
+    line-height: 20px;
     color: var(--heo-fontcolor);
 }
 
@@ -14327,6 +14350,9 @@ figure.gallery-group:hover .gallery-group-name::after {
 .flink#article-container .flink-list > .flink-list-item a {
     display: flex;
     border: none;
+    width: 100%;
+    height: 100%;
+    align-items: center;
 }
 
 .flink#article-container .flink-list > .flink-list-item a:hover {
@@ -14361,7 +14387,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 /* 友链描述 */
 .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc {
-    overflow: inherit;
+    overflow: hidden;
     width: 100%;
 }
 
@@ -14376,6 +14402,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     border: var(--style-border);
     box-shadow: var(--heo-shadow-border);
     background: var(--heo-card-bg);
+    display: flex;
 }
 
 
@@ -14386,6 +14413,10 @@ figure.gallery-group:hover .gallery-group-name::after {
     box-shadow: var(--heo-shadow-main);
 }
 
+.gallery-group figcaption p {
+    line-height: 1.5 !important;
+}
+
 @media screen and (min-width: 1300px) {
     .flink#article-container .flink-list > .flink-list-item:hover {
         transform: scale(1.03);
@@ -14411,7 +14442,6 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 .flink#article-container .site-card:hover .info .title {
     color: var(--heo-white);
-    box-shadow: var(--heo-shadow-blue);
 }
 
 .flink#article-container .site-card:hover .info {
@@ -14434,9 +14464,16 @@ figure.gallery-group:hover .gallery-group-name::after {
     text-align: left;
 }
 
+.flink#article-container .site-card:hover .info .desc {
+    color: var(--heo-white);
+}
+
+
+@media screen and (min-width: 768px) {
     .flink#article-container .site-card:hover .info .desc {
         -webkit-line-clamp: 4;
     }
+}
 
 .flink#article-container .site-card:hover .info .desc {
     transition: 0.3s;
@@ -14575,7 +14612,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 .flink#article-container .site-card .img {
     -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
-    border-radius: 12px 12px 0 0;
+    border-radius: 0;
     height: 120px;
     width: 100%;
     display: flex;

templates/links.html

@@ -57,11 +57,9 @@
                     <div class="title-h2-a">
                         <div class="title-h2-a-left">
                             <h2 style="padding-top:0;margin:.6rem 0 .6rem">🎣 钓鱼</h2><a class="random-post-start"
-                                                                                         href="javascript:fetchRandomPost();"><i
-                                class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i></a>
+                                                                                         href="javascript:fetchRandomPost();"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i></a>
                         </div>
-                        <div class="title-h2-a-right"><a class="random-post-all" href="/fcircle"
-                                                         data-pjax-state="">查看鱼塘</a></div>
+                        <div class="title-h2-a-right"><a class="random-post-all" href="/fcircle" data-pjax-state="">查看鱼塘</a></div>
                     </div>
                     <div id="random-post"></div>
                     <script type="text/javascript">
@@ -71,7 +69,6 @@
                             hungryFish: 500,
                         }
                     </script>
-                    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.yzczi.com/moments/random-friends-post.css"> -->
                     <script th:src="@{/assets/libs/moments/random-friends-post.js}"></script>
                 </th:block>
 
@@ -79,21 +76,24 @@
 
                     <th:block th:each="group,iterStat : ${groups}">
 
-                        <h2>
-                            <a class="headerlink" href="#" th:title="${group.spec.displayName}"></a>
-                            [[${group.spec.displayName}]]
+                        <h2 th:if="${not #lists.isEmpty(group.spec.displayName)}">
+                            <a class="headerlink" th:href="'#'+${group.spec.displayName}+'-'+${group.links.size}" th:title="${group.spec.displayName}+ '('+${group.links.size}+')'"></a>
+                            [[${group.spec.displayName}]] ([[${group.links.size}]])
                         </h2>
-                        <!--<div class="flink-desc">分类描述信息 xxxxx</div>-->
+
+                        <div class="flink-desc">[[${group.spec.description}]]</div>
+
 
                         <!-- 第一个，使用卡片展示 -->
-                        <div class="site-card-group" th:if="${iterStat.first}">
+                        <div th:if="${#strings.equals(group.spec.displayStyle,'beautify') && not #lists.isEmpty(group.spec.displayStyle)}" class="site-card-group" >
                             <div class="site-card" th:each="link : ${group.links}">
-                                <!--<span class="site-card-tag">生活</span>-->
+                                <span th:if="${not #lists.isEmpty(link.spec.label)}" th:style="'background-color:' + ${link.spec.labelColor}" class="site-card-tag">[[${link.spec.label}]]</span>
                                 <a class="img" target="_blank" th:href="${link.spec.url}"
                                    th:title="${link.spec.displayName}">
                                     <img class="flink-avatar" style="pointer-events: none;"
-                                         th:alt="${link.spec.displayName}" th:src="${link.spec.logo}">
+                                         th:alt="${link.spec.displayName}" th:src="${link.spec.siteshot}">
                                 </a>
+
                                 <a class="info cf-friends-link" target="_blank" th:href="${link.spec.url}"
                                    th:title="${link.spec.displayName}">
                                     <div class="site-card-avatar">
@@ -111,8 +111,9 @@
                         </div>
 
 
-                        <div class="flink-list" th:if="${not iterStat.first}">
+                        <div class="flink-list" th:if="${#strings.equals(group.spec.displayStyle,'default') && not #lists.isEmpty(group.spec.displayStyle)}">
                             <div class="flink-list-item" th:each="link : ${group.links}">
+                                <span th:if="${not #lists.isEmpty(link.spec.label)}" th:style="'background-color:' + ${link.spec.labelColor}" class="site-card-tag">[[${link.spec.label}]]</span>
                                 <a class="cf-friends-link" rel="external nofollow"
                                    target="_blank"
                                    th:href="${link.spec.url}"
@@ -130,18 +131,34 @@
                             </div>
                         </div>
 
-                    </th:block>
+                        <div class="flink-list mini" th:if="${#strings.equals(group.spec.displayStyle,'deprecated') && not #lists.isEmpty(group.spec.displayStyle)}">
+                            <div class="flink-list-item" th:each="link : ${group.links}">
+                                <a class="cf-friends-link"  rel="external nofollow"
+                                   target="_blank"
+                                   th:href="${link.spec.url}"
+                                   th:title="${link.spec.displayName}">
+                                    <img class="flink-avatar cf-friends-avatar entered loaded"
+                                         th:src="${link.spec.logo}"
+                                         th:alt="${link.spec.displayName}">
+                                    <div class="img-alt is-center">[[${link.spec.displayName}]]</div>
+                                    <div class="flink-item-info">
+                                        <span class="flink-item-name cf-friends-name">[[${link.spec.displayName}]]</span>
+                                        <span class="flink-item-desc"  th:title="${link.spec.description}">[[${link.spec.description}]]</span>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
 
+                    </th:block>
 
                 </div>
+
                 <hr/>
                 <!-- 评论模块 -->
-                <th:block
-                        th:if="${theme.config.comments.twikoo && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.envId)}">
+                <th:block  th:if="${theme.config.comments.twikoo && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.envId)}">
                     <div th:replace="~{modules/twikoo :: twikoo}"></div>
                 </th:block>
-                <div id="post-comment"
-                     th:if="${pluginFinder.available('PluginCommentWidget') && #strings.equals(theme.config.comments.use, 'commentWidget')}">
+                <div id="post-comment" th:if="${pluginFinder.available('PluginCommentWidget') && #strings.equals(theme.config.comments.use, 'commentWidget')}">
                     <div class="comment-head">
                         <div class="comment-headline"><i class="iconfont icon-comment-alt"></i> <span>评论</span></div>
                         <div class="comment-privacy"><a href="/privacy">隐私政策</a></div>
@@ -149,8 +166,7 @@
                             <span>你无需删除空行，直接评论以获取最佳展示效果</span>
                         </div>
                     </div>
-                    <halo:comment group="content.halo.run" kind="SinglePage" th:attr="name='links'"
-                                  colorScheme="document.documentElement.getAttribute('data-theme')"/>
+                    <halo:comment group="content.halo.run" kind="SinglePage" th:attr="name='links'" colorScheme="document.documentElement.getAttribute('data-theme')" />
                 </div>
 
             </div>

templates/modules/footer.html

@@ -34,7 +34,7 @@
                     </a>
                 </div>
             </div>
-            <div class="footer-group">
+            <div th:if="${theme.config.footer.enable_footer_group}" class="footer-group">
                 <div class="footer-title-group">
                     <h3 class="footer-title">友链</h3><a class="random-friends-btn"
                                                          href="javascript:link.addFriendLinksInFooter();"

templates/modules/head.html

@@ -149,9 +149,7 @@
     <link rel="stylesheet" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css}">
 
 
-
     <!-- icon图标 -->
-	<link rel="preload" as="style" onload="this.rel='stylesheet'" th:href="@{/assets/icon/fontawesome/fontawesome.min.css}">
     <link rel="stylesheet" href="https://npm.elemecdn.com/anzhiyu-theme-static@1.1.0/icon/ali_iconfont_css.css">
 
     <!-- 声明一些公共信息 -->