https://zijiand.github.io/tags/javascript/JavaScriptHugo Blox Builder (https://hugoblox.com)en-usTue, 24 Oct 2023 00:00:00 +0000https://zijiand.github.io/media/icon_hu3a0783635f2a403a6cac6e9d98fa0b09_56508_512x512_fill_lanczos_center_3.pnghttps://zijiand.github.io/tags/javascript/https://zijiand.github.io/service/js/Tue, 24 Oct 2023 00:00:00 +0000https://zijiand.github.io/service/js/<!-- [Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest. **Embed videos, podcasts, code, LaTeX math, and even test students!** On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox. ## Video Teach your course by sharing videos with your students. Choose from one of the following approaches: <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/D2vj0WcvH5c?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video" ></iframe> </div> **Youtube**: {{< youtube w7Ft2ymGmfc >}} **Bilibili**: {{< bilibili id="BV1WV4y1r7DF" >}} **Video file** Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode: {{< video src="my_video.mp4" controls="yes" >}} ## Podcast You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode: {{< audio src="ambient-piano.mp3" >}} Try it out: <audio controls > <source src="https://zijiand.github.io/service/js/ambient-piano.mp3" type="audio/mpeg"> </audio> ## Test students Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode: ```markdown {{< spoiler text="👉 Click to view the solution" >}} You found me! {{< /spoiler >}} ``` renders as <details class="spoiler " id="spoiler-2"> <summary class="cursor-pointer">👉 Click to view the solution</summary> <div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"> You found me 🎉 </div> </details> ## Math Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file. To render _inline_ or _block_ math, wrap your LaTeX math with `{{< math >}}$...${{< /math >}}` or `{{< math >}}$$...$${{< /math >}}`, respectively. <div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900"> <span class="pr-3 pt-1 text-primary-600 dark:text-primary-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/></svg> </span> <span class="dark:text-neutral-300">We wrap the LaTeX math in the Hugo Blox <em>math</em> shortcode to prevent Hugo rendering our math as Markdown.</span> </div> Example **math block**: ```latex {{< math >}} $$ \gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2} $$ {{< /math >}} ``` renders as $$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$ Example **inline math** `{{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}` renders as $\nabla F(\mathbf{x}_{n})$ . Example **multi-line math** using the math linebreak (`\\`): ```latex {{< math >}} $$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases}$$ {{< /math >}} ``` renders as $$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$ ## Code Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file. ```python import pandas as pd data = pd.read_csv("data.csv") data.head() ``` renders as ```python import pandas as pd data = pd.read_csv("data.csv") data.head() ``` ## Inline Images ```go {{< icon name="python" >}} Python ``` renders as <span class="inline-block pr-1"> <svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor"><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/></svg> </span> Python ## Did you find this page helpful? Consider sharing it 🙌 -->