https://foxihd.github.io/hugo-foxx/id/tags/sampul/Artikel Terbaru dalam Sampul pada contohHugo 0.161.1id-IDTue, 19 May 2026 16:10:01 +0000https://foxihd.github.io/hugo-foxx/id/mengatur-sampul-dan-audio/Sat, 22 Feb 2025 00:00:00 +0000Author Namehttps://foxihd.github.io/hugo-foxx/id/mengatur-sampul-dan-audio/Panduan menambahkan gambar sampul dan artikel audio<h2 id="menambahkan-gambar-sampul">Menambahkan Gambar Sampul</h2> <h3 id="menambahkan-gambar-ke-parameter">Menambahkan Gambar ke Parameter</h3> <p>Untuk menambahkan gambar sampul ke artikel Anda, ada dua pilihan:</p> <ol> <li>Metode <em>Front Matter</em></li> </ol> <p>Anda dapat menggunakan parameter <code>cover</code> atau <code>images</code> untuk sumber gambar. Dan parameter <code>alt</code>, <code>coverAlt</code> atau <code>imagesAlt</code> untuk teks <em>alt</em>.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Artikel Saya&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">images</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;images/my-cover.jpg&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">alt</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Deskripsi gambar&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><ol start="2"> <li>Metode <em>Page Bundle</em></li> </ol> <ul> <li>Buat folder untuk artikel Anda</li> <li>Beri nama gambar Anda <code>cover.*</code></li> <li>Letakkan di folder yang sama dengan konten Anda</li> <li>Atur teks <em>alt</em> di <em>frontmatter</em> artikel</li> </ul> <h3 id="menambahkan-gambar-ke-badan-artikel">Menambahkan Gambar ke Badan Artikel</h3> <p>Anda dapat menambahkan gambar dalam berbagai layout, dimana saja di badan artikel dengan <em>shortcode</em> <code>{{&lt; figure &gt;}}</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">{{</span><span class="err">&lt;</span> <span class="nx">figure</span> <span class="nx">src</span><span class="p">=</span><span class="s2">&#34;cover&#34;</span> <span class="nx">caption</span><span class="p">=</span><span class="s2">&#34;alt&#34;</span> <span class="err">&gt;</span><span class="p">}}</span> </span></span></code></pre></div><p>Ini adalah kebebasan untuk menata artikel!</p> <figure > <input id="fig-533a50582ec47801c989832cc279c854-0" class="marginpar-ctrl" type="checkbox" aria-controls="the-fig-533a50582ec47801c989832cc279c854-0" hidden> <label for="fig-533a50582ec47801c989832cc279c854-0"></label> <span id="the-fig-533a50582ec47801c989832cc279c854-0" class="marginpar abs"> Kucing bernama cooper dengan gabus yang menempel pada bulu karena elektrostatis. </span> <img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_and_styrofoam_%E2%80%93_electrostatic_charge_%28235112299%29.jpg" alt="Kucing bernama cooper dengan gabus yang menempel pada bulu karena elektrostatis." title="Kucing bernama cooper dengan gabus yang menempel pada bulu karena elektrostatis."aria-describedby="fig-533a50582ec47801c989832cc279c854-0" loading="lazy" > </figure> <h2 id="menambahkan-artikel-audio">Menambahkan Artikel Audio</h2> <ol> <li>Metode <em>Front Matter</em></li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Artikel Saya&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">audio</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;audio/my-audio.ogg&#34;</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><ol start="2"> <li>Metode <em>Page Bundle</em></li> </ol> <p>Anda dapat mengunggah beberapa format audio dengan metode ini:</p> <ul> <li>Buat folder untuk artikel Anda</li> <li>Beri nama audio Anda <code>audio.*</code></li> <li>Letakkan di folder yang sama dengan konten Anda</li> </ul> <h2 id="contoh-metode-page-bundle">Contoh Metode <em>Page Bundle</em></h2> <p>Berikut bagaimana struktur folder pada metode <em>page bundle</em>:</p> <pre><code>content/ └── posts/ └── my-article/ ├── index.md ├── cover.jpg ├── audio.mp3 └── audio.ogg </code></pre>