@wilboerht/blog-template
Version:
A modern bilingual blog template built with VitePress
2 lines (1 loc) • 5.5 kB
JavaScript
import{_ as i,c as s,a as e,o as t}from"./chunks/framework.D3nGTGqI.js";const c=JSON.parse('{"title":"在 VitePress 中使用图片和媒体","description":"学习如何在 VitePress 博客中使用图片和其他媒体文件","frontmatter":{"title":"在 VitePress 中使用图片和媒体","date":"2024-01-20T00:00:00.000Z","tags":["教程","多媒体"],"description":"学习如何在 VitePress 博客中使用图片和其他媒体文件"},"headers":[],"relativePath":"zh/posts/using-images.md","filePath":"zh/posts/using-images.md"}'),l={name:"zh/posts/using-images.md"};function n(h,a,d,r,o,p){return t(),s("div",null,a[0]||(a[0]=[e('<h1 id="在-vitepress-中使用图片和媒体" tabindex="-1">在 VitePress 中使用图片和媒体 <a class="header-anchor" href="#在-vitepress-中使用图片和媒体" aria-label="Permalink to "在 VitePress 中使用图片和媒体""></a></h1><h2 id="图片使用指南" tabindex="-1">图片使用指南 <a class="header-anchor" href="#图片使用指南" aria-label="Permalink to "图片使用指南""></a></h2><h3 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to "基本用法""></a></h3><p>在 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;">图片描述</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="图片存放位置" tabindex="-1">图片存放位置 <a class="header-anchor" href="#图片存放位置" aria-label="Permalink to "图片存放位置""></a></h3><p>所有图片应存放在 <code>docs/public/assets/images/</code> 目录下。</p><h2 id="视频使用指南" tabindex="-1">视频使用指南 <a class="header-anchor" href="#视频使用指南" aria-label="Permalink to "视频使用指南""></a></h2><h3 id="嵌入视频" tabindex="-1">嵌入视频 <a class="header-anchor" href="#嵌入视频" aria-label="Permalink to "嵌入视频""></a></h3><p>使用 HTML video 标签嵌入视频：</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-文件" tabindex="-1">PDF 文件 <a class="header-anchor" href="#pdf-文件" aria-label="Permalink to "PDF 文件""></a></h2><h3 id="链接到-pdf" tabindex="-1">链接到 PDF <a class="header-anchor" href="#链接到-pdf" aria-label="Permalink to "链接到 PDF""></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;">下载文档</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="文件组织建议" tabindex="-1">文件组织建议 <a class="header-anchor" href="#文件组织建议" aria-label="Permalink to "文件组织建议""></a></h2><ul><li><code>/assets/images/</code> - 存放图片文件</li><li><code>/assets/videos/</code> - 存放视频文件</li><li><code>/assets/pdf/</code> - 存放 PDF 文档</li></ul><h2 id="最佳实践" tabindex="-1">最佳实践 <a class="header-anchor" href="#最佳实践" aria-label="Permalink to "最佳实践""></a></h2><ol><li>使用有意义的文件名</li><li>压缩图片以优化加载速度</li><li>提供清晰的 alt 文本描述</li><li>视频考虑提供多种格式</li></ol>',18)]))}const u=i(l,[["render",n]]);export{c as __pageData,u as default};