Hugo主题PaperMod设置文章内基本链接在新标签页打开

0 3.2~4.1 分钟

(1)在 assets/css/common/post-single.css 添加样式代码

.post-content a code {
    margin: auto 0;
    border-radius: 0;
    box-shadow: 0 -1px 0 var(--primary) inset;
}

.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: 18px;
    height: 18px;
}

.post-content del {
    text-decoration: line-through;
}

(2)在theme的 layouts/_default/_markup/render-link.html 添加代码
如果没有 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)在站点配置文件中添加 ExternalLinksIconExternalLinksNewTab 参数

params:
  env: production
  externalLinksIcon: true
  externalLinksNewTab: true

上一篇 Linux创建python虚拟环境解决依赖问题
下一篇 Linux修改DNS