如何在构建时格式化外部链接？答案

【问题标题】：How to format external links at build time?如何在构建时格式化外部链接？
【发布时间】：2019-11-11 03:02:03
【问题描述】：

我有一个带有一些 JavaScript 和 Gulp 的 Hugo 网站。
我想自动检测和格式化<a> 链接，以便添加“外部链接”图标和“target=_blank”。

现在我在客户端浏览器中使用一些 JavaScript：

// EXTERNAL LINKS
$(document.links).filter(function() {
  return this.hostname != window.location.hostname
      && this.hostname != "domain-name-base-url.com"
      && this.hostname != "another-domain-name-base-url-to-be-treated-as-internal.com"
}).attr('target', '_blank').addClass("external");

但出于性能原因，我想在构建时进行。

如何将其移至构建后的 gulp 任务？我用.pipe(replace...) 尝试了一些东西，但无法做到。我什至可以在 Hugo 构建时进行吗？

如果有人知道更简单的方法来实现这一点（允许用户输入 Markdown，忘记链接是否是外部链接，并在构建时添加“target=_blank”和图标）......任何神奇库还是最佳实践？

【问题讨论】：

您究竟面临哪些“性能原因”？

标签： javascript gulp hugo

【解决方案1】：

与其花时间尝试开发解决方案，您可以简单地手动替换任何外部链接。

使用 Markdown 2.5.2 您可以使用以下语法

[link](url){:target="_blank"}

如果这不起作用，请使用常规 HTML

<a href="http://example.com/" target="_blank">Hello, world!</a>

更多关于 Hugo 内部和外部链接的信息可以在here找到。

【讨论】：

【解决方案2】：

更新：您也可以在模板中执行此操作，方法是使用 replace 函数将该属性添加到所有锚元素：

{{ $content := replace .Content "<a " "<a target=\"_blank\" " | safeHTML }}
{{ $content }}

您可以将 Hugo 的降价处理器 Blackfriday 配置为在新选项卡中打开链接，方法是将其添加到 config.toml 文件的底部：

[blackfriday]
  hrefTargetBlank = true

来自Blackfriday options 文档：

hrefTargetBlank

默认：false
黑色星期五旗帜：HTML_HREF_TARGET_BLANK
目的：true 在新窗口或标签中打开（外部链接）绝对链接。虽然 target="_blank" 属性通常用于外部链接，但 Blackfriday 对所有绝对链接 (ref) 都这样做。如果他们自始至终都使用绝对链接，对于内部链接也需要注意这一点（例如，通过将canonifyURLs 设置为true 或通过absURL）。

【讨论】：

【解决方案3】：

Hugo 拥有你所需要的 Markdown 渲染钩子：https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks

Hugo 教程外部链接：

创建一个布局/_default/_markup/render-link.html

{{- $parsedTitle := dict -}}
{{- with .Title -}}
  {{- $parsedTitle = partial "functions/parse-title-attribute.html" . -}}
{{- end -}}
{{- $baseurl := urls.Parse .Page.Site.BaseURL -}}
{{- $desturl := urls.Parse .Destination -}}

<a href="{{ .Destination | safeURL }}"
  {{- with $parsedTitle.title }} title="{{ . }}"{{- end -}}
  {{- with $parsedTitle.attributes -}}
    {{- range $k, $v := . -}}
      {{- printf " %s=%q" $k $v | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}
  {{- if and (strings.HasPrefix .Destination "http") (not (strings.HasPrefix $desturl.Host $baseurl.Host)) }} target="_blank" rel="external nofollow noopener"{{ end -}}
  >{{ .Text | safeHTML }}</a>

{{- /* Strip trailing space. Code by djibe, thanks to jmooring & killbus */ -}}

现在你有两种可能性：

在降价中使用：[External link](https://discourse.gohugo.io/ "{rel='nofollow'}")（但是，所有外部链接都将被标记为外部 nofollow，除非您删除行 {{- if and (strings.HasPrefix .Destination "http") (not (strings.HasPrefix $desturl.Host $baseurl.Host)) }} target="_blank" rel="external nofollow noopener"{{ end -}}）
或标准[External link](https://discourse.gohugo.io/)

注意。短代码不受此影响，因此您必须在每个链接上指定合适的行为。

【讨论】：