card
Shortcode
card
shortcode is a renderer that renders a specific card data easily
into card format with various designs. This shortcode is mainly makes things
easier to use since it involves many integrated data together.
Example usage:
|
|
This shortcode is available starting from v1.12.1
.
If you are looking to render multiple cards in a deck at once, see Cards Shortcode (notice the plural form).
Heads-Up
While the shortcode is useful, it breaks the Markdown syntax conventions due to Hugo specific shortcode feature. Therefore, when using other Markdown renderer, these shortcodes would be rendered as text instead of HTML code fragments.
Also, be careful and stay safe while using this shortcode. It allows any form of HTML to be embedded into your Markdown page.
Using card
card
shortcode relies completely on data file to render every cards. You
should create the component listed here starting from top to bottom.
Create Card Contents
There are 3 different methods to create the card contents. You may use only 1 method as per your use cases. Here, the methods are arranged in their parsing sequences.
Bissetii parse your card content is the following priority:
- If the content is a partial path and the file is available, the partial file will be parsed instead.
- Else, Bissetii will parse the content as a direct Markdown format.
- If any HTML codes are detected, Bissetii performs the last resort which is to parse the entire content as a direct HTML format.
Create Every Cards' Data File
Inside the card data deck directory, you should create each data file for every single card.
You can name if however you want as the shortcode will not use it. However,
Bissetii recommends TOML
format in order to keep things simple.
The full file pattern is shown as follow:
|
|
- Line 1-2 - specifies the card
width
andheight
. The valueauto
is allowed. - Line 3 - the rendering for the
card-content
. You can provide any one of the following values:- Partial parsing (E.g.
layouts/partials/bissetii-only/card/sample.html
). - If fails, directly process with markdown format.
- If fails or HTML codes is detected, direct process with HTML format.
- Partial parsing (E.g.
- Line 10 - creating optional Call-To-Action (CTA) links. Each CTA has
its own positioning tags. CTA main keyword MUST be
CTA
. - Line 11-16 - CTA link properties compliant to Link Shortcode parameters.
- Line 27 - creating optional cards' image thumbnails. Each thumbnail
has its own position tags. Thumbnails main keyword MUST
be
Thumbnails
. - Line 28-36 - Thumbnail image properties compliant to Image Shortcode parameters.
Calling Shortcode
|
|
card
shortcode currently accepting the following parameters.
deckPath
Parameter
This is the card deck path for rendering all the cards inside it.
Example, for the deck directory located in data/bissetii/data/cards
, the
deckPath
is bissetii.data.cards
.
outputType
Parameter
This is to instruct shortcode to generate the card deck alongside with grid system or just the card itself. Currently, it accepts the following values:
""
- empty value default tocard
.card
- just to generate the card HTML code (default).grid
- generate the deck along with the grid layout.
embedMode
Parameter
Set this value to embed
if you want the card not to have shadow and animations
but embedded into the page instead. Currently it accepts the following values:
""
- empty value default to normal mode.embed
- embed into the page with no shadow and movements.
Example Usage
Since this is a HTML renderer in Markdown file, you want to call in the
shortcode using the <
symbol instead of %
.
The example usage is as follows:
|
|
This will render the output as:
|
|
Conclusion
That’s all about card
shortcode in Bissetii. If you need more feature or
need to report a bug, please feel free to file an issue at our
Issue Section.