Ivan's Blog

Hugo 设置外部链接用新窗口打开

我使用的 Hugo 主题没有处理超链接，默认情况下将直接替换当前浏览器的标签页。这会导致如果点击了文章的链接跳走后，只能通过浏览器的返回键回到之前的页面。

坏处是如果跳走的是一个外部页面，读者可能会被新的页面吸引，而遗忘之前的页面。所以我需要将渲染链接的环节加上 target="_blank" 让新标签页打开超链接。

具体的操作步骤是使用一个自定义的链接渲染模版，替换掉原来默认的渲染代码：

  1. 在 hugo 项目的 layouts 目录下创建目录 _default/_markup
  2. 在该目录下创建一个模版文件 render-link.html
  3. 将下方代码填入该文件保存
<a href="{{ .Destination | safeURL }}"
  {{- with .Title }} title="{{ . }}"{{ end -}}
  {{- if not (in .Destination "ivan.show") }} target="_blank"{{ end -}}
>
  {{- with .Text | safeHTML }}{{ . }}{{ end -}}
</a>

这段代码是我在官方的基础上，添加了一段 if 的判断，如果识别到链接不包含博客域名，则为外部链接，那么就使用新标签页打开，否则还是使用当前标签页打开，这样不会无限污染浏览器。

问题初步解决后，为了提升用户的体验，我想要在外部链接的尾端给一个图标提醒。就像 Obsidian 的外部链接一样，所以我依然通过判断加了一段 svg 图标的代码如下：

{{- if not (in .Destination "ivan.show") }}<svg
  t="1713426496023"
  style="margin: 0 0 0 2px;"
  class="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="8864"
  width="10"
  height="10"
>
  <path
    d="M1001.627381 394.106435a44.521739 44.521739 0 1 1-88.598261 0V208.228174l-398.914783 398.914783a54.049391 54.049391 0 1 1-76.577391-76.310261l397.579131-397.490087h-182.984348a44.78887 44.78887 0 1 1 0-89.043479h298.740869c1.335652 0 2.226087 0.534261 3.561739 0.623305s1.78087-0.623304 2.671305-0.623305a40.069565 40.069565 0 0 1 27.158261 11.620174c1.157565 0.667826 2.226087 1.513739 3.116521 2.448696 0.890435 0.979478 1.78087 2.092522 2.671305 3.161043a41.360696 41.360696 0 0 1 11.575652 27.158261c0 0.979478-0.445217 1.825391-0.445218 2.80487s0.445217 2.359652 0.445218 3.650783v298.963478zM111.192598 934.956522h712.347826v-400.695652h89.043479v400.695652a89.043478 89.043478 0 0 1-89.043479 89.043478H111.192598a89.043478 89.043478 0 0 1-89.043478-89.043478V222.608696a89.043478 89.043478 0 0 1 89.043478-89.043479h400.695652v89.043479H111.192598v712.347826z"
    fill="#666666"
    p-id="8865"
  ></path></svg
>{{ end -}}

但这样其实有个坏处，就是如果文章的外链较多，每次都要加载这么多的代码量。所以这个过程还可以优化一下，通过静态资源目录实现。

把这个 svg 图标放入 hugo 根目录的 static/images 目录中，然后修改 render-link.html 文件内的代码如下：

<a href="{{ .Destination | safeURL }}"
  {{- with .Title }} title="{{ . }}"{{ end -}}
  {{- if not (in .Destination "ivan.show") }} target="_blank"{{ end -}}
>
  {{- with .Text | safeHTML }}{{ . }}{{ end -}}
</a>
{{- if not (in .Destination "ivan.show") }}
    <img src="/images/link.svg"></img>
{{ end -}}

这样就大大减少了代码量。

image.png|500

参考链接：

#Hugo

PREV Hugo 文章时区问题导致无法显示
NEXT Figma 20240416 更新 - 变量又增强了