diff options
| -rw-r--r-- | assets/css/components/_card.scss | 2 | ||||
| -rw-r--r-- | assets/css/components/_post.scss | 21 | ||||
| -rw-r--r-- | layouts/cards/single.html | 2 | ||||
| -rw-r--r-- | layouts/posts/single.html | 24 |
4 files changed, 41 insertions, 8 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 787c4e2d..932ce6a5 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -46,7 +46,7 @@ } .card-page { - .referenced-articles { + .related-posts { h2 { font-size: 1.2rem; color: var(--secondary-text-color); diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss index 5ab58c85..01c0deff 100644 --- a/assets/css/components/_post.scss +++ b/assets/css/components/_post.scss @@ -82,3 +82,24 @@ } } } + +/* related posts */ + +.related-posts { + .related-posts-list { + padding-inline-start: 0; + .related-posts-item { + display: flex; + justify-content: space-between; + align-items: center; + .related-post-subtitle { + color: var(--secondary-text-color); + } + .related-post-reading-time { + font-family: var(--mono-font-family); + color: var(--secondary-text-color); + font-size: 0.9rem; + } + } + } +} diff --git a/layouts/cards/single.html b/layouts/cards/single.html index 58f712d3..0048ad4d 100644 --- a/layouts/cards/single.html +++ b/layouts/cards/single.html @@ -31,7 +31,7 @@ {{- /* 如果有文章引用这个卡片，就显示它们 */ -}} {{ if gt (len $referencedBy) 0 }} - <section class="referenced-articles post-content"> + <section class="related-posts post-content"> <h2>引用了本卡片的文章</h2> <ul> {{- range $referencedBy }} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 525db84d..efea94f0 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -47,16 +47,28 @@ {{ end }} </div> - {{ partial "components/comment.html" . }} + <!-- Comment --> + {{ partial "components/comment.html" . }} - {{ with site.RegularPages.Related . | first 5 }} - <p>{{ T "relatedContent" }}</p> - <ul> + <!-- Related Posts --> + {{ with site.RegularPages.Related . | first 3 }} + <div class="related-posts post-content"> + <h4>{{ T "relatedContent" }}</h4> + <ul class="related-posts-list"> {{ range . }} - <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li> + <li class="related-posts-item"> + <a href="{{ .RelPermalink }}"> + {{ .LinkTitle }} + {{ with .Params.subtitle }} + <span class="related-post-subtitle">：{{ . }}</span> + {{ end }} + </a> + <span class="related-post-reading-time">⏱️ {{ .ReadingTime }}min </span> + </li> {{ end }} </ul> - {{ end }} + </div> + {{ end }} <script src="/js/tocbot.min.js"></script> <script> |