Links
5 min read
Links
Common use cases
Link pointing to an empty string
[Link]()
| Link | Type | Expected outcome |
|---|---|---|
| Link | gatsby-link | It renders an empty link to the same page. |
Link pointing to a different website
[Link](https://commercetools.com)
| Link | Type | Expected outcome |
|---|---|---|
| Link | external-link | It should work and be an OutboundLink that tracks via google analytics. |
Link to a heading anchor on this page
[Link](#last-heading)
| Link | Type | Expected outcome |
|---|---|---|
| Link | anchor-link | It should jump to that position without visible scrolling or reload. |
Link to a heading anchor on this same page, but using the full path
[Link](/views/links/#last-heading)
| Link | Type | Expected outcome |
|---|---|---|
| Link | anchor-link | It should jump to that position without visible scrolling or reload. |
Link to another page on this site, but using an absolute URL
[Link](https://docs.commercetools.com/docs-smoke-test/views/code-blocks/)
| Link | Type | Expected outcome |
|---|---|---|
| Link | internal-link | It should render an absolute URL in dev mode and a relative path in prod mode. |
Link to another page on this site using a full path
[Link](/views/code-blocks/)
| Link | Type | Expected outcome |
|---|---|---|
| Link | gatsby-link | It should be a Gatsby link, history navigation. |
Link to another page on this site with a specific anchor a page on this site
[Link](/views/markdown#subsection-first-level)
| Link | Type | Expected outcome |
|---|---|---|
| Link | gatsby-link | It should be a Gatsby link, history navigation, and directly jump to the anchor element position. |
Link to another page on this site using a relative upwards traversal path
[Link](../views/empty)
| Link | Type | Expected outcome |
|---|---|---|
| Link | gatsby-link | It should be a Gatsby link, history navigation, to a parent folder. |
Link to a sub-page of this one (omitting the trailing slash)
[Link](nested/link-target)
| Link | Type | Expected outcome |
|---|---|---|
| Link | gatsby-link | It should be a Gatsby link, history navigation, to a sub folder. |
Link to a sub-page of this one (including the trailing slash)
[Link](nested/link-target/)
| Link | Type | Expected outcome |
|---|---|---|
| Link | gatsby-link | It should be a Gatsby link, history navigation, to a sub folder. |
Link to a page of another internal site using a full URL (recommended)
[Link](https://docs.commercetools.com/site-template)
| Link | Type | Expected outcome |
|---|---|---|
| Link | internal-link | It should be a normal html link (only in production mode). |
Link to a page of another internal site
[Link](/../site-template/)
| Link | Type | Expected outcome |
|---|---|---|
| Link | internal-link | It should be a normal html link (only in production mode). |
Link pointing to static files
[Link](/downloads/hello.txt)[Link](/downloads/hello.json)[Link](/html/hello.html)
| Link | Type | Expected outcome |
|---|---|---|
| Link | static-link | It renders a normal HTML link pointing to the hello.txt page |
| Link | static-link | It renders a normal HTML link pointing to the hello.json page |
| Link | static-link | It renders a normal HTML link pointing to the hello.html page (HTML pages do not work in development mode) |
Link to an email address
[Link](mailto:documentation@commercetools.com)
| Link | Type | Expected outcome |
|---|---|---|
| Link | external-link | It renders a link to open a new email with the given address as the recipient. |
Last Heading
This paragraph just serves as a link target. The Anchor ID should be #last-heading