美化url和mp4链接

themes/Ying/layouts/_default/_markup/render-link.html

@@ -1,10 +1,35 @@
 {{ $url := .Destination }}
-<a 
-    {{ if or (in $url "www.usj.cc") (strings.HasPrefix $url "/") }}
-        href="{{ $url }}"
-    {{ else }}
-        href="/tiaozhuan.html?target={{ $url | base64Encode }}"
-    {{ end }}
-    {{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}
->
-{{ .Text | safeHTML }}</a>
+{{ $isExternal := strings.HasPrefix $url "http" }}
+{{ $isBareUrl := eq .Text .Destination }}
+{{ $displayText := .Text }}
+{{ $isVideo := or (strings.HasSuffix $url ".mp4") (strings.HasSuffix $url ".webm") (strings.HasSuffix $url ".ogg") (strings.HasSuffix $url ".mov") }}
+
+{{- if $isVideo -}}
+<video class="post-video" controls preload="metadata" playsinline>
+  <source src="{{ $url }}">
+</video>
+{{- else if $isExternal -}}
+{{- $domain := urls.Parse $url -}}
+{{- $faviconUrl := printf "https://api.usj.cc/api/favicon?url=%s" $domain.Host -}}
+{{- if $isBareUrl -}}
+<a class="link-card" href="/tiaozhuan.html?target={{ $url | base64Encode }}" target="_blank" rel="noopener">
+  <img class="link-card-icon" src="{{ $faviconUrl }}" alt="" loading="lazy" onerror="this.style.display='none'">
+  <span class="link-card-body">
+    <span class="link-card-title">{{ $domain.Host }}</span>
+    <span class="link-card-url">{{ $url }}</span>
+  </span>
+  <span class="link-card-arrow">↗</span>
+</a>
+{{- else -}}
+<a class="link-card" href="/tiaozhuan.html?target={{ $url | base64Encode }}" target="_blank" rel="noopener">
+  <img class="link-card-icon" src="{{ $faviconUrl }}" alt="" loading="lazy" onerror="this.style.display='none'">
+  <span class="link-card-body">
+    <span class="link-card-title">{{ $displayText }}</span>
+    <span class="link-card-url">{{ $domain.Host }}</span>
+  </span>
+  <span class="link-card-arrow">↗</span>
+</a>
+{{- end -}}
+{{- else -}}
+<a href="{{ $url }}">{{ $displayText | safeHTML }}</a>
+{{- end -}}

themes/Ying/layouts/_default/single.html

@@ -20,10 +20,25 @@
         
 
 
-        <div class="post-content" id="post-writing" itemprop="articleBody" uk-scrollspy="target: > h2, > h3, > h4, > blockquote, > table, > figure; cls: uk-animation-slide-bottom-small; delay: 100">
+        <div class="post-content" id="post-writing" itemprop="articleBody">
             {{ .Content }}
         </div>
 
+        <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var content = document.getElementById('post-writing');
+            if (!content) return;
+            // 滚动时内容从下方淡入，符合"往下看"的直觉
+            content.querySelectorAll('h2, h3, h4, p, ul, ol, blockquote, table').forEach(function(el) {
+                el.setAttribute('uk-scrollspy', 'cls: uk-animation-fade; delay: 60');
+            });
+            // 图片/视频/链接卡片稍微带点位移，更有"出现感"
+            content.querySelectorAll('figure, img, .post-video, .link-card').forEach(function(el) {
+                el.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-bottom-small; delay: 100');
+            });
+        });
+        </script>
+
 
     </article>
     <hr class="uk-divider-icon">