.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 May 09, 2019 04:21 UTC.


This page was created/modified in commit 40c56b4 "Update existing tests for the change to org-hugo-slug in last commit" on 2019-04-29.
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 days 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 days 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)
NextPage
PrevPageAlias specifying a different section
NextInSection
PrevInSectionAlias specifying a different section

Page Params (Debug)

KeyTypeValue
draftbool false
iscjklanguagebool false
lastmodtime.Time 2019-04-29 11:53:43 -0400 -0400
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.56.0-DEV (commit 24576909, using Chroma commit 26f03cb) .
[Test Site home | ox-hugo home]