Mistj's Digital Garden

Appearance

6. 主题调整

样式调整 ​

直接调整theme/style.css，例如修改滚动条。

css
:root {  
    --scrollbar-color: #e0e3e6;  
    --scrollbar-color-hover: #c1c7ce;  
    --scrollbar-dark-color: #6e7883;  
    --scrollbar-dark-color-hover: #555f6b;  
}  
  
/* refs to https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg */  
::-webkit-scrollbar {  
    width: 15px;  
}  
  
::-webkit-scrollbar-track {  
    background-color: transparent;  
}  
  
::-webkit-scrollbar-thumb {  
    background-color: var(--scrollbar-color);  
    border-radius: 15px;  
    border: 5px solid rgba(0, 0, 0, 0);  
    background-clip: content-box;  
}  
  
::-webkit-scrollbar-thumb:hover {  
    background-color: var(--scrollbar-color);  
}  
  
/*控制隐藏和显示*/  
.VPSidebar::-webkit-scrollbar-thumb {  
    visibility: hidden;  
}  
  
.VPSidebar:hover::-webkit-scrollbar-thumb {  
    visibility: visible;  
}  
  
  
.dark ::-webkit-scrollbar-thumb {  
    background-color: var(--scrollbar-dark-color);  
}  
  
.dark ::-webkit-scrollbar-thumb:hover {  
    background-color: var(--scrollbar-dark-color-hover);  
}
:root {  
    --scrollbar-color: #e0e3e6;  
    --scrollbar-color-hover: #c1c7ce;  
    --scrollbar-dark-color: #6e7883;  
    --scrollbar-dark-color-hover: #555f6b;  
}  
  
/* refs to https://dev.to/xtrp/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg */  
::-webkit-scrollbar {  
    width: 15px;  
}  
  
::-webkit-scrollbar-track {  
    background-color: transparent;  
}  
  
::-webkit-scrollbar-thumb {  
    background-color: var(--scrollbar-color);  
    border-radius: 15px;  
    border: 5px solid rgba(0, 0, 0, 0);  
    background-clip: content-box;  
}  
  
::-webkit-scrollbar-thumb:hover {  
    background-color: var(--scrollbar-color);  
}  
  
/*控制隐藏和显示*/  
.VPSidebar::-webkit-scrollbar-thumb {  
    visibility: hidden;  
}  
  
.VPSidebar:hover::-webkit-scrollbar-thumb {  
    visibility: visible;  
}  
  
  
.dark ::-webkit-scrollbar-thumb {  
    background-color: var(--scrollbar-dark-color);  
}  
  
.dark ::-webkit-scrollbar-thumb:hover {  
    background-color: var(--scrollbar-dark-color-hover);  
}

增加默认文章标题 ​

笔者主要用obsidian写md文档，一般来说是md文件名当做文章标题。 然而vitepress中,文章标题是拿的md文件中的h1标题,如果没有md,展示没那么优雅了。

总结来说，需求：如果md中存在h1标题，则显示已有标题。如果没有，取当前md文件名字自动生成h1标题。

这里用到的vitepress本身提供的插槽能力。 相关文档见:Extending the Default Theme | VitePress

方式1 ​

vitepress/theme/layout/Post.vue

html
<script setup lang="ts">  
import DefaultTheme from 'vitepress/theme'  
  
const {Layout} = DefaultTheme  
import {useData, useRoute} from 'vitepress'  
import {computed} from "vue";  
  
const {page} = useData()  
const route = useRoute()  
const pageName = computed(() =>  
    decodeURIComponent(route.path.replace(/^.*[\\/]/, "")  
        .replace(/\.html$/, ''))  
)  
</script>  
  
<template>  
  <Layout>  
    <template #doc-before>  
      <!--  如果page.title不存在，则取文件名生成h1   -->  
      <div class="vp-doc" v-if="!page.title">  
        <h1>  
          {{ pageName }}  
          <a class="header-anchor" :href="`#${pageName}`"  
             :aria-label="`Permalink to ${pageName};`"></a>  
        </h1>  
      </div>  
    </template>  
  </Layout>  
</template>
<script setup lang="ts">  
import DefaultTheme from 'vitepress/theme'  
  
const {Layout} = DefaultTheme  
import {useData, useRoute} from 'vitepress'  
import {computed} from "vue";  
  
const {page} = useData()  
const route = useRoute()  
const pageName = computed(() =>  
    decodeURIComponent(route.path.replace(/^.*[\\/]/, "")  
        .replace(/\.html$/, ''))  
)  
</script>  
  
<template>  
  <Layout>  
    <template #doc-before>  
      <!--  如果page.title不存在，则取文件名生成h1   -->  
      <div class="vp-doc" v-if="!page.title">  
        <h1>  
          {{ pageName }}  
          <a class="header-anchor" :href="`#${pageName}`"  
             :aria-label="`Permalink to ${pageName};`"></a>  
        </h1>  
      </div>  
    </template>  
  </Layout>  
</template>

调整主题文件 theme/index.ts:

js
// https://vitepress.dev/guide/custom-theme  
import { h } from 'vue'  
import Theme from 'vitepress/theme'  
import './style.css'  
import MyLayout from './layout/Post.vue'  
export default {  
  ...Theme,  
  Layout: MyLayout,  
  // Layout: () => {  
  //   return h(Theme.Layout, null, {  //     // https://vitepress.dev/guide/extending-default-theme#layout-slots  //   })  // },  enhanceApp({ app, router, siteData }) {  
    // ...  
  }  
}
// https://vitepress.dev/guide/custom-theme  
import { h } from 'vue'  
import Theme from 'vitepress/theme'  
import './style.css'  
import MyLayout from './layout/Post.vue'  
export default {  
  ...Theme,  
  Layout: MyLayout,  
  // Layout: () => {  
  //   return h(Theme.Layout, null, {  //     // https://vitepress.dev/guide/extending-default-theme#layout-slots  //   })  // },  enhanceApp({ app, router, siteData }) {  
    // ...  
  }  
}

方式2 ​

vitepress/theme/layout/DefaultTitle.vue

html
<script setup lang="ts">  
import {useData, useRoute} from 'vitepress'  
import {computed} from "vue";  
  
const {page} = useData()  
const route = useRoute()  
const pageName = computed(() =>  
    decodeURIComponent(route.path.replace(/^.*[\\/]/, "")  
        .replace(/\.html$/, ''))  
)  
  
</script>  
  
<template>  
  <div class="vp-doc" v-if="!page.title">  
    <h1>  
      {{ pageName }}  
      <a class="header-anchor" :href="`#${pageName}`"  
         :aria-label="`Permalink to ${pageName};`"></a>  
    </h1>  
  </div>  
</template>
<script setup lang="ts">  
import {useData, useRoute} from 'vitepress'  
import {computed} from "vue";  
  
const {page} = useData()  
const route = useRoute()  
const pageName = computed(() =>  
    decodeURIComponent(route.path.replace(/^.*[\\/]/, "")  
        .replace(/\.html$/, ''))  
)  
  
</script>  
  
<template>  
  <div class="vp-doc" v-if="!page.title">  
    <h1>  
      {{ pageName }}  
      <a class="header-anchor" :href="`#${pageName}`"  
         :aria-label="`Permalink to ${pageName};`"></a>  
    </h1>  
  </div>  
</template>

调整主题文件 theme/index.ts:

js
// https://vitepress.dev/guide/custom-theme  
import {h} from 'vue'  
import Theme from 'vitepress/theme'  
import './style.css'  
import DefaultTitle from './layout/DefaultTitle.vue'  
  
export default {  
    ...Theme,  
    Layout: () => {  
        return h(Theme.Layout, null, {  
            'doc-before': () => h(DefaultTitle)  
        })  
    },  
    enhanceApp({app, router, siteData}) {  
        // ...  
    }  
}
// https://vitepress.dev/guide/custom-theme  
import {h} from 'vue'  
import Theme from 'vitepress/theme'  
import './style.css'  
import DefaultTitle from './layout/DefaultTitle.vue'  
  
export default {  
    ...Theme,  
    Layout: () => {  
        return h(Theme.Layout, null, {  
            'doc-before': () => h(DefaultTitle)  
        })  
    },  
    enhanceApp({app, router, siteData}) {  
        // ...  
    }  
}