如何调整Vitepress主页Hero区域文本显示空间避免拥挤？

要让Vitepress主页的hero区域文本不拥挤、拥有更大的显示空间，你可以通过自定义CSS覆盖默认主题的宽度限制，具体操作如下：

1. 创建自定义样式文件 #

在项目的.vitepress/theme/目录下新建custom.css文件（没有theme目录的话先创建一个）。

2. 添加样式代码 #

在custom.css里写入以下样式，调整hero区域的最大宽度：

/* 调整hero整体容器的最大宽度，数值按需修改 */
.VPHero .container {
  max-width: 1200px;
}

/* 单独取消文本区域的宽度限制，让文本更舒展 */
.VPHeroContent .text {
  max-width: none;
}

你可以根据自己的需求修改max-width的数值，比如改成100%让文本撑满容器，或者设置一个合适的固定值。

3. 引入自定义样式 #

打开.vitepress/config.js（或config.ts），在themeConfig的head数组里添加引入自定义CSS的配置：

export default {
  themeConfig: {
    head: [
      ['link', { rel: 'stylesheet', href: '/custom.css' }]
    ]
  }
}

另外，你主页里的text内容比较长，也可以手动拆分换行，让排版更舒服，比如在index.md里把长文本拆成两行：

---
layout: home
hero:
  name: "TP2"
  text: "Analyse du code du TP2 de Breno Mazzali Medeiros Tomazelli\net de Philippe Bouchard"
  tagline: Analyses de code
  actions:
    - theme: brand
      text: Review du code de Breno Mazzali Medeiros Tomazelli
      link: /ReviewCodeBrenoMazzaliMedeirosTomazelli
    - theme: brand
      text: Review du code de Philippe Bouchard
      link: /ReviewCodePhilippeBouchard
---

结合CSS调整和文本排版优化，就能有效解决主页文本拥挤的问题。

内容的提问来源于stack exchange，提问作者Phbou1