{{- $related := .Site.RegularPages.Related . | first 3 -}}
{{- with $related -}}
<section class="related-posts">
  <div class="related-posts-header">
    <span class="related-posts-eyebrow">继续阅读</span>
    <h3 class="related-posts-title">相关文章 <span class="related-posts-title-en">/ Related Posts</span></h3>
  </div>
  <div class="related-posts-grid">
    {{- range . -}}
    {{- $tags := .Params.tags -}}
    {{- $cover := .Params.cover -}}
    {{- $coverURL := "" -}}
    {{- with $cover -}}
      {{- with .image -}}
        {{- if or (hasPrefix . "http://") (hasPrefix . "https://") (hasPrefix . "/") -}}
          {{- $coverURL = . -}}
        {{- else -}}
          {{- with $.Resources.GetMatch . -}}
            {{- $coverURL = .RelPermalink -}}
          {{- else -}}
            {{- with resources.GetMatch . -}}
              {{- $coverURL = .RelPermalink -}}
            {{- else -}}
              {{- $coverURL = relURL . -}}
            {{- end -}}
          {{- end -}}
        {{- end -}}
      {{- end -}}
    {{- end -}}
    {{- $hasCover := ne $coverURL "" -}}
    <a href="{{ .RelPermalink }}" class="rpc{{- if $hasCover }} rpc--has-cover{{- end }}">
      {{- if $hasCover -}}
      <div class="rpc__cover" aria-hidden="true">
        <img src="{{ $coverURL }}" alt="" loading="lazy" decoding="async">
      </div>
      {{- end -}}
      <div class="rpc__body">
        {{- if $tags -}}
        <div class="rpc__tags">
          {{- range first 2 $tags -}}
          <span class="rpc__tag">{{ . }}</span>
          {{- end -}}
        </div>
        {{- end -}}
        <p class="rpc__title">{{ .Title }}</p>
        <div class="rpc__meta">
          {{- if .Date -}}
          <span class="rpc__date">{{ .Date.Format "2006-01-02" }}</span>
          {{- end -}}
          {{- if .ReadingTime -}}
          <span class="rpc__sep" aria-hidden="true">·</span>
          <span class="rpc__read">{{ .ReadingTime }} min</span>
          {{- end -}}
        </div>
      </div>
      <span class="rpc__arrow" aria-hidden="true">→</span>
    </a>
    {{- end -}}
  </div>
</section>
{{- end -}}
