Preface

In the Hugo PaperMod theme, by default, the basic links added in articles open in the current webpage, which is not ideal for the user reading experience and can be inconvenient. Therefore, I want to set the links in the articles to open in a new tab for easier reading. Fortunately (and out of laziness), someone has already submitted a PR for this improvement in the Hugo-PaperMod project, so I directly adopted it and decided to document the process.

Steps

Step 1

(1) Add style code in assets/css/common/post-single.css

  • .post-content a.external-link

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

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;
}

Step 2

(2) Add code in layouts/_default/_markup/render-link.html

If the render-link.html file does not exist, create it and copy the code into it.

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>

Step 3

(3) Add the ExternalLinksIcon and ExternalLinksNewTab parameters in the site configuration file.

./hugo.yaml
params:
  env: production
  externalLinksIcon: true
  externalLinksNewTab: true

References

  1. https://github.com/adityatelange/hugo-PaperMod/issues/1612