<!doctype html><htmllang=endir=ltrclass=scroll-smoothdata-default-appearance=darkdata-auto-appearance=false><head><metacharset=utf-8><metahttp-equiv=content-languagecontent="en"><metaname=viewportcontent="width=device-width,initial-scale=1"><metahttp-equiv=x-ua-compatiblecontent="ie=edge"><title>Rich Content · Blowfish</title><metaname=titlecontent="Rich Content · Blowfish"><metaname=descriptioncontent="A powerful, lightweight theme for Hugo built with Tailwind CSS."><linkrel=canonicalhref=https://nunocoracao.github.io/blowfish/samples/rich-content/><linktype=text/cssrel=stylesheethref=/blowfish/css/main.bundle.min.2837de2ddd80f21a2e8f05c3de5c51b3001c6f76bf41e9430d3f18b1287f21ff8f160360c9686ecec3bdb000b0446c9cec20382290a2fbf1c8b3e7626d528647.cssintegrity="sha512-KDfeLd2A8houjwXD3lxRswAcb3a/QelDDT8YsSh/If+PFgNgyWhuzsO9sACwRGyc7CA4IpCi+/HIs+dibVKGRw=="><scripttype=text/javascriptsrc=/blowfish/js/main.min.cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e.jsintegrity="sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg=="></script>
<linkrel=apple-touch-iconsizes=180x180href=/blowfish/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/blowfish/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/blowfish/favicon-16x16.png><linkrel=manifesthref=/blowfish/site.webmanifest><metaproperty="og:title"content="Rich Content"><metaproperty="og:description"content="A brief description of Hugo Shortcodes"><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://nunocoracao.github.io/blowfish/samples/rich-content/"><metaproperty="article:section"content="samples"><metaproperty="article:published_time"content="2019-03-10T00:00:00+00:00"><metaproperty="article:modified_time"content="2019-03-10T00:00:00+00:00"><metaproperty="og:site_name"content="Blowfish"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Rich Content"><metaname=twitter:descriptioncontent="A brief description of Hugo Shortcodes"><scripttype=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Rich Content","headline":"Rich Content","description":"A brief description of Hugo Shortcodes","abstract":"This is an \u003cem\u003eexample\u003c\/em\u003e of a \u003cstrong\u003erich\u003c\/strong\u003e content summary.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/samples\/rich-content\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2019","dateCreated":"2019-03-10T00:00:00\u002b00:00","datePublished":"2019-03-10T00:00:00\u002b00:00","dateModified":"2019-03-10T00:00:00\u002b00:00","keywords":["shortcodes","privacy","sample","gist","twitter","youtube","vimeo"],"mainEntityOfPage":"true","wordCount":"145"}]</script><metaname=authorcontent="Blowfish"><linkhref=https://twitter.com/burufugurel=me><linkhref=https://github.com/nunocoracao/blowfishrel=me><scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
Like</button></span></div></div></header><sectionclass="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><divclass="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summaryclass="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><divclass="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><navid=TableOfContents><ul><li><ahref=#youtube>YouTube</a></li><li><ahref=#twitter>Twitter</a></li><li><ahref=#gist>Gist</a></li><li><ahref=#vimeo>Vimeo</a></li></ul></nav></div></details></div></div><divclass="min-w-0 min-h-0 max-w-prose"><p>Hugo ships with several <ahref=https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes>built-in shortcodes</a> for rich content, along with a <ahref=https://gohugo.io/about/hugo-and-gdpr/>privacy config</a> and a set of <em>simple shortcodes</em> that enable static and no-JS versions of various social media embeds.</p><h2id=youtubeclass="relative group">YouTube <spanclass="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#youtubearia-label=Anchor>#</a></span></h2><p>Below is an example using the built-in <code>youtube</code> shortcode.</p><divstyle=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframesrc=https://www.youtube.com/embed/ZJthWmvUzzcstyle=position:absolute;top:0;left:0;width:100%;height:100%;border:0allowfullscreentitle="YouTube Video"></iframe></div><h2id=twitterclass="relative group">Twitter <spanclass="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#twitteraria-label=Anchor>#</a></span></h2><p>This example uses the <code>twitter_simple</code> shortcode to output a Tweet. It requires two named parameters <code>user</code> and <code>id</code>.</p><styletype=text/css>.twitter-tweet{font:14px/1.45'-apple-system',BlinkMacSystemFont,segoeui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helveticaneue,sans-serif;border-left:4pxsolid#2b7bb9;padding-left:1.5em;color:#555}.twitter-tweeta{color:#2b7bb9;text-decoration:none}blockquote.twitter-tweeta:hover,blockquote.twitter-tweeta:focus{text-decoration:underline}</style><blockquoteclass=twitter-tweet><plang=endir=ltr>“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <ahref=https://t.co/gcv7SrhvJb>pic.twitter.com/gcv7SrhvJb</a></p>— Graphic Design History (@DesignReviewed) <ahref="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote><p>Alternatively, the <code>tweet</code> shortcode can be used to embed a fully marked up Twitter card.</p><h2id=gistclass="relative group">Gist <spanclass="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#gistaria-label=Anchor>#</a></span></h2><p>The <code>gist</code> shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.</p><scripttype=application/javascriptsrc=https://gist.github.com/nunocoracao/2779792841f7ffa7c7e62dc4d38626d4.js></script><h2id=vimeoclass="relative group">Vimeo <spanclass="absolutetop-0w-6transition-opacityopacity-0ltr:-left-
