【🐱小咪教你装饰vitepress博客主页：酷炫变身✨】

mimi咪_0212
539 阅读6分钟

引言

嘿哟，亲爱的小伙伴们！小咪来啦！😎上次教大家初步搭起了博客的架子，并且启动了项目，今天小咪要带着大家一起把咱们的博客变得超级酷炫哦！这次呢，我们要来装饰博客主页，有好多超棒的部分等着大家呢。😉 首先嗷，我们要打造一个像官网主页一样厉害的博客主页，让你的博客一打开就惊艳众人。然后呢，小咪会详细讲解每个配置的作用，这样小伙伴们就可以自己动手进行配置，把博客变成独一无二的样子。最后，我们还会一起调整背景色，让博客的氛围超赞，给大家带来不一样的阅读体验。😃

这次咱们要一起装饰博客主页，有几个超棒的部分呢：

  1. 打造像官网主页一样的博客主页。
  2. 讲解每个配置的作用，方便各位自己进行配置哟。
  3. 调整背景色，让博客氛围超赞。

打造像官网一样博客主页

  1. 先来瞅瞅一些超酷的官网图片吧：
    • vitepress 官网主页:

  • vite 官网主页：

  • vue 官网主页：

像这种风格独特、简约清晰的官网，都是用 vitepress 搭建的呢。无论是简洁风、科技感十足的风格，还是温馨浪漫的风格，vitepress 都能满足你的需求。😉它就像是一个魔法工具箱，为我们的创意提供了无限的可能。让我们一起借助 vitepress 的力量，打造属于自己的超酷博客吧！💪

  1. 好啦，小伙伴们，现在开始行动起来吧！😃

    • 首先呢，在自己的docs文件夹里创建一个public文件夹哦。这个文件夹专门放置静态文件，比如图片，当然啦，如果你有其他喜欢的照片，也完全可以放在这里哟。😉

  • 接着嗷，打开docs/index.md文件，把下面的这些内容粘贴进去。不过小伙伴们一定要记住哦，粘贴完之后要根据自己的实际情况进行修改，改成适合自己的内容呢。😎
---
layout: home
hero:
  name: mimi's blog
  text: 咪咪的博客
  image:
    src: "/mimi.jpeg"
    alt: mimi
    style: "border-radius: 50%; border: 5px solid white; width: 150px; height: 150px;"
  actions:
    - theme: brand
      text: 现在开始
      link:./blog
    - theme: alt
      text: View on GitHub
      link: https://github.com/Sophia-0212
features:
- title: 📝 Diverse Content
  details: A wide range of topics covered.
- title: 💬 Interactive Comments
  details: Engage with readers through comments.
- title: 📅 Regular Updates
  details: New posts added frequently.
---

配置讲解

小咪来简单说说docs/index.md配置都是做什么的，方便大家修改成自己的内容哟。

1. layout: home

表示当前页面用的是首页布局。在 VitePress 里，不同的页面可以有不同的布局，而这个home布局通常就是给博客首页用的。

2. hero 部分

  • name：博客的大名。
  • text：描述性文字，一般会在名字下面显示，用来简单介绍博客的主题或者特色。
  • image：
    • src：头像图片的路径。一定要确保图片放在正确的地方，这样 VitePress 才能找到它哦。咱们例子里图片路径是“/mimi.jpeg”。
    • alt：这个是图片的替代文本哦，要是图片加载不出来的时候就会显示这个，而且对搜索引擎优化也很有帮助呢。这里的替代文本是“mimi”。
    • style：这里能设置图片的样式哟。就像咱们例子里，设置了border-radius: 50%让图片变成圆圆的，还有border: 5px solid white加了一个 5 像素宽的白色边框，width: 150px; height: 150px设置了图片的宽度和高度。
3. actions 部分

这是一组可点击操作按钮，可以引导小伙伴们进行特定的操作呢。

  • theme: brand和theme: alt：这是按钮的主题样式哟。brand通常表示主要的操作按钮，alt就是次要的或者替代的操作按钮啦。
  • text：按钮上显示的文字哦。比如“现在开始”和“View on GitHub”。
  • link：点击按钮后要跳转的链接呢。像“./blog”就是跳转到相对路径下的“blog”页面，“github.com/Sophia-0212… GitHub 页面啦。
4. features 部分

这部分可以展示博客的特色或者优势哦。

  • title：特色的标题哟。比如“📝 Diverse Content”就表示“多样化的内容”。
  • details：对特色的详细描述呢。像“A wide range of topics covered.”就表示“涵盖广泛的主题”。

调整背景色

现在的背景色还没有装饰起来，下面小咪给出修改背景色、字体颜色、鼠标hover按钮颜色等配置的步骤，方便大家进行配置哟。

  1. 在docs/.vitepress/theme文件夹里创建一个index.ts文件和style.css文件。(小咪这里创建的是index.ts文件，其实js文件也可以，创建ts文件的小伙伴们要记得安装一下typescript哦)
  2. 打开index.ts文件，把下面的内容粘贴进去：

import Theme from 'vitepress/theme'
import './style.css'

export default {
    ...Theme
}
  1. 打开style.css文件，把下面的内容粘贴进去：
:root {
    /* 标题 */
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: linear-gradient(135deg, #FF6F91 0%, #FF9AAB 100%); /* 更新渐变色 */
    --vp-home-hero-name-font-size: 4rem; /* 调整标题大小 */
    --vp-home-hero-name-font-weight: bold; /* 加粗标题 */
    --vp-home-hero-name-text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */

    /* 图标背景 */
    --vp-home-hero-image-background-image: linear-gradient(135deg, #FF6F91 10%, #FF9AAB 100%); /* 更新渐变色 */
    --vp-home-hero-image-filter: blur(80px); /* 调整模糊程度 */
    
    /* 背景 */
    --vp-home-hero-background-color: rgba(255, 255, 255, 0.9); /* 增强半透明背景 */

    /* 按钮样式 */
    --vp-button-brand-border: #FFB6C1; /* 浅粉色 */
    --vp-button-brand-text: #e89ba7; /* 浅粉色 */
    --vp-button-brand-bg: linear-gradient(135deg, #FF6F91, #FFB6C1); /* 渐变背景 */

    --vp-button-brand-hover-border: #FF6F91; /* 悬停边框色 */
    --vp-button-brand-hover-text: #FF6F91; /* 悬停文本色 */
    --vp-button-brand-hover-bg: linear-gradient(135deg, #FF6F91, #FFB6C1); /* 渐变背景 */

    --vp-button-brand-active-border: #FF6F91; /* 激活状态边框色 */
    --vp-button-brand-active-text: #FF6F91; /* 悬停文本色 */
    --vp-button-brand-active-bg: linear-gradient(135deg, #FF6F91, #FFB6C1); /* 渐变背景 */
}

总结

好啦，小伙伴们，今天小咪带着大家一起装饰了博客主页，讲解了配置的作用，还调整了背景色。希望大家都能把自己的博客变得超级酷炫哦！😎小咪在这里跟大家说再见啦，下次小咪会给大家带来如何添加更多有趣的功能到博客里的教程哦，敬请期待吧！😉也非常感谢大家的支持，我们下次再见哟！💖

avatar
文章
阅读
粉丝