https://wxn.netlify.app/tags/shortcodes/ Recent content in shortcodes on Wxn's Blog Hugo -- gohugo.io en Example Person Sun, 10 Mar 2019 00:00:00 +0000 https://wxn.netlify.app/p/rich-content/ Sun, 10 Mar 2019 00:00:00 +0000 https://wxn.netlify.app/p/rich-content/ <p>Hugo ships with several <a class="link" href="https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes" target="_blank" rel="noopener" >Built-in Shortcodes</a> for rich content, along with a <a class="link" href="https://gohugo.io/about/hugo-and-gdpr/" target="_blank" rel="noopener" >Privacy Config</a> and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.</p> <hr> <h2 id="youtube-privacy-enhanced-shortcode">YouTube Privacy Enhanced Shortcode</h2> <div class="video-wrapper"> <iframe loading="lazy" src="https://www.youtube.com/embed/ZJthWmvUzzc" allowfullscreen title="YouTube Video" > </iframe> </div> <br> <hr> <h2 id="twitter-simple-shortcode">Twitter Simple Shortcode</h2> <style type="text/css"> .twitter-tweet { font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; border-left: 4px solid #2b7bb9; padding-left: 1.5em; color: #555; } .twitter-tweet a { color: #2b7bb9; text-decoration: none; } blockquote.twitter-tweet a:hover, blockquote.twitter-tweet a:focus { text-decoration: underline; } </style> <blockquote class="twitter-tweet"><p lang="en" dir="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 <a href="https://t.co/gcv7SrhvJb">pic.twitter.com/gcv7SrhvJb</a></p>&mdash; Design Reviewed | Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote> <br> <hr> <h2 id="vimeo-simple-shortcode">Vimeo Simple Shortcode</h2> <style> .__h_video { position: relative; padding-bottom: 56.23%; height: 0; overflow: hidden; width: 100%; background: #000; } .__h_video img { width: 100%; height: auto; color: #000; } .__h_video .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; cursor: pointer; } </style> <div class="s_video_simple __h_video"> <a href="https://vimeo.com/4.8912912e&#43;07" rel="noopener" target="_blank"> <img src="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640" srcset="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 1x, https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 2x" alt="Sing Jan Swing - Kinetic Type"> <div class="play"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"></circle><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2 0-4.4l-16.6-9z" fill="#fff"></path></svg></div></a></div> <h2 id="bilibilibi-shortcode">bilibilibi Shortcode</h2> <div class="video-wrapper"> <iframe src="https://player.bilibili.com/player.html?as_wide=1&amp;high_quality=1&amp;page=1&aid=498363026" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true" > </iframe> </div> <h2 id="gist-shortcode">Gist Shortcode</h2> <script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script> <h2 id="gitlab-snippets-shortcode">Gitlab Snippets Shortcode</h2> <script type="application/javascript" src="https://gitlab.com/-/snippets/2349278.js" ></script> <h2 id="quote-shortcode">Quote Shortcode</h2> <p>Stack adds a <code>quote</code> shortcode. For example:</p> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><span class="cite"><span>― </span><span>A famous person, </span><a href="https://en.wikipedia.org/wiki/Book"><cite>The book they wrote</cite></a></span></blockquote> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><span class="cite"><span>― </span><a href="https://en.wikipedia.org/wiki/Book"><cite>Anonymous book</cite></a></span></blockquote> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><span class="cite"><span>― </span><cite>Some book</cite></span></blockquote> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><span class="cite"><span>― </span><span>Somebody</span><cite></cite></span></blockquote>