Hugo + Papermod主题 – 设置外链在新标签页打开

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

1. 添加外链图标代码

调整 assets/css/common/post-single.css,添加样式:

CSS

.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

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

YAML
params:
  externalLinksIcon: true
  externalLinksNewTab: true
点击展开查看更多

版权声明

作者: Donghai

链接: https://mgrowup.com/posts/hugo-papermod/set-external-links-to-open-in-new-tab/

许可证: CC BY-NC-SA 4.0

文章已根据知识共享署名-非商业性使用-相同方式共享4.0国际许可协议授权。请注明来源,仅非商业使用,并保持相同的许可协议。

评论

开始搜索

输入关键词搜索文章内容

↑↓
ESC
⌘K 快捷键