个人博客地址: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/>