@wilboerht/blog-template
Version:
A modern bilingual blog template built with VitePress
2 lines (1 loc) • 5.53 kB
JavaScript
import{_ as e,c as a,a as s,o as t}from"./chunks/framework.D3nGTGqI.js";const c=JSON.parse('{"title":"Using Images and Media in VitePress","description":"Learn how to use images and other media files in your VitePress blog","frontmatter":{"title":"Using Images and Media in VitePress","date":"2024-01-20T00:00:00.000Z","tags":["Tutorial","Multimedia"],"description":"Learn how to use images and other media files in your VitePress blog"},"headers":[],"relativePath":"posts/using-images.md","filePath":"posts/using-images.md"}'),n={name:"posts/using-images.md"};function o(d,i,l,r,h,g){return t(),a("div",null,i[0]||(i[0]=[s('<h1 id="using-images-and-media-in-vitepress" tabindex="-1">Using Images and Media in VitePress <a class="header-anchor" href="#using-images-and-media-in-vitepress" aria-label="Permalink to "Using Images and Media in VitePress""></a></h1><h2 id="image-usage-guide" tabindex="-1">Image Usage Guide <a class="header-anchor" href="#image-usage-guide" aria-label="Permalink to "Image Usage Guide""></a></h2><h3 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to "Basic Usage""></a></h3><p>Basic syntax for inserting images in Markdown:</p><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">![</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Image description</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/assets/images/example.jpg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="image-storage-location" tabindex="-1">Image Storage Location <a class="header-anchor" href="#image-storage-location" aria-label="Permalink to "Image Storage Location""></a></h3><p>All images should be stored in the <code>docs/public/assets/images/</code> directory.</p><h2 id="video-usage-guide" tabindex="-1">Video Usage Guide <a class="header-anchor" href="#video-usage-guide" aria-label="Permalink to "Video Usage Guide""></a></h2><h3 id="embedding-videos" tabindex="-1">Embedding Videos <a class="header-anchor" href="#embedding-videos" aria-label="Permalink to "Embedding Videos""></a></h3><p>Use HTML video tag to embed videos:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">video</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/assets/videos/demo.mp4"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">video</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="pdf-files" tabindex="-1">PDF Files <a class="header-anchor" href="#pdf-files" aria-label="Permalink to "PDF Files""></a></h2><h3 id="linking-to-pdfs" tabindex="-1">Linking to PDFs <a class="header-anchor" href="#linking-to-pdfs" aria-label="Permalink to "Linking to PDFs""></a></h3><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Download Document</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/assets/pdf/document.pdf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="file-organization" tabindex="-1">File Organization <a class="header-anchor" href="#file-organization" aria-label="Permalink to "File Organization""></a></h2><ul><li><code>/assets/images/</code> - Store image files</li><li><code>/assets/videos/</code> - Store video files</li><li><code>/assets/pdf/</code> - Store PDF documents</li></ul><h2 id="best-practices" tabindex="-1">Best Practices <a class="header-anchor" href="#best-practices" aria-label="Permalink to "Best Practices""></a></h2><ol><li>Use meaningful filenames</li><li>Compress images for optimal loading</li><li>Provide clear alt text descriptions</li><li>Consider multiple formats for videos</li></ol>',18)]))}const k=e(n,[["render",o]]);export{c as __pageData,k as default};