个人博客地址: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 < obj2.frontMatter.date ? 1 : -1;
};
module.exports = async () => {
const paths = await globby(["**.md"], {
ignore: ["node_modules"],
});
let pages = await Promise.all(
paths.map(async (item) => {
const content = await fs.readFile(item, "utf-8");
const { data } = matter(content);
data.date = rTime(data.date);
return {
frontMatter: data,
regularPath: `/${item.replace(".md", ".html")}`,
relativePath: item,
};
})
);
// 此处为过滤掉不是文章的 Markdown 文件
pages = pages.filter((item) => !item.frontMatter.page);
pages.sort(compareDate);
return pages;
};
基本配置
// .vitepress/config.js
const getPages = require("./utils/pages");
async function getConfig() {
const config = {
head: [
[
"meta",
{
name: "viewport",
content:
"width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no",
},
],
["meta", { name: "keywords", content: "足生的个人博客" }],
["link", { rel: "icon", href: "/favicon.ico" }],
// 引入 Gitalk
[
"link",
{ rel: "stylesheet", href: "https://unpkg.com/gitalk/dist/gitalk.css" },
],
["script", { src: "https://unpkg.com/gitalk/dist/gitalk.min.js" }],
],
title: "足生",
themeConfig: {
search: true,
// 保存解析 Markdown 的元数据
pages: await getPages(),
author: "足生",
nav: [
{ text: "首页", link: "/" },
{ text: "归档", link: "/docs" },
{ text: "分类", link: "/tags" },
],
},
dest: "public",
};
return config;
}
module.exports = getConfig();
// .vitepress/theme/index.js
import DefaultTheme from "../theme-default"; // To extend default theme.
import Docs from "./components/Docs.vue";
import Tags from "./components/Tags.vue";
import Comment from "./components/Comment.vue";
export default {
...DefaultTheme,
enhanceApp({ app, router, siteData }) {
// 注册组件
app.component("Comment", Comment);
app.component("Tags", Tags);
app.component("Docs", Docs);
// app is the Vue 3 app instance from createApp()
// router is VitePress' custom router (see `lib/app/router.js`)
// siteData is a ref of current site-level metadata.
},
};
Markdown 文件格式
---
date: 2020-11-17
title: 测试
tags:
- 测试 1
- 测试 2
describe: 测试
---
内容
> 加载评论组件
<Comment/>
页面效果
