Shortcodes
Shortcodes let you easily reuse a piece of UI or styling consistently. Examples might include a callout or a video embed. Doks supports the use of shortcodes in Markdown files and provides some common shortcodes for you to use.
Learn more about Shortcodes in the Hugo Docs.
Callouts
Callouts (also known as “admonitions” or “asides”) are useful for displaying secondary information alongside a page’s main content.
Callout blocks are indicated using {{< callout >}}{{< /callout >}}
to wrap your content, and can be of type note
, tip
, caution
or danger
.
You can nest any other Markdown content types inside a callout, but callouts are best suited to short and concise chunks of content.
Note callout
Note
Doks is a documentation website toolkit built with Thulite. You can get started with this command:
Custom callout titles
You can specify a custom title for the callout using the title
parameter.
Did you know?
Thulite simplifies developer on boarding time and makes for faster collaboration by using a single declaration manifest for dependencies.
More callout types
Caution and danger callouts are helpful for drawing a user’s attention to details that may trip them up. If you find yourself using these a lot, it may also be a sign that the thing you are documenting could benefit from being redesigned.
Caution
If you are not sure you want an awesome docs site, think twice before using Doks.
Danger
Your users may be more productive and find your product easier to use thanks to helpful Doks features.
- Clear navigation
- User-configurable color theme
- i18n support
Details
You can insert a details HTML element using the {{< details >}}
shortcode.
Details
Something small enough to escape casual notice.Start in open state
You can add the open
attribute to start details in open state.
Start in open state
This Boolean attribute indicates whether the details — that is, the contents of the<details>
element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.Tabs
You can display a tabbed interface using the {{< tabs >}}
and {{< tab >}}
shortcodes. The {{< tabs >}}
item must have a unique identifier, a descriptive one is recommended. Each {{< tab >}}
item must have a label to display to users.
The selected tab is remembered in and across pages.
Run the following command in your terminal to start our handy install wizard, create-thulite
.
cd
into your new project directory to begin using Thulite. Install your dependencies before continuing.
Link cards
Use the {{< link-card >}}
shortcode to link prominently to different pages.
A {{< link-card >}}
requires a title
and an href
attribute. You can optionally include a short description
or other link attributes such as target
.
Showcase
Explore the infinite possibilities of Doks
Card grid
Group multiple {{< link-card >}}
shortcodes in {{< card-grid >}}
to display cards side-by-side when there’s enough space.
Images
Images in Doks use Thulite’ Images integration.
Display an image using the {{< img >}}
, {{< picture >}}
, or {{< figure >}}
shortcode.
Page resource
Display a page resource image:
Assets directory
Display an image from the assets directory:
Video
You can insert a Video Embed HTML element using the {{< video >}}
shortcode.
SVG
SVG’s in Doks use Thulite’ SVG integration.
Display an SVG using the {{< inline-svg >}}
shortcode. The SVG gets inlined (embedded) into the pages’ HTML.
Page resource
You can add a monochrome monogram that respects darkmode/lightmode:
Assets directory
You can add a logo that respects darkmode/lightmode:
Tabler icons
Copy the icon name from Tabler Icons by clicking on it’s name.
You can add a outline/coffee icon:
You can specify SVG attributes, for example: