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 from a page of your website to another page of your website.
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
- The default description if not set is the page name for navigational component, the title otherwise.
- The URL may be made permanent by adding the page identifier.
- A relative link path (without the first character :) is relative to the slot (ie a link in a footer slot will be relative to the footer).
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:
- to Dokuwiki syntax
Interwiki: [[doku>Interwiki]]
- to Dokuwiki Result
Interwiki: Interwiki
- to wikipedia syntax
The ''publication'' article link can be created with this syntax: [[wp>publication]]
- to wikipedia result
The publication article link can be created with this syntax: wiki/publication
Email addresses
<[email protected]>
Email link
If there is no description, the email is shown with the visible protection.
[[[email protected]?subject=Contact via WebSite]]
Email Protection
Email protection against bots is almost a lost cause but you can give them an hard time with this mailguard configuration.
Note that the hex value is only valid for email written in text and not in link. If this is the case, the protection is set to visible replacing the @ with its textual counterpart (ie 'at)
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:
- the page name
- and the description
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.
In this case, you can disable the preview by setting the value to false (ie preview=false).
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:
You can't use the form s[] to highlight words. Why ? See square_bracket_not_allowed
Wizard
To insert a link into your page, you can use the Link Wizard in the editor.
Configuration
useDokuwikiLinkClassName
Dokuwiki sets class names (wikilink1,wikilink2,urlextern,…) on the link to differentiate them. Unfortunately, these class names have styling rules that are in conflict with bootstrap.
To resolve this issue, we have set other class names 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.
disableLink
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
- It applies the bootstrap styling by default
previewLink
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:
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.