自从把 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 禁止名单等等

去年注册了两个新域名，包括博客的和jaychou-wiki的，但jauchou-wiki已经开始收录了，况且域名也是要保留的，备案号也会注销。传统的保留参数重定向应该是用nginx配置，但专门去再买一台服务器有点过分了，找了下CloudFlare的重定向规则，记录一下以备不时。（比国内的好用多了啊，dnspod只支持转发到根域名，还不支持未备案域名，那么已备案域名重定向算空壳网站还是算未悬挂备案号啊？）

前置条件

保证开启CloudFlare的CDN小云朵，不然规则不会生效（所以实际上这个301是靠CDN实现的）

在规则-创建规则的列表创建新重定向规则。

配置参数

匹配条件

CloudFlare的重定向规则需要先选择条件，即是所有这个根域名的流量全部重定向还是匹配到设置的条件后重定向，如果是确定长期弃用的域名可以选所有传入请求，如果根域名下有其他二级域名还有其他用途，最好选择自定义筛选表达式

选择后需要配置条件，字段可选的有很多，包括Cookie、国家、url等，因为是废弃域名，选择主机名（即解析的域名），填入想转发的域名，如www.aaa.com

定向规则

接下来配置重定向规则，类型选择了静态，则所有匹配的流量均转发到一个固定的url链接，但我们是要实现带参数转发，所以选择动态。

填入表达式，保留url路径参数的表达式为

concat("https://www.bbb.com", http.request.uri.path)

最终效果就是访问 www.aaa.com/ccc.html，浏览器会获取到301状态码，跳转到www.bbb.com/ccc.html

反复修改多次配置都没用，最后终于发现问题了，宝塔的ssl关闭状态下还是会默认https访问（不是浏览器缓存，隐私模式也这样）。

最终源站的https继续开启，回源host设置为加速域名，回源协议也https，终于正常了。。。

宝塔应用列表搜索docker安装

Docker中安装Bitwarden

• 获取源
  打开镜像管理，获取Bitwarden_rs的官方镜像bitwardenrs/server
  （Bitwarden_rs是Bitwarden的民间第三方版本）
• 创建容器
  容器端口为80，服务端口随便填一个未使用的端口（不能冲突）；
  服务器目录填上/www/wwwroot/xxxx.com（可以先创建网站，然后用网站的所在目录），容器目录为/data；
  以上两个都需要点一下加号，不然不会保存。
  完成后点击提交
  

添加网站

新建一个网站，域名填上（这步可以在创建docker之前），数据库不创建，PHP版本选纯静态。
设置网站，选SSL，申请一个免费的SSL，开启强制HTTPS；
点击反向代理，添加一个反代，目标URL为http://127.0.0.1:xxxx（端口为刚才创建容器时的端口）。

放行端口

安全设置里放行容器的端口，然后就可以直接访问域名了（要解析过）

关闭注册

另外
关闭注册：第一次注册好之后，第二次启动的时候，使用ssh连接到服务器。

docker run -d –name 容器名称 \
-e SIGNUPS_ALLOWED=false \
-v 目录映射:/data/ \
-p 端口映射:80 \
bitwardenrs/server:latest

工具集

• Lunacy
  免费的图标设计工具，Windows平台，兼容Sketch
• Axure…的一个汉化包
  我记得有一个汉化包做的比Axure中文网好，忘记了，以后补
• uTools
  效率工具，类似于IOS的捷径
• Everything
  强大的搜索工具，可快速搜索全盘，可使用通配符高级检索，后来用过Listary之后就不用了囧…
• Listary
  强大的快捷启动工具，顺便可以快捷检索文件，后来用过uTools后就不用了囧…（但我的快捷搜索好像不见了）

网站

• freecrackdownload
  一个….破解软件下载网站，英文，应该大部分人的盗版Axure就是这家网站提供的…
  （支持正版从我做起）
• 大数据导航
  一个网站导航，集合了超多的数据类网站，分类展示。包含Google趋势/百度指数/阿里云Quick BI/霍普金斯/COVID-19追踪工具/世界经济可视化/GlobalStat/Google数据集搜索/世界财富与收入数据库/微信指数/微博指数

参考集

• 数据统计面板后台原型
  基本包含所有C端产品用户数据统计功能

基本用法

时序图

声明产品的行为顺序，每条消息对应一条触发事件。

基本用法

示例：
@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放token
用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml

->或–>表示实线箭头，此写法无需事先声明对象，开始编写前首先声明开始与结束，内容为需表现的对象间的触发事件，及该事件的内容。

进阶用法