VitePress 首页自定义实战教程：从添加广告位到重构页面布局，如何优雅地在首页添加广告位与自定义布局
在之前的一篇文章中，我们添加了GoogleAdSense谷歌广告。这一篇文章，主要是我在 一个机场网站 中，如何通过自定义布局，添加除了谷歌广告的其他推广广告的。 在使用 VitePress 搭建文档站或博客时，默认的 index.md 虽然简洁，但有时无法满足个性化的需求。比如，我想在“特性（Features）”板块下方加一个醒目的
广告横幅 ，或者添加一栏“
使用指南 ”和“
常见问题 ”。 如果直接在 Markdown 里写大量的 HTML，代码会变得难以维护。经过一番折腾和优化，我摸索出了一套基于
Vue 组件化 的解决方案。 本文将记录我从“硬编码”到“组件化”，最后实现“一键切换广告形式”的全过程。 第一阶段：初尝试——创建广告组件 最开始，我的需求很简单：在首页加一个类似“机场”风格的广告位（左侧 Logo，右侧卖点）。为了不污染 Markdown 文件，我决定创建一个 Vue 组件。（ps:教程与实际不一致，我希望大家不要完全照搬教程，要有所不同，有利于谷歌SEO。） 1. 创建组件文件 在 .vitepress/theme/components/ 目录下新建 MyAdBanner.vue 。
代码结构如下（使用 Vue 3 Setup 语法）： 代码段 <template>
<a href="https://example.com" class="custom-ad-banner" target="_blank">
<div class="ad-image-section">
<img src="/images/logo.png" alt="Logo">
</div>
<div class="ad-content-section">
<h3>稳定、高速直连</h3>
<ul>
<li>✅ 解锁流媒体</li>
<li>✅ 多线接入</li>
</ul>
<s…
