feat v1.0.1

open17 · Aug 13, 2023 · ea88b3d · ea88b3d
1 parent 656540f
commit ea88b3d
Show file tree

Hide file tree

Showing 40 changed files with 279 additions and 291 deletions.
diff --git a/README.md b/README.md
@@ -15,13 +15,15 @@
 🍉 A easy,book-style theme for Vuepress site 
 
 ## Features
-- Out of the box (supports most default theme configurations)
+- Easy config (supports most default theme configurations)
 - Katex support
 - Table of contents feature
 - Code highlighting, copying
 - To-do
 - Highlighter
 - Full-text search
+- Back to top
+- light/dark mode
 - ...
 
 ## Demo & Doc

diff --git a/README_cn.md b/README_cn.md
@@ -22,6 +22,8 @@
 - To-do
 - 荧光笔
 - 全文搜索
+- 返回顶部
+- 白天/黑夜模式
 - ...
 
 

diff --git a/components/SlideBar.vue b/components/SlideBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar h-screen fixed w-56 z-20 bg-white border-r-2 py-10 overflow-scroll">
+  <div class="sidebar h-screen fixed w-56 z-20 bg-white dark:bg-gray-800 border-r-2 py-10 overflow-scroll">
     <ul>
       <li
         v-for="(header, index) in headers"
@@ -11,15 +11,16 @@
         "
         :class="{
           'text-blue-500': index == activeIdx,
-          'text-gray-600': index != activeIdx && header.level == 2,
+          'text-gray-600 dark:text-gray-400': index != activeIdx && header.level == 2,
         }"
       >
         <a
           :href="`#${header.slug}`"
-          class="block py-1 px-2  hover:text-blue-500"
+          class="block py-1 px-2 hover:text-blue-500 dark:hover:text-blue-400"
           :class="{
-          'font-extrabold py-2': header.level == 2,
-        }"
+            'font-extrabold py-2': header.level == 2,
+            'dark:text-gray-500': header.level != 2
+          }"
           :style="{ 'padding-left': `${(header.level - 1) * 1.25 }rem`,'font-size': `${17 - header.level*1}px` }"
         >
           {{ header.title }}
@@ -32,6 +33,7 @@
 
 
 
+
 <script>
 export default {
   props: {
@@ -78,54 +80,4 @@ export default {
 
 
 <style scoped>
-/* .sidebar {
-  display: block;
-  width: 15vw;
-  height: 100vh;
-  overflow-y: auto;
-  padding-left: 1vw;
-  background-color: #556270;
-  position: fixed;
-  top: 5vh;
-}
-
-.sidebar ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.sidebar li {
-  text-decoration: none;
-}
-
-.sidebar a {
-  margin: 1vh 0;
-  color: #dfe5eb;
-  display: block;
-  padding: 0.5vw;
-  padding-left: 3vw;
-  text-decoration: none;
-}
-.sidebar li:hover a {
-  color: #59e9df;
-}
-
-.sidebar li:hover {
-  outline: none;
-  position: relative;
-}
-
-.unactive a::after {
-  content: "";
-  position: relative;
-  left: 0vw;
-  top: 0vh;
-}
-.active a::after {
-  content: "";
-  position: relative;
-  left: 0vw;
-  top: 0vh;
-} */
 </style>
diff --git a/components/TopBar.vue b/components/TopBar.vue
@@ -1,27 +1,31 @@
 <template>
   <div
-    class="flex items-center justify-between border-b-2 w-full px-5 fixed bg-white z-50"
+    class="flex items-center justify-between border-b-2 w-full px-5 fixed bg-white dark:bg-gray-800 z-50"
   >
     <div class="flex items-center text-xl space-x-2">
       <img v-if="imageURL" :src="imageURL" alt="" class="h-10 w-10" />
       <!-- <div v-html="NavIcon"></div> -->
-      <span class="font-bold">{{ NavTitle }}</span>
+      <span class="font-bold text-gray-900 dark:text-gray-100">{{
+        NavTitle
+      }}</span>
     </div>
     <div class="flex items-center justify-end space-x-1">
       <SearchBox />
       <el-menu
         :default-active="activeIndex"
-        class="text-black"
         mode="horizontal"
         :router="true"
         @select="handleSelect"
+            :background-color="isDarkMode ? 'rgba(31, 41, 55, var(--tw-bg-opacity))' : '#fff'"
+            :text-color="isDarkMode ? '#fff' : '#000'"
+            :active-text-color="isDarkMode ? '#ffd04b' : '#409EFF'"
       >
         <template v-for="(NavLink, index) in NavLinkGroup">
           <el-menu-item
             :index="NavLink.link"
             :key="index"
             v-if="NavLink.link"
-            class="text-black"
+
             >{{ NavLink.text }}</el-menu-item
           >
           <template v-else>
@@ -41,6 +45,7 @@
   </div>
 </template>
 
+
 <script>
 import SearchBox from "@SearchBox";
 export default {
@@ -52,6 +57,7 @@ export default {
       activeIndex: "/",
       NavTitle: "Vuepress Theme QBook",
       NavLinkGroup: [],
+      isDarkMode: false,
     };
   },
   methods: {
@@ -62,15 +68,29 @@ export default {
   mounted() {
     if (this.$themeConfig.NavTitle) this.NavTitle = this.$themeConfig.NavTitle;
     this.NavLinkGroup = this.$themeConfig.nav;
+    this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
   },
   computed: {
     imageURL() {
-      if(this.$themeConfig.logo)return this.$withBase(this.$themeConfig.logo);
+      if (this.$themeConfig.logo) return this.$withBase(this.$themeConfig.logo);
       return null;
     },
   },
 };
 </script>
 
 <style>
+.el-menu-item:hover{
+  background: transparent !important;
+}
+.el-submenu__title:hover{
+  background: transparent !important;
+}
+.el-menu--popup li{
+  color: black !important;
+  background-color: #fff !important;
+}
+.el-menu--popup li:hover{
+  background-color: #fff !important;
+}
 </style>
diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
@@ -3,7 +3,7 @@ const path = require('path')
 module.exports = {
   theme: path.resolve(__dirname, '../../'),
   // Fill in the webpage title in title
-  title: 'your-title',
+  title: 'vuepress-theme-qbook',
   base: "/vuepress-theme-qbook/",
   markdown: {
     extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6']

diff --git a/example/.vuepress/dist/404.html b/example/.vuepress/dist/404.html
@@ -3,16 +3,16 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>your-title</title>
+    <title>vuepress-theme-qbook</title>
     <meta name="generator" content="VuePress 1.9.9">
 
     <meta name="description" content="">
 
-    <link rel="preload" href="/vuepress-theme-qbook/assets/css/0.styles.77951101.css" as="style"><link rel="preload" href="/vuepress-theme-qbook/assets/js/app.c5667ffe.js" as="script"><link rel="preload" href="/vuepress-theme-qbook/assets/js/4.defe6798.js" as="script"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/10.f408ddf8.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/2.29b52389.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/3.036aff61.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/5.675acf2c.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/6.61d85705.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/7.08c5b4d7.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/8.276c0dc5.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/9.4b53a2f0.js">
-    <link rel="stylesheet" href="/vuepress-theme-qbook/assets/css/0.styles.77951101.css">
+    <link rel="preload" href="/vuepress-theme-qbook/assets/css/0.styles.9e461964.css" as="style"><link rel="preload" href="/vuepress-theme-qbook/assets/js/app.c2505dc2.js" as="script"><link rel="preload" href="/vuepress-theme-qbook/assets/js/4.7aa1d4f2.js" as="script"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/10.a9c553e7.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/11.e4b02f1a.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/2.088d98da.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/3.ccf4815b.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/5.b4a3da2d.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/6.ca9777c0.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/7.1820057f.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/8.c28ebf27.js"><link rel="prefetch" href="/vuepress-theme-qbook/assets/js/9.366db3da.js">
+    <link rel="stylesheet" href="/vuepress-theme-qbook/assets/css/0.styles.9e461964.css">
   </head>
   <body>
     <div id="app" data-server-rendered="true"><div><main class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8"><div class="text-center"><div class="flex items-center mt-4 text-3xl font-bold tracking-tight sm:text-5xl space-x-4"><h1 class="text-indigo-500">404</h1> <h1 class="text-gray-900">Page not found</h1></div> <div class="el-empty"><div class="el-empty__image" style="width:200px;"><svg viewBox="0 0 79 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient-1-1" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#EEEFF3" offset="100%"></stop></linearGradient><linearGradient id="linearGradient-2-1" x1="0%" y1="9.5%" x2="100%" y2="90.5%"><stop stop-color="#FCFCFD" offset="0%"></stop><stop stop-color="#E9EBEF" offset="100%"></stop></linearGradient><rect id="path-3-1" x="0" y="0" width="17" height="36"></rect></defs><g id="Illustrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="B-type" transform="translate(-1268.000000, -535.000000)"><g id="Group-2" transform="translate(1268.000000, 535.000000)"><path id="Oval-Copy-2" d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" fill="#F7F8FC"></path><polygon id="Rectangle-Copy-14" fill="#E5E7E9" transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " points="13 58 53 58 42 45 2 45"></polygon><g id="Group-Copy" transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"><polygon id="Rectangle-Copy-10" fill="#E5E7E9" transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " points="2.84078316e-14 3 18 3 23 7 5 7"></polygon><polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon><rect id="Rectangle-Copy-12" fill="url(#linearGradient-1-1)" transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " x="38" y="7" width="17" height="36"></rect><polygon id="Rectangle-Copy-13" fill="#F8F9FB" transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"></polygon></g><rect id="Rectangle-Copy-15" fill="url(#linearGradient-2-1)" x="13" y="45" width="40" height="36"></rect><g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)"><mask id="mask-4-1" fill="white"><use xlink:href="#path-3-1"></use></mask><use id="Mask" fill="#E0E3E9" transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " xlink:href="#path-3-1"></use><polygon id="Rectangle-Copy" fill="#D5D7DE" mask="url(#mask-4-1)" transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) " points="7 0 24 0 20 18 -1.70530257e-13 16"></polygon></g><polygon id="Rectangle-Copy-18" fill="#F8F9FB" transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " points="62 45 79 45 70 58 53 58"></polygon></g></g></g></svg></div><div class="el-empty__description"><p>Sorry, we couldn’t find the page you’re looking for.</p></div><!----></div> <div class="mt-10 flex items-center justify-center gap-x-6"><a href="/vuepress-theme-qbook/" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Go back home</a> <a href="https://github.com/open17/vuepress-theme-qbook/issues" target="_blank" class="text-sm font-semibold text-gray-900">Report it<span aria-hidden="true">→</span></a></div></div></main></div><div class="global-ui"></div></div>
-    <script src="/vuepress-theme-qbook/assets/js/app.c5667ffe.js" defer></script><script src="/vuepress-theme-qbook/assets/js/4.defe6798.js" defer></script>
+    <script src="/vuepress-theme-qbook/assets/js/app.c2505dc2.js" defer></script><script src="/vuepress-theme-qbook/assets/js/4.7aa1d4f2.js" defer></script>
   </body>
 </html>
diff --git a/example/.vuepress/dist/assets/css/0.styles.77951101.css b/example/.vuepress/dist/assets/css/0.styles.77951101.css
diff --git a/example/.vuepress/dist/assets/css/0.styles.9e461964.css b/example/.vuepress/dist/assets/css/0.styles.9e461964.css