From 678aca2338891e6f92a80fa9b9150cdd36eb0fcf Mon Sep 17 00:00:00 2001 From: xiaoqing Date: Fri, 18 Oct 2024 12:48:38 +0800 Subject: [PATCH] Refactor relate page 1. Fixed at 4 recommended numbers 2. Fix image alt not correct --- assets/css/_partial/_single/_related.scss | 131 ++++++++++++------ exampleSite/config/_default/params.toml | 1 - .../posts/tests/related-tests/index.en.md | 1 - .../theme-documentation-basics/index.en.md | 1 - .../theme-documentation-basics/index.zh-cn.md | 1 - .../theme-documentation-content/index.en.md | 1 - layouts/partials/related.html | 51 +++---- 7 files changed, 114 insertions(+), 73 deletions(-) diff --git a/assets/css/_partial/_single/_related.scss b/assets/css/_partial/_single/_related.scss index fb5eb62ea..7b48b3469 100644 --- 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 index 13ad417c1..7764eac57 100644 --- 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 index b278f68dc..27a0c9018 100644 --- 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 --- diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md index 35fbd8d16..6d5f33050 100644 --- 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 index f9eb30082..154f15ea7 100644 --- 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 index d4cb0f750..67f69aadf 100644 --- 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 index b0047f740..6f8f1f768 100644 --- a/layouts/partials/related.html +++ b/layouts/partials/related.html @@ -1,6 +1,6 @@ {{- $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 }}

{{- T "relatedContent" -}}

@@ -8,35 +8,30 @@

{{- T "relatedContent" -}}

{{ range . }} {{- $params := .Params | merge .Site.Params.page -}}
- {{ $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 -}} -
- - {{- dict "Src" $image "Height" "200" "Width" "400" "Title" $.Description | partial "plugin/image.html" -}} - -
- {{- end -}} -

- {{ .Title }} -

+ + {{- with $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" -}} +
+ {{- end -}} +

+ {{ .Title }} +

+
{{ end }}