In the Hugo-PaperMod theme, by default, both the external links in the top menu bar and the referenced links in the article will open on the current page when clicked. This design is not ideal for reading experience, as users may need to return to the original page frequently, causing unnecessary interference and inconvenience!

Adjust assets/css/common/post-single.css to add the style:

  • .post-content a.external-link

  • .post-content a.external-link::after


.post-content a.external-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.post-content a.external-link::after {
    content: "";
    display: inline-block;
    clip-path: polygon(60% 5%,
            60% 0%,
            100% 0%,
            100% 5%,
            100% 40%,
            94.98% 40%,
            94.98% 5%,
            94.98% 9.59%,
            42.41% 59.2%,
            38.1% 54.64%,
            90.7% 5%,
            60% 5%,
            50% 8%,
            13% 8%,
            8% 8%,
            8% 92%,
            92% 92%,
            92% 50%,
            87% 50%,
            87% 87%,
            13% 87%,
            13% 13%,
            50% 13%,
            50% 8%);
    background-color: var(--primary);
    width: 10px;
    height: 10px;
}

2. Add render-link.html

Add render-link.html to layouts/_default/_markup/

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}
    {{ if strings.HasPrefix .Destination "http" }} rel="noopener"{{ end }}
    {{ if and site.Params.ExternalLinksIcon (strings.HasPrefix .Destination "http") }} class="external-link"{{ end }}
    {{ if and site.Params.ExternalLinksNewTab (strings.HasPrefix .Destination "http") }} target="_blank"{{ end }}
 >{{ .Text }}</a>

3.Modify hugo.yaml

hugo.yaml

params:
  externalLinksIcon: true
  externalLinksNewTab: true