「VitePress」极简博客搭建

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

页面效果

最后

1. 博客页面样式参考了糊涂说
2. 博客仓库地址
3. 现总计写了 7 篇文章,生成静态文件后大小仅为 243k.
4. vitepress目前还不是正式版,可能会出现许多 bug