feat: 适配移动端侧边栏

app.config.ts

@@ -146,18 +146,20 @@ export default defineAppConfig({
 
     // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义>    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
     sidebar: "structuring",
+    sidebarHoverTriggerOpen: undefined,
 
     // 文章默认的作者信息，(可在md文件中单独配置此信息) string | {name: string, link?: string}
     author: {
-      name: "xugaoyi", // 必需
-      link: "https://github.com/xugaoyi", // 可选的
+      name: "terwer", // 必需
+      link: "https://github.com/terwer", // 可选的
     },
 
     // 博主信息 (显示在首页侧边栏)
     blogger: {
-      avatar: "https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg",
-      name: "Evan Xu",
-      slogan: "前端界的小学生",
+      avatar: "/img/photo.jpg",
+      name: "Terwer",
+      slogan: "一个后端老菜鸟",
+      social: undefined,
     },
 
     // 社交图标 (显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social)

assets/vdoing/styles/palette.styl

@@ -105,7 +105,7 @@ $lineNumbersWrapperWidth = 2.5rem
   --bodyBg rgba(245,245,213,1)
 
 // media媒介查询
-$MQMobile = 480px
+$MQMobile = 720px
 $MQNarrow = 720px
 
 $fontFamily = "Open Sans", "LXGW WenKai", "JetBrains Mono", "-apple-system", "Microsoft YaHei", "Times New Roman", "方正北魏楷书_GBK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

components/vdoing/Sidebar.vue

@@ -0,0 +1,123 @@
+<template>
+  <aside class="sidebar">
+    <div class="blogger" v-if="computes.blogger">
+      <img :src="computes.blogger.value.avatar" />
+      <div class="blogger-info">
+        <h3>{{ computes.blogger.value.name }}</h3>
+
+        <div class="icons" v-if="computes.blogger.value.social">
+          <a
+            v-for="(item, index) in computes.social.value.social.icons"
+            :href="item.link"
+            :title="item.title"
+            :class="['iconfont', item.iconClass]"
+            :key="index"
+            target="_blank"
+          ></a>
+        </div>
+        <span v-else>{{ computes.blogger.value.slogan }}</span>
+      </div>
+    </div>
+
+    <!-- 移动端Nav -->
+    <NavLinks />
+
+    <slot name="top" />
+
+    <!--
+    <SidebarLinks :depth="0" :items="props.items" />
+    -->
+    <!--
+    <slot name="bottom" />
+    -->
+  </aside>
+</template>
+
+<script setup lang="ts">
+import NavLinks from "~/components/vdoing/NavLinks.vue"
+
+// uses
+const appConfig = useAppConfig()
+
+// props
+const props = defineProps({
+  items: {
+    type: Object,
+    required: true,
+  },
+})
+
+// computes
+const computes = {
+  blogger: computed(() => {
+    return appConfig.themeConfig.blogger
+  }),
+}
+</script>
+
+<style lang="stylus">
+@require "../assets/vdoing/styles/index"
+
+.sidebar
+  ul
+    padding 0
+    margin 0
+    list-style-type none
+  a
+    display inline-block
+  .nav-links
+    display none
+    border-bottom 1px solid var(--borderColor)
+    padding 0.5rem 0 0.75rem 0
+    a
+      font-weight 600
+    .nav-item, .repo-link
+      display block
+      line-height 1.25rem
+      font-size 1.1em
+      padding 0.5rem 0 0.5rem 1.5rem
+  & > .sidebar-links
+    padding 1.5rem 0
+    & > li > a.sidebar-link
+      font-size 1.1em
+      line-height 1.7
+      font-weight bold
+    & > li:not(:first-child)
+      margin-top 0.75rem
+  .blogger
+    display none
+    border-bottom 1px solid var(--borderColor)
+    img
+      width 60px
+      height 60px
+      border-radius 5px
+      margin 0.75rem 1rem
+    .blogger-info
+      flex 1
+      padding 0 0.3rem 0.3rem 0
+      h3
+        margin 0.95rem 0 0.6rem
+        font-size 1.1rem
+      .icons .iconfont
+        font-size 1.2rem
+        padding-right 0.6rem
+        color #777
+  .sidebar-slot
+    margin-bottom -0.5rem
+    font-size 0.85rem
+    &.sidebar-slot-top
+      padding 1.5rem 1.5rem 0
+    &.sidebar-slot-bottom
+      padding 0 1.5rem 1.5rem
+@media (max-width $MQMobile)
+  .sidebar
+    display block
+    .blogger
+      display flex
+    .nav-links
+      display block
+      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
+        top calc(1rem - 2px)
+    & > .sidebar-links
+      padding 1rem 0
+</style>

layouts/vdoing.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="theme-container"
-    :class="computes.pageClasses"
+    :class="computes.pageClasses.value"
     @touchstart="methods.onTouchStart"
     @touchend="methods.onTouchEnd"
   >
@@ -12,18 +12,20 @@
 
     <div v-if="appConfig?.themeConfig?.sidebarHoverTriggerOpen !== false" class="sidebar-hover-trigger"></div>
 
-    <!--
-    <Sidebar :items="sidebarItems" @toggle-sidebar="methods.toggleSidebar" v-show="showSidebar">
+    <Sidebar :items="computes.sidebarItems" @toggle-sidebar="methods.toggleSidebar" v-show="datas.showSidebar">
+      <!--
       <template #top v-if="sidebarSlotTop">
         <div class="sidebar-slot sidebar-slot-top" v-html="sidebarSlotTop"></div>
       </template>
       <template #bottom v-if="sidebarSlotBottom">
         <div class="sidebar-slot sidebar-slot-bottom" v-html="sidebarSlotBottom"></div>
       </template>
+      -->
+      <!--
       <slot name="sidebar-top" #top />
       <slot name="sidebar-bottom" #bottom />
+      -->
     </Sidebar>
-    -->
 
     <!-- 正文 -->
     <div class="content-main">
@@ -61,7 +63,17 @@ import Footer from "~/components/vdoing/Footer.vue"
 import BodyBgImg from "~/components/vdoing/BodyBgImg.vue"
 import Buttons from "~/components/vdoing/Buttons.vue"
 import storage from "good-storage"
+import Sidebar from "~/components/vdoing/Sidebar.vue"
+import Env from "zhi-env"
+import ZhiUtil from "~/utils/zhiUtil"
 
+// zhi-sdk
+const nuxtEnv = useRuntimeConfig()
+const env = new Env(nuxtEnv)
+const zhiSdk = ZhiUtil.zhiSdk(env)
+const logger = zhiSdk.getLogger()
+
+// uses
 const appConfig = useAppConfig()
 
 // seo
@@ -76,6 +88,7 @@ useHead({
 
 // datas
 const datas = reactive({
+  hideNavbar: false,
   isSidebarOpen: false,
   showSidebar: false,
   themeMode: "auto",
@@ -85,21 +98,33 @@ const datas = reactive({
 
 // computes
 const computes = {
+  sidebarItems: computed(() => {
+    return []
+    // return resolveSidebarItems(
+    //     this.$page,
+    //     this.$page.regularPath,
+    //     this.$site,
+    //     this.$localePath
+    // )
+  }),
   pageClasses: computed(() => {
     // const userPageClass = this.$page.frontmatter.pageClass
-    // return [
-    //   {
-    //     'no-navbar': !this.shouldShowNavbar,
-    //     'hide-navbar': this.hideNavbar, // 向下滚动隐藏导航栏
-    //     'sidebar-open': this.isSidebarOpen,
-    //     'no-sidebar': !this.shouldShowSidebar,
-    //     'have-rightmenu': this.showRightMenu,
-    //     'have-body-img': this.$themeConfig.bodyBgImg,
-    //     'only-sidebarItem': this.sidebarItems.length === 1 && this.sidebarItems[0].type === 'page', // 左侧边栏只有一项时
-    //   },
-    //   userPageClass
-    // ]
-    return []
+    const userPageClass = {}
+    const pc = [
+      {
+        // 'no-navbar': !methods.shouldShowNavbar(),
+        "hide-navbar": datas.hideNavbar, // 向下滚动隐藏导航栏
+        "sidebar-open": datas.isSidebarOpen,
+        "no-sidebar": !methods.shouldShowSidebar(),
+        // 'have-rightmenu': this.showRightMenu,
+        // 'have-body-img': this.$themeConfig.bodyBgImg,
+        // 'only-sidebarItem': this.sidebarItems.length === 1 && this.sidebarItems[0].type === 'page', // 左侧边栏只有一项时
+      },
+      userPageClass,
+    ]
+
+    logger.debug("pageClasses=>", pc)
+    return pc
   }),
   shouldShowNavbar: computed(() => {
     // const { themeConfig } = this.$site
@@ -120,6 +145,9 @@ const computes = {
   }),
 }
 
+// emits
+const emit = defineEmits(["toggle-sidebar"])
+
 // methods
 const methods = {
   // side swipe
@@ -141,8 +169,8 @@ const methods = {
   },
   toggleSidebar: (to: any) => {
     datas.isSidebarOpen = typeof to === "boolean" ? to : !datas.isSidebarOpen
-    console.log(datas.isSidebarOpen)
-    // this.$emit('toggle-sidebar', this.isSidebarOpen)
+    emit("toggle-sidebar", datas.isSidebarOpen)
+    logger.debug("toggleSidebar triggered=>", datas.isSidebarOpen)
   },
 
   _autoMode: () => {
@@ -179,6 +207,35 @@ const methods = {
     }
     document.body.className = `theme-mode-${datas.themeMode} theme-style-${pageStyle}`
   },
+
+  shouldShowNavbar: () => {
+    // const { themeConfig } = this.$site
+    // const { frontmatter } = this.$page
+    // if (
+    //     frontmatter.navbar === false
+    //     || themeConfig.navbar === false) {
+    //   return false
+    // }
+    // return (
+    //     this.$title
+    //     || themeConfig.logo
+    //     || themeConfig.repo
+    //     || themeConfig.nav
+    //     || this.$themeLocaleConfig.nav
+    // )
+    return false
+  },
+
+  shouldShowSidebar: () => {
+    // const { frontmatter } = this.$page
+    // return (
+    //     !frontmatter.home
+    //     && frontmatter.sidebar !== false
+    //     && this.sidebarItems.length
+    //     && frontmatter.showSidebar !== false
+    // )
+    return true
+  },
 }
 
 // lifecycles
@@ -208,6 +265,11 @@ onBeforeMount(() => {
   }
 })
 
+onMounted(() => {
+  // 解决移动端初始化页面时侧边栏闪现的问题
+  datas.showSidebar = true
+})
+
 watch(
   () => datas.themeMode,
   () => {

nuxt.config.ts

@@ -48,9 +48,9 @@ export default defineNuxtConfig({
       VITE_DEBUG_MODE: false,
     },
   },
-  // nitro: {
-  //   serveStatic: !isDev,
-  // },
+  nitro: {
+    serveStatic: !isDev,
+  },
   css: ["~/assets/vdoing/styles/index.styl"],
   meilisearch: {
     hostUrl: "http://localhost:3000/api/middleware/meilisearch",

pages/index.vue

@@ -3,7 +3,7 @@
     <icon-accessibility />
     <icon-account-box style="font-size: 2em; color: red" />
 
-    <div style="margin-top: 100px" v-for="testItem in testItems.items">
+    <div v-for="testItem in testItems.items">
       index
       <p>{{ testItem }}</p>
     </div>