106 lines
3.3 KiB
Markdown
106 lines
3.3 KiB
Markdown
+++
|
|
title = "External"
|
|
description = "Create links with external icon and custom behavior."
|
|
categories = ["navigation"]
|
|
tags = ["links", "security", "privacy"]
|
|
html_attributes = ["href", "class", "referrerpolicy", "target", "type", "rel"]
|
|
custom_attributes = ["text", "trusted"]
|
|
snippets_used = ["external", "button", "alert"]
|
|
[[copyright]]
|
|
owner = "Josh Habdas"
|
|
date = "2019"
|
|
license = "agpl-3.0-or-later"
|
|
+++
|
|
|
|
Basic usage:
|
|
|
|
```html
|
|
{{</* external href="https://after-dark.habd.as" text="After Dark" /*/>}}
|
|
{{</* external href="https://after-dark.habd.as" /*/>}}
|
|
```
|
|
|
|
{{< external href="https://after-dark.habd.as" text="After Dark" />}}
|
|
{{< external href="https://after-dark.habd.as" />}}
|
|
|
|
Shorthand usage:
|
|
|
|
```term
|
|
{{</* external "https://after-dark.habd.as" "After Dark" /*/>}}
|
|
{{</* external href="https://go.habd.as/after-dark" /*/>}}
|
|
{{</* external "wss://fs1.habd.as:80" /*/>}}
|
|
```
|
|
|
|
{{< external "https://after-dark.habd.as" "After Dark" />}}
|
|
{{< external href="https://go.habd.as/after-dark" />}}
|
|
{{< external "wss://fs1.habd.as:80" />}}
|
|
|
|
{{< hackcss-alert type="info" >}}
|
|
<strong>Note:</strong> URIs such as those using the <code>wss</code> scheme may be considered unsafe by the {{< external "https://golang.org/pkg/html/template/" "Go template package" />}}. Learn more in the package {{< external "https://golang.org/pkg/html/template/#hdr-Security_Model" "Security Model" />}}.
|
|
{{< /hackcss-alert >}}
|
|
|
|
With a trusted URL:
|
|
|
|
```html
|
|
{{</* external trusted="true" href="wss://fs1.habd.as:80" /*/>}}
|
|
{{</* external trusted="true" href="irc://chat.freenode.net:6667/after-dark" /*/>}}
|
|
```
|
|
|
|
{{< external trusted="true" href="wss://fs1.habd.as:80" />}}
|
|
{{< external trusted="true" href="irc://chat.freenode.net:6667/after-dark" />}}
|
|
|
|
With external link styling removed:
|
|
|
|
```html
|
|
{{</* external rel="noopener" href="https://blog.domain.example" /*/>}}
|
|
```
|
|
|
|
{{< external rel="noopener" href="https://blog.domain.example" />}}
|
|
|
|
With internal link opening in a new window:
|
|
|
|
```html
|
|
{{</* external href="/404.html" text="Error Page" /*/>}}
|
|
```
|
|
|
|
{{< external href="/404.html" text="Error Page" />}}
|
|
|
|
With structured data type:
|
|
|
|
```html
|
|
{{</* external itemtype="significantLink" href="https://habd.as" /*/>}}
|
|
```
|
|
|
|
{{< external itemtype="significantLink" href="https://habd.as" />}}
|
|
|
|
With site-wide [Referrer Policy](/feature/referrer-policy) overridden:
|
|
|
|
```html
|
|
{{</* external referrerpolicy="unsafe-url" href="http://goo.gl" /*/>}}
|
|
```
|
|
|
|
{{< external referrerpolicy="unsafe-url" href="http://goo.gl" />}}
|
|
|
|
With markdown image and link styling removed:
|
|
|
|
```markdown
|
|
{{%/* external rel="next" href="https://source.unsplash.com/collection/983219/2160x1440" %}}
|
|
|
|
{{% /external */%}}
|
|
```
|
|
|
|
{{% external rel="next" href="https://source.unsplash.com/collection/983219/1080x720" %}}
|
|
|
|
{{% /external %}}
|
|
|
|
With interactive [Button](../button) to run a [Fuzzy Search](/feature/fuzzy-search):
|
|
|
|
```html
|
|
{{</* external rel="search" target="_self" href="/search/?s=button" >}}
|
|
{{< hackcss-button type="primary" text="Search" />}}
|
|
{{< /external */>}}
|
|
```
|
|
|
|
{{< external rel="search" target="_self" href="/search/?s=button" >}}
|
|
{{< hackcss-button type="primary" text="Search" />}}
|
|
{{< /external >}}
|