💄 Implement the special page for friend's links show. Close #26

.gitignore

@@ -9,10 +9,17 @@ exampleSite/content/**/
 !exampleSite/content/archives
 !exampleSite/content/post
 
+# Exclude special files in data folder
+!exampleSite/data
+
 # Exclude special files in static folder
 !exampleSite/static
 
 # Exclude special files
 !exampleSite/config.yaml
 !exampleSite/start.sh
 
+data/*
+!data/config.yaml
+!data/resources.yaml
+

assets/css/_common/components/pages/flinks.scss

@@ -0,0 +1,127 @@
+.flinks-block {
+
+  .flinks-block-title {
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .flinks-list-title {
+    font-size: 1.25em;
+    font-weight: bold;
+  }
+
+  .flinks-lists > div:not(:first-child) {
+    margin-top: 40px;
+  }
+
+  .flinks-list-desc {
+    font-style: italic;
+  }
+
+  .flinks-list-items {
+    overflow: auto;
+    padding: 10px 10px 0;
+    text-align: center;
+
+
+
+    .flinks-list-item {
+      position: relative;
+      float: left;
+      overflow: hidden;
+      margin: 15px 7px;
+      width: calc(100% / 3 - 18px);
+      height: 90px;
+      border-radius: 8px;
+      line-height: 17px;
+      -webkit-transform: translateZ(0);
+      border: groove 1px var(--highlight-foreground);
+      box-shadow: .6rem .5rem 0.3rem var(--body-bg-color);
+
+      &:hover:before,
+      &:focus:before,
+      &:active:before {
+        -webkit-transform:scale(1);
+        -moz-transform:scale(1);
+        -o-transform:scale(1);
+        -ms-transform:scale(1);
+        transform: scale(1);
+      }
+
+
+      &:hover .flinks-item-icon {
+        margin-left:-10px;
+        width:0;
+      }
+
+      &:before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          z-index: -1;
+          background: var(--body-bg-color);
+          content: ' ';
+          transition: transform .3s ease-out;
+          transform: scale(0);
+      }
+
+      a {
+          //color: var(--font-color);
+          text-decoration: none;
+      }
+
+      .flinks-item-icon {
+        float: left;
+        overflow: hidden;
+        margin: 15px 10px;
+        width: 60px;
+        height: 60px;
+        border-radius: 35px;
+        border: solid 1px var(--body-bg-color);
+        -webkit-transition: width .3s ease-out;
+        -moz-transition: width .3s ease-out;
+        -o-transition: width .3s ease-out;
+        -ms-transition: width .3s ease-out;
+        transition: width .3s ease-out;
+
+        img {
+          width: 100%;
+          height: 100%;
+          -webkit-transition: filter 375ms ease-in .2s,-webkit-transform .3s;
+          -moz-transition: filter 375ms ease-in .2s,-moz-transform .3s;
+          -o-transition: filter 375ms ease-in .2s,-o-transform .3s;
+          -ms-transition: filter 375ms ease-in .2s,-ms-transform .3s;
+          transition: filter 375ms ease-in .2s,transform .3s;
+          object-fit: cover;
+        }
+      }
+
+      .flinks-item-name, .flinks-item-desc {
+          overflow:hidden;
+          -o-text-overflow:ellipsis;
+          text-overflow:ellipsis;
+          white-space:nowrap
+      }
+
+      .flinks-item-name {
+        padding: 20px 0 0 0;
+        height: 20px;
+        font-weight: 700;
+        font-size: 1em;
+        font-weight: bold;
+      }
+
+      .flinks-item-desc {
+        padding: 10px 0;
+        font-size: .92em;
+      }
+
+    }
+  }
+
+  .flinks-page-desc {
+    margin-top: 20px;
+  }
+}

assets/css/_common/components/pages/index.scss

@@ -3,3 +3,4 @@
 @import 'schedule';
 @import 'breadcrumb';
 @import 'tag-cloud';
+@import 'flinks';

assets/css/_common/components/post/index.scss

@@ -18,7 +18,7 @@
 
 .use-motion {
   @if $motion_trans_post_block {
-    .post-block, .pagination, .comments, .post-comments {
+    .post-block, .flinks-block, .pagination, .comments, .post-comments {
       visibility: hidden;
     }
   }

assets/css/_common/components/post/post-footer.scss

@@ -3,7 +3,7 @@
 // Fix issue #16
 // To do: use `gap` instead of `margin`
 // See https://caniuse.com/flexbox-gap
-.post-footer {
+.post-footer, .flinks-list-footer {
   @include flex-column();
 
   hr{

assets/css/_schemes/Gemini/index.scss

@@ -25,7 +25,7 @@
 // ==================================================
 // Post blocks.
 .main-inner > {
-  .sub-menu, .post-block, .tabs-comment, .comments, .post-comments, .pagination {
+  .sub-menu, .post-block, .flinks-block, .tabs-comment, .comments, .post-comments, .pagination {
     background: var(--content-bg-color);
     border-radius: $border-radius-inner;
     box-shadow: $box-shadow-inner;
@@ -47,7 +47,7 @@
 }
 
 // Post & Comments blocks.
-.post-block, .comments, .post-comments {
+.post-block, .flinks-block, .comments, .post-comments {
   padding: $content-desktop-padding;
 }
 
@@ -91,7 +91,7 @@
     }
   }
 
-  .post-block {
+  .post-block, .flinks-block {
     // Inside posts blocks content padding (default 40px).
     padding: ($content-tablet-padding * 2);
   }
@@ -119,7 +119,7 @@
     }
   }
 
-  .post-block {
+  .post-block, .flinks-block {
     // Inside posts blocks content padding (default 40px).
     padding: $sidebar-offset;
   }

assets/js/motion.js

@@ -95,7 +95,7 @@ NexT.motion.middleWares = {
       });
     }
 
-    animate(postblock, '.post-block, .pagination, .post-comments');
+    animate(postblock, '.post-block,.flinks-block, .pagination, .post-comments');
     animate(collheader, '.collection-header');
     animate(postheader, '.post-header');
     animate(postbody, '.post-body');

exampleSite/content/flinks.md

@@ -0,0 +1,12 @@
+---
+title: "站点示例"
+type: flinks
+url: flinks.html
+---
+
+如想要交换友情链接，请在评论区留下你的站点信息，格式参考如下：
+
+> **名称：** NexT 主题 <br/>
+> **说明：** 保持简单的易用性和强大的功能。 <br/>
+> **站标：** https://hugo-next.eu.org/imgs/hugo_next_avatar.png <br/>
+> **网址：** https://hugo-next.eu.org

exampleSite/data/flinks.yaml

@@ -0,0 +1,29 @@
+# 友情链接
+# Friend's links
+
+- FLinksTitle: 官方示例
+  FLinksDesc: 来自主题官方的示例内容。
+  FLinksList:
+    - name: Hugo
+      desc: 世界上最快的网站建设框架！
+      image: https://gohugo.io/favicon-32x32.png
+      link: https://gohugo.io
+
+    - name: Hugo-NexT
+      desc: Hugo NexT 官方预览网站。
+      image: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
+      link: https://hugo-next.eu.org
+
+    - name: 凡梦星尘空间站
+      desc: 再平凡的人也有属于他的梦想！
+      image: https://lisenhui.cn/img/avatar.png
+      link: https://lisenhui.cn
+
+
+- FLinksTitle: Hugo NexT 粉丝群体
+  FLinksDesc: 来自 Hugo NexT 主题爱好者们的精彩呈现！
+  FLinksList:
+    - name: 阿哈吉
+      desc: 全网首个 Hugo NexT 忠实粉丝用户
+      image: https://a.happy2008.top/imgs/stayhome-small.png
+      link: https://a.happy2008.top/

layouts/flinks/single.html

@@ -0,0 +1,34 @@
+{{- define "title" }}{{- .Title }} - {{ .Site.Title -}}{{- end }}
+
+{{- define "main_inner_class" }}flinks posts-expand{{- end }}
+
+{{ define "main" }}
+<div class="flinks-block">
+<h1 class="flinks-block-title">{{ .Title }}</h1>
+<div class="flinks-lists">
+  {{ range .Site.Data.flinks }}
+  <div class="flinks-list">
+    <div class="flinks-list-title">{{ .FLinksTitle | safeHTML }}</div>
+    <div class="flinks-list-desc">{{ .FLinksDesc | safeHTML }}</div>
+    <div class="flinks-list-items">
+    {{ range .FLinksList }}
+    <div class="flinks-list-item">
+      <a href="{{ .link }}" rel="external nofollow noreferrer" title=" {{ .name }}" target="_blank">
+        <div class="flinks-item-icon">
+          <img class="no-lightbox entered loaded" src="{{ .image }}" alt="{{ .name }}"/>
+        </div>
+        <div class="flinks-item-name">{{ .name  | safeHTML }}</div>
+        <div class="flinks-item-desc" title="{{ .desc }}">{{ .desc | safeHTML }}</div>
+      </a>
+    </div>
+    {{ end }}
+  </div>
+  </div>
+  {{ end }}
+</div>
+<div class="flinks-list-footer"><hr/></div>
+<div class="flinks-page-desc">{{ .Content }}</div>
+</div>
+
+
+{{ end }}

layouts/partials/head/style.html

@@ -27,7 +27,7 @@
   <link rel="stylesheet" href="{{ $css.RelPermalink }}">
 {{- if .IsPage }}
   <style type="text/css">
-    .post-footer hr:after {
+    .post-footer, .flinks-list-footer hr:after {
       content: "{{ .Site.Params.postFooter.endLineTip }}";
     }
   </style>