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

最新推荐文章于 2025-04-07 10:40:54 发布
原创 最新推荐文章于 2025-04-07 10:40:54 发布 · 1.5k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #前端

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

主页

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

在这里插入图片描述

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

将该页设置为主页

---
layout: home
---

添加主页内容

---
hero:
  name: VitePress
  text: Vite和Vue强力驱动的静态网页生成器
最低0.47元/天 解锁文章
VitePress-16- 配置- head 的配置网页icon与插入一个script标签
northcastle的博客
02-15 2111
vitepress 配置 head的icon图标、配置head中插入一个script脚本的操作
从零用VitePress搭建博客教程(2) – VitePress默认首页和头部导航配置
素的还真
10-12 2614
VitePress默认首页和头部导航栏、左侧导航栏配置，注意事项：这里我发现在创建导航的时候有一个细节要注意，比如关于我们，假如我们创建的是about/index.md，这个时候导航就没有选中样式效果。把index.md改为其他名字即可，比如page.md，此时才有选中的样式效果。
vitepress从0到1，让每个前后端小伙伴都拥有一个属于自己的博客
chengbo_eva的博客
07-22 1721
vitepress从0到1，让每个前后端小伙伴都拥有一个属于自己的博客
VitePress搭建个人网站手把手教学(从搭建到部署在github服务器上)按照步骤直接cv就可以了
QQ的Blog
10-27 5176
VitePress搭建个人网站手把手教学(从搭建到部署再github服务器上通过外网访问)按照步骤直接cv就可以了
VitePress美化
迷逝
07-06 1025
新建目录sideBar，在目录内新建文件：pythonBar.js。新建目录topNav，在下面新建index.js。nav内容比较多，我们另起一个文件，现在不用管。description 描述。首页部分的修改基本都在。title 站点名称。
全网最美最全的VitePress主题，都在这里啦
沐爸的博客
08-02 2753
不知你有没有发现？即便你搜遍全网，也根本找不到你想要的 vitepress 主题，它们要么不符合需求，要么无法使用。这里为你提供全网最美最全的 vitepress 主题，让你不在为找不到合适的 vitepress 主题而发愁。
【VitePress 搭建博客操作指南】
L-Blog
12-07 2907
由于我之前的博客有点审美疲劳了，外加使用的自己搞的cms系统，有点臃肿，所以在网上找了一下，VitePress是自己比较满意的。 了解VitePress详情：VitePress
VitePress个人博客搭建与美化全攻略
VitePress 是一个基于 Vite 和 Vue 3 构建的静态站点生成器，专为构建快速、现代化的文档网站和个人博客而设计。它继承了 Vue 生态系统的强大能力，同时结合 Vite 的极速热更新与构建性能，使得开发者能够以极低的...
知识篇：（七）VitePress 博客搭建指南：轻量化与高性能的完美结合
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-16 1098
使用 VitePress 搭建博客是一个简单高效的选择。
VitePress做一个自己的知识博客
weixin_68658847的博客
06-11 1576
VitePress做一个自己的知识博客
blog:使用vitepress+vue3来创作的一个博客，带有 Gitalk 评论，暗黑模式，局部打印等功能
05-26
page date title describe true 2021-01-03 项目概述 项目概述 :rocket: 基于「VitePress」搭建的极简博客 现已完成: :check_mark_button: 渲染文章列表 :check_mark_button: 使用Vue 3 :check_mark_button: 文章目录 :check_mark_button: 文章按时间轴归档 :check_mark_button: 文章分类 2021-12-31 :check_mark_button: Gitalk 评论 2020-01-05 更新 :check_mark_button: 文章列表分页 2021-01-16 更新 :check_mark_button: 文章图片放大 :check_mark_button: 切换黑暗模式 :check_mark_button: 局部打印 准备开发~ :white_large_square: 文章上下页 效果预览 在线地址: 国内访问: 地址已经换了 还是因为懒，直接把 githubpages 的评论回调地址给换成了 所以 GitHubpag
【亲测免费】 集成 Vue 功能组件和主题美化的 VitePress 插件——Lumen
最新发布
gitblog_00286的博客
04-07 904
集成 Vue 功能组件和主题美化的 VitePress 插件——Lumen 1. 项目介绍 Lumen 是一个开源的 VitePress 插件，旨在为 VitePress 文档站点提供集成 Vue 功能组件和主题美化的功能。它可以帮助开发者快速搭建具有丰富功能的文档站点，支持自定义主题，轻松实现多样化的页面布局和风格。 2. 项目快速启动 要使用 Lumen 插件，请按照以下步骤操作： 首先，确保...
vitepress 最详细教程之Home Page的配置
ox4f5da2的博客
02-12 4395
vitepress 教程之教大家配置一个好看的主页，全网最详细手把手从 0 开始，小白包教包会
如何在 VitePress 中自定义logo，打造精美首页 #home-hero-image
专注于全栈开发领域
07-28 2095
在你的文档站点的首页，是第一个引起访问者注意的视觉元素。一个精美的首页图片可以显著提升用户体验和品牌形象。通过自定义，你可以展示与你的项目或品牌相关的图像，使主页更具吸引力和个性化。为了自定义，我们需要创建一个自定义主题文件。my-docs│ ├─ theme接下来，在目录下创建文件，用于定义自定义的在这个组件中，我们定义了一个简单的img标签，并添加了一些基本的样式。
vitepress系列-02-设置自定义的首页
东东爱编码博客
04-07 2054
初始首页效果：设置成自己的首页，更改config.mts和文件：设置版权title: "东东爱编码的技术博客",description: "记录日常学习点点滴滴",footer: {})
让VitePress展示ElementPlus表格样式更合理
Carey_be的博客
03-05 612
用自定义样式补充vitePress与elementPlus搭配使用的不足
基于Vite使用VitePress搭建静态站点博客
梦和远方的博客
11-02 4634
VitePress是一个静态站点生成器(SSG)专为构建快速、以内容为中心的网站而设计。简而言之，VitePress把你的源内容写成降价，对其应用主题，并生成可以在任何地方轻松部署的静态HTML页面。他是VuePress的小兄弟，基于Vite创建。VuePress官方文档后续配置全是基于【默认主题+自定义主题】的框架实现。
Vuepress博客美化技巧
Jyms的博客
01-11 2068
文章目录导航栏透明+背景图填充+悬浮气泡背景图填充导航栏透明图片中的点击向下跳转的样式悬浮气泡 导航栏透明+背景图填充+悬浮气泡 背景图填充 效果图： 下面的小框扩展到大框，让后面的导航栏透明更完善一些。 编辑Theme/components/HomeBlog.vue下的 .hero { margin $navbarHeight auto 0 position relative box-sizing border-box padding 0 20px hei
探索极简之美：vitepress-theme-blog-pure 开源项目推荐
gitblog_01131的博客
08-18 557
探索极简之美：vitepress-theme-blog-pure 开源项目推荐 在数字化时代，个人博客不仅是分享知识的平台，也是展示个性的窗口。然而，选择一个既简洁又功能齐全的博客框架往往让人头疼。今天，我们要介绍的 vitepress-theme-blog-pure 项目，正是为了解决这一痛点而生。 项目介绍 vitepress-theme-blog-pure 是一个基于 VitePress 的...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值