Refactor relate page

1. Fixed at 4 recommended numbers 2. Fix image alt not correct
HEIGE-PCloud · Oct 18, 2024 · 678aca2 · 678aca2
1 parent dd1ec9e
commit 678aca2
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 73 deletions.
diff --git a/assets/css/_partial/_single/_related.scss b/assets/css/_partial/_single/_related.scss
@@ -1,52 +1,103 @@
 .related-container {
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 2rem;
+  max-width: 800px;
   width: 100%;
-  height: 280px;
-
-  .related-item-container {
-    flex-basis: 350px;
-    flex-grow: 1;
-    flex-shrink: 1;
-    height: 270px;
-    min-width: 300px;
-    margin-right: 20px;
-    background: $related-background-color;
-    position: relative;
+  padding: 1rem;
+}
+
+.related-item-container {
+  flex: 1;
+  min-width: 0; /* 允许flex项目缩小到比内容更小 */
+  background-color: $related-background-color;
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--shadow-light);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  overflow: hidden;
+  display: flex;
+  aspect-ratio: 2 / 1.5; /* 设置固定的宽高比 */
+}
+
+.related-item-container:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-hover);
+  h2.related-title {
+    color: $related-hover-color;
   }
+}
 
-  .related-image {
-    @include transition(transform 0.4s ease);
+.related-item-container > a {
+  // display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  text-decoration: none;
+  color: $related-color;
+}
 
-    img {
-      width: 100%;
-      height: 200px;
-      object-fit: cover;
-    }
+.related-image {
+  width: 100%;
+  height: 0;
+  padding-bottom: 50%; /* 保持 2:1 的宽高比 */
+  position: relative;
+  overflow: hidden;
+}
 
-    &:hover {
-      @include transform(scale(1.01));
-    }
-  }
+.related-image img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
+.related-title {
+  font-size: 0.9rem;
+  margin: 0.5rem;
+  overflow: hidden;
+}
+
+/* 有图片时的标题样式 */
+.related-item-container:has(.related-image) .related-title {
+white-space: nowrap;
+text-overflow: ellipsis;
+}
+
+/* 没有图片时的标题样式 */
+.related-item-container:not(:has(.related-image)) .related-title {
+display: -webkit-box;
+-webkit-line-clamp: 3; /* 显示3行 */
+-webkit-box-orient: vertical;
+max-height: 6.95em; /* 大约3行的高度，根据实际情况调整 */
+}
+
+/* 当没有图片时，确保整个区域可点击 */
+.related-item-container:not(:has(.related-image)) > a {
+  padding: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .related-container {
+      grid-template-columns: repeat(2, 1fr);
+      padding: 0.5rem;
+  }
+
   .related-title {
-    position: absolute;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    top: 210px;
-    width: 95%;
-    margin: 10px;
-    font-size: 1.25rem;
-    line-height: 140%;
+      font-size: 0.8rem;
   }
+}
 
-  .related-title a {
-    color: $related-color;
-
-    &:hover {
-      color: $related-hover-color;
-    }
+@media (max-width: 480px) {
+  .related-container {
+      grid-template-columns: 1fr;
+      gap: 0.5rem;
+  }
+
+  .related-title {
+      font-size: 0.7rem;
   }
 }
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -508,7 +508,6 @@ bundle = false
   # 相关文章推荐配置
   [page.related]
     enable = true
-    count = 5
 
 # Sponsor config
 # 赞助设置

diff --git a/exampleSite/content/posts/tests/related-tests/index.en.md b/exampleSite/content/posts/tests/related-tests/index.en.md
@@ -14,7 +14,6 @@ hiddenFromHomePage: true
 hiddenFromSearch: true
 related:
     enable: true
-    count: 2
 ---
 
 <!--more-->

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -749,7 +749,6 @@ Please open the code block below to view the complete sample configuration {{< f
     # {{< version 0.2.14>}} Related content config
       [params.page.related]
         enable = true
-        count = 5
 
 
   # {{< version 0.2.13 >}} Sponsor config

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -752,7 +752,6 @@ optimizeImages = true
     # {{< version 0.2.14>}} 相关文章推荐配置
     [params.page.related]
       enable = true
-      count = 5
 
 
   # {{< version 0.2.13 >}} 赞赏配置

diff --git a/exampleSite/content/posts/theme-documentation-content/index.en.md b/exampleSite/content/posts/theme-documentation-content/index.en.md
@@ -171,7 +171,6 @@ sponsor:
   # ...
 related:
   enable: false
-  count: 5
 ---
 ```
 

diff --git a/layouts/partials/related.html b/layouts/partials/related.html
@@ -1,42 +1,37 @@
 {{- $params := .Scratch.Get "params" -}}
 
-{{ $related := first $params.related.count (where (where .Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
+{{ $related := first 4 (where (where $.Site.Pages ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
 {{ with $related }}
 
 <h2>{{- T "relatedContent" -}}</h2>
 <div class="related-container">
     {{ range . }}
         {{- $params := .Params | merge .Site.Params.page -}}
         <div class="related-item-container">
-            {{ $relPermalink := .RelPermalink}}
+            {{ $pageRelPermalink := .RelPermalink}}
+            {{- $title := .Title -}}
+            {{- $resource := .Resources -}}
             {{- $image := $params.featuredImagePreview | default $params.featuredImage -}}
-            {{- $height := "auto" -}}
-            {{- $width := "auto" -}}
-            {{- with .Resources.GetMatch (printf "%s" ($image)) -}}
-                {{- $image = .RelPermalink -}}
-                {{- $height = .Height -}}
-                {{- $width = .Width -}}
+            {{- if not $image -}}
+                {{- with .Resources.GetMatch "{featured-image, featured-image-preview}" -}}
+                    {{- $image = strings.TrimPrefix $pageRelPermalink .RelPermalink -}}
+                {{- end -}}
             {{- end -}}
-            {{- with .Resources.GetMatch "featured-image" -}}
-                {{- $image = .RelPermalink -}}
-                {{- $height = .Height -}}
-                {{- $width = .Width -}}
-            {{- end -}}
-            {{- with .Resources.GetMatch "featured-image-preview" -}}
-                {{- $image = .RelPermalink -}}
-                {{- $height = .Height -}}
-                {{- $width = .Width -}}
-            {{- end -}}
-            {{- with $image -}}
-            <div class="related-image">
-                <a href="{{ $relPermalink }}">
-                    {{- dict "Src" $image "Height" "200" "Width" "400" "Title" $.Description | partial "plugin/image.html" -}}
-                </a>
-            </div>
-            {{- end -}}
-            <h2 class="related-title">
-                <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-            </h2>
+            <a href="{{ $pageRelPermalink }}">
+                {{- with $image -}}
+                <div class="related-image">
+                        {{- $optimize := slice 
+                            (dict "Process" "resize 800x webp q75" "descriptor" "800w")
+                            (dict "Process" "resize 1200x webp q75" "descriptor" "1200w")
+                            (dict "Process" "resize 1600x webp q75" "descriptor" "1600w") 
+                        -}}
+                        {{- dict "Src" $image "Height" "200" "Width" "400" "Resources" $resource "OptimConfig" $optimize "Title" $title | partial "plugin/image.html" -}}
+                </div>
+                {{- end -}}
+                <h2 class="related-title">
+                    {{ .Title }}
+                </h2>
+            </a>
         </div>
     {{ end }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -171,7 +171,6 @@ sponsor: @@
       # ...
     related:
       enable: false
-      count: 5
     ---
     ```
@@ Expand Down @@