https://pillumina.github.io/tags/demo/ Recent content in Demo on CctoctoFX https://pillumina.github.io/imgs/icon_head.png https://pillumina.github.io/imgs/icon_head.png Hugo -- 0.148.2 en Thu, 28 May 2026 12:00:00 +0800 https://pillumina.github.io/posts/demo/99-demo-features/ Thu, 28 May 2026 12:00:00 +0800 https://pillumina.github.io/posts/demo/99-demo-features/ <p>本文展示博客新支持的富文本功能：Callout 提示块、折叠内容、脚注增强和 ECharts 交互图表。</p> <h2 id="callout-提示块">Callout 提示块</h2> <p>Callout 是一种突出重要信息的视觉方式，支持四种类型：</p> <h3 id="示例">示例</h3> <ul> <li><code>tip</code> - 提示信息</li> <li><code>info</code> - 背景信息</li> <li><code>warning</code> - 注意事项</li> <li><code>danger</code> - 危险警告</li> </ul> <div class="callout callout-tip"> <div class="callout-header"><svg class="callout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg><span class="callout-title">提示</span> </div> <div class="callout-body"> 当你学习新概念时，尝试用自己的话复述一遍，这能加深理解。 </div> </div> <div class="callout callout-info"> <div class="callout-header"><svg class="callout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><span class="callout-title">背景信息</span> </div> <div class="callout-body"> Transformer 架构最早由 Google 在 2017 年的论文《Attention Is All You Need》中提出。 </div> </div> <div class="callout callout-warning"> <div class="callout-header"><svg class="callout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg><span class="callout-title">注意事项</span> </div> <div class="callout-body"> 这个配置选项在生产环境中不建议修改，可能导致服务不稳定。 </div> </div> <div class="callout callout-danger"> <div class="callout-header"><svg class="callout-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg><span class="callout-title">危险警告</span> </div> <div class="callout-body"> 执行此操作将删除所有数据，且无法恢复。请务必确认已备份重要文件。 </div> </div> <h3 id="用法">用法</h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">callout</span> <span class="err">&#34;</span><span class="na">tip</span><span class="err">&#34;</span> <span class="err">&#34;</span><span class="na">标题</span><span class="err">&#34;</span> <span class="p">&gt;</span>}} </span></span><span class="line"><span class="cl">内容 </span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">callout</span> <span class="p">&gt;</span>}} </span></span></code></pre></td></tr></table> </div> </div><p>类型可选：<code>tip</code>、<code>info</code>、<code>warning</code>、<code>danger</code></p>