【3】VitePress搭建个人博客-主页美化

最新推荐文章于 2024-04-04 09:42:23 发布

image.png

最新推荐文章于 2024-04-04 09:42:23 发布

阅读量974

点赞数 28

分类专栏： VitePress搭建个人博客文章标签： vue 前端

本文链接：https://blog.csdn.net/cwz1028/article/details/135576916

版权

VitePress搭建个人博客专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在VitePress中设置主页，包括使用`layout:home`，配置`docs/index.md`文件，以及添加主页内容如英雄图、标语、功能图标等内容。同时提到src图片路径和使用Vue组件定制化设计。

摘要由CSDN通过智能技术生成

主页

vitepress的布局可以分为4种，分别为：doc、page、home和默认空白页面，这里介绍主页

在这里插入图片描述

首页就是找到docs/index.md这个markdown文件，这里以VitePress中文网举例

将该页设置为主页

---
layout: home
---

添加主页内容

---
hero:
  name: VitePress
  text: Vite和Vue强力驱动的静态网页生成器
  tagline: 简单、强大、快速、满足你一直想要的现代SSG框架
  image:
    src: /logo.png
    alt: VitePress中文网
  actions:
    - theme: brand
      text: 开始
      link: /text/start
    - theme: alt
      text: 在github上查看
      link: /
---

备注：

src图片的存放地址为docs/public文件夹，该文件夹需要自行创建
第一个link为你在docs文件下创建的文件夹text下的start.md的文件
第二个link为github的网址

设置下方的图标说明

---
features:
  - icon: ⚡️
    title: 这是一个闪电图标
    details: 闪电
  - icon: 🖖
    title: 这是一个手掌图标
    details: 手
  - icon: 🛠️
    title: 这是一个修理图标
    details: 锤子
---

备注：
以VitePress中文网的下方第三个为例子

icon为图标：Vue的图片
title为标题：使用Vue进行定制
detail为内容：直接在Markdown种使用Vue语法和组件，或使用Vue构建自定义主题

完整演示

layout: home

hero:
  name: VitePress
  text: Vite和Vue强力驱动的静态网页生成器
  tagline: 简单、强大、快速、满足你一直想要的现代SSG框架
  image:
    src: /logo.png
    alt: VitePress中文网
  actions:
    - theme: brand
      text: 开始
      link: /text/start
    - theme: alt
      text: 在github上查看
      link: /

features:
  - icon: ⚡️
    title: 这是一个闪电图标
    details: 闪电
  - icon: 🖖
    title: 这是一个手掌图标
    details: 手
  - icon: 🛠️
    title: 这是一个修理图标
    details: 锤子