技术胖博客

Appearance

03.【首页设置】关于index.md的设置 ​

本文教程深入讲解VitePress首页设置，包括如何配置和修改主页布局，添加Hero区域和特色功能卡片，以及在页面中嵌入Markdown内容。通过实践这些技巧，您可以打造个性化且功能丰富的网站首页。

主页配置 ​

VitePress默认主题提供了首页布局的样式，你可以在任何页面使用这个样式，只有在Markdown文件顶部使用它。

yaml
---
layout:home
---

但仅有这个配置不会有太大的作用。可以通过设置其他选项（hero和features）向主页添加几个不同的预设。

Hero部分的配置 ​

Hero部分位于主页顶部。以下是配置Hero的方法。

yaml

---
layout: home

hero:
  name: VitePress        # `text` 上方的字符，带有品牌颜色
  text: Vite & Vue powered static site generator.   #hero 部分的主要文字，被定义为 `h1` 标签
  tagline: Lorem ipsum...    # `text` 下方的标语
  image:
    src: /logo.png           # text 和 tagline 区域旁的图片
    alt: VitePress           # 图片的alt文字
  actions:
    - theme: brand           # 按钮的颜色主题，默认为 `brand`
      text: Get Started      # 按钮的标签
      link: /guide/what-is-vitepress # 按钮的目标链接
      target: _blank        #可选的内容 链接的 target 属性，如果使用_blank,可以在浏览器重新打开一个标签
      rel:                  #可选的内容
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress
---
rel的详细介绍

如果你对rel感兴趣，这里给出详细的介绍，这些在以前网站的SEO中是非常有用的，的随着移动网络的兴起，Rel的使用也表少了。 在HTML中，<a> 标签用于创建超链接，这些超链接可以连接到另一个页面或站点，也可以指向同一站点中的不同页面，甚至是页面内的特定位置。rel 属性是<a>标签的一个可选属性，用于指定当前文档与被链接文档之间的关系。 rel 属性的值可以是以下几种：

  1. alternate：指定链接文档是当前文档的一个可替代版本，例如链接到一个打印友好版本的页面。
  2. author：指定链接到创作者的个人主页或个人资料页面。
  3. bookmark：用于创建书签，通常与历史记录或目录相关。
  4. canonical：指定链接到文档的规范URL，有助于搜索引擎理解哪个是页面的首选版本，有助于避免内容重复问题。
  5. help：指定链接到一个提供关于页面的额外帮助信息的页面。
  6. license：指定链接到页面内容的版权信息或许可证。
  7. nofollow：这是一个常用的值，告诉搜索引擎不要跟随这个链接，也不要传递权重给链接的目标页面。这个值通常用于赞助商链接或用户生成的内容，以避免影响网站的搜索引擎排名。
  8. noopener：当用于链接时，可以防止链接目标页面访问当前页面的window对象，有助于防止潜在的恶意操作。
  9. noreferrer：类似于noopener，但它还阻止发送来源信息给链接目标页面，有助于保护用户隐私。
  10. preconnect：用于预先建立到链接目标地址的连接，可以加快页面加载速度。
  11. prev和next：用于指定链接到文档的前一个版本或下一个版本，有助于导航和SEO。

rel 属性的使用可以帮助提高网站的可用性和搜索引擎优化（SEO），同时也有助于提供更好的用户体验。正确使用rel属性可以确保链接的语义化，使得搜索引擎和用户都能更好地理解链接的目的和上下文。

Features 部分的配置 ​

Features的配置，就是配置按钮下面的那几个卡片框，这个卡片框的数量是任意的。

先来看一段官方给的代码案例。

yaml
---
layout: home

features:
  - icon: 🛠️                             # 在每个 feature 框中显示图标
    title: 系统教程                       # feature 的标题
    details: 程序员的系统教程              # feature 的详情
    link: /系统教程/VitePress/01.【邂逅初遇】VitePress介绍和安装   #  链接
    linkText: more
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg        #黑色主题下的图标
      light: /light-feature-icon.svg      #白色主题下的图标
    title: Another cool feature
    details: Lorem ipsum...
---

建议在这里使用表情符号（Emoji），它们是Unicode提供的一种跨平台、跨语言的字符编码方式，确保字符能在任何设备或操作系统上以相同的方式显示。表情符号是Unicode 6.0版本中引入的，从那时起，各种表情符号就开始在全球范围内流行起来。

这里给出40种我常用的Emoji，你直接复制就可以使用。

图标描述图标描述图标描述
📌圆形图钉📍圆形目标📎回形针
🔗链接符号📏直尺📐三角尺
✂️剪刀🖌️画笔🖋️钢笔
🗂️索引卡🗒️螺旋笔记本📓彩色笔记本
📔封皮笔记本📕闭合的书籍📖打开的书
📚书本堆🔍放大镜（放大）🔎放大镜（缩小）
💡电灯泡🔑钥匙🗝️钥匙孔
🔐锁🌐地球🌙新月
🌟闪亮的星星🌠流星🌈彩虹
📱手机💻笔记本电脑🎓学位帽
🎨调色板🎧耳机🎤麦克风
🎼音乐谱号🎵音乐笔记🎶多个音乐笔记
📞电话🚀火箭🛸飞碟
💼公文包📦箱子📱手机2
🔋电池🔌电源插头💻笔记本电脑2
🖥️桌面电脑📱手机3📱手机4
🔧扳手🛠️锤子🔩螺母
🔨锤子2🪓剪刀2🧱砖块
🏗️建筑工地🏢办公大楼🏗️建筑工地2
🚪门🪟窗户🛏️床
🛋️沙发🖇️回形针2🔑钥匙2
🗅圆环🔗链接符号2📌图钉2
📏直尺2📐三角尺2🖇️回形针3
🎓学位帽2🎨调色板2🎧耳机2
🎤麦克风2🎼音乐谱号2🎵音乐笔记2
🎶多个音乐笔记2📞电话2🚀火箭2
🛸飞碟2🏞国家公园🏝️无人岛
🌄日出🌅日落🌃夜晚的城市
🌆城市天际线🌇夕阳下的天际线🌉夜晚的桥
⛰️山🏕️露营🏞️国家公园2
🌈彩虹2🎡摩天轮🎢过山车
🏗️建筑起重机🏰城堡💒婚礼教堂
🗽自由女神像🗼埃菲尔铁塔🏰城堡2

当然你也可以使用SVG甚至是PNG格式的图标，我推荐使用阿里巴巴的矢量图标库网站。。

https://www.iconfont.cn/

这里的图标太多了，而且可以免费下载。

增加Markdown内容 ​

在首页里是可以增加Makrdown内容的，在首页配置文件的---下方，你可以增加额外的Markdown内容。

yaml
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "技术胖"
  text: "关注前端技术 "
  tagline: 每年100集前端免费视频教程，关注科技前沿技术
  image:
  ......
---

## 如果连自己的体重都无法控制，又如何掌控自己的人生。

当然任何markdown的形式都可以在这里展现。

自定义name颜色 ​

默认模板只提供了蓝色的name颜色，看起来非常的不好看。我们可以通过覆盖--vp-home-hero-name-color变量来自定义颜色。

这个自定义其实是需要修改默认模板的（这里只作简单介绍，以后的教程会详细介绍模板的修改）。首先你需要在./.vitepress/文件夹下面新建一个theme的文件夹。

建立好文件夹后，新建一个index.js和custom.css文件，编写代码如下:

js
// index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default DefaultTheme

在custom.css文件中编写样式，增加渐变颜色。

css
:root {
    --vp-home-hero-name-color: transparent;
    --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
  }

有了这两个文件，其实就等于自定义了首页的样式，只不过我们改动的很少。

好了，这就是这节课的全部内容了，下节我们学习一下导航栏的设置技巧。

AI总结内容 ​

本文详细指导了如何在VitePress中自定义首页，包括布局配置、Hero区域和特色功能卡片的添加，以及Markdown内容的嵌入。通过这些步骤，用户能够创建一个个性化且功能完善的网站首页。文章还介绍了如何使用表情符号（Emoji）增强视觉效果，并提供了40种常用Emoji的示例。此外，文中解释了HTML中rel属性的多种用途，以及如何通过修改默认模板来自定义首页的样式，例如改变标题颜色。最后，文章提供了一个关于如何在VitePress中进一步自定义主页的预告，引导读者期待后续内容。

JSPang版权所有 @ 2024-2054 创作不易请尊重他人劳动成果，未经允许禁止转载