VitePress配置修改
配置修改
网站标题&LOGO
路径：docs.vitepress\config.js 文件修改
注意,vitePress默认会将docs下的所有的文件夹都打包到.vitepress/dist 文件夹下,我们一般会将静态资源放在docs/public 文件夹下，如果没有需要自己新建，将文档放在note文件夹下。
各位看官，小站运营不易，刷到广告还请多多包涵，如果本站文章帮助到了您，还请麻烦帮忙点下广告哈。🤗
javascript
export default {
title: '网站标题',
description: 'meta标签 我是网站描述.',
base:'/tool/',
//en-US
lang: 'zh-CN',
// 是否显示更新时间
lastUpdated: true,
head : [ // 网站icon
['link',{rel:'icon',href:'./images/logo.png'}]
],
themeConfig: {
//网站首页logo
logo: './images/logo.png',
}
}社交链接
自定义的图标需要引入svg的txt
javascript
import gitee from '../public/svg/gitee.txt'
import coding from '../public/svg/coding.txt'
import oschina from '../public/svg/oschina.txt'
//社交链接
const socialLinks= [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{ icon: 'twitter', link: '...' },
// 自定义图标
{icon: {svg: gitee,}, link: 'https://gitee.com/'},
{icon: {svg: coding,}, link: 'https://gitee.com/'},
{icon: {svg: oschina,}, link: 'https://gitee.com/'}
]
// 主题配置
const themeConfig = {
...
socialLinks ,
...
}码云
javascript
<svg width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.177 57.432C50.177 59.7878 48.2593 61.6968 45.8941 61.6968C43.529 61.6968 41.6113 59.7878 41.6113 57.432C41.6113 57.432 41.6113 56.0076 41.6113 53.163C41.6113 50.8073 43.529 48.8982 45.8941 48.8982C48.2593 48.8982 50.177 50.8073 50.177 53.163C50.177 55.5188 50.177 55.0762 50.177 57.432ZM99.2477 57.4289C99.2477 59.7878 97.33 61.6968 94.9648 61.6968C92.5996 61.6968 90.682 59.7878 90.682 57.432V53.163C90.682 50.8073 92.5996 48.8982 94.9648 48.8982C97.33 48.8982 99.2477 50.8073 99.2477 53.163V57.4289ZM40.3571 85.0354C29.6162 79.7933 23.0003 67.9203 25.1786 56.0762C27.4898 42.5362 40.2885 32.8907 53.9501 33.0282C57.1293 33.0282 60.187 33.5081 63.0505 34.3985C65.4313 35.1358 67.6667 36.1545 69.738 37.4151C70.1699 37.6571 70.7794 37.6364 71.1937 37.3748C73.238 36.1348 75.4578 35.1286 77.8085 34.4006C80.6741 33.5081 83.7339 33.0282 86.9141 33.0282C100.568 32.8886 113.364 42.531 115.685 56.0607C117.891 68.0299 111.114 80.0208 100.193 85.1863C81.9958 94.353 58.5019 94.2899 40.3571 85.0354ZM122.194 38.3779C115.949 25.237 104.465 16.0093 89.8254 11.2357C86.3607 10.1157 83.0652 8.61727 79.9909 6.79097C76.954 4.98742 74.1309 2.86225 71.5695 0.463038C70.9995 -0.154346 69.8626 -0.154346 69.2926 0.463038C64.0898 5.33282 57.8633 9.02679 51.0336 11.2357C36.3919 16.0093 24.9097 25.236 18.6645 38.3779C16.1374 38.3644 13.6434 38.563 11.2201 38.9425C6.93727 39.594 3.4165 42.6479 2.14047 46.7296C0.508307 51.5405 0.528034 57.3131 2.18303 62.1187C3.62415 66.3349 7.38165 69.487 11.9396 70.0692C13.685 70.2854 15.4573 70.4002 17.2577 70.4177C24.4487 90.1978 46.9293 100.187 70.4295 99.9974C93.9411 100.18 116.394 90.203 123.6 70.4177C125.407 70.4002 127.183 70.2843 128.936 70.0672C133.393 69.4911 137.083 66.458 138.584 62.3773C140.333 57.5044 140.375 51.6294 138.719 46.7296C137.448 42.6572 133.919 39.5909 129.639 38.9425C127.216 38.563 124.721 38.3644 122.194 38.3779Z" fill="#32363F"/>
</svg>coding
javascript
<?xml version="1.0" encoding="UTF-8"?>
<svg width="90" height="90" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>logo-black</title>
<desc>Created with Sketch.</desc>
<g id="LOGO" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-532.000000, -80.000000)">
<g id="logo-black" transform="translate(532.000000, 80.000000)">
<g id="Group">
<circle id="Combined-Shape" fill="#C71D23" cx="44.8544363" cy="44.8544363" r="44.8544363"></circle>
<path d="M67.558546,39.8714292 L42.0857966,39.8714292 C40.8627004,39.8720094 39.8710953,40.8633548 39.8701949,42.0864508 L39.8687448,47.623783 C39.867826,48.8471055 40.8592652,49.8390642 42.0825879,49.8393845 C42.0827874,49.8393846 42.0829869,49.8393846 42.0831864,49.8387862 L57.5909484,49.838657 C58.8142711,49.8386283 59.8059783,50.830319 59.8059885,52.0536417 C59.8059885,52.0536479 59.8059885,52.053654 59.8059701,52.0536602 L59.8059701,52.6073539 L59.8059701,52.6073539 L59.8059701,53.161115 C59.8059701,56.8310831 56.8308731,59.80618 53.160905,59.80618 L32.1165505,59.80618 C30.8934034,59.806119 29.9018373,58.8145802 29.9017425,57.5914331 L29.9011625,36.5491188 C29.9008781,32.8791508 32.8758931,29.9039718 36.5458611,29.9038706 C36.5459222,29.9038706 36.5459833,29.9038706 36.5460443,29.9040538 L67.5523638,29.9040538 C68.77515,29.9026795 69.7666266,28.9118177 69.7687593,27.6890325 L69.7721938,22.1516997 C69.774326,20.928378 68.7832423,19.9360642 67.5599198,19.9353054 C67.5594619,19.9353051 67.5590039,19.935305 67.558546,19.9366784 L36.5479677,19.9366784 C27.3730474,19.9366784 19.935305,27.3744208 19.935305,36.549341 L19.935305,67.558546 C19.935305,68.7818687 20.927004,69.7735676 22.1503267,69.7735676 L54.8224984,69.7735676 C63.079746,69.7735676 69.7735676,63.079746 69.7735676,54.8224984 L69.7735676,42.0864509 C69.7735676,40.8631282 68.7818687,39.8714292 67.558546,39.8714292 Z" id="G" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>oschina
javascript
<?xml version="1.0" encoding="UTF-8"?>
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
<g><circle fill="#21B351" cx="22" cy="22" r="22"></circle><path d="M21.63 27.27c-2.926.02-5.312-1.89-5.472-5.454-.16-3.325 2.766-5.555 5.552-5.614 3.207-.08 5.132 3.583 5.132 3.583l8.278-3.046S31.712 7.92 22.492 7.92c-8.619 0-14.572 5.972-14.572 14.075 0 7.207 5.612 14.393 14.372 14.075 9.62-.359 12.908-8.82 12.908-8.82l-8.499-2.806c.02-.04-1.723 2.826-5.07 2.826" fill="#FFF"></path></g>
</svg>各位看官，小站运营不易，刷到广告还请多多包涵，如果本站文章帮助到了您，还请麻烦帮忙点下广告哈。🤗
菜单
头部导航
注意文件夹一定要事先规划好！！！
docs.vitepress\topNav\index.js
javascript
export default [
{
text: "前端网聚",
items: [
{ text: "VitePress", link: "/note/front-end/vitePress/01-vitePress安装" },
{ text: "前端综合", link: "/site/page" },
{ text: "HTML/CSS", link: "/site/html-css" },
{ text: "框架组件", link: "/site/framework" },
],
activeMatch: '^/note/front-end' //当前页面位于匹配路径下时，导航菜单项将突出显示
},
{
text: '提效工具',
items: [
{
text: '软件推荐与配置',
items: [
{ text: '多平台软件', link: '/efficiency/software/cross-platform' },
{ text: 'Mac 平台', link: '/efficiency/software/mac' },
{ text: 'Windows 平台', link: '/efficiency/software/windows' },
]
},
{ text: '在线工具', link: '/efficiency/online-tools' },
{ text: '书签脚本', link: '/efficiency/bookmark-scripts' }
],
activeMatch: '^/efficiency'
},
{
text: "关于我们",
link: "/about/me",
},
{ text: "更新日志", link: "" },
];docs.vitepress\config.js
javascript
// 头部导航
import topNav from "./topNav";
// 主题配置
const themeConfig = {
nav:topNav
}首页
markdown
---
---
layout: home
hero:
name: 敲代码的卡卡罗特
text: 灵魂和身体都要在路上
tagline: 编程💻，健身💪，电影📽️，听歌 🎧...
image:
src: ././images/logo3.png
alt: Cobweb Docs Vitepress
actions:
- theme: brand
text: Start
link: ./demo1/a
- theme: alt
text: osChina
link: https://www.oschina.net/
features:
- icon: ⚡️
title: 前端
details: JavaScript, TypeScript, Vue, Vite, Node.Js
- icon: 🖖
title: 后端
details: JAVA, SpringBoot, MYSQL
- icon: 🛠️
title: 组件
details: element-ui
- icon: 🔧
title: 工具
details: project-general-tools
- icon: 🧱
title: 技术
details: 从0-1搭建
- icon: 📦
title: 大杂烩
details: git, github
---
<style>
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
}
</style>各位看官，小站运营不易，刷到广告还请多多包涵，如果本站文章帮助到了您，还请麻烦帮忙点下广告哈。🤗
文章相关
左侧侧边栏(文章列表)
左侧侧边栏是可以自定义的
javascript
import { vitePressNote } from "./sideBar/vitePressBar";
// 全局左侧菜单
const sidebar = {
"/note/frontEnd/vitePress": vitePressNote, // /note/front-end/vitePress 表示对这个文件夹下的所有md文件做侧边栏配置
}
// 主题配置
const themeConfig = {
sidebar,
}docs.vitepress\sideBar\vitePressBar.js
javascript
// VitePress技术笔记左侧导航栏
export const vitePressNote = [
{
text: "从零开始用VitePress搭建个人博客的笔记",
items: [
{
text: "1.VitePress初始化",
link: "/note/front-end/vitePress/01-vitePress安装",
},
{
text: "2.VitePress默认主题修改和配置",
link: "/note/front-end/vitePress/02-vitePress配置修改",
}
],
},
];右侧侧边栏
文章右侧的目录 是自动生成的，只不过默认只识别 H2 下的标题。需要修改下配置。
javascript
// 主题配置
const themeConfig = {
/* 右侧大纲配置 */
outline: {
// 默认是只识别## 二级目录， deep 可以识别下面的子目录
level: 'deep',
label: '本页目录1'
},
}文章更新时间
javascript
// 主题配置
const themeConfig = {
lastUpdatedText: '上次更新',
}上一篇/下一篇
javascript
// 主题配置
const themeConfig = {
docFooter: {
prev: '上一篇',
next: '下一篇'
}
}显示文章更新时间
获取每个文件最后一次 git 提交的 UNIX 时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部
javascript
export default {
title: '网站标题',
// 是否显示文章更新时间
lastUpdated: true,
themeConfig: {
lastUpdatedText: "最后更新",
},
}自定义CSS
我们可以自定义更改默认主题的背景色，按钮等。需要在.vitepress文件夹下创建theme文件夹，目录如下：
text
.vitepress
└─theme
└─style
└─var.css
└─index.jsindex.js
javascript
import DefaultTheme from 'vitepress/theme'
import './style/var.css'
export default {
...DefaultTheme
}css
:root {
/* 标题 */
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: linear-gradient( 135deg, #F6CEEC 10%, #D939CD 100%);
/* 图标背景 */
--vp-home-hero-image-background-image: linear-gradient( 135deg, #F6CEEC 10%, #D939CD 100%);
--vp-home-hero-image-filter: blur(150px);
/* brand按钮 */
--vp-button-brand-border: #F6CEEC;
--vp-button-brand-text: #F6CEEC;
--vp-button-brand-bg: #D939CD;
--vp-button-brand-hover-border: #F6CEEC;
--vp-button-brand-hover-text: #fff;
--vp-button-brand-hover-bg: #D939CD;
--vp-button-brand-active-border: #F6CEEC;
/* 主题基色 */
--vp-c-brand: #D939CD;
--vp-c-brand-light: #D939CD;
--vp-c-brand-dark: #D939CD;
}