返回

VitePress 首页文本太挤？教你轻松调整布局！

vue.js

如何在 VitePress 中调整首页文本布局？

你是否正在使用 VitePress 构建文档网站，却发现首页的文本过于拥挤，无法完美展示？本文将为你提供解决方案，帮助你调整首页文本布局，打造更美观的网站首页。

深入问题

VitePress 默认主题的首页布局虽然简洁大方，但在处理文本内容较多的情况时，可能会显得局促。观察你的 index.md 文件，我们会发现首页文本内容定义在 hero 部分：

hero:
  name: "TP2"
  text: "Analyse du code du TP2 de Breno Mazzali Medeiros Tomazelli et de Philippe Bouchard"
  tagline: Analyses de code
  # ...

其中，text 属性定义了主要的文本内容。由于 VitePress 默认主题对 hero 部分的样式设置，导致文本区域宽度受限，影响了显示效果。

解决方案解析

为了解决这个问题，我们可以利用 CSS 样式来自定义 hero 部分的布局。

创建自定义样式文件

在你的 VitePress 项目的 .vitepress 目录下，创建一个名为 theme 的文件夹（如果不存在）。 然后，在 theme 文件夹内创建一个名为 custom.css 的文件。

添加自定义 CSS 代码

在 custom.css 文件中，添加以下 CSS 代码：

.hero {
  /* 调整文本区域宽度 */
  max-width: 80%; 
  margin: 0 auto;
}

.hero .text {
  /* 调整文本行高 */
  line-height: 1.6; 
  /* 调整字体大小 */
  font-size: 1.2rem; 
}

这段代码的作用是：

  • 将 .hero 容器的最大宽度设置为 80%，并使其居中显示。
  • 调整 .hero .text 的行高为 1.6，以及字体大小为 1.2rem，以增加文本的可读性。

引入自定义样式文件

在 .vitepress/config.js 文件中，找到 themeConfig 选项，并添加以下代码：

themeConfig: {
  // ...
  additionalStyles: ['/theme/custom.css'],
},

这段代码会将 custom.css 文件引入到你的 VitePress 项目中，使其生效。

重新启动 VitePress 开发服务器

保存所有更改，并重新启动 VitePress 开发服务器。现在，你的首页文本区域将会有更大的显示空间，文本内容也不再拥挤。

常见问题解答

1. 为什么我的自定义 CSS 代码没有生效？

  • 确保你已经正确地创建了 custom.css 文件，并将它放在了 .vitepress/theme 目录下。
  • 确保你在 .vitepress/config.js 文件中正确地引入了 custom.css 文件。
  • 尝试清除浏览器缓存或使用隐身模式访问你的网站。

2. 我想进一步调整首页布局，例如修改背景颜色或图片，应该怎么做？

3. 我想在首页添加其他元素，例如按钮或图片，应该怎么做？

  • 你可以在 index.md 文件的 hero 部分添加 HTML 元素，例如：
hero:
  # ...
  actions:
    - text: 开始使用
      link: /guide/getting-started
      theme: primary
  • 你也可以使用 Vue 组件来创建更复杂的首页元素。

4. 我想让首页的文本内容更加醒目，应该怎么做？

  • 你可以尝试使用不同的字体、颜色、字号等来突出显示重要的文本内容。
  • 你也可以使用 CSS 动画效果来吸引用户的注意力。

5. 我还有其他关于 VitePress 首页布局的问题，应该去哪里寻求帮助？