ComboStrap UI - Link

About

link is a ComboStrap UI component that permits to create hypertext link to page or media and allows any syntax inside. You can therefore have an icon link

Type

Internal

An internal link is a link to another page. If the target page does not exist, the link is shown in red. You can even use the styling attributes

  • Example:
Links to [[#|existing pages]] are shown in a different style from [[nonexisting|nonexisting]] ones.

Internal Links can also be [[?color=#495057|styled]]
  • Result:

Links to existing pages are shown in a different style from nonexisting ones.

Internal Links can also be styled

External

An external link is a link that begins with http or https.

  • Example:
External link to our protected page [[https://combostrap.com/quality/low_quality_example|low quality page]] 
  • Result:

External link to our protected page low quality page

Interwiki

An interwiki page is a shortcut syntax that permits to create rapidly a link to another website. The host is replaced by a wikiName (ie website name)

Syntax:

wikiName>path?query#fragment

For instance:

Interwiki: [[doku>Interwiki]]

Interwiki: Interwiki

The ''publication'' article link can be created with this syntax: [[wp>publication]]

The publication article link can be created with this syntax: publication

Email

Email addresses

If there is no description, the email is shown with the visible protection.

[[[email protected]?subject=Contact via WebSite]]

support [at] combostrap [dot] com

Email Protection

Email protection against bots is almost a lost cause but you can give them an hard time with this mailguard configuration.

Windows Share

Windows Shares: [[\\server\share|this]]

Windows Shares: this

Image

You can add an image

[[:start|{{:apple-touch-icon.png?50|}}]]

Icon

An icon can be used to get a compelling visual.

[[https://combostrap.com|<icon name="logo.svg" width="96px" height="96px"/>]]

Styling

Attributes

An Internal or email link can be styled with the styling attributes.

Example with the reset color and underline.

  • Input
<text color="#6c757d">
Colored text with a [[link?color=reset&underline=false#styling|styled link]]

Colored text with a [[link#styling|native link]]
</text>
  • Output

Colored text with a styled link

Colored text with a native link

Stretchable

You can also stretch a link and make the whole parent clickable with the clickable styling attribute.

Preview

By adding the preview attribute, you can create automatically a tooltip preview of the internal target page with:

Live Demo:

  • With this markup:
Hovering on this link, you will see a [[?preview|preview of the actual page]]
  • You will get this output:

Hovering on this link, you will see a preview of the actual page



If you enable the previewLink configuration, the preview attribute will be added on all internal links.

Highlight Words in the target page

You can even create links that will highlight words in your target path.

Example:

[[?s=Highlight&s=path#highlight_words_in_the_target_page|Click this link to highlight the words ''highlight'' and ''path'' on the target page]]
  • Output:

Click this link to highlight the words highlight and path on the target page


You can't use the form s[] to highlight words. Why ? See Square bracket not allowed

Configuration

useDokuwikiLinkClassName

Dokuwiki sets class names (wikilink1,wikilink2,urlextern,…) on the link to differentiate them. Unfortunately, this class names have styling rules that are in conflict with Bootstrap.

To resolve this issue, we have set other class name by link type that a web designer can use to style the links.

If you wish to get the Dokuwiki class name on your links, you can get them by enabling the useDokuwikiLinkClassName configuration.

If you don't want that Combostrap changes the default link behavior, you can disable it with the disableLink configuration.

Note that the link component enhances the link syntax.

  • It allows any content inside. Dokuwiki allows only text and media. If you disable it, you can't style your link or add any icon in it.
  • It allows advanced styling

If you enable this configuration, the preview attribute will be set on all internal link.

Support

I can't format the description to Italic

That's true, inside an link, this is actually not possible to use the // italic syntax.

This is to keep the compatibility with the old syntax that allows to have URL as a description. And an URL has the // italic syntax after the http scheme.

You can still create a link with an URL as description such as this one:

  • Link with URL
[[https://combostrap.com|https://combostrap.com]]
  • Output:

https://combostrap.com

Square Bracket Not allowed

The Closing Square Bracket ] is not allowed in a link.

For instance, this link format is not allowed

[[?s[]=word1+word2#fragment]]

Why ?

  • Because Dokuwiki does not accept any group in the regular expression pattern that capture the content of the link.
  • Hence, there is no way to create a logic that will capture all characters until the ]] or | character is found using a lazy regular expression.
  • Therefore, we use a greedy expression and the ] is denied to allow more than one link on a line.
Powered by ComboStrap