.Kind (page): .Type (posts) / .Layout ()
Bundle: n/a (regular page)
[ categories | tags | search ]
ox-hugo Test Site

This is the test site for the ox-hugo package for Emacs/Org-mode.

It is updated automatically after each commit to the ox-hugo repo. It was last updated on Mar 05, 2024 19:24 UTC.


This page was created/modified in commit ec88b9a "Disable the extra divs hack if using Goldmark" on 2022-01-03.
Markdown source of this page

Alert Shortcode Lookalike

tags: shortcode alert special-block attr_html


Description/Summary

ox-hugo Issue #119 Below doesn’t export to an alert shortcode, but the exported Markdown contains HTML that resembles the shortcode code (Courtesy: hugo-academic theme): <div class="alert alert-{{ .Get 0 }}"> {{ .Inner }} </div> There are few ways to mimic that. CSS # Source for alert CSS Note 1 The ox-hugo test site is not using FontAwesome, so using the unicode symbols 🛈 and ⚠ instead. Note 2 Also, due to the limitation that Markdown text cannot be simply wrapped in div, a hack is used, that requires using an empty div pair.


Content

ox-hugo Issue #119

Below doesn’t export to an alert shortcode, but the exported Markdown contains HTML that resembles the shortcode code (Courtesy: hugo-academic theme):

<div class="alert alert-{{ .Get 0 }}">
  {{ .Inner }}
</div>

There are few ways to mimic that.

CSS #

Source for alert CSS

Note 1
The ox-hugo test site is not using FontAwesome, so using the unicode symbols 🛈 and ⚠ instead.
Note 2
Also, due to the limitation that Markdown text cannot be simply wrapped in div, a hack is used, that requires using an empty div pair. So that requires overriding a bit of the default CSS from the theme.

CSS Override for Academic theme #

In summary, these overrides over the theme CSS would suffice:

/* Because of the empty div hack, the first paragraph will be the
   second child in the div. So use "p:nth-child(2)" instead of the
   original "p:first-child". */
div.alert p:nth-child(2)::before {
    position: absolute;
    top: -0.5rem;
    left: -2rem;
    font-family: 'FontAwesome';
    font-size: 1.5rem;
    color: #fff;
    content: '\f05a';
    /* Use below if not using FontAwesome */
    /* content: '🛈'; */
    width: 1.5rem;
    text-align: center;
}

div.alert-warning p:nth-child(2):before {
    content: '\f071';
    /* Use below if not using FontAwesome */
    /* content: '⚠'; */
}

Alert using Special Block #

Here’s a tip or note.

This can be multi-paragraph too.

Here’s a warning!

This can be multi-paragraph too.

Alert using only #+attr_html #

This will work only if the message is a single paragraph.

Here’s a tip or note.

Here’s a warning!


Page (Debug)

Page VariableValue
Name "Alert Shortcode Lookalike"
Title "Alert Shortcode Lookalike"
ResourceType "page"
Kind "page"
Section "posts"
Draft false
Type "posts"
Layout ""
Permalink "https://ox-hugo.scripter.co/test/posts/alert-short-code-lookalike/"
RelPermalink "/posts/alert-short-code-lookalike/"
Data
page.Data{} (type:page.Data)
NextPageA
PrevPageAlias specifying a different section
NextInSection2020-04-19
PrevInSectionAlias specifying a different section

Page Params (Debug)

KeyTypeValue
draftbool false
iscjklanguagebool false
lastmodtime.Time 2022-01-03 21:54:58 -0500 -0500
tags[]string "shortcode" "alert" "special-block" "attr_html"
titlestring "Alert Shortcode Lookalike"

File Object (Debug)

FileInfo VariableValue
UniqueID "0453d8c5710c143a6ff60f92327c49a7"
BaseFileName "alert-short-code-lookalike"
TranslationBaseName "alert-short-code-lookalike"
Lang "en"
Section "posts"
LogicalName "alert-short-code-lookalike.md"
Dir "posts/"
Ext "md"
Path "posts/alert-short-code-lookalike.md"

This site is generated using the ox-hugo package for Emacs/Org-mode + hugo-bare-min-theme + Hugo 0.101.0 (commit 466fa43c16709b4483689930a4f9ac8add5c9f66) . This site is powered by Netlify.
[Test Site home | ox-hugo home]