「VitePress」极简博客搭建

最新推荐文章于 2024-09-24 13:00:49 发布

Moking丶

最新推荐文章于 2024-09-24 13:00:49 发布

阅读量5.2k

点赞数 5

分类专栏：博客文章标签： vue javascript html nodejs

本文链接：https://blog.csdn.net/qq_29525875/article/details/109778019

版权

本文介绍了如何使用VitePress快速搭建个人博客，包括渲染文章列表、Gitalk评论、时间轴归档、文章分类等功能。博客样式借鉴糊涂说，目前总计7篇文章，静态文件大小仅243k。尽管VitePress非正式版，可能存在bug。

摘要由CSDN通过智能技术生成

个人博客地址:www.moking1997.top

现已完成:

渲染文章列表
Gitalk评论
文章按时间轴归档
文章分类

viepress快速开始

mkdir vitepress
cd vitepress  && yarn init -y
yarn add -D vitepress
echo '# Hello VitePress' > index.md

# 在本地启动服务器
npx vitepress

# 构建静态文件 > .vitepress/dist
npx vitepress build

vitepress目录结构

.vitepress
├─.DS_Store
├─config.js
├─utils
|   └pages.js	// 用于解析 Markdown 文件,获取元数据
├─theme-default	// vitepress 默认主题,我这里复制文件过来,进行了按需修改
├─theme
|   ├─index.js	
|   ├─components	// 自定义组件
|   |     ├─Comment.vue	// 评论
|   |     ├─Docs.vue	// 归档页
|   |     └Tags.vue		// 分类页

获得Markdown文章元数据

// .vitepress/utils/pages.js
const fs = require("mz/fs");
const globby = require("globby");
const matter = require("gray-matter");

function rTime(date) {
   
  const json_date = new Date(date).toJSON();
  return json_date.split("T")[0];
}

var compareDate = function (obj1, obj2) {
   
  return obj1.frontMatter.date