vuepress如何自定义首页的样式风格

最新推荐文章于 2025-03-29 10:21:34 发布

zwf193071

最新推荐文章于 2025-03-29 10:21:34 发布

阅读量5.1k

点赞数 4

分类专栏： vuepress 文章标签： vue.js 前端 vuepress markdown

本文链接：https://blog.youkuaiyun.com/zwf193071/article/details/121821209

版权

前言

如何自定义vuepress的首页设计风格呢？比如，我希望首页下面的红框内容是可点击的：
在这里插入图片描述
请看正文步骤

正文

在docs -> .vuepress下新建theme文件夹，再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-default -> Home.vue的源码拷贝至我们的Home.vue即可，在源码里稍做修改便能满足我们的业务需求
改过后的Home.vue代码如下所示：

<template>
  <main
    class="home"
    :aria-labelledby="data.heroText !== null ? 'main-title' : null"
  >
    <header class="hero">
      <img
        v-if="data.heroImage"
        :src="$withBase(data.heroImage)"
        :alt="data.heroAlt || 'hero'"
      >

      <h1
        v-if="data.heroText !== null"
        id="main-title"
      >
        {
  { data.heroText || $title || 'Hello' }}
      </h1>

      <p
        v-if="data.tagline !== null"</