配置vitepress

配置自动生成目录

vitepress 的配置

//config.ts

import genDiarySidebar from "./diarySidebar";
import umToolsSidebar from "./umToolsSidebar";
import { defineConfig } from "vitepress";
export default async () => {
  let diarySidebar = await genDiarySidebar.genDiarySidebar();
  return defineConfig({
    title: "Humi's note",
    description: "For recording.",
    themeConfig: {
      nav: [],
      footer: {},
      sidebar: {
        ...umToolsSidebar.sidebar,
        ...diarySidebar,
      },
      search: {
        provider: "local",
        options: {
          _render(src, env, md) {
            const html = md.render(src, env);
            if (
              env.frontmatter?.search === true ||
              env.relativePath.startsWith("diary")
            ) {
              return html;
            }
            return "";
          },
        },
      },
    },
    lastUpdated: true,
    vite: {
      build: {},
      define: {},
    },
  });
};

//diarySidebar.js

import fg from "fast-glob";
import matter from "gray-matter";
import dayjs from "dayjs";
// import { resolve } from "path";

const sidebar: {
  [key: string]: {
    text: string;
    collapsed: boolean;
    link: string;
    items?: {}[];
  }[];
} = {
  "diary/": [
    { text: "学习笔记", collapsed: false, link: "./index", items: [] },
  ],
};
console.log("Genarating diarySidebar...");
const scan = async () => {
  // console.log(resolve("./"));
  //console.log("start scan");
  const files = await fg(["diary/**/*.md", "!**/index*"], {
    cwd: "docs",
    stats: true,
  });
  for (const file of files.sort((fa, fb) => fb.stats.ctime - fa.stats.ctime)) {
    const { data } = matter.read("docs/" + file.path);
    if (data.createTime) {
      //console.log(dayjs(data.createTime).locale("zh-cn"));
    }
    sidebar["diary/"][0].items?.push({
      text: data.title ? data.title : file.name,
      link: file.path,
    });
  }
};
const genDiarySidebar = async (): Promise<object> => {
  await scan();
  // console.log(sidebar);
  return sidebar;
};
export default { genDiarySidebar };

vscode 的配置

{
  "Markdown properties": {
    // "scope": "Markdown",
    "prefix": "frontmatter",
    "body": [
      "---",
      "title: '$1'",
      "createTime: '$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND'",
      "lastUpdated: true",
      "---",
      "# {{ \\$frontmatter.title }}"
    ],
    "description": "Markdown file head"
  }
}

配置图片缩放

来源 https://github.com/vuejs/vitepress/issues/854

// .vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme';
import { onMounted } from 'vue';
import mediumZoom from 'medium-zoom';

import './index.css';

export default {
  ...DefaultTheme,
  setup() {
    onMounted(() => {
      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
    });
  },
};

/* .vitepress/theme/index.css */

.medium-zoom-overlay {
  z-index: 99;
}

.medium-zoom-image {
  z-index: 100;
}