search

pengzhanbo / vuepress-theme-plume

Vuepress Theme. A simple, feature-rich, document & blog
https://theme-plume.vuejs.press
MIT License
50 stars 11 forks source link

运行报错 #3

Closed huankong233 closed 1 year ago

huankong233 commented 1 year ago 
yarn run v1.22.19
$ vuepress dev src
/ notes
locales notes dirs [ '/' ] [ '\\notes' ]
⠙ Initializing and preparing dataerror error in hook onPrepared from @vuepress-plume/vuepress-plugin-notes-data
✖ Initializing and preparing data - failed in 92ms
SyntaxError: Invalid regular expression: /^notes\/: \ at end of pattern
    at new RegExp (<anonymous>)
    at prepareNotesData (file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/prepareNotesData.js:25:25)
    at Object.onPrepared [as hook] (file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/plugin.js:8:31)
    at Object.process (file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress/core/dist/index.js:681:37)
    at async appPrepare (file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress/core/dist/index.js:624:3)
    at async file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress/cli/dist/index.js:488:7
    at async file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress/utils/dist/index.js:106:20
    at async CAC.dev (file:///C:/Users/huan_kong/Desktop/code/blog/node_modules/@vuepress/cli/dist/index.js:486:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
pengzhanbo commented 1 year ago

这个错误信息我有些意想不到。

const re = new RegExp('^notes/') 转成正则语法糖， res.source 也应该是 /^notes\//，不应该出现 丢失 / 的情况。

可否给出 你在使用主题时，对 notes 项 的配置信息？ 以及 Node 版本、 主题版本 信息 请一并给出。 我需要进一步在相同的环境中重现问题。

huankong233 commented 1 year ago

我检查了一下dir参数，返回的值是note\不清楚为什么会这样，现在在吃饭等下回复

huankong233 commented 1 year ago 
C:\Users\huan_kong>node -v
v18.13.0

C:\Users\huan_kong>yarn -v
1.22.19

C:\Users\huan_kong>pnpm -v
8.6.5

主题版本等均直接克隆的您的仓库 安装时使用的是 pnpm

完整报错:

C:\Users\huan_kong\Desktop\code\pengzhanbo.cn>pnpm install
Lockfile is up to date, resolution step is skipped
Packages: +1001
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: C:\Users\huan_kong\AppData\Local\pnpm\store\v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 1001, reused 1000, downloaded 0, added 1001, done

dependencies:
+ @vuepress-plume/vuepress-theme-plume 1.0.0-beta.71
+ @vuepress/client 2.0.0-beta.63
+ @vuepress/plugin-google-analytics 2.0.0-beta.63
+ @vuepress/plugin-pwa 2.0.0-beta.63
+ @vuepress/utils 2.0.0-beta.63
+ anywhere 1.6.0
+ vue 3.3.4
+ vuepress 2.0.0-beta.63

devDependencies:
+ @types/node 18.16.18

Done in 10.1s

C:\Users\huan_kong\Desktop\code\pengzhanbo.cn>pnpm run dev

> pengzhanbo.cn@1.0.0 dev C:\Users\huan_kong\Desktop\code\pengzhanbo.cn
> vuepress dev src --config .vuepress/config.ts --clean-cache --clean-temp

/ notes
locales notes dirs [ '/' ] [ '\\notes' ]
✔ Cleaning temp - done in 4ms
✔ Cleaning cache - done in 0ms
⠙ Initializing and preparing dataerror error in hook onPrepared from @vuepress-plume/vuepress-plugin-notes-data
✖ Initializing and preparing data - failed in 23.78s
SyntaxError: Invalid regular expression: /^notes\/: \ at end of pattern
    at new RegExp (<anonymous>)
    at prepareNotesData (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress-plume+vuepress-plugin-notes-data@1.0.0-beta.71/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/prepareNotesData.js:25:25)
    at Object.onPrepared [as hook] (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress-plume+vuepress-plugin-notes-data@1.0.0-beta.71/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/plugin.js:8:31)
    at Object.process (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+core@2.0.0-beta.63/node_modules/@vuepress/core/dist/index.js:681:37)
    at async appPrepare (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+core@2.0.0-beta.63/node_modules/@vuepress/core/dist/index.js:624:3)
    at async file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+cli@2.0.0-beta.63/node_modules/@vuepress/cli/dist/index.js:488:7
    at async file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+utils@2.0.0-beta.63/node_modules/@vuepress/utils/dist/index.js:106:20
    at async CAC.dev (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+cli@2.0.0-beta.63/node_modules/@vuepress/cli/dist/index.js:486:5)
 ELIFECYCLE  Command failed with exit code 1.
huankong233 commented 1 year ago

安装了最新的 lts 版本还是不行

C:\Users\huan_kong\Desktop\code\pengzhanbo.cn>pnpm run dev

> pengzhanbo.cn@1.0.0 dev C:\Users\huan_kong\Desktop\code\pengzhanbo.cn
> vuepress dev src --config .vuepress/config.ts --clean-cache --clean-temp

/ notes
locales notes dirs [ '/' ] [ '\\notes' ]
✔ Cleaning temp - done in 124ms
✔ Cleaning cache - done in 1ms
⠏ Initializing and preparing dataerror error in hook onPrepared from @vuepress-plume/vuepress-plugin-notes-data
✖ Initializing and preparing data - failed in 23.62s
SyntaxError: Invalid regular expression: /^notes\/: \ at end of pattern
    at new RegExp (<anonymous>)
    at prepareNotesData (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress-plume+vuepress-plugin-notes-data@1.0.0-beta.71/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/prepareNotesData.js:25:25)
    at Object.onPrepared [as hook] (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress-plume+vuepress-plugin-notes-data@1.0.0-beta.71/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/plugin.js:8:31)
    at Object.process (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+core@2.0.0-beta.63/node_modules/@vuepress/core/dist/index.js:681:37)
    at async appPrepare (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+core@2.0.0-beta.63/node_modules/@vuepress/core/dist/index.js:624:3)
    at async file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+cli@2.0.0-beta.63/node_modules/@vuepress/cli/dist/index.js:488:7
    at async file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+utils@2.0.0-beta.63/node_modules/@vuepress/utils/dist/index.js:106:20
    at async CAC.dev (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+cli@2.0.0-beta.63/node_modules/@vuepress/cli/dist/index.js:486:5)
 ELIFECYCLE  Command failed with exit code 1.

C:\Users\huan_kong\Desktop\code\pengzhanbo.cn>node -v
v18.16.1
huankong233 commented 1 year ago

改用 20.2.0 依旧报错

C:\Users\huan_kong\Desktop\code\pengzhanbo.cn>pnpm run dev

> pengzhanbo.cn@1.0.0 dev C:\Users\huan_kong\Desktop\code\pengzhanbo.cn
> vuepress dev src --config .vuepress/config.ts --clean-cache --clean-temp

/ notes
locales notes dirs [ '/' ] [ '\\notes' ]
✔ Cleaning temp - done in 96ms
✔ Cleaning cache - done in 0ms
⠋ Initializing and preparing dataerror error in hook onPrepared from @vuepress-plume/vuepress-plugin-notes-data
✖ Initializing and preparing data - failed in 24.49s
SyntaxError: Invalid regular expression: /^notes\/: \ at end of pattern
    at new RegExp (<anonymous>)
    at prepareNotesData (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress-plume+vuepress-plugin-notes-data@1.0.0-beta.71/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/prepareNotesData.js:25:25)
    at Object.onPrepared [as hook] (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress-plume+vuepress-plugin-notes-data@1.0.0-beta.71/node_modules/@vuepress-plume/vuepress-plugin-notes-data/lib/node/plugin.js:8:31)
    at Object.process (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+core@2.0.0-beta.63/node_modules/@vuepress/core/dist/index.js:681:37)
    at async appPrepare (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+core@2.0.0-beta.63/node_modules/@vuepress/core/dist/index.js:624:3)
    at async file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+cli@2.0.0-beta.63/node_modules/@vuepress/cli/dist/index.js:488:7
    at async file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+utils@2.0.0-beta.63/node_modules/@vuepress/utils/dist/index.js:106:20
    at async CAC.dev (file:///C:/Users/huan_kong/Desktop/code/pengzhanbo.cn/node_modules/.pnpm/@vuepress+cli@2.0.0-beta.63/node_modules/@vuepress/cli/dist/index.js:486:5)
 ELIFECYCLE  Command failed with exit code 1.

C:\Users\huan_kong\Desktop\code\pengzhanbo.cn>node -v
v20.2.0
pengzhanbo commented 1 year ago

问题已定位，由于 不同系统的 posix 差异， 在 windows 下位 \， 导致了 notes\ 并没有被 RegExp 正确转译，从而导致错误。 ，已在新版本中修复。

huankong233 commented 1 year ago

好的，麻烦大佬了

huankong233 commented 1 year ago

image 左侧 sidebar 貌似也丢失了 开启了深色，默认打开依然还是白色🤔

huankong233 commented 1 year ago

image 左侧 sidebar 貌似也丢失了 开启了深色，默认打开依然还是白色🤔

切换深色模式需要按两次

huankong233 commented 1 year ago

感觉是似曾相识的问题 image

huankong233 commented 1 year ago

image 如法炮制

export function normalizePath(path) {
  return path.replace(/\/\\+/g, '/').replace(/\\+/g, '/')
}
huankong233 commented 1 year ago

image 如法炮制

export function normalizePath(path) {
  return path.replace(/\/\\+/g, '/').replace(/\\+/g, '/')
}

image

huankong233 commented 1 year ago

image 深色浅色切换貌似也有问题，很奇怪

pengzhanbo commented 1 year ago

深色模式切换，在主题内部进行判断时，为正确进行初始化，导致了默认暗色时，错误的显示为浅色，导致 按钮交互错误。

huankong233 commented 1 year ago

问个问题哈，我看到可以 自定义样式 但是要怎么样用呀，看文档没怎么看懂，在 .vueress/styles/index.scss 下创建了文件但是貌似没有生效

pengzhanbo commented 1 year ago

@huankong233
在本主题中， 使用的是 vuepress 的官方插件 @vuepress/plugin-palette 实现 自定义样式的支持。 但是 这个插件存在一些问题。 如果你重新指定了 读取vuepress config 文件的路径，如

vuepress dev src --config .vuepress/config.ts

将 config.ts 从默认的 src/.vuepress/config.ts 移动到与src 同层级的 .vuepress 目录中，这个插件并不会做识别判断，而是从 src/.vuepress/styles/index.scss 中加载自定义样式， 而不是你期望的 .vuepress/styles/index.scss 。

所以只需要在 src/.vuepress/styles/index.scss 中 自定义样式即可。

huankong233 commented 1 year ago

@huankong233 在本主题中， 使用的是 vuepress 的官方插件 @vuepress/plugin-palette 实现 自定义样式的支持。 但是 这个插件存在一些问题。 如果你重新指定了 读取vuepress config 文件的路径，如

vuepress dev src --config .vuepress/config.ts

将 config.ts 从默认的 src/.vuepress/config.ts 移动到与src 同层级的 .vuepress 目录中，这个插件并不会做识别判断，而是从 src/.vuepress/styles/index.scss 中加载自定义样式， 而不是你期望的 .vuepress/styles/index.scss 。

所以只需要在 src/.vuepress/styles/index.scss 中 自定义样式即可。

那要不去文档里提上一嘴（小声）

huankong233 commented 1 year ago

还有我想深色模式或许可以加一个遮罩会好看些，我想搞自定义样式就是为了搞这个遮罩，原来的图片有点太亮了

或者可以把我这个丢案例了（）

// light
html:not(.dark) .plume-home{
  background-image: linear-gradient(
    rgba(34, 34, 34, 0.2),
    rgba(34, 34, 34, 0.2)
  ),
  url("https://img.huankong.top/i/2023/02/07/63e1e7ee94296.png") !important;
}

// dark
html.dark .plume-home{
  background-image: linear-gradient(
    rgba(34, 34, 34, 0.6),
    rgba(34, 34, 34, 0.6)
  ),
  url("https://img.huankong.top/i/2023/02/07/63e1e7ee94296.png") !important;
}
huankong233 commented 1 year ago

image image

pengzhanbo commented 1 year ago

@huankong233 在本主题中， 使用的是 vuepress 的官方插件 @vuepress/plugin-palette 实现 自定义样式的支持。 但是 这个插件存在一些问题。 如果你重新指定了 读取vuepress config 文件的路径，如

vuepress dev src --config .vuepress/config.ts

将 config.ts 从默认的 src/.vuepress/config.ts 移动到与src 同层级的 .vuepress 目录中，这个插件并不会做识别判断，而是从 src/.vuepress/styles/index.scss 中加载自定义样式， 而不是你期望的 .vuepress/styles/index.scss 。 所以只需要在 src/.vuepress/styles/index.scss 中 自定义样式即可。

那要不去文档里提上一嘴（小声）

这个问题我在文档中补充说明下。

pengzhanbo commented 1 year ago

还有我想深色模式或许可以加一个遮罩会好看些，我想搞自定义样式就是为了搞这个遮罩，原来的图片有点太亮了

我在 配置中新增了 bannerMask 的选项，用于指定 遮罩蒙版的不透明度。

type HomeFrontmatter {
  banner?: string
  bannerMask?: number | { light?: number; dark?: number }
}

支持配置在 深色、浅色 模式下的不同的 蒙版不透明度。

用法如下：

---
home: true
banner: /images/background.png
bannerMask:
  light: 0.2
  dark: 0.5
---
huankong233 commented 1 year ago

还有我想深色模式或许可以加一个遮罩会好看些，我想搞自定义样式就是为了搞这个遮罩，原来的图片有点太亮了

我在 配置中新增了 bannerMask 的选项，用于指定 遮罩蒙版的不透明度。

type HomeFrontmatter {
  banner?: string
  bannerMask?: number | { light?: number; dark?: number }
}

支持配置在 深色、浅色 模式下的不同的 蒙版不透明度。

用法如下：

---
home: true
banner: /images/background.png
bannerMask:
  light: 0.2
  dark: 0.5
---

哇，谢谢采纳

huankong233 commented 1 year ago

bannerMask: light: 0.2 dark: 0.5

image

在页面刷新的时候获取的值是错误的