vuepress-theme-plume/assets/qrcode-DnrvZpul.js

import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/markdown/qrcode/","title":"二维码 | 指南","lang":"zh-CN","frontmatter":{"title":"二维码","icon":"uiw:qrcode","createTime":"2025/12/05 10:37:43","permalink":"/guide/markdown/qrcode/","badge":"新","description":"概述 在 Markdown 中，通过简单的语法，可以在文档中插入由文本转换成的二维码图片，以便在需要时进行扫描。 文本可以是： 远程可访问的链接地址 vuepress 站点内的 .md 文件路径 （绝对路径 或相对路径 均支持） 任意普通文本 （避免过长的文本） 配置 该功能默认不启用，你需要在 theme 配置中启用。 .vuepress/confi...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"二维码\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-12-05T09:18:13.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/markdown/qrcode/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"二维码"}],["meta",{"property":"og:description","content":"概述 在 Markdown 中，通过简单的语法，可以在文档中插入由文本转换成的二维码图片，以便在需要时进行扫描。 文本可以是： 远程可访问的链接地址 vuepress 站点内的 .md 文件路径 （绝对路径 或相对路径 均支持） 任意普通文本 （避免过长的文本） 配置 该功能默认不启用，你需要在 theme 配置中启用。 .vuepress/confi..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-12-05T09:18:13.000Z"}],["meta",{"property":"article:modified_time","content":"2025-12-05T09:18:13.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/markdown/qrcode/"}]]},"readingTime":{"minutes":3.42,"words":1025},"git":{"createdTime":1764926293000,"updatedTime":1764926293000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"157281aec83f9029b7319825a49403ca115729ca","time":1764926293000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add  qrcode syntax plugin for markdown (#777)"}]},"autoDesc":true,"filePathRelative":"guide/markdown/qrcode.md","headers":[],"bulletin":false}`),u={name:`qrcode.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`},m={class:`vp-field-group`},h={class:`vp-field-group`},g={style:{margin:`16px 0`,display:`flex`,gap:`16px`}};function _(c,l,u,_,v,y){let b=t(`VPQRCode`),x=t(`VPIcon`),S=t(`VPField`);return n(),i(`div`,null,[r(b,{text:`https://github.com/pengzhanbo/vuepress-theme-plume`,mode:`img`}),l[14]||=o(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>在 Markdown 中，通过简单的语法，可以在文档中插入由文本转换成的二维码图片，以便在需要时进行扫描。</p><p>文本可以是：</p><ul><li>远程可访问的链接地址</li><li>vuepress 站点内的 <code>.md</code> 文件路径 <em>（绝对路径 或相对路径 均支持）</em></li><li>任意普通文本 （避免过长的文本）</li></ul><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2><p>该功能默认不启用，你需要在 <code>theme</code> 配置中启用。</p>`,6),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(x,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[0]||=a(`.vuepress/config.ts`,-1)])]),l[1]||=o(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    }</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[15]||=o(`<h2 id="语法" tabindex="-1"><a class="header-anchor" href="#语法"><span>语法</span></a></h2><h3 id="单行语法" tabindex="-1"><a class="header-anchor" href="#单行语法"><span>单行语法</span></a></h3><p>单行语法适用于 <code>text</code> 文本较短时，比如 链接 等。</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 基础语法--&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 添加属性 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode card svg title=&quot;xxx&quot; align=&quot;center&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><h3 id="容器语法" tabindex="-1"><a class="header-anchor" href="#容器语法"><span>容器语法</span></a></h3><p>容器语法适用于 <code>text</code> 文本较长时，比如 段落，多行文本 等。</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: qrcode card svg title=&quot;xxx&quot; align=&quot;center&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">text</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><div class="hint-container warning"><p class="hint-container-title">过长的文本生成的二维码可能会被截断，且可能无法扫描</p></div><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性"><span>属性</span></a></h2>`,9),s(`div`,m,[r(S,{name:`card`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[2]||=[s(`p`,null,`是否启用卡片样式。`,-1)]]),_:1}),r(S,{name:`svg`,optional:``,type:`boolean`,"default-value":`false`},{default:e(()=>[...l[3]||=[s(`p`,null,`是否将二维码渲染为 SVG 格式。默认渲染为 PNG 格式。`,-1)]]),_:1}),r(S,{name:`title`,optional:``,type:`string`},{default:e(()=>[...l[4]||=[s(`p`,null,`二维码标题。`,-1)]]),_:1}),r(S,{name:`align`,optional:``,type:`'left' | 'center' | 'right'`,"default-value":`left`},{default:e(()=>[...l[5]||=[s(`p`,null,`二维码对齐方式。`,-1)]]),_:1}),r(S,{name:`width`,optional:``,type:`number`,"default-value":`300`},{default:e(()=>[...l[6]||=[s(`p`,null,`二维码宽度。`,-1)]]),_:1})]),l[16]||=s(`p`,null,`以下属性配置将直接影响二维码的最终渲染效果，通常使用默认值即可，无需配置。`,-1),s(`div`,h,[r(S,{name:`light`,optional:``,type:`string`,"default-value":`#ffffffff`},{default:e(()=>[...l[7]||=[s(`p`,null,`二维码亮色部分颜色，即背景色`,-1)]]),_:1}),r(S,{name:`dark`,optional:``,type:`string`,"default-value":`#000000ff`},{default:e(()=>[...l[8]||=[s(`p`,null,`二维码暗色部分颜色，即二维码颜色`,-1)]]),_:1}),r(S,{name:`margin`,optional:``,type:`number`,"default-value":`2`},{default:e(()=>[...l[9]||=[s(`p`,null,`二维码边距`,-1)]]),_:1}),r(S,{name:`level`,optional:``,type:`'L' | 'M' | 'Q' | 'H'`,"default-value":`M`},{default:e(()=>[...l[10]||=[s(`p`,null,[s(`strong`,null,`纠错等级`)],-1),s(`p`,null,`纠错能力使得即使二维码符号被污染或损坏，也能成功扫描。根据操作环境，有四个级别可供选择。`,-1),s(`p`,null,`更高级别提供更好的抗错能力，但会降低符号的容量。`,-1),s(`p`,null,`如果二维码符号可能被损坏的几率较低，则可以安全使用低纠错级别，如低或中。`,-1)]]),_:1}),r(S,{name:`version`,optional:``,type:`number`},{default:e(()=>[...l[11]||=[s(`p`,null,[s(`strong`,null,`二维码版本`)],-1),s(`p`,null,[a(`若未指定，将自动计算更合适的值。取值范围 `),s(`code`,null,`1-40`),a(`。`)],-1)]]),_:1}),r(S,{name:`scale`,optional:``,type:`number`,"default-value":`4`},{default:e(()=>[...l[12]||=[s(`p`,null,`缩放因子。值为 1 表示每个模块（黑点）对应 1 像素。`,-1)]]),_:1}),r(S,{name:`mask`,optional:``,type:`1 | 2 | 3 | 4 | 5 | 6 | 7`},{default:e(()=>[...l[13]||=[s(`p`,null,`用于遮蔽符号的掩码模式。`,-1),s(`p`,null,`若未指定，将自动计算更合适的值。`,-1)]]),_:1})]),l[17]||=o(`<h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><h3 id="可访问的远程链接" tabindex="-1"><a class="header-anchor" href="#可访问的远程链接"><span>可访问的远程链接</span></a></h3><p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">https://github.com/pengzhanbo/vuepress-theme-plume</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p><strong>输出：</strong></p>`,5),r(b,{text:`https://github.com/pengzhanbo/vuepress-theme-plume`,mode:`img`}),l[18]||=o(`<h3 id="站内的页面路径" tabindex="-1"><a class="header-anchor" href="#站内的页面路径"><span>站内的页面路径</span></a></h3><p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">.</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> &lt;!-- \`.\` 表示当前页面地址 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./steps.md</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> &lt;!-- 相对路径 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/guide/markdown/qrcode.md</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> &lt;!-- 绝对路径 --&gt;</span></span></code></pre></div><p><strong>输出：</strong></p>`,4),s(`div`,g,[r(b,{text:`.`,mode:`img`}),r(b,{text:`./steps.md`,mode:`img`}),r(b,{text:`/guide/markdown/qrcode.md`,mode:`img`})]),l[19]||=o(`<h3 id="任意文本" tabindex="-1"><a class="header-anchor" href="#任意文本"><span>任意文本</span></a></h3><p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">(vuepress-theme-plume 是一款开源的 VuePress 主题)</span></span></code></pre></div><p><strong>输出：</strong></p>`,4),r(b,{text:`vuepress-theme-plume 是一款开源的 VuePress 主题`,mode:`img`}),l[20]||=o(`<p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: qrcode title=&quot;宣州谢朓楼饯别校书叔云 &lt;唐·李白&gt;&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">弃我去者，昨日之日不可留。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">乱我心者，今日之日多烦忧。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">长风万里送秋雁，对此可以酣高楼。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">蓬莱文章建安骨，中间小谢又清发。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">俱怀逸兴壮思飞，欲上青天览明月。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">抽刀断水水更流，举杯消愁愁更愁。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">人生在世不称意，明朝散发弄扁舟。</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p><strong>输出：</strong></p>`,3),r(b,{text:`弃我去者，昨日之日不可留。
乱我心者，今日之日多烦忧。
长风万里送秋雁，对此可以酣高楼。
蓬莱文章建安骨，中间小谢又清发。
俱怀逸兴壮思飞，欲上青天览明月。
抽刀断水水更流，举杯消愁愁更愁。
人生在世不称意，明朝散发弄扁舟。`,title:`宣州谢朓楼饯别校书叔云 <唐·李白>`,mode:`img`}),l[21]||=o(`<h3 id="带信息的二维码卡片" tabindex="-1"><a class="header-anchor" href="#带信息的二维码卡片"><span>带信息的二维码卡片</span></a></h3><p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">qrcode card title=&quot;vuepress-theme-plume&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">https://github.com/pengzhanbo/vuepress-theme-plume</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>等同于：</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: qrcode card title=&quot;vuepress-theme-plume&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">https://github.com/pengzhanbo/vuepress-theme-plume</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p><strong>输出：</strong></p>`,6),r(b,{text:`https://github.com/pengzhanbo/vuepress-theme-plume`,title:`vuepress-theme-plume`,mode:`card`})])}var v=c(u,[[`render`,_]]);export{l as _pageData,v as default};