阅读增强插件 Layout 和内容宽度问题

[mancuoj]

因为不太熟悉 Vue，想知道怎么能让官方那个 View Transition API 的明暗切换按钮 和阅读增强插件一起使用，我将 Layout 直接用于 h 函数 不太行。

另外，开启最新版的阅读增强插件后，不会增加内容宽度，只有边栏会移动到两侧。

[kwaa]

想知道怎么能让官方那个 View Transition API 的明暗切换按钮 和阅读增强插件一起使用

可以参考我的 Layout.vue，在对应位置添加 slot。

[nekomeowww]

@mancuoj > 谢谢 @kwaa 的解答！

之前 @LittleSound 也给 rle.wiki 做过类似的集成。

核心在于这行：

https://github.com/project-trans/RLE-wiki/blob/main/docs/.vitepress/theme/index.ts#L32C5-L32C39

具体的 AppearanceToggle 在这里可以参考（大概率用不到，但方便你找资料所以在这里提及一下）

https://github.com/project-trans/RLE-wiki/blob/main/docs/.vitepress/theme/components/AppearanceToggle.vue

[mancuoj]

@nekomeowww @kwaa 感谢二位解答 ❤️

但是还有一个 Gif 里的问题不知道怎么解决，我看上文提到的 https://rle.wiki/campus/ 内容宽度是可以正常展开的，是我配置哪里出了问题吗？

[nekomeowww]

@mancuoj 配置看着没问题。

你说的是 rle.wiki 是自动展开的，你的没有自动展开，对吗？ 那你通过右上角的“书籍”图标选择不同的布局的时候，能展开吗？

如果是希望配置默认值，可以看一下 https://nolebase-integrations.ayaka.io/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/#%E9%85%8D%E7%BD%AE%E9%80%89%E9%A1%B9 介绍的配置内容，然后根据页面介绍的配置方案进行配置。

[mancuoj]

@nekomeowww https://csfive.netlify.app 可以打开看一下，就跟这个 gif 展示的一样，内容宽度没有展开

另外，开启最新版的阅读增强插件后，不会增加内容宽度，只有边栏会移动到两侧。

[nekomeowww]

啊我理解了。抱歉我 miss 了你最开始的 GIF 了。我现在还在外面，回到家里稳定的时候我看一下你的项目配置。

我猜可能是和 VitePress 版本不兼容或者主题不兼容导致的。

[nekomeowww]

阅读增强插件不工作确认是因为与 VitePress 最新版本不兼容导致的，我会尽快在接下来的发布中修复和兼容 VitePress，但我会计划先发布包含了 #189 特性的 2.0.0-rc11 然后先确保支持了 1.0.2。

如果你希望先用上阅读增强插件，可以先暂时降级一下 VitePress（我会尽快修复）。

[mancuoj]

阅读增强插件不工作确认是因为与 VitePress 最新版本不兼容导致的，我会尽快在接下来的发布中修复和兼容 VitePress，但我会计划先发布包含了 #189 特性的 2.0.0-rc11 然后先确保支持了 1.0.2。

如果你希望先用上阅读增强插件，可以先暂时降级一下 VitePress（我会尽快修复）。

了解，感谢。

[nekomeowww]

在最新的 rc12 中，我已经对齐了 VitePress 的最新版本，没有发现不兼容的问题。

不过根据 https://github.com/csfive/home/blob/bcc2341e2689ba6d19e571db4dff73fe4a9c1d01/.vitepress/theme/index.ts#L1-L9 这段代码声明，我觉得是因为导入优先级造成的，阅读增强插件是通过覆盖 VitePress 原始的样式实现的，在这段代码中，VitePress 的主题在阅读增强插件之后导入，因此造成了优先级不同的区别。

正确的做法是：

+import type { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { h } from 'vue'
+
 import {
   NolebaseEnhancedReadabilitiesMenu,
   NolebaseEnhancedReadabilitiesScreenMenu,
 } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
-import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
-import type { Theme as ThemeConfig } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import { h } from 'vue'
+
 import Layout from './components/Layout.vue'
+
+import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
+
 import './styles/index.css'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(Layout, null, {
      'nav-bar-content-after': () => h(NolebaseEnhancedReadabilitiesMenu),
      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
    })
  },
} satisfies ThemeConfig