5. index.md | Notion

Title描述

包含语言/标题/自定义标题/站点描述

Untitled

---
lang: zh-CN
title: VitePress
titleTemplate: Vite 和 Vue 强力驱动的静态网站生成器
description: 简单、强大、快速。满足你一直想要的现代SSG框架
---

Head标签

指定要为当前页面注入的额外头标签。将附加在站点级配置注入的头标签之后

---
head:
  - - meta
    - name: description
      content: hello
  - - meta
    - name: keywords
      content: super duper SEO
---

Untitled

主题美化

主题色

在 theme 目录下新建 style 文件夹，然后新建 index.css 并填入如下代码

/* index.css */
@import './var.css';

然后再新建 var.css 并填入如下代码

/* var.css */
:root {
  --vp-c-brand-1: #18794e;
  --vp-c-brand-2: #299764;
  --vp-c-brand-3: #30a46c;
}

.dark {
  --vp-c-brand-1: #3dd68c;
  --vp-c-brand-2: #30a46c;
  --vp-c-brand-3: #298459;
}
/* 以前的vp-c-brand已弃用 */

然后将修改好的样式引入 index.ts

import DefaultTheme from 'vitepress/theme'
import './style/index.css'

export default {
  extends: DefaultTheme,
}

还有一种方法，就是直接在首页 index.md 中插入代码

<style>
:root {
  --vp-c-brand-1: #18794e;
  --vp-c-brand-2: #299764;
  --vp-c-brand-3: #30a46c;
}

.dark {
  --vp-c-brand-1: #3dd68c;
  --vp-c-brand-2: #30a46c;
  --vp-c-brand-3: #298459;
}
</style>

标题颜色

/* .vitepress\\theme\\style\\var.css */
h1 {
  background: -webkit-linear-gradient(-45deg, #e43498 5%, #5ad7dd 15%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

链接下划线

/* var.css */
.vp-doc a {
    text-decoration: none;
}

Badge颜色

/* .vitepress\\theme\\style\\var.css */
/* 提示框背景颜色 */
:root {
  --vp-custom-block-tip-bg: var(--vp-c-green-soft);
}

/* 提示框 */
.custom-block.tip {
  border-color: var(--vp-c-green-2);
}

/* 警告框 */
.custom-block.warning {
  /* border-color: #d97706; */
  border-color: var(--vp-c-yellow-2);
}

/* 危险框 */
.custom-block.danger {
  /* border-color: #f43f5e; */
  border-color: var(--vp-c-red-2);
}

Untitled

链接卡片

在 .vitepress\\theme\\style\\ 目录新建一个 linkcard.css 文件

/* .vitepress\\theme\\style\\linkcard.css */

/* 卡片背景 */
.linkcard {
  background-color: var(--vp-c-bg-soft);
  border-radius: 8px;
  padding: 8px 16px 8px 8px;
  transition: color 0.5s, background-color 0.5s;
}

/* 卡片鼠标悬停 */
.linkcard:hover {
  background-color: var(--vp-c-yellow-soft);
}

/* 链接样式 */
.linkcard a {
  display: flex;
  align-items: center;
}

/* 描述链接文字 */
.linkcard .description {
  flex: 1;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  color: var(--vp-c-text-1);
  margin: 0 0 0 16px;
  transition: color 0.5s;
}

/* 描述链接文字2 */
.linkcard .description span {
  font-size: 14px;
}

/* logo图片 */
.linkcard .logo img {
  width: 80px;
  object-fit: contain;
}

/* 链接下划线去除 */
.vp-doc a {
  text-decoration: none;
}

输入：

<style src="/.vitepress/theme/style/linkcard.css"></style>
<div class="linkcard">
  <a href="<https://vitepress.yiov.top/>" target="_blank">
    <p class="description">Vitepress中文搭建教程<br><span><https://vitepress.yiov.top/></span></p>
    <div class="logo">
        <img alt="Logo" width="70px" height="70px" src="<https://vitepress.yiov.top/logo.png>" />
    </div>
  </a>
</div>

Untitled

徽章

选择要生成的徽标，生成后，选择Markdown格式即可，旁边都有示例不难；官网：**https://shields.io/**

**https://sspai.com/post/81310**

#### 后端技术栈

<p>
  <img src="<https://img.shields.io/badge/-Spring-6DB33F?logo=Spring&logoColor=FFF>" alt="Spring" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Spring%20Boot-6DB33F?logo=Spring-Boot&logoColor=FFF>" alt="Spring Boot" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-MySQL-4479A1?logo=MySQL&logoColor=FFF>" alt="MySQL" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-MariaDB-A9A9A9?logo=MariaDB&logoColor=003545>" alt="MariaDB" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-PostgreSQL-C0C0C0?logo=PostgreSQL&logoColor=4169E1>" alt="PostgreSQL" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Oracle-C0C0C0?logo=Oracle&logoColor=F80000>" alt="Oracle" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Microsoft%20SQL%20Server-D3D3D3?logo=Microsoft-SQL-Server&logoColor=CC2927>" alt="Microsoft SQL Server" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Redis-DC382D?logo=Redis&logoColor=FFF>" alt="Redis" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-MongoDB-47A248?logo=MongoDB&logoColor=FFF>" alt="MongoDB" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-RabbitMQ-FF6600?logo=RabbitMQ&logoColor=FFF>" alt="RabbitMQ" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Solr-D9411E?logo=Apache-Solr&logoColor=FFF>" alt="Solr" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-ElasticSearch-005571?logo=ElasticSearch&logoColor=FFF>" alt="ElasticSearch" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Logstash-A9A9A9?logo=Logstash&logoColor=005571>" alt="Logstash" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Kibana-A9A9A9?logo=Kibana&logoColor=005571>" alt="Kibana" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Kafka-C0C0C0?logo=Apache-Kafka&logoColor=231F20>" alt="Kafka" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Consul-F24C53?logo=Consul&logoColor=FFF>" alt="Consul" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Tomcat-F8DC75?logo=Apache-Tomcat&logoColor=000>" alt="Tomcat" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-JUnit5-25A162?logo=JUnit5&logoColor=FFF>" alt="JUnit5" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Liquibase-2962FF?logo=Liquibase&logoColor=FFF>" alt="Liquibase" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Maven-C71A36?logo=Apache-Maven&logoColor=FFF>" alt="Maven" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Gradle-D3D3D3?logo=Gradle&logoColor=02303A>" alt="Gradle" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Spring%20Security-6DB33F?logo=Spring-Security&logoColor=FFF>" alt="Spring Security" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Hibernate-59666C?logo=Hibernate&logoColor=FFF>" alt="Hibernate" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-JSON-000?logo=JSON&logoColor=FFF>" alt="JSON" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-JWT-000?logo=JSON-Web-Tokens&logoColor=FFF>" alt="JWT" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Java-F78C40?logo=OpenJDK&logoColor=FFF>" alt="Java" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Python-A9A9A9?logo=Python&logoColor=3776AB>" alt="Python" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Android-C0C0C0?logo=Android&logoColor=3DDC84>" alt="Android" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Go-DCDCDC?logo=Go&logoColor=00ADD8>" alt="Go" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-GraphQL-FFF?logo=GraphQL&logoColor=E10098>" alt="GraphQL" style="display: inline-block;" />&nbsp;
</p>

#### 前端技术栈

<p>
  <img src="<https://img.shields.io/badge/-Vue3-C0C0C0?logo=Vue.js&logoColor=4FC08D>" alt="Vue3" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-TypeScript-C0C0C0?logo=TypeScript&logoColor=3178C6>" alt="TypeScript" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Ant%20Design-C0C0C0?logo=Ant-Design&logoColor=0170FE>" alt="Ant Design" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Node.js-D3D3D3?logo=Node.js&logoColor=339933>" alt="Node.js" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Vite-D3D3D3?logo=Vite&logoColor=646CFF>" alt="Vite" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Webpack-D3D3D3?logo=Webpack&logoColor=8DD6F9>" alt="Webpack" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-NPM-C0C0C0?logo=npm&logoColor=CB3837>" alt="NPM" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Axios-C0C0C0?logo=Axios&logoColor=5A29E4>" alt="Axios" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-ESLint-C0C0C0?logo=ESLint&logoColor=4B32C3>" alt="ESLint" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-jQuery-0769AD?logo=jQuery&logoColor=FFF>" alt="jQuery" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Bootstrap-7952B3?logo=Bootstrap&logoColor=FFF>" alt="BootStrap" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-ECharts-C0C0C0?logo=Apache-ECharts&logoColor=AA344D>" alt="ECharts" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-JavaScript-A9A9A9?logo=JavaScript&logoColor=F7DF1E>" alt="JavaScript" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-HTML5-A9A9A9?logo=HTML5&logoColor=E34F26>" alt="HTML5" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-CSS3-A9A9A9?logo=CSS3&logoColor=1572B6>" alt="CSS3" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Tailwind%20CSS-FFF?logo=Tailwind-CSS&logoColor=06B6D4>" alt="Tailwind CSS" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Less-D3D3D3?logo=Less&logoColor=1D365D>" alt="Less" style="display: inline-block;" />&nbsp;
</p>

#### DevOps

<p>
  <img src="<https://img.shields.io/badge/-Git-F05032?logo=Git&logoColor=FFF>" alt="Git" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-GitHub-181717?logo=GitHub&logoColor=FFF>" alt="GitHub" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Gitee-C71D23?logo=Gitee&logoColor=FFF>" alt="Gitee" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-GitLab-FC6D26?logo=GitLab&logoColor=FFF>" alt="gitlab" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-GitHub%20Actions-2088FF?logo=GitHub-Actions&logoColor=FFF>" alt="GitHub Actions" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Jenkins-D24939?logo=Jenkins&logoColor=000>" alt="Jenkins" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-SonarQube-A9A9A9?logo=SonarQube&logoColor=4E9BCD>" alt="SonarQube" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Docker-2496ED?logo=Docker&logoColor=FFF>" alt="Docker" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Harbor-FFF?logo=Harbor&logoColor=60B932>" alt="Harbor" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Kubernetes-326CE5?logo=Kubernetes&logoColor=FFF>" alt="Kubernetes" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-CentOS-262577?logo=CentOS&logoColor=FFF>" alt="CentOS" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Ubuntu-E95420?logo=Ubuntu&logoColor=FFF>" alt="Ubuntu" style="display: inline-block;" />&nbsp;
</p>

#### 运维技术栈

<p>
  <img src="<https://img.shields.io/badge/-阿里云-FF6A00?logo=Alibaba-Cloud&logoColor=FFF>" alt="阿里云" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Nginx-009639?logo=Nginx&logoColor=FFF>" alt="Nginx" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-VMware-607078?logo=VMware&logoColor=FFF>" alt="VMware" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Prometheus-C0C0C0?logo=Prometheus&logoColor=E6522C>" alt="Prometheus" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Grafana-DCDCDC?logo=Grafana&logoColor=F46800>" alt="Grafana" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Ansible-FFF?logo=Ansible&logoColor=EE0000>" alt="Ansible" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Lua-FFF?&logo=Lua&logoColor=2C2D72>" alt="Lua" style="display: inline-block;" />&nbsp;
</p>

#### 测试技术栈

<p>
  <img src="<https://img.shields.io/badge/-Postman-FF6C37?logo=Postman&logoColor=FFF>" alt="Postman" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-JMeter-D3D3D3?logo=Apache-JMeter&logoColor=D22128>" alt="JMeter" style="display: inline-block;" />&nbsp;
</p>

#### 开发工具

<p>
  <img src="<https://img.shields.io/badge/-Intellij%20IDEA-000?logo=Intellij-IDEA&logoColor=FFF>" alt="Intellij IDEA" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Eclipse-2C2255?logo=Eclipse&logoColor=FFF>" alt="Eclipse" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-WebStorm-000?logo=WebStorm&logoColor=FFF>" alt="WebStorm" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-PyCharm-C0C0C0?logo=PyCharm&logoColor=000>" alt="PyCharm" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Android%20Studio-C0C0C0?logo=Android-Studio&logoColor=3DDC84>" alt="Android Studio" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-VSCode-C0C0C0?logo=Visual-Studio-Code&logoColor=007ACC>" alt="VSCode" style="display: inline-block;" />&nbsp;
</p>

#### 其他

<p>
  <img src="<https://img.shields.io/badge/-Markdown-000?logo=Markdown&logoColor=FFF>" alt="Markdown" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-WordPress-21759B?logo=WordPress&logoColor=FFF>" alt="WordPress" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-GitHub%20Pages-222?logo=GitHub-Pages&logoColor=FFF>" alt="GitHub Pages" style="display: inline-block;" />&nbsp;
  <img src="<https://img.shields.io/badge/-Adobe%20Photoshop-A9A9A9?logo=Adobe-Photoshop&logoColor=31A8FF>" alt="Adobe Photoshop" style="display: inline-block;" />&nbsp;
</p>

组件

组件 | VitePress (yiov.top)