@sugarat/theme 0.1.42 → 0.1.43

package/node.d.ts

@@ -208,8 +208,15 @@ declare namespace Theme {
         topTitle?: string;
         list: UserWork[];
     }
+    type ThemeColor = 'vp-default' | 'vp-green' | 'vp-yellow' | 'vp-red' | 'el-blue' | 'el-yellow' | 'el-green' | 'el-red';
     interface BlogConfig {
         blog?: false;
+        /**
+         * 内置一些主题色
+         * @default 'vp-default'
+         * 也可以自定义颜色，详见 TODO：文档
+         */
+        themeColor?: ThemeColor;
         pagesData: PageData[];
         srcDir?: string;
         author?: string;

package/node.js

@@ -32,7 +32,7 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.4_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.11_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -51,7 +51,7 @@
     "sass": "^1.56.1",
     "tsup": " ^6.5.0",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.4",
+    "vitepress": "1.0.0-rc.11",
     "vitepress-plugin-tabs": "^0.2.0",
     "vue": "^3.3.4"
   },

package/src/components/BlogApp.vue

@@ -24,6 +24,7 @@ const { Layout } = Theme
     </template>
 
     <template #doc-before>
+      <slot name="doc-before" />
       <!-- 阅读时间分析 -->
       <ClientOnly>
         <BlogArticleAnalyze />
@@ -34,10 +35,12 @@ const { Layout } = Theme
 
     <!-- 自定义搜索，替代Algolia，未来择机移除 -->
     <template #nav-bar-content-before>
+      <slot name="nav-bar-content-before" />
       <BlogSearch />
     </template>
     <!-- 自定义首页 -->
     <template #home-hero-before v-if="isBlogTheme">
+      <slot name="home-hero-before" />
       <div class="home">
         <div class="header-banner">
           <BlogHomeBanner />
@@ -51,12 +54,66 @@ const { Layout } = Theme
       </div>
     </template>
     <template #sidebar-nav-after v-if="isBlogTheme">
+      <slot name="sidebar-nav-after" />
       <BlogSidebar />
     </template>
     <!-- 评论 -->
     <template #doc-after>
+      <slot name="doc-after" />
       <BlogComment />
     </template>
+
+    <!-- 透传默认主题的其它插槽 -->
+    <!-- navbar -->
+    <template #nav-bar-title-before
+      ><slot name="nav-bar-title-before"
+    /></template>
+    <template #nav-bar-title-after
+      ><slot name="nav-bar-title-after"
+    /></template>
+    <template #nav-bar-content-after
+      ><slot name="nav-bar-content-after"
+    /></template>
+    <template #nav-screen-content-before
+      ><slot name="nav-screen-content-before"
+    /></template>
+    <template #nav-screen-content-after
+      ><slot name="nav-screen-content-after"
+    /></template>
+
+    <!-- sidebar -->
+    <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
+
+    <!-- content -->
+    <template #page-top><slot name="page-top" /></template>
+    <template #page-bottom><slot name="page-bottom" /></template>
+
+    <template #not-found><slot name="not-found" /></template>
+    <template #home-hero-info><slot name="home-hero-info" /></template>
+    <template #home-hero-image><slot name="home-hero-image" /></template>
+    <template #home-hero-after><slot name="home-hero-after" /></template>
+    <template #home-features-before
+      ><slot name="home-features-before"
+    /></template>
+    <template #home-features-after
+      ><slot name="home-features-after"
+    /></template>
+
+    <template #doc-footer-before><slot name="doc-footer-before" /></template>
+
+    <template #doc-top><slot name="doc-top" /></template>
+    <template #doc-bottom><slot name="doc-bottom" /></template>
+
+    <template #aside-top><slot name="aside-top" /></template>
+    <template #aside-bottom><slot name="aside-bottom" /></template>
+    <template #aside-outline-before
+      ><slot name="aside-outline-before"
+    /></template>
+    <template #aside-outline-after
+      ><slot name="aside-outline-after"
+    /></template>
+    <template #aside-ads-before><slot name="aside-ads-before" /></template>
+    <template #aside-ads-after><slot name="aside-ads-after" /></template>
   </Layout>
 </template>
 <style scoped lang="scss">

package/src/components/BlogArticleAnalyze.vue

@@ -206,7 +206,7 @@ watch(
   .link {
     color: var(--vp-c-text-2);
     &:hover {
-      color: var(--vp-c-brand);
+      color: var(--vp-c-brand-1);
       cursor: pointer;
     }
   }

package/src/components/BlogComment.vue

@@ -43,9 +43,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useDark, useElementVisibility } from '@vueuse/core'
+import { useElementVisibility } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { ElAffix, ElButton } from 'element-plus'
 import { Comment } from '@element-plus/icons-vue'
 import { useGiscusConfig } from '../composables/config/blog'
@@ -85,9 +85,7 @@ const show = computed(() => {
   )
 })
 
-const isDark = useDark({
-  storageKey: 'vitepress-theme-appearance'
-})
+const { isDark } = useData()
 
 const route = useRoute()
 const showComment = ref(true)
@@ -103,12 +101,30 @@ watch(
     immediate: true
   }
 )
+
+// TODO：可以优化，不需要重载
+watch(isDark, () => {
+  showComment.value = false
+  nextTick(() => {
+    showComment.value = true
+  })
+})
 </script>
 <style scoped lang="scss">
 .comment {
   width: 100%;
   text-align: center;
   padding: 40px 0;
+  :deep(.el-button.el-button--primary:hover) {
+    background-color: var(--vp-c-brand-2);
+    border-color: var(--vp-c-brand-2);
+    color: #fff;
+  }
+  :deep(.el-button.el-button--primary) {
+    background-color: var(--vp-c-brand-soft);
+    border-color: var(--vp-c-brand-2);
+    color: var(--vp-c-brand-2);
+  }
 }
 
 .hidden {

package/src/components/BlogHotArticle.vue

@@ -138,7 +138,7 @@ const showChangeBtn = computed(() => {
     }
 
     &:nth-child(3) .num {
-      background-color: #409eff;
+      background-color: var(--vp-c-brand-2);
       color: #fff;
       font-size: 12px;
       border-radius: 6px;

package/src/components/BlogList.vue

@@ -16,17 +16,19 @@
   </ul>
   <!-- 解决element-ui bug -->
   <ClientOnly>
-    <el-pagination
-      v-if="wikiList.length >= pageSize"
-      small
-      background
-      :default-current-page="1"
-      :current-page="currentPage"
-      @update:current-page="handleUpdatePageNum"
-      :page-size="pageSize"
-      :total="filterData.length"
-      layout="prev, pager, next, jumper"
-    />
+    <div class="el-pagination-wrapper">
+      <el-pagination
+        v-if="wikiList.length >= pageSize"
+        small
+        background
+        :default-current-page="1"
+        :current-page="currentPage"
+        @update:current-page="handleUpdatePageNum"
+        :page-size="pageSize"
+        :total="filterData.length"
+        layout="prev, pager, next, jumper"
+      />
+    </div>
   </ClientOnly>
 </template>
 <script setup lang="ts">
@@ -116,3 +118,20 @@ watch(
   }
 )
 </script>
+<style lang="scss" scoped>
+.el-pagination-wrapper {
+  :deep(.el-pagination li.is-active.number) {
+    background-color: var(--vp-c-brand-2);
+  }
+  :deep(.el-pagination button:hover) {
+    color: var(--vp-c-brand-2);
+  }
+
+  :deep(.el-pager li:not(.is-active):hover) {
+    color: var(--vp-c-brand-2);
+  }
+  :deep(.el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 1px var(--vp-c-brand-2) inset;
+  }
+}
+</style>

package/src/components/BlogPopover.vue

@@ -132,16 +132,21 @@ const PopoverValue = (
 
 <style lang="scss" scoped>
 .theme-blog-popover {
+  color: rgba(60, 60, 67);
   width: 258px;
   position: fixed;
   top: 80px;
   right: 20px;
   z-index: 19;
   box-sizing: border-box;
-  border: 1px solid var(--el-color-primary-light-3);
+  border: 1px solid var(--vp-c-brand-3);
   border-radius: 6px;
   background-color: rgba(var(--bg-gradient-home));
   box-shadow: var(--box-shadow);
+  :deep(.el-button.el-button--primary) {
+    background-color: var(--vp-c-brand-2);
+    border-color: var(--vp-c-brand-2);
+  }
 }
 @media screen and (min-width: 760px) and (max-width: 1140px) {
   .theme-blog-popover {
@@ -149,7 +154,7 @@ const PopoverValue = (
   }
 }
 .header {
-  background-color: var(--el-color-primary-light-3);
+  background-color: var(--vp-c-brand-3);
   color: #fff;
   padding: 6px 4px;
   display: flex;
@@ -207,7 +212,7 @@ const PopoverValue = (
   top: 80px;
   right: 10px;
   position: fixed;
-  background-color: var(--el-color-primary-light-3);
+  background-color: var(--vp-c-brand-3);
   padding: 8px;
   color: #fff;
   font-size: 12px;

package/src/components/BlogRecommendArticle.vue

@@ -191,7 +191,7 @@ const showChangeBtn = computed(() => {
       word-break: break-all;
       white-space: break-spaces;
       &.current {
-        color: var(--vp-c-brand);
+        color: var(--vp-c-brand-1);
       }
     }
 

package/src/components/BlogSearch.vue

@@ -362,7 +362,7 @@ const handleSelect = (target: any) => {
     }
 
     &:hover {
-      border: 1px solid var(--vp-c-brand);
+      border: 1px solid var(--vp-c-brand-1);
       border-radius: 6px;
     }
 
@@ -406,7 +406,7 @@ div[command-item] {
   }
   div[command-item] mark {
     background: none;
-    color: var(--vp-c-brand);
+    color: var(--vp-c-brand-1);
   }
 
   div[command-item][aria-selected='true'] mark,

package/src/components/UserWorks.vue

@@ -376,7 +376,7 @@ const handleChooseTag = (tag: string) => {
   }
   a {
     font-weight: 500;
-    color: var(--vp-c-brand);
+    color: var(--vp-c-brand-1);
   }
 }
 .works-container {

package/src/composables/config/blog.ts

@@ -13,6 +13,7 @@ import {
   reactive,
   ref
 } from 'vue'
+import { useColorMode } from '@vueuse/core'
 
 import type { Theme } from './index'
 
@@ -21,22 +22,13 @@ const configSymbol: InjectionKey<Ref<Theme.Config>> = Symbol('theme-config')
 const activeTagSymbol: InjectionKey<Ref<Theme.activeTag>> = Symbol('active-tag')
 
 const currentPageNum: InjectionKey<Ref<number>> = Symbol('home-page-num')
-const homeConfigSymbol: InjectionKey<Theme.HomeConfig> = Symbol('home-config')
 
 const userWorks: InjectionKey<Ref<Theme.UserWorks>> = Symbol('user-works')
 
 export function withConfigProvider(App: Component) {
   return defineComponent({
     name: 'ConfigProvider',
-    props: {
-      handleChangeSlogan: {
-        type: Function,
-        required: false
-      }
-    },
-    setup(props, { slots }) {
-      provide(homeConfigSymbol, props as Theme.HomeConfig)
-
+    setup(_, { slots }) {
       const { theme } = useData()
       const config = computed(() => resolveConfig(theme.value))
       provide(configSymbol, config)
@@ -59,6 +51,22 @@ export function withConfigProvider(App: Component) {
 
       const pageNum = ref(1)
       provide(currentPageNum, pageNum)
+
+      const mode = useColorMode({
+        attribute: 'theme',
+        modes: {
+          // 内置的颜色主题
+          'vp-default': 'vp-default',
+          'vp-green': 'vp-green',
+          'vp-yellow': 'vp-yellow',
+          'vp-red': 'vp-red',
+          'el-blue': 'el-blue',
+          'el-yellow': 'el-yellow',
+          'el-green': 'el-green',
+          'el-red': 'el-red'
+        }
+      })
+      mode.value = config.value.blog?.themeColor ?? 'vp-default'
       return () => h(App, null, slots)
     }
   })
@@ -77,9 +85,6 @@ export function useBlogConfig() {
 export function useBlogThemeMode() {
   return inject(configSymbol)!.value?.blog?.blog ?? true
 }
-export function useHomeConfig() {
-  return inject(homeConfigSymbol)!
-}
 
 export function useGiscusConfig() {
   const blogConfig = useConfig()

package/src/composables/config/index.ts

@@ -228,8 +228,23 @@ export namespace Theme {
     topTitle?: string
     list: UserWork[]
   }
+  export type ThemeColor =
+    | 'vp-default'
+    | 'vp-green'
+    | 'vp-yellow'
+    | 'vp-red'
+    | 'el-blue'
+    | 'el-yellow'
+    | 'el-green'
+    | 'el-red'
   export interface BlogConfig {
     blog?: false
+    /**
+     * 内置一些主题色
+     * @default 'vp-default'
+     * 也可以自定义颜色，详见 TODO：文档
+     */
+    themeColor?: ThemeColor
     pagesData: PageData[]
     srcDir?: string
     author?: string

package/src/index.ts

@@ -14,6 +14,9 @@ import { withConfigProvider } from './composables/config/blog'
 import TimelinePage from './components/TimelinePage.vue'
 import UserWorksPage from './components/UserWorks.vue'
 
+// 内置一些特殊的主题色
+import './styles/theme/inline-theme.var.css'
+
 export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),

package/src/styles/index.scss

@@ -8,7 +8,8 @@ html {
   --nav-bgc: rgba(255, 255, 255, 0.9);
   --badge-font-color: #4e5969;
   --description-font-color: #86909c;
-  --blog-theme-color: #409eff;
+  --blog-theme-color: var(--vp-c-brand-1);
+  // --blog-theme-color: #409eff;
 }
 
 html[class='dark'] {
@@ -105,8 +106,8 @@ html[class='dark'] {
 }
 
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 4px;
+  height: 4px;
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -114,13 +115,13 @@ html[class='dark'] {
 }
 
 ::-webkit-scrollbar-thumb:vertical {
-  height: 5px;
+  height: 4px;
   border-radius: 4px;
-  background-color: var(--el-color-primary);
+  background-color: var(--vp-c-brand-1);
 }
 
 ::-webkit-scrollbar-thumb:horizontal {
-  width: 5px;
+  width: 4px;
   border-radius: 4px;
-  background-color: var(--el-color-primary);
+  background-color: var(--vp-c-brand-1);
 }

package/src/styles/scss/global.scss

@@ -24,7 +24,7 @@ ul {
 
   --lowContrast: #ffffff;
   --highContrast: #000000;
-  --vcp-c-brand: #44bd87;
+  --vcp-c-brand: var(--vp-c-brand-2);
   --vcp-c-accent: #35495e;
 
   --gray1: hsl(0, 0%, 98%);

package/src/styles/theme/inline-theme.var.css

@@ -0,0 +1,56 @@
+/* 所有变量：https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+
+/* VitePress 绿色 */
+html[theme="vp-green"] {
+  --vp-c-brand-1: var(--vp-c-green-1);
+  --vp-c-brand-2: var(--vp-c-green-2);
+  --vp-c-brand-3: var(--vp-c-green-3);
+  --vp-c-brand-soft: var(--vp-c-green-soft);
+}
+/* VitePress 黄色 */
+html[theme="vp-yellow"]{
+  --vp-c-brand-1: var(--vp-c-yellow-1);
+  --vp-c-brand-2: var(--vp-c-yellow-2);
+  --vp-c-brand-3: var(--vp-c-yellow-3);
+  --vp-c-brand-soft: var(--vp-c-yellow-soft);
+}
+
+/* VitePress 红色 */
+html[theme="vp-red"]{
+  --vp-c-brand-1: var(--vp-c-red-1);
+  --vp-c-brand-2: var(--vp-c-red-2);
+  --vp-c-brand-3: var(--vp-c-red-3);
+  --vp-c-brand-soft: var(--vp-c-red-soft);
+}
+
+/* element plus 蓝色 */
+html[theme="el-blue"]{
+  --vp-c-brand-1: var(--el-color-primary);
+  --vp-c-brand-2: var(--el-color-primary-light-3);
+  --vp-c-brand-3: var(--el-color-primary-light-5);
+  --vp-c-brand-soft: var(--el-color-primary-light-9);
+}
+
+/* element plus 绿色 */
+html[theme="el-green"]{
+  --vp-c-brand-1: var(--el-color-success);
+  --vp-c-brand-2: var(--el-color-success-light-3);
+  --vp-c-brand-3: var(--el-color-success-light-5);
+  --vp-c-brand-soft: var(--el-color-success-light-9);
+}
+
+/* element plus 黄色 */
+html[theme="el-yellow"]{
+  --vp-c-brand-1: var(--el-color-warning);
+  --vp-c-brand-2: var(--el-color-warning-light-3);
+  --vp-c-brand-3: var(--el-color-warning-light-5);
+  --vp-c-brand-soft: var(--el-color-warning-light-9);
+}
+
+/* element plus 红色 */
+html[theme="el-red"]{
+  --vp-c-brand-1: var(--el-color-danger);
+  --vp-c-brand-2: var(--el-color-danger-light-3);
+  --vp-c-brand-3: var(--el-color-danger-light-5);
+  --vp-c-brand-soft: var(--el-color-danger-light-9);
+}