第一步: vitepress的搭建
vitepress官网: vitejs.cn/vitepress/
为了更好的学习一个新技术, 最好的办法就是通过项目来学习, 这也是在没有了解vitepress的情况下做出的一个基础笔记博客.
1. vitepress安装
1.1 安装
- 安装方式:
npm add -D vitepress
- 命令行向导安装(设置一个基本项目结构):
npx vitepress init
需要回答的几个问题:
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◆ Theme:
│ ● Default Theme (Out of the box, good-looking docs)
│ ○ Default Theme + Customization
│ ○ Custom Theme
└
2.目录结构
博客的基本结构:
.
├─ Blog
│ ├─ node_modules
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ public
│ ├─ notes
│ │ └─ .....
│ ├─ .gitignore
│ └─ index.md
└─ package.json
2.1 主题
在.vitepress目录下theme文件夹
- 在theme文件夹下style.css
:root {
/* 标题 */
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: linear-gradient(135deg, #c850c0, #4158d0); /* 更新渐变色 */
--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,#a1c4fd, #c2e9fb); /* 更新渐变色 */
--vp-home-hero-image-filter: blur(80px); /* 调整模糊程度 */
/* 背景 */
--vp-home-hero-background-color: rgba(255, 255, 255, 0.9); /* 增强半透明背景 */
/* 按钮样式 */
--vp-button-brand-border: rgb(163, 207, 217); /* ; /* 浅粉色 */
--vp-button-brand-text: rgb(85, 85, 230); /* 浅粉色 */
--vp-button-brand-bg: linear-gradient(135deg, #c850c0, #4158d0); /* 渐变背景 */
--vp-button-brand-hover-border: rgb(163, 207, 217); /* 悬停边框色 */
--vp-button-brand-hover-text: rgb(163, 207, 217); /* 悬停文本色 */
--vp-button-brand-hover-bg: linear-gradient(135deg, #c850c0, #4158d0); /* 渐变背景 */
--vp-button-brand-active-border: rgb(163, 207, 217); /* 激活状态边框色 */
--vp-button-brand-active-text: rgb(163, 207, 217); /* 悬停文本色 */
--vp-button-brand-active-bg: linear-gradient(135deg, #c850c0, #4158d0); /* 渐变背景 */
}
- 在theme文件夹下index.js
import Theme from 'vitepress/theme'
import './style.css'
export default {
...Theme,
}
2.2侧边栏sidebar
.vitepress新建set_sidebar.mjs: nodejs代码自动生成侧边栏markdown文件目录
import path from 'node:path'
import fs from 'node:fs'
// 文件根目录
const DIR_PATH = path.resolve('./')
// 白名单,过滤不是文章的文件和文件夹
const WHITE_LIST = ['index.md', '.vitepress', 'node_modules', '.idea', 'assets']
// 判断是否是文件夹
const isDirectory = (path) => fs.lstatSync(path).isDirectory()
// 取差值
const intersections = (arr1, arr2) => Array.from(new Set(arr1.filter((item) => !new Set(arr2).has(item))))
// 把方法导出直接使用
function getList(params, path1, pathname) {
// 存放结果
const res = []
// 开始遍历params
for (let file in params) {
// 拼接目录
const dir = path.join(path1, params[file])
// 判断是否assets文件夹
if (dir.endsWith('.assets')) {
continue
}
// 判断是否是文件夹
const isDir = isDirectory(dir)
if (isDir) {
// 如果是文件夹,读取之后作为下一次递归参数
const files = fs.readdirSync(dir)
res.push({
text: params[file].replace(/^\d+./g, ''),
collapsed: false,
items: getList(files, dir, `${pathname}/${params[file]}`),
})
} else {
// 获取名字
const name = path.basename(params[file])
// 排除非 md 文件
const suffix = path.extname(params[file])
if (suffix !== '.md') {
continue
}
res.push({
text: name.replace(/(^\d+.)|(.md$)/g, ''),
link: `/${pathname}/${name}`,
})
}
}
return res
}
export const set_sidebar = (pathname) => {
// 获取pathname的路径
const dirPath = path.join(DIR_PATH, pathname)
// 读取pathname下的所有文件或者文件夹
const files = fs.readdirSync(dirPath)
// 过滤掉
const items = intersections(files, WHITE_LIST)
// getList 函数后面会讲到
return getList(items, dirPath, pathname)
}
2.3 静态资源
public文件夹存放静态资源
- logo.png(只存放一个图片文件)
2.4 config.js
import { defineConfig } from 'vitepress'
import { set_sidebar } from './set_sidebar.mjs'
export default defineConfig({
title: "Mack's Blog",
description: "A VitePress Site",
//image: '/public/logo.png',
themeConfig: {
nav: [
{ text: '首页', link: './' },
{ text: '归档', link: '/about' },
{ text: '关于', link: '/about' }
],
sidebar:{
'/notes/JavaScript/': set_sidebar('notes/JavaScript'),
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
],
},
})
2.5首页
.vitepress下的index.md文件
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
hero:
name: "Mack's Blog" # 博客名称
text: "" # 博客描述
tagline: 记录生活与技术 # 项目标语
image:
src: /logo.png # 博客logo
alt: Logo # 博客logo文字
style: "border-radius: 50%; border: 5px solid whilte; width: 150px; height: 150px;" # 博客logo样式
actions:
- theme: brand
text: 现在开始
link: /markdown-examples
- theme: alt
text: View on GitHub
link: /notes/JavaScript/简介
features:
- title: JavaScript
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
link: /notes/JavaScript/简介
---
第二步: 发布部署到vercel
1.博客打包
- 打包构建命令
npm run docs:build
打包后预览:
npm run docs:preview
2.上传github仓库
首先创建github仓库,并将本地仓库与github仓库链接,在此就不赘述了.
3.vercel部署
网址: vercel.com
将github代码一键部署到vercel上,通过给你的网址就可以在网上预览了.
可能因为个性化遇到的问题: 网址显示404, 解决: 找到项目在settings中的Output Directory(输出目录)更改,例如本项目更改编译目录为: /.vitepress/dist
好了您已经阅读完本文章,请去搭建一个您自己的云上博客或者笔记库吧!
本文仅好奇稀土首写奖励
