Add external links display to detail pages

layouts/_default/single.html

@@ -39,6 +39,12 @@
                 <div class="detail-description">{{ . }}</div>
                 {{ end }}
                 
+                {{ with .Params.link }}
+                <div class="detail-link">
+                    <a href="{{ .url }}" target="_blank" class="primary-link">{{ .label }} <span class="external-icon">&#8599;</span></a>
+                </div>
+                {{ end }}
+                
                 {{ if .Params.tags }}
                 <div class="detail-tags">
                     Tags: 
@@ -153,6 +159,29 @@
     line-height: 1.5;
     color: #37474f;
 }
+.detail-link {
+    margin: 20px 0;
+}
+.primary-link {
+    display: inline-flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    text-decoration: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+.primary-link:hover {
+    background-color: #1565c0;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+.external-icon {
+    margin-left: 8px;
+    font-size: 0.9em;
+}
 .detail-tags {
     display: flex;
     flex-wrap: wrap;