search

pengzhanbo / vuepress-theme-plume

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

手机浏览文章概率出现无法滑动的问题 #86

Closed jiezhuo closed 1 week ago

jiezhuo commented 4 weeks ago

我在手机上浏览我自己写的blog或者你的blog（比如这个页面）（从blog列表中点击对应的blog打开时），都出现无法向下滑动(浏览下面的内容)的现象，但暂时不清楚发生的原因，目前有这些信息：

  1. 我自己的blog和你的blog都会出现
  2. 没有换设备尝试过
  3. 问题概率出现，需要完全退出网站再进入才可能恢复
  4. 使用多个浏览器都会出现
    1. 微信内打开的浏览器
    2. qq内打开的浏览器 （QQ版本9.0.30.15995）
    3. (魅族)手机自带的浏览器
    4. 谷歌商店下载的谷歌浏览器（版本120.0.6099.43）
  5. 猜想：有可能根文章长度，文章内使用到的元素，页面加载过程中首次滑动文章的时机，等因素有关

不知道其他人有没遇到类似情况，issues可以先开着？如果一段时间后没有新人反馈就关了吧，也许是手机问题

pengzhanbo commented 4 weeks ago

我会关注这个问题，看看能不能复现和排查到原因。

pengzhanbo commented 2 weeks ago

我在新的版本中改进了布局，可以试着验证下在新版本中在 移动端是否还会出现该问题。

jiezhuo commented 2 weeks ago

vuepress-theme-plume 从 1.0.0-rc.64 到 1.0.0-rc.65 出现问题，在 pnpm dev 命令之后打开网页有如下提示，暂时还看不懂报错，是否是我的 devDependencies 或版本有什么问题？

23:07:52 [vite] Pre-transform error: Failed to resolve import "@theme/Nav/VPNav.vue" from "node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/layouts/Layout.vue". Does the file exist?
23:07:52 [vite] Pre-transform error: Failed to resolve import "@theme/Nav/VPNav.vue" from "node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/layouts/NotFound.vue". Does the file exist?
23:07:53 [vite] Pre-transform error: Failed to resolve import "@theme/Blog/VPBlog.vue" from "node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/components/VPContent.vue". Does the file exist?
23:07:53 [vite] Internal server error: Failed to resolve import "@theme/Nav/VPNav.vue" from "node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/layouts/Layout.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: E:/git_library/wiki/plume_home/node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/layouts/Layout.vue:7:18
  5  |  import VPContent from "@theme/VPContent.vue";
  6  |  import VPLocalNav from "@theme/VPLocalNav.vue";
  7  |  import VPNav from "@theme/Nav/VPNav.vue";
     |                     ^
  8  |  import VPSidebar from "@theme/VPSidebar.vue";
  9  |  import VPSkipLink from "@theme/VPSkipLink.vue";
      at formatError (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52009:46)
      at TransformContext.error (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52003:19)
      at normalizeUrl (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:67306:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:67461:47
      at async Promise.all (index 6)
      at async TransformContext.transform (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:67382:13)
      at async Object.transform (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52318:30)
      at async loadAndTransform (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:55073:29)
      at async viteTransformMiddleware (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:64920:32)
23:07:53 [vite] Pre-transform error: Failed to resolve import "@theme/Blog/VPBlog.vue" from "node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/components/VPContent.vue". Does the file exist?
23:07:53 [vite] Internal server error: Failed to resolve import "@theme/Nav/VPNav.vue" from "node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/layouts/NotFound.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: E:/git_library/wiki/plume_home/node_modules/.pnpm/vuepress-theme-plume@1.0.0-rc.65_@algolia+client-search@4.23.3_markdown-it@14.1.0_search-insi_hmmyz4qbuyv42hcnc3p3r7vhv4/node_modules/vuepress-theme-plume/lib/client/layouts/NotFound.vue:3:18
  1  |  import { defineComponent as _defineComponent } from "vue";
  2  |  import { useRouteLocale, withBase } from "vuepress/client";
  3  |  import VPNav from "@theme/Nav/VPNav.vue";
     |                     ^
  4  |  import VPSkipLink from "@theme/VPSkipLink.vue";
  5  |  import VPFooter from "@theme/VPFooter.vue";
      at formatError (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52009:46)
      at TransformContext.error (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52003:19)
      at normalizeUrl (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:67306:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:67461:47
      at async Promise.all (index 2)
      at async TransformContext.transform (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:67382:13)
      at async Object.transform (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52318:30)
      at async loadAndTransform (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:55073:29)
      at async viteTransformMiddleware (file:///E:/git_library/wiki/plume_home/node_modules/.pnpm/vite@5.2.13_@types+node@20.14.2_sass@1.77.5/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:64920:32)
{
  "name": "my-blog",
  "begin": "20240523",
  "end": "20240611",
  "version": "v1.7.0",
  "description": "",
  "main": "index.js",
  "packageManager": "pnpm@9.3.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vuepress/bundler-vite": "2.0.0-rc.13",
    "vue": "3.4.29",
    "vuepress": "2.0.0-rc.13",
    "vuepress-theme-plume": "1.0.0-rc.65"
  }
}

}

pengzhanbo commented 2 weeks ago

@jiezhuo 由于 Windows 下的 path posix 引起的，已经在新版本中修复

jiezhuo commented 2 weeks ago

这么晚辛苦了！好巧我也还正在学这个东西，今天测试好反馈给您

jiezhuo commented 1 week ago

已更新 vuepress-theme-plume 从 1.0.0-rc.66，看起来文章概率无法滑动的问题已经解决，非常优秀！

不过我发现了另一个现象，不知道是否符合你的设计期望，就是和你提一下，不过我觉得保持现状也行，也挺自然的，改不改都能接受：

从A页面跳转到B页面时（包含3种情况）：

  1. 在文章内点击下一页
  2. 在note page中点击目录中其他文章
  3. 在blog page中点击文章
  4. 其他未列出的情况

首先会记住当前A页面的浏览窗口位置（比如80%处，第100行），跳转到B页面时，B页面打开时的初始位置其实是MIN(100, B页面长度)，然后再自动向上滚动到页面顶部。 而之前的版本，或者是其他网站的逻辑，应该是直接打开B页面初始位置就是B页面的顶部。

pengzhanbo commented 1 week ago

由于当前主题是全局设置了 滚动行为 为 平滑过渡滚动，因此 页面跳转时，锚点定位也是 平滑过渡滚动 的。

实际上我也对此效果 不是很满意，最好是 页面跳转时的锚点定位直接滚动到对应的位置，页内的锚点定位才是 平滑过渡滚动。

我最近才在 rc.67 版本 完成了 主题整体上的 结构性调整 和 部分重构 工作，解决了大方向上的 主题的可扩展性，易用性 等痛点，后续的版本会注重 细节上的调整。

pengzhanbo commented 1 week ago

我在 rc.68 版本中调整了 页面跳转时 锚点滚动 的效果，现在直接锚点定位到对应位置，仅页内锚点时应用平滑滚动。

jiezhuo commented 1 week ago

锚点位置测试已经解决了，无法滑动的问题我在多平台测试没有再复现到了，看样子有没问题了