https://www.sakaay.com/guide/Recent content in 指南 on 当以读书通世事Hugozh-CNFri, 26 Dec 2025 21:30:10 +0800https://www.sakaay.com/guide/google-adsense/Fri, 26 Dec 2025 21:30:10 +0800https://www.sakaay.com/guide/google-adsense/<h1 id="google-adsense-广告使用指南">Google AdSense 广告使用指南</h1> <p>本文档将详细介绍如何在 Markdown 文件中集成 Google AdSense 广告。</p> <h2 id="基本使用方法">基本使用方法</h2> <p>要在 Markdown 文件中添加广告单元，只需使用已经注册的 <code>GoogleAd</code> 组件即可。最简单的使用方式如下：</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">&lt;</span><span class="nt">GoogleAd</span> <span class="na">ad-slot</span><span class="o">=</span><span class="s">&#34;1234567890&#34;</span> <span class="p">/&gt;</span> </span></span></code></pre></div><h2 id="自定义广告配置">自定义广告配置</h2> <p>您可以根据需要自定义广告单元的各种参数：</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="ln">1</span><span class="cl"><span class="p">&lt;</span><span class="nt">GoogleAd</span> </span></span><span class="line"><span class="ln">2</span><span class="cl"> <span class="na">ad-slot</span><span class="o">=</span><span class="s">&#34;1234567890&#34;</span> </span></span><span class="line"><span class="ln">3</span><span class="cl"> <span class="na">ad-format</span><span class="o">=</span><span class="s">&#34;fluid&#34;</span> </span></span><span class="line"><span class="ln">4</span><span class="cl"> <span class="na">width</span><span class="o">=</span><span class="s">&#34;300&#34;</span> </span></span><span class="line"><span class="ln">5</span><span class="cl"> <span class="na">height</span><span class="o">=</span><span class="s">&#34;250&#34;</span> </span></span><span class="line"><span class="ln">6</span><span class="cl"> <span class="na">ad-client</span><span class="o">=</span><span class="s">&#34;ca-pub-您的发布者ID&#34;</span> </span></span><span class="line"><span class="ln">7</span><span class="cl"> <span class="na">debug</span><span class="o">=</span><span class="s">&#34;false&#34;</span> </span></span><span class="line"><span class="ln">8</span><span class="cl"><span class="p">/&gt;</span> </span></span></code></pre></div><h2 id="参数说明">参数说明</h2> <table> <thead> <tr> <th>参数</th> <th>类型</th> <th>默认值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>ad-slot</code></td> <td>String</td> <td>必填</td> <td>广告单元ID，在AdSense控制台中创建</td> </tr> <tr> <td><code>ad-client</code></td> <td>String</td> <td>ca-pub-2897720906666216</td> <td>发布者ID，默认为测试ID</td> </tr> <tr> <td><code>ad-format</code></td> <td>String</td> <td>fluid</td> <td>广告格式，如 'fluid', 'auto', 'rectangle', 'leaderboard' 等</td> </tr> <tr> <td><code>ad-layout-key</code></td> <td>String</td> <td>-ii+7-14-2d+99</td> <td>广告布局键，可在AdSense获取</td> </tr> <tr> <td><code>width</code></td> <td>String/Number</td> <td>undefined</td> <td>广告宽度</td> </tr> <tr> <td><code>height</code></td> <td>String/Number</td> <td>undefined</td> <td>广告高度</td> </tr> <tr> <td><code>style</code></td> <td>Object</td> <td>{}</td> <td>额外的CSS样式</td> </tr> <tr> <td><code>debug</code></td> <td>Boolean</td> <td>false</td> <td>是否启用调试模式，启用后会显示占位符</td> </tr> <tr> <td><code>display</code></td> <td>Boolean</td> <td>true</td> <td>是否显示广告</td> </tr> </tbody> </table> <h2 id="注意事项">注意事项</h2> <ol> <li> <p><strong>广告脚本自动加载</strong>：组件会自动处理 Google AdSense 脚本的加载，无需在页面其他位置手动引入。</p>https://www.sakaay.com/guide/friends-links/Wed, 22 Oct 2025 23:10:31 +0800https://www.sakaay.com/guide/friends-links/<h1 id="实现友链页面功能">实现友链页面功能</h1> <p>本教程将指导你如何在 VitePress 主题中实现一个功能丰富的友链页面，包括随机访问、申请友链、头像滚动等功能，并集成 Twikoo 评论系统。</p> <h2 id="1-准备工作">1. 准备工作</h2> <p>确保你已经完成以下步骤：</p> <ol> <li>安装 VitePress 主题并配置好基础项目。</li> <li>注册 Twikoo 服务并获取 <code>envId</code>（环境 ID）。</li> </ol> <h2 id="2-创建友链组件">2. 创建友链组件</h2> <p>在主题的组件目录中创建一个 Vue 文件（如 <code>SLink/index.vue</code>），并添加以下代码：</p>