Examples on HB Frameworkhttps://hbstack.dev/examples/Recent content in Examples on HB FrameworkHugoenCopyright © 2022-2026 HB Framework. All Rights Reserved.Header Banner Animationshttps://hbstack.dev/examples/header-banner-aos/Sat, 02 Sep 2023 18:57:06 +0800https://hbstack.dev/examples/header-banner-aos/<h2 id="configurations">Configurations</h2> <p>You&rsquo;ll need to turn on the <code>markup.goldmark.parser.attribute.block</code>, to attach attributes on title and description.</p> <blockquote class="blockquote border-start ps-3 py-1 border-primary border-4"> <p>Similarly, you can attach the AOS animations on any content.</p> </blockquote> <div class="config-toggle mb-3"> <ul class="nav nav-tabs mb-1" role="tablist"><li class="nav-item mb-0" role="presentation"> <button class="nav-link active" id="code-toggle-hugo-471386529-toml-tab" data-bs-toggle="tab" data-bs-target="#code-toggle-hugo-471386529-toml" type="button" role="tab" aria-controls="code-toggle-hugo-471386529-toml" aria-selected="true"> TOML </button> </li><li class="nav-item mb-0" role="presentation"> <button class="nav-link" id="code-toggle-hugo-471386529-yaml-tab" data-bs-toggle="tab" data-bs-target="#code-toggle-hugo-471386529-yaml" type="button" role="tab" aria-controls="code-toggle-hugo-471386529-yaml" aria-selected="false"> YAML </button> </li><li class="nav-item mb-0" role="presentation"> <button class="nav-link" id="code-toggle-hugo-471386529-json-tab" data-bs-toggle="tab" data-bs-target="#code-toggle-hugo-471386529-json" type="button" role="tab" aria-controls="code-toggle-hugo-471386529-json" aria-selected="false"> JSON </button> </li></ul> <div class="tab-content"> <div class="tab-pane fade show active" id="code-toggle-hugo-471386529-toml" role="tabpanel" aria-labelledby="code-toggle-hugo-471386529-toml-tab"><p class="user-select-all mb-1 text-secondary">hugo.toml</p><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">]</span> </span></span><span class="line"><span class="ln">2</span><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">]</span> </span></span><span class="line"><span class="ln">3</span><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">parser</span><span class="p">]</span> </span></span><span class="line"><span class="ln">4</span><span class="cl"> <span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">parser</span><span class="p">.</span><span class="nx">attribute</span><span class="p">]</span> </span></span><span class="line"><span class="ln">5</span><span class="cl"> <span class="nx">block</span> <span class="p">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="ln">6</span><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="kc">true</span> </span></span></code></pre></div></div> <div class="tab-pane fade" id="code-toggle-hugo-471386529-yaml" role="tabpanel" aria-labelledby="code-toggle-hugo-471386529-yaml-tab"><p class="user-select-all mb-1 text-secondary">hugo.yaml</p>HLS Video Bannerhttps://hbstack.dev/examples/header-banner-hls-video/Fri, 01 Sep 2023 10:57:18 +0800https://hbstack.dev/examples/header-banner-hls-video/<h2 id="requirements">Requirements</h2> <table> <thead> <tr> <th>Module</th> </tr> </thead> <tbody> <tr> <td><code>github.com/hbstack/header/modules/banner</code></td> </tr> </tbody> </table> <h2 id="source-code">Source Code</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="ln"> 1</span><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 2</span><span class="cl"><span class="nt">header</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 3</span><span class="cl"><span class="w"> </span><span class="nt">banner</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 4</span><span class="cl"><span class="w"> </span><span class="nt">alignment</span><span class="p">:</span><span class="w"> </span><span class="l">end</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 5</span><span class="cl"><span class="w"> </span><span class="nt">description</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 6</span><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 7</span><span class="cl"><span class="w"> </span><span class="nt">video</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 8</span><span class="cl"><span class="w"> </span><span class="nt">poster</span><span class="p">:</span><span class="w"> </span><span class="l">/images/banners/black.jpg</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 9</span><span class="cl"><span class="w"> </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8</span><span class="w"> </span></span></span><span class="line"><span class="ln">10</span><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">application/x-mpegURL</span><span class="w"> </span></span></span><span class="line"><span class="ln">11</span><span class="cl"><span class="nt">video_js</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="ln">12</span><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div>MPEG DASH Video Bannerhttps://hbstack.dev/examples/header-banner-mpeg-dash-video/Fri, 01 Sep 2023 10:57:18 +0800https://hbstack.dev/examples/header-banner-mpeg-dash-video/<h2 id="requirements">Requirements</h2> <table> <thead> <tr> <th>Module</th> </tr> </thead> <tbody> <tr> <td><code>github.com/hbstack/header/modules/banner</code></td> </tr> </tbody> </table> <h2 id="source-code">Source Code</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="ln"> 1</span><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 2</span><span class="cl"><span class="nt">header</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 3</span><span class="cl"><span class="w"> </span><span class="nt">banner</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 4</span><span class="cl"><span class="w"> </span><span class="nt">alignment</span><span class="p">:</span><span class="w"> </span><span class="l">end</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 5</span><span class="cl"><span class="w"> </span><span class="nt">description</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 6</span><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 7</span><span class="cl"><span class="w"> </span><span class="nt">video</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 8</span><span class="cl"><span class="w"> </span><span class="nt">poster</span><span class="p">:</span><span class="w"> </span><span class="l">https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 9</span><span class="cl"><span class="w"> </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.mpd</span><span class="w"> </span></span></span><span class="line"><span class="ln">10</span><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">application/dash+xml</span><span class="w"> </span></span></span><span class="line"><span class="ln">11</span><span class="cl"><span class="nt">video_js</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="ln">12</span><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div>Normal Video Bannerhttps://hbstack.dev/examples/header-banner-video/Fri, 01 Sep 2023 10:57:18 +0800https://hbstack.dev/examples/header-banner-video/<h2 id="requirements">Requirements</h2> <table> <thead> <tr> <th>Module</th> </tr> </thead> <tbody> <tr> <td><code>github.com/hbstack/header/modules/banner</code></td> </tr> </tbody> </table> <h2 id="source-code">Source Code</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="ln"> 1</span><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 2</span><span class="cl"><span class="nt">header</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 3</span><span class="cl"><span class="w"> </span><span class="nt">banner</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 4</span><span class="cl"><span class="w"> </span><span class="nt">alignment</span><span class="p">:</span><span class="w"> </span><span class="l">end</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 5</span><span class="cl"><span class="w"> </span><span class="nt">description</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 6</span><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 7</span><span class="cl"><span class="w"> </span><span class="nt">video</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 8</span><span class="cl"><span class="w"> </span><span class="nt">poster</span><span class="p">:</span><span class="w"> </span><span class="l">https://images.pexels.com/videos/3343679/free-video-3343679.jpg?auto=compress&amp;cs=tinysrgb&amp;w=600</span><span class="w"> </span></span></span><span class="line"><span class="ln"> 9</span><span class="cl"><span class="w"> </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">https://videos.pexels.com/video-files/3343679/3343679-hd_1920_1080_30fps.mp4</span><span class="w"> </span></span></span><span class="line"><span class="ln">10</span><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><h2 id="credit">Credit</h2> <p>The images and videos are belong to <a href="https://heishenhua.com/" target="_blank" rel="noopener noreferrer">BLACK MYTH WUKONG</a>.</p>