feat: 设置主题

build/config.base.js

@@ -19,6 +19,8 @@ export const DOCS_SORT_PATH = "docs/sort/"; // 生成文件的地址
 
 // 生成 vuepress 配置相关
 export const CONFIG_FILE_PATH = "docs/.vitepress/config"; // config 生成路径
+export const THEME_SET_FILE_PATH = "works/generator/vitepress/theme";
+export const THEME_FILE_PATH = "docs/.vitepress/theme";
 // 默认 index.md 位置
 export const DOCS_FILE_PATH = "docs/src";
 // 概览页

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@nolebase/vitepress-plugin-enhanced-readabilities": "^1.22.4",
     "axios": "^1.6.7",
+    "medium-zoom": "^1.1.0",
     "mkdirp": "^3.0.1",
     "vitepress": "1.0.0-rc.44",
     "vue": "^3.4.21"

works/generator/vitepress/theme/index.ts

@@ -0,0 +1,31 @@
+import { useData, inBrowser } from 'vitepress'
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme-without-fonts'
+import {
+  NolebaseEnhancedReadabilitiesMenu,
+  NolebaseEnhancedReadabilitiesScreenMenu,
+} from '@nolebase/vitepress-plugin-enhanced-readabilities'
+
+import './main.css'
+import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // 为较宽的屏幕的导航栏添加阅读增强菜单
+      'nav-bar-content-after': () => h(NolebaseEnhancedReadabilitiesMenu),
+      // 为较窄的屏幕（通常是小于 iPad Mini）添加阅读增强菜单
+      'nav-screen-content-after': () =>
+        h(NolebaseEnhancedReadabilitiesScreenMenu),
+    })
+  },
+  setup() {
+    // setup language
+    const { lang } = useData()
+    if (inBrowser) {
+      // @ts-ignore
+      document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2024 00:00:00 UTC; path=/`
+    }
+  },
+}

works/generator/vitepress/theme/main.css

@@ -0,0 +1,242 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --c-blue: #4092aa;
+  --c-blue-dark: #2c3e50;
+  --c-blue-darker: #1e2a38;
+  --c-blue-light: #5e9ab5;
+  --c-blue-lighter: #7fb1c2;
+
+  --c-teal: #0c5053;
+  --c-teal-light: #27696d;
+
+  --c-white-dark: #f8f8f8;
+  --vp-c-black-darker: #0d121b;
+  --vp-c-black: #111827;
+  --vp-c-black-light: #161f32;
+  --vp-c-black-lighter: #262a44;
+
+  --c-green-light: #8ae99c;
+  --c-green: #52ce63;
+  --c-green-dark: #51a256;
+  --c-green-darker: #316334;
+
+  --vp-c-text-dark-1: #d9e6eb;
+  --vp-c-text-dark-2: #c4dde6;
+  --vp-c-text-dark-3: #abc4cc;
+  --c-text-light-1: #2c3e50;
+  --c-text-light-2: #476582;
+  --c-text-light-3: #90a4b7;
+  /* #f9fafb */
+
+  /* light theme is a bit different */
+  --vp-c-brand: var(--c-green-darker);
+  --vp-c-brand-light: var(--c-green);
+  --vp-c-brand-lighter: var(--c-blue-lighter);
+  --vp-c-brand-lightest: var(--c-blue-lighter);
+
+  --vp-c-brand-dark: var(--c-green-dark);
+  --vp-c-brand-darker: var(--c-green-darker);
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+  --vp-c-brand-text: var(--c-text-light-1);
+  --c-bg-accent: var(--c-white-dark);
+
+  --vp-code-block-bg: #0d121b;
+  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.075);
+}
+
+html.dark:root {
+  --vp-c-brand: var(--c-blue);
+  --vp-c-brand-dark: var(--c-blue-dark);
+  --vp-c-brand-darker: var(--c-blue-darker);
+  --vp-c-brand-light: var(--c-blue-light);
+
+  --vp-c-bg-alpha-with-backdrop: rgba(20, 25, 36, 0.7);
+  --vp-c-bg-alpha-without-backdrop: rgba(20, 25, 36, 0.9);
+
+  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
+
+  --vp-c-text: var(--c-text-dark-1);
+  --vp-c-brand-text: var(--c-text-light-1);
+  --c-text-light: var(--c-text-dark-2);
+  --c-text-lighter: var(--c-text-dark-3);
+  --c-divider: var(--c-divider-dark);
+  --c-bg-accent: var(--vp-c-black-light);
+
+  --vp-c-bg: var(--vp-c-black);
+  --vp-c-bg-soft: var(--vp-c-black-light);
+  --vp-c-bg-soft-up: var(--vp-c-black-lighter);
+  --vp-c-bg-mute: var(--vp-c-black-light);
+  --vp-c-bg-soft-mute: var(--vp-c-black-lighter);
+  --vp-c-bg-alt: #0d121b;
+  --vp-c-bg-elv: var(--vp-c-bg-soft);
+  --vp-c-bg-elv-mute: var(--vp-c-bg-soft-mute);
+  --vp-c-mute: var(--vp-c-bg-mute);
+  --vp-c-mute-dark: var(--vp-c-black-lighter);
+  --vp-c-mute-darker: var(--vp-c-black-darker);
+
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    78deg,
+    var(--c-blue) 30%,
+    var(--c-green-light)
+  );
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-bg: var(--c-teal-light);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-bg: var(--c-teal);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-bg: var(--c-teal-light);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(
+    292deg,
+    var(--c-green-dark) 50%,
+    var(--c-green-light)
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    15deg,
+    var(--c-green-light) 65%,
+    var(--c-blue) 30%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+/**
+ * Component: Header
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-layout-max-width: 100%;
+}
+
+/**
+ * Component: plugins
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-nolebase-enhanced-readabilities-spotlight-under-bg-color: rgb(147 228 213 / 10%);
+}
+
+.VPHero .VPImage.image-src {
+  max-height: 192px;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+  .VPHero .VPImage.image-src {
+    max-height: 256px;
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+  .VPHero .VPImage.image-src {
+    max-height: 320px;
+  }
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+html.dark .DocSearch,
+html.dark .DocSearch-Modal {
+  /* --docsearch-text-color: var(--c-white-dark); */
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: var(--vp-c-black);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  /* --docsearch-searchbox-background: var(--c-black-lighter); */
+  /* --docsearch-searchbox-focus-background: var(--c-black-light); */
+  --docsearch-hit-color: var(--c-text-dark-1);
+  --docsearch-hit-active-color: var(--c-text-light-1);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: var(--vp-c-black-light);
+  --docsearch-footer-background: var(--vp-c-black-light);
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+  --docsearch-logo-color: var(--vp-c-brand);
+  --docsearch-muted-color: var(--c-text-light-3);
+}
+
+html.dark .DocSearch-Logo svg .cls-1,
+html.dark .DocSearch-Logo svg .cls-2 {
+  fill: var(--vp-c-brand);
+}
+
+.become-sponsor {
+  font-size: 0.9em;
+  font-weight: 700;
+  width: auto;
+  text-align: center;
+  background-color: transparent;
+  padding: 0.75em 2em;
+  border-radius: 2em;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  border: 2px solid var(--c-blue-dark);
+}
+
+.become-sponsor:hover {
+  background-color: var(--c-blue);
+  text-decoration: none;
+  border-color: var(--c-blue);
+  color: var(--c-text-light-1);
+}
+
+.sponsors-top .become-sponsor {
+  font-size: 0.75em;
+  padding: 0.2em;
+  width: auto;
+  max-width: 150px;
+}
+
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 0.65em;
+  color: var(--vp-c-text-1);
+  vertical-align: middle;
+  background-color: var(--vp-c-bg-mute);
+  border: solid 1px var(--vp-c-bg-soft-mute);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 var(--vp-c-bg-soft-mute);
+  line-height: 0.95em;
+}
+
+.VPSocialLinks.VPNavBarSocialLinks.social-links {
+  margin-right: 0;
+}
+
+/**
+ * Component: MediumZoom
+ * -------------------------------------------------------------------------- */
+.medium-zoom-overlay {
+  z-index: 20;
+}
+
+.medium-zoom-image {
+  z-index: 21;
+}

works/generator/vitepress/vitepress.generator.js

@@ -2,8 +2,8 @@ import configurations from "../../../configurations.js"
 import { vitePressConfigJs } from "../../template/index.js"
 import { JUEJIN_USER_URL } from "../../website/juejin.js"
 import { replaceKeywords } from "../../utils/template-process.js"
-import { writeFileSync } from "fs"
-import { CONFIG_FILE_PATH } from "../../../build/config.base.js"
+import { writeFileSync, cp } from "fs"
+import { CONFIG_FILE_PATH, THEME_FILE_PATH, THEME_SET_FILE_PATH } from "../../../build/config.base.js"
 import { mkDir } from "../../utils/file-process.js"
 
 const NAV_LINKS = {
@@ -99,3 +99,10 @@ export const processVitePressConfig = async (annualList) => {
     console.log("vitepress config 写入成功~")
   })
 }
+
+export const processVitePressTheme = async () => {
+  await cp(THEME_SET_FILE_PATH, THEME_FILE_PATH, { recursive: true }, (err) => {
+    if (err) throw err
+    console.log("vitepress theme 复制成功~")
+  })
+}

works/index.js

@@ -1,16 +1,18 @@
-import { processColumnsOverview, processVitePressConfig } from "./generator/index.js"
+import { processColumnsOverview, processVitePressConfig, processVitePressTheme } from "./generator/index.js"
 import { processVitePressIndexMD } from "./generator/index.js"
 import { processOverviewMD } from "./generator/index.js"
 
+//
+await processVitePressIndexMD()
+
+await processOverviewMD()
+
+await processColumnsOverview()
 
+// 生成 vitepress 配置
 await processVitePressConfig([
   { text: 'Item A', link: '/item-1' },
   { text: 'Item B', link: '/item-2' },
   { text: 'Item C', link: '/item-3' }
 ])
-//
-// await processVitePressIndexMD()
-//
-// await processOverviewMD()
-
-await processColumnsOverview()
+await processVitePressTheme()