跳至主要內容

本站调试记录

lament-z大约 6 分钟

本站调试记录

包括 vuepress 以及主题 vuepress-theme-hope 学习和调试的记录。

内容是倒序的，建议使用方式：ctrl+f找关键字，或者右上角搜索本站。

TODO List

  • 等小马哥有空的。

  • 等小马哥有空的。

  • 这个就任重道远了。

  • move the Plugin config from VuePress config to theme.plugins.

  • 谷歌顺利添加了，但是百度检测不到，我自己打开开发者工具也没找到 hm.js，不过就先这样吧， 反正浏览量最高的两篇分别是雷蛇键盘无响应和lastPass密码错误，目前还被我下了。

    话说我真的觉得雷蛇那个看起来吊炸天的内置在设备里主动帮你安装驱动功能最大的作用是检测你这把键盘用多久了， 到期就给你自动失灵。 lastPass 早几年前就修正了我说的问题，下了就下了吧。

  • 合理利用 README.md 即可达成目标，breadcrumb 反而不用去管他，反正默认启用。

  • 插件更新了，标签改为: <Catalog>，用法跟之前一样，直接在目录页面的 md 文件正文写 <Catalog/>即可。

  • You are not allowed to use plugin "vuepress-plugin-search-pro" yourself in vuepress config file. Set "plugin.searchPro" in theme options to customize it.

    不要在 config.ts 中引入,把 import { searchProPlugin } from "vuepress-plugin-search-pro"; 移动到 theme.ts 中。

    找到 plugins:，然后添加searchPro: true, 即可启用。

  • README.md 文件名必须大写，不然 hope 主题提供的一些插件功能不太正常。

  • Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: pnpm/action-setup@v2, actions/setup-node@v3. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.

    看见这个就去升级一下对应 action 的版本，不知道具体版本可以直接 github 搜索。

    比如 pnpm/action-setup@v2 就直接搜 pnpm/action-setup，其他细节参考警告中给的链接。

  • pnpm docs:dev 没有问题，执行 build 就报 SyntaxError: The requested module 'vue-router' does not provide an export named 'createMemoryHistory'的错误。

    错误的表面意思倒是挺明确的，vue-router 没有提供 createMemoryHistory 参数，然而 由于完全不懂 node 跟没看懂没差别，一堆折腾之后，最后通过手动添加依赖解决了。

    pnpm add -D vue-router。

    真的不明白 node 这依赖关系设计，前端开发是怎么忍下来的。

debug log

  • 关缓存！！！

    前后重新发布了 n 次也没找到线上显示错误的原因，就差直接页面里面手动记录版本号了，突然记起怕不是 CF 的缓存没关...

    现在不用手动清缓存了，可以直接开启开发者模式禁用缓存，不用怕忘了关，这个功能是“暂时”绕过缓存，3个还是四个小时后会自动恢复到正常模式，需要的时候记得去开就好。

  • github action

    权限错误检查两个位置，一个是仓库本身关于 action 的权限，另一个检查你生成的 PAT 权限是不是不够。

部署

官方文档里就有，还挺全的，白写了，看这里open in new window。

源码库 + 部署库的方式自动部署的几个需要注意的地方。

PAT 权限要够，PAT 要添加到源码库的 Secrets 中。

vuepress 简介

  • 目录有约定，但并不强制

  • 0开发经验上手略有门槛

    有开发经验的体验尚可，有前端经验很好，有 nodejs/vue 经验的话你可以干很多事情。

  • 导航的 link 与 readme.md 文件绑定
    /readme.md 等同于 /，导航 link: '/xDir/ 意味着 /xDir/ 目录下必须有 readme.md文件，否则你点击导航会 404.

  • 依赖问题导致无法 build | build 失败

    根据我解决问题过程中搜索到的内容来看，依赖问题已经多次导致用户的 vuepress 项目无法正常 build。
    对于对 node 依赖管理完全不了解的用户其实这是很难自行解决。

    先添加这个：

    yarn add cross-env --dev

    然后编辑 package.json 中的脚本部分:

     #package.json:
 "scripts": {
 "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress dev src",
 "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress build src"
 }

    或者直接换 pnpm，反正不懂 node，用 yarn 还是用 pnpm 都没啥区别，但是 VuePress 和 VuePress-theme-hope 都是用 pnpm 进行管理的。

插件

找插件/主题推荐使用vuepress-toolsopen in new window;

使用方式通用流程：1. 安装插件 2.在.vuepress/config.js中添加插件并配置。

@vuepress/开头的都是官方维护的插件，同时使用前注意插件支持哪个 VuePress 的版本（0.x 1.x 2）。

  • @vuepress/plugin-back-to-top回到最上。

    官方没写说明也没写配置，扫了一眼代码，似乎是300行以上触发。

    拖了个以前写的 rocketMQ 分析源码的笔记测试了一下，右下角会自动出现一个向上的箭头。

  • @vuepress/plugin-medium-zoom图片缩放

    点点看

    whale balloon
    whale balloon

主题

Hopeopen in new window 主题自带创建项目的脚手架，创建出的项目还自带文档，你可以在另外一个端口额外启动一个当说明书看。

命令

  • 创建
pnpm create vuepress-theme-hope my-docs
  • 使用
// 启动开发服务器
pnpm docs:dev
// 构建项目并输出
pnpm docs:build
// 清除缓存并启动开发服务器
pnpm docs:clean-dev

样式相关

基本围绕着 src/.vuepress/styles 目录下的三个文件进行自定义。

  • 主题颜色覆盖
    src/.vuepress/styles/palette.scss文件中进行修改。

    其中 $theme-color: #82a6b1; 主题颜色影响各种高亮位置。
    明暗切换如下:

    $bg-color: (
light: #ffeaec,
dark: #343f3e,
);

    其他更多可以参考该主题的说明文档-样式配置open in new window部分，从颜色调整到布局设置啥的很全。

  • 隐藏打印按钮

    src/.vuepress/theme.ts中添加 print:false,

功能

  • 自动创建readme.md

    目录下没有readme.md时，会自动生成一个目录页面，该页面标题就是目录本身，外带自动驼峰。

    比如 mq/rocketmq/下没有手动创建readme.md时，它自动生成一个标题为 Rocketmq的目录页面。 如果是 rocket-mq/，则生成 RocketMq 作为标题。

上次编辑于:
贡献者: Lament