在 Hugo-PaperMod 主题中，默认情况下，无论是顶部菜单栏中的外链还是文章中的引用链接，点击时都会在当前页面打开。这种设计在阅读体验上并不理想，因为用户可能需要频繁返回原页面，造成不必要的干扰和不便

1. 添加外链图标代码

调整 assets/css/common/post-single.css，添加样式：

  • .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. 添加 render-link.html

在 layouts/_default/_markup/ 添加 render-link.html

<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.修改 hugo.yaml

hugo.yaml

params:
  externalLinksIcon: true
  externalLinksNewTab: true