Add custom font styles and theme enhancements

- Created a new CSS file for font imports and defined font families for base, mono, strong, em, and h1 elements.
- Added a new JavaScript file to extend the default VitePress theme, incorporating a custom layout and a Vue component for enhanced functionality.
- Integrated Mermaid diagram support and included the necessary styles for it.

openwiki/theme/Layout.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme-without-fonts'
+import DocTags from './components/DocTags.vue'
+import DocMetaEx from './components/DocMetaEx.vue'
+
+const { frontmatter } = useData()
+const tags = computed(() => frontmatter.value?.tags ?? [])
+const hasTags = computed(() => tags.value.length > 0)
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #doc-before>
+      <DocTags v-if="hasTags" style="margin-bottom: 24px;" />
+    </template>
+    <template #aside-outline-after>
+      <DocMetaEx style="margin-top: 24px; padding-left: 16px;"/>
+    </template>
+  </DefaultTheme.Layout>
+</template>

openwiki/theme/components/DocMetaEx.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useData } from "vitepress";
+
+const { frontmatter } = useData();
+
+const source = computed(() => frontmatter.value?.source ?? null);
+const title = computed(() => frontmatter.value?.title ?? null);
+const abstract = computed(() => frontmatter.value?.abstract ?? null);
+
+const hasExtended = computed(
+  () => source.value || title.value || abstract.value,
+);
+</script>
+
+<template>
+  <div v-if="hasExtended" class="doc-meta-ex">
+    <div v-if="title" class="doc-meta-title">标题：{{ title }}</div>
+    <div v-if="source" class="doc-meta-source">
+      来源：<a :href="source" target="_blank" rel="noopener noreferrer">{{
+        source
+      }}</a>
+    </div>
+    <div v-if="abstract" class="doc-meta-abstract">摘要：{{ abstract }}</div>
+  </div>
+</template>
+
+<style scoped>
+.doc-meta-ex {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.8;
+  gap: 8px;
+}
+
+.doc-meta-source {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.doc-meta-title {
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.doc-meta-abstract {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+</style>

openwiki/theme/components/DocTags.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useData } from "vitepress";
+
+const { frontmatter } = useData();
+
+const tags = computed(() => frontmatter.value?.tags ?? []);
+const aliases = computed(() => frontmatter.value?.aliases ?? []);
+const createdAt = computed(() => frontmatter.value?.created_at ?? null);
+const updatedAt = computed(() => frontmatter.value?.updated_at ?? null);
+const hasTags = computed(() => tags.value.length > 0);
+const hasTime = computed(() => createdAt.value || updatedAt.value);
+
+function formatDate(date: string | null): string {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return date as string;
+  return d.toLocaleDateString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+</script>
+
+<template>
+  <div class="doc-tags-wrapper">
+    <div v-if="hasTime" class="doc-meta-time">
+      <span v-if="createdAt">创建于 {{ formatDate(createdAt) }}</span>
+      <span v-if="createdAt && updatedAt"> · </span>
+      <span v-if="updatedAt">更新于 {{ formatDate(updatedAt) }}</span>
+    </div>
+    <div v-if="hasTags" class="doc-tags">
+      <span v-for="tag in tags" :key="tag" class="doc-tag"># {{ tag }}</span>
+    </div>
+    <div v-if="aliases.length > 0" class="doc-meta-aliases">
+      <span v-for="alias in aliases" :key="alias" class="doc-meta-alias">{{
+        alias
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.doc-tags-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.doc-meta-time {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.doc-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.doc-meta-aliases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.doc-meta-alias {
+  display: inline-block;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-soft);
+  color: var(--vp-c-brand-1);
+  border: 1px solid var(--vp-c-brand-1);
+}
+
+.doc-tag {
+  display: inline-block;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
+}
+</style>

openwiki/theme/fonts.css

@@ -0,0 +1,22 @@
+@import url("https://fontsapi.zeoseven.com/292/main/result.css");
+@import url("https://fontsapi.zeoseven.com/292/light/result.css");
+@import url("https://fontsapi.zeoseven.com/293/main/result.css");
+@import url("https://fontsapi.zeoseven.com/2/main/result.css");
+@import url("https://fontsapi.zeoseven.com/147/main/result.css");
+
+:root {
+  --vp-font-family-base: "LXGW WenKai";
+  --vp-font-family-mono: "LXGW WenKai Mono";
+}
+
+strong {
+  font-family: "LXGW ZhenKai GB";
+}
+
+em {
+  font-family: "LXGW WenKai Light";
+}
+
+h1 {
+  font-family: "JiangChengLvDongSong";
+}

openwiki/theme/index.js

@@ -0,0 +1,16 @@
+import DefaultTheme from "vitepress/theme-without-fonts";
+import { installMermaid } from "v-beautiful-mermaid/client";
+import Viewer from "./components/Viewer.vue";
+import Layout from "./Layout.vue";
+import "v-beautiful-mermaid/style.css";
+import "./fonts.css";
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }) {
+    installMermaid(app);
+    app.component("Viewer", Viewer);
+  },
+};