ai-要約を取得 文章摘要

hexo + butterfly 个人博客 & webstack 主题个人导航搭建全过程系列

  1. hexo_blog の誕生 - 基础环境配置（一）
  2. 博客魔改（二）
  3. gitactions 实现自动化部署（三）
  4. 独立开发tooltip遇到的实际问题（四）
  5. 实现 github & aliyun 双端部署（五）
  6. hexo_blog 多语言改造（六）⇦当前位置🪂

探索 hexo + butterfly blog 多语言版本的改造 - 本地项目改造

使用 npm workspace 管理公共依赖

点击查看详情

  1. 从远程仓库拉取最新源码时，为其创建一个外部文件夹，例如 hexo_blog，嵌套源码在源码文件夹内

  2. 然后，复制一份源码文件夹，重命名为 hexo_blog_en

  3. 然后，在外层执行 npm init -y，然后填写如下配置

    // 在运行 npm init -y 命令时，-y 是一个快捷选项，代表 "yes"。它的作用是快速生成一个默认的 package.json 文件，而无需通过命令行交互手动填写各项配置。

    {
      "name": "HexoBlogSource",
      "private": true, // 防止项目被发布到 npm 上，workspaces 必须是私有的
      "workspaces": [
        "hexo_blog",
        "hexo_blog.en",
        "hexo_blog.ja",
      ]
    }

    // 这会告诉 npm 管理多个子目录
    // npm install 会在外层 node_modules 中安装所有的依赖，并且各个子目录都会继承这些依赖。

  1. 然后，修改但语言版本源码中的 package.json 文件中的 name 字段，确保名称不同

    // 各自版本中的 package.json

    ​

  2. 至此，返回至外层目录，执行 npm i ，将项目所需的依赖安装至外层目录，即可以通过顶层的 node_modules 使用依赖，避免重复安装。

git 仓库迁移&改造

问题谨记

点击查看详情

  1. relative_link: true

    当 relative_link: true 时，生成的链接是基于当前页面路径的相对路径，而不是从站点根目录开始的绝对路径。这种行为可能会导致从其他页面跳转到首页的链接错误。

    当站点启用了 Pjax（如 Butterfly 主题默认启用），可能会导致相对路径的链接错误。原因是：

    • Pjax 仅加载页面的内容部分，而不刷新整个页面（包括 <head>）。
    • 页面在加载后，浏览器的当前路径没有完全更新，导致解析相对路径时出错。

    例如：

    • 从 /posts/post1/ 页面跳转到 /about/ 页面后，浏览器当前路径仍然显示为 /posts/post1/。
    • 再点击“首页”链接，Pjax 会错误地以 /posts/post1/ 为参考路径，解析相对路径，生成错误的跳转链接。

    最终跳转到类似错误路径：

    • https://youruilin.github.io/posts/post1/index.html

解决方案

改用 relative_link: false