feat(theme): update style & config

docs/.vuepress/config.ts

@@ -26,16 +26,6 @@ export default defineUserConfig({
       description: 'The Theme for Vuepress 2.0',
     },
     social: [{ icon: 'github', link: 'https://github.com/pengzhanbo' }],
-    // {
-    //   email: 'volodymyr@foxmail.com',
-    //   github: 'pengzhanbo',
-    //   QQ: '942450674',
-    //   weiBo: 'https://weibo.com',
-    //   zhiHu: 'https://zhihu.com',
-    //   facebook: 'https://baidu.com',
-    //   twitter: 'https://baidu.com',
-    //   linkedin: 'https://baidu.com',
-    // },
     notes,
     navbar: [
       { text: 'Blog', link: '/blog/', activeMatch: '/blog/' },
@@ -58,7 +48,6 @@ export default defineUserConfig({
     ],
     footer: {
       copyright: 'Copyright © 2022-present pengzhanbo',
-      message: '',
     },
     themePlugins: {
       search: {
@@ -68,6 +57,17 @@ export default defineUserConfig({
           },
         },
       },
+      comment: {
+        provider: 'Giscus',
+        comment: true,
+        repo: 'pengzhanbo/pengzhanbo-blog-vuepress',
+        repoId: 'MDEwOlJlcG9zaXRvcnkxNDgwMzY4MDc=',
+        category: 'Announcements',
+        categoryId: 'DIC_kwDOCNLcx84COcVd',
+        mapping: 'pathname',
+        reactionsEnabled: true,
+        inputPosition: 'top',
+      },
     },
   }),
 })

packages/theme/src/client/components/Nav/NavBarTitle.vue

@@ -16,7 +16,7 @@ const { hasSidebar } = useSidebar()
       <VImage
         v-if="theme.logo"
         class="logo"
-        :image="{ light: theme.logo, dark: theme.logoDark || '' }"
+        :image="{ light: theme.logo, dark: theme.logoDark || theme.logo }"
       />
       {{ site.title }}
     </AutoLink>

packages/theme/src/client/components/icons/IconClock.vue

@@ -1,11 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-    <g fill="currentColor">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-      />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
+    />
   </svg>
 </template>

packages/theme/src/client/utils/shared.ts

@@ -15,7 +15,7 @@ export function isActive(
     return false
   }
 
-  currentPath = normalize(`/${currentPath}`)
+  currentPath = normalize(`/${currentPath.replace(/^\//, '')}`)
 
   if (asRegex) {
     return new RegExp(matchPath).test(currentPath)

packages/theme/src/node/plugins.ts

@@ -50,9 +50,11 @@ export const setupPlugins = (
     }),
     autoFrontmatterPlugin(autoFrontmatter(app, localeOptions)),
     blogDataPlugin({
-      include: ['**/*.md'],
+      include: localeOptions.blog?.include,
       exclude: [
-        '**/{README,index}.md',
+        '**/{README,readme,index}.md',
+        '.vuepress/',
+        ...(localeOptions.blog?.exclude || []),
         notesDir ? `${notesDir}/**` : '',
       ].filter(Boolean),
       sortBy: 'createTime',
@@ -88,7 +90,7 @@ export const setupPlugins = (
       ? mediumZoomPlugin({
           selector: '.plume-content > img, .plume-content :not(a) > img',
           zoomOptions: {
-            background: 'var(--c-bg)',
+            background: 'var(--vp-c-bg)',
           },
           delay: 300,
         })
@@ -122,9 +124,10 @@ export const setupPlugins = (
       ? docsearchPlugin(options.docsearch!)
       : [],
     options.prismjs !== false && !isProd ? prismjsPlugin() : [],
-    options.prismjs !== false && isProd
+    options.shiki !== false && isProd
       ? shikiPlugin({
           theme: 'material-palenight',
+          ...options.shiki,
         })
       : [],
     options.copyCode !== false

packages/theme/src/node/setupPages.ts

@@ -6,9 +6,12 @@ import type {
   PlumeThemePageData,
 } from '../shared/index.js'
 
-export async function setupPage(app: App) {
+export async function setupPage(
+  app: App,
+  localeOption: PlumeThemeLocaleOptions
+) {
   const blogPage = await createPage(app, {
-    path: '/blog/',
+    path: localeOption.blog?.link,
   })
   const productPage = await createPage(app, {
     path: '/product/',

packages/theme/src/node/theme.ts

@@ -30,10 +30,13 @@ export const plumeTheme = ({
       clientConfigFile: path.resolve(__dirname, '../client/config.js'),
       plugins: setupPlugins(app, themePlugins, localeOptions),
       onInitialized: async (app) => {
-        await setupPage(app)
+        await setupPage(app, localeOptions)
       },
       extendsPage: (page: Page<PlumeThemePageData>) => {
-        if (page.path === '/blog/') {
+        if (
+          localeOptions.blog?.link &&
+          page.path.startsWith(localeOptions.blog.link)
+        ) {
           page.data.type = 'blog'
         }
         if (page.path === '/product/') {

packages/theme/src/shared/options/index.ts

@@ -7,38 +7,6 @@ export interface PlumeThemeOptions extends PlumeThemeLocaleOptions {
    * 对主题内部使用的插件进行配置
    */
   themePlugins?: PlumeThemePluginOptions
-
-  /**
-   * 是否仅使用博客功能
-   *
-   * @default false
-   */
-  onlyBlog?: boolean
-
-  blog?: {
-    /**
-     * blog 文章读取目录
-     *
-     * @default './' 即 vuepress 配置的 source 目录
-     */
-    dir?: string
-
-    /**
-     * 在 `blog.dir` 目录中，通过 glob string 配置包含文件
-     *
-     * @default - ['**\*.md']
-     */
-    include?: string[]
-
-    /**
-     * 在 `blog.dir` 目录中，通过 glob string 配置排除的文件
-     *
-     *  _README.md 文件一般作为主页或者某个目录下的主页，不应该被读取为 blog文章_
-     *
-     * @default - ['.vuepress/', 'node_modules/', '{README,index}.md']
-     */
-    exclude?: string[]
-  }
 }
 
 export type PlumeThemeLocaleOptions = PlumeThemeData

packages/theme/src/shared/options/plugins.ts

@@ -3,6 +3,7 @@ import type { CanIUsePluginOptions } from '@vuepress-plume/vuepress-plugin-caniu
 import type { CopyCodeOptions } from '@vuepress-plume/vuepress-plugin-copy-code'
 import type { DocsearchOptions } from '@vuepress/plugin-docsearch'
 import type { SearchPluginOptions } from '@vuepress/plugin-search'
+import type { ShikiPluginOptions } from '@vuepress/plugin-shiki'
 import type { CommentOptions } from 'vuepress-plugin-comment2'
 import type { MarkdownEnhanceOptions } from 'vuepress-plugin-md-enhance'
 
@@ -29,6 +30,8 @@ export interface PlumeThemePluginOptions {
 
   prismjs?: false
 
+  shiki?: false | ShikiPluginOptions
+
   git?: false
 
   nprogress?: false