Shortcodes
columns shortcode history
version shortcode date posts note 1 twocolumn 28-dec-2024 7 (−) right arg must provided 2 column-left 06-jan-2025 4 (−) two different shortcodes column-right 3 columns 17-feb-2024 6 (+) n-columns support data: first traceable post using it; posts: number of original posts using it; shortcode: original name, deleted after new version available.outline
capturediv shortcode
capturediv code p3
Code (3/3) <script> function captureDiv() { let btn = document.getElementById("btn"); let grandParent = btn.parentElement?.parentElement; // console.log(grandParent); html2canvas(grandParent, { scale: 3 }).then(canvas => { let link = document.createElement("a"); link.href = canvas.toDataURL("image/png"); link.download = "{{- .Page.File.BaseFileName -}}"; link.click(); }); } </script>capturediv code p2
Code (2/3) <div id="btn" onclick="captureDiv()" style="cursor: pointer; border: 0px red solid; background: #4f81bd; color: white; position: absolute; top: calc(0.554 * var(--height)); right: calc(0.03 * var(--height)); font-size: calc(0.032 * var(--height)); margin: calc(0.004 * var(--height)); padding-top: calc(0.0 * var(--height)); padding-bottom: calc(0.005 * var(--height)); padding-left: calc(0.015 * var(--height)); padding-right: calc(0.015 * var(--height)); border-radius: calc(0.00 * var(--height));">png</div>capturediv code p1
Usage in a post {{< capturediv >}} Save code as capturediv.html in layouts\shortcodes folder. Code (1/3) <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>capturediv demo
shortcode center update
Shortcode <div style="display: flex; justify-content: center;">{{ .Inner | markdownify }}</div> Usage {{< center >}}Some text to center{{< /center >}}scatter chart.js
Scatter chart support on a Hugo post using Chart.js library.
template customization 3
Third theme customization of a new Hugo site following initial setting.