diff options
| author | Eltrac <hi@guhub.cn> | 2025-05-21 21:18:38 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-05-21 21:18:38 +0800 |
| commit | 8507979b67bf70fd40186f5224b6d19ce40eedd6 (patch) | |
| tree | 25318e3eb34c89e7bd400592ea574dbae62e24ea | |
| parent | 3381ca3d4229dfb3746e3315e5a942fd80c6a305 (diff) | |
fix: showing unwanted image in RSS feed
The original method of adding an "external" icon is to append an `<img>` tag to `<a>` tags, but if the reader is viewing the content from a reader where the CSS style does not work, the image is displayed in an unwanted way.
The workaround is to remove the `<img>` tag and implement this feature with only CSS pseudo-element.
Former-commit-id: 021a9a90fd5415262074fad37d569a4da01c7aef
| -rw-r--r-- | assets/css/components/_markdown.scss | 11 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-link.html | 2 |
2 files changed, 12 insertions, 1 deletions
diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss index 50f7735c..ac4e28bd 100644 --- a/assets/css/components/_markdown.scss +++ b/assets/css/components/_markdown.scss @@ -28,6 +28,17 @@ $em-text-color: #889E73; a { text-decoration: underline; color: $link-color; + &.external-link::after { + content: ''; + display: inline-block; + width: 0.9em; + height: 0.9em; + background-image: url('/img/external-link.svg'); + background-size: cover; + @media (prefers-color-scheme: dark) { + filter: invert(1); + } + } } blockquote { diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html index 16c201cd..2e8d32f7 100644 --- a/layouts/_default/_markup/render-link.html +++ b/layouts/_default/_markup/render-link.html @@ -1,6 +1,6 @@ {{ $url := .Destination | safeURL }} {{ if or (strings.HasPrefix $url "http://") (strings.HasPrefix $url "https://") }} - <a href="{{ $url }}" target="_blank" rel="noopener noreferrer">{{ .Text }}<span class="link-icon"><img class="invert-if-dark" src="/img/external-link.svg"></span></a> + <a href="{{ $url }}" class="external-link" target="_blank" rel="noopener noreferrer">{{ .Text }}</a> {{ else }} <a href="{{ $url }}">{{ .Text }}</a> {{ end }} |