style: blog layout

rockbenben · Sep 21, 2024 · 1b69734 · 1b69734
1 parent 28cc7c7
commit 1b69734
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 36 deletions.
diff --git a/docs/.vuepress/styles/palette.scss b/docs/.vuepress/styles/palette.scss
@@ -4,40 +4,39 @@ https://moonvy.com/blog/post/2022/diffusion-accelerates-diffusion/#%E7%BB%98%E7%
 代码来源：https://theme-hope.vuejs.press/zh/config/style.html
 */
 
-$text-color: (
-  light: #2c3e50,
-  dark: #b0aeb7,
+$vp-c-text: (
+  light: rgb(60 60 67),
+  dark: rgb(235 235 245 / 70%),
+);
+
+$vp-navbar: (
+  light: #fff,
+  dark: #252232,
 );
 
 // content
-$bg-color: (
+$vp-c-bg: (
   light: #fff,
   dark: #252232,
 );
 
-$bg-color-secondary: (
-  light: #f8f8f8,
+$vp-c-bg-alt: (
+  light: #f6f6f7,
   dark: #2c293d,
 );
 
-$bg-color-tertiary: (
-  light: #efeef4,
-  dark: #3a3755,
+$vp-c-bg-elv: (
+  light: #fff,
+  dark: #252232,
 );
 
 // 边框
-$border-color: (
-  light: #eaecef,
+$vp-c-border: (
+  light: #c2c2c4,
   dark: #302d28,
 );
 
-// shadow
-$box-shadow: (
-  light: #f0f1f2,
-  dark: #282a32,
-);
-
-$card-shadow: (
-  light: rgb(0 0 0 / 15%),
-  dark: rgb(0 0 0 / 30%),
+$vp-c-gutter: (
+  light: #e2e2e3,
+  dark: #191722,
 );
diff --git a/docs/.vuepress/templateBuild.html b/docs/.vuepress/templateBuild.html
@@ -1,27 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="{{ lang }}" data-theme="{{ themeMode }}">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="keywords" content="自我提升,效率提升,开源工具,学习笔记" />
     <style>
-      html {
-        background: var(--bg-color, #fff);
+      :root {
+        --vp-c-bg: #fff;
       }
 
-      html[data-theme="dark"] {
-        background: var(--bg-color, #252232);
+      [data-theme="dark"] {
+        --vp-c-bg: #252232;
       }
 
+      html,
       body {
-        background: var(--bg-color);
+        background: var(--vp-c-bg);
       }
     </style>
     <script>
       const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
-      const systemDarkMode =
-        window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const systemDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
 
       if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
         document.documentElement.setAttribute("data-theme", "dark");

diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
@@ -148,23 +148,26 @@ export default hopeTheme({
       sub: true, // 上下角标
       sup: true,
       tasklist: true, // 任务列表
-      figure: true, // 启用 figure
-      imgLazyload: true, // 启用图片懒加载
-      // imgMark: true, // 启用图片标记
-      imgSize: true, // 启用图片大小
       include: true, //导入文件
       component: true, // 使用 component 代码块来在 Markdown 中添加组件
       footnote: true,
       // tabs: true, // 选项卡
-      alert: true, // GFM 警告
       attrs: true, // 使用特殊标记为 Markdown 元素添加属性
-      hint: true, // 提示容器
       mark: true, // 使用 == == 进行标记。请注意两边需要有空格。
       align: true, // 启用自定义对齐
       // codetabs: true, // 代码块分组
       // demo: true, //代码演示
     },
-
+    markdownImage: {
+      // mark: true, // 启用图片标记
+      lazyload: true, // 启用图片懒加载
+      size: true, // 启用图片大小
+      figure: true, // 启用图片 figure
+    },
+    markdownHint: {
+      alert: true, // GFM 警告
+      hint: true, // 提示容器
+    },
     // Algolia 全文搜索：需要自己设置爬虫并生成下方配置，如不会自己设置，启用下方本地搜索
     /* 
     docsearch: {