blog/themes/Ying/layouts/shortcodes/livephoto.html

{{- $src := .Get "src" | default "" -}}
{{- $cover := .Get "cover" | default "" -}}
{{- $muted := .Get "muted" | default "true" -}}

{{- if and $src (not (findRE "^(https?://|/)" $src)) -}}
  {{- with .Page.Resources.GetMatch $src -}}
    {{- $src = .RelPermalink -}}
  {{- end -}}
{{- end -}}

{{- if and $cover (not (findRE "^(https?://|/)" $cover)) -}}
  {{- with .Page.Resources.GetMatch $cover -}}
    {{- $cover = .RelPermalink -}}
  {{- end -}}
{{- end -}}

<div class="amigo-livephoto {{ if eq $muted "true" }}is-muted{{ end }}" data-src="{{ $src }}" data-cover="{{ $cover }}">
    <div class="amigo-livephoto-badge">
        <span class="amigo-livephoto-live">LIVE</span>
        <button class="amigo-livephoto-sound" type="button" aria-label="切换声音">
            <svg class="amigo-livephoto-sound-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                <line x1="23" y1="9" x2="17" y2="15"></line>
                <line x1="17" y1="9" x2="23" y2="15"></line>
            </svg>
            <svg class="amigo-livephoto-sound-on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            </svg>
        </button>
    </div>
    <img class="amigo-livephoto-img" src="{{ $cover }}" alt="Live Photo" loading="lazy">
    <video class="amigo-livephoto-video" preload="none" loop playsinline muted>
        <source src="{{ $src }}" type="video/mp4">
    </video>
</div>