The Link component

Undraw Add Content Re Vgqa

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

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: wiki/publication

Email

Email addresses

<[email protected]>

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|}}]]

Apple Touch Icon

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:

Combostrap Link Preview

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:


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.

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:

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.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How can I generate a list of pages?

This howto shows you how you can generate a list of pages with the iterator components. page sql a list element with a link created from: the path and the title variables ...
Undraw Animating
How to center a link or a button ?

This how to will show you how to center a link. A link can be styled via its properties and because a link is a also a type of button, this page shows you the two possibilities. A link is a phrase...
Undraw Animating
How to generate a list of events?

This howto shows you how you can generate a list of pages event with the iterator components. page sql a list element with the date_start and date_end formated date of a page event...


Recommended Pages
Undraw My Documents
All Navigational components

How to improve the navigation of your website with the navigational components
Backlink Action
Backlinks management in ComboStrap

Backlinks are important because they give extra-navigation possibilities and gives also more weight to pages. This article tell you everything about backlinks in ComboStrap
Primary Secondary Color
Branding Colors (primary, secondary)

The branding colors are the most dominant colors of your theme. They bring a connection to your brand.
Undraw My Documents
Collapse or expand any component with the toggle effect

The toggleTargetId is an attribute that transform a link or a button in a toggle element
Bootstrap Default Color
Color - How to specify a Color Value on ComboStrap Component

Color management in ComboStrap
Undraw My Documents
ComboStrap - Text color

How to change the color of a text with the text-color attribue
Undraw My Documents
ComboStrap Analytics - Database

All ComboStrap data are stored in a Sqlite Database that you can query online The database schema has the following tables: pages - data on pages: page_id: the page id canonical: the canonical...
Undraw My Documents
ComboStrap Styling - Make a whole component clickable

When a component contains a link, you can make the whole surface clickable with the clickable attribute
Undraw My Documents
ComboStrap UI - Brand

brand is a component that creates a company / brand button or link with the corresponding: logo icon and colors By default, the brand component will show your brand. Ie a button with: your...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...



Task Runner