自从把 JayChou’s wiki 的 CI 迁移到腾讯云 EdgeOne Pages 就发现了一个问题，好像每个页面的撰写时间都是错的，全部显示的是最近一次构建的时间（实际上是最近一次提交的时间），一直想探究下怎么回事，是不是我项目配置有问题，之前检查过Vuepress-Hope有关页面元数据的的文档，没有发现任何我的项目存在错误的。

直到昨天想根据hope提供的插件方法在每个页面增加更新日志，提交更新后访问，每个页面的更新日志都是相同的最近一次提交的消息。试着访问了 Vercel 和 Netlify 的默认项目域名发现其他CICD平台都是正常展示的，这就不能忍了。

问了 DeepSeek 才得到正确答案，是因为腾讯云 EdgeOne Pages 的浅克隆机制：

默认浅克隆 (Shallow Clone)：

• EdgeOne Pages 在构建时默认使用 git clone --depth=1（只克隆最近一次提交）
• 导致 Git 插件无法访问完整历史记录，只能获取到最近一次提交信息

DeepSeek同时给出了解决办法：

方案一：强制深度克隆（推荐）

在 package.json 的构建命令前添加深度克隆指令：
"scripts": {
"prebuild": "git fetch --unshallow || true",
"build": "vuepress build src"
}

方案二：自定义构建命令

git config core.quotepath false &&
git fetch --unshallow &&
npm install &&
npm run build

不想在项目Git提交记录拉屎测试了（拉了太多了），所以选择了在腾讯的控制台里改构建命令，注意 DeekSeek 给出的命令是有问题的，正确的构建命令应该是

git config core.quotepath false && git fetch --unshallow && pnpm docs:build

重新部署，完美 一切都正常了。

– 左右滑动按顺序浏览页面内其他的图片
– 查看图片的描述
– 对图片进行缩放
– 全屏浏览图片
– 下载图片
– 分享图片

但无法实现图片的左右滑动，当单个页面需要引用大量图片时，即便每张图片都单独设置了尺寸，也会显得很杂乱。找了很久解决方案，在hope页面的源码仓库中发现作者本人是直接写的html平铺效果。

但是每个页面都单独写html也太麻烦了，所以使用AiAgent（忘记是阿里通义灵码还是腾讯CodeBuddy了，反正这种小任务都差不多）在src.vuepress\styles\index.scss添加了自定义全局样式，最终实现效果如下：

// 图片滑动组件样式
.image-scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 1rem 0;
}

.image-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0;
}

.image-scroll-content {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  min-width: max-content;
}

.image-scroll-content img {
  height: 200px;
  min-width: 300px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 图片说明文本样式
.image-scroll-content figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-scroll-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #666;
  text-align: center;
}

@media (max-width: 768px) {
  .image-scroll-content img {
    height: 150px;
    min-width: 200px;
  }
  
  .image-scroll-content figcaption {
    font-size: 0.8rem;
  }
}

使用时直接在页面中添加：

<div class="image-scroll-container">
  <div class="image-scroll-wrapper">
    <div class="image-scroll-content">
        <figure>
            <img src="图片链接" alt="图片标签" />
            <figcaption>图片显示名</figcaption>
        </figure>
    </div>
  </div>
</div>

好么，刚觉得这个需要删了，就给我贡献素材了

25-04-24 Markdown内的HTML标签内使用相对路径链接错误
可能因为vue是单页应用，html表格中不能直接使用/show/2001这样的相对路径导航，可以正常跳转但会导致页面样式错误，必须使用完整的https://链接
更新：好像不是因为这个，发布到线上之后发现问题还是存在！！应该是页面内容少就会出现这个问题，人麻了

部署

参考官方网站，数据引擎LeanCloud ，服务端Vercel。

开启邮件提醒功能

在 Vercel 的项目中添加以下新的环境变量：

• AUTHOR_EMAIL：博主邮箱，用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知。
• SMTP_SERVICE：SMTP 邮件发送服务提供商，可以在这个页面查看所有支持的运营商。如果没在列表中的可以自行配置 SMTP_HOST 和 SMTP_PORT。
• SMTP_HOST：SMTP 服务器地址，如果未配置 SMTP_SERVICE 的话该项必填。
• SMTP_PORT：SMTP 服务器端口，如果未配置 SMTP_SERVICE 的话该项必填。
• SMTP_USER：SMTP 邮件发送服务的用户名，一般为登录邮箱。
• SMTP_PASS：SMTP 邮件发送服务的密码，一般为邮箱登录密码，部分邮箱（例如 163 邮箱）是单独的 SMTP 密码。
• SITE_NAME：网站名称，用于在消息中显示。
• SITE_URL：网站地址，用于在消息中显示。
• SENDER_NAME：自定义发送邮件的发件人，选填。
• SENDER_EMAIL：自定义发送邮件的发件地址，选填。
• MAIL_SUBJECT：评论回复邮件标题自定义。
• MAIL_TEMPLATE：评论回复邮件内容自定义。
• MAIL_SUBJECT_ADMIN：新评论通知邮件标题自定义。
• MAIL_TEMPLATE_ADMIN：新评论通知邮件内容自定义。

自定义邮件回复标题和内容

MAIL_SUBJECT、MAIL_TEMPLATE、MAIL_SUBJECT_ADMIN、MAIL_TEMPLATE_ADMIN 四个环境变量是用来自定义回复邮件标题和内容的。不过一般而言，邮件回复的时候，标题和内容都不是固定的。比如说 A 回复了某条评论，系统发送邮件通知评论作者 B 的时候，标题最好含有 B 的名字。内容也应该含有 A 对 B 的什么评论作出了什么评论。这些内容会随着评论作者和评论内容的不同进行改变，所以不能直接简单的设置成固定的内容，需要设定一个回复模板。

模板可以通过 self、parent 和 site 对象传递参数，其中分别包含以下变量：

• self：该条评论本身变量备注nick评论者姓名mail评论者邮箱link评论者网址url文章地址comment评论内容
• parent：该条评论的回复对象（父评论）变量备注nick评论者姓名mail评论者邮箱link评论者网址type评论者类型comment评论内容
• site：网站配置变量备注name博客名字url博客网址postUrl评论完整网址

比如想要显示评论者姓名，就用 {{self.nick}}。这样一来，我们就可以对上述四个环境变量设定模板。不过由于 Vercel 的环境变量大小限制为 4KB，如果你的模板存储需求比较大，需要直接使用代码配置。

使用代码配置则需要到 GitHub 上自动创建的那个私人仓库。仓库中有一个名为  的文件，最初的内容为：index.js

在 {} 中添加相关配置即可。下面是完整的代码：

在 index.js文件中，还可以设定安全域名、违禁词、IP 禁止名单等等