效果展示
效果说明
在默认情况下，给对方发送连接的时候是以文本的形式展示的可点击的超链接，但是经过处理之后可以将你发送的连接一样卡片的形式展示。
实现步骤
第一步：打开微信云托管
微信云托管 (qq.com)
https://cloud.weixin.qq.com/cloudrun
第二步：微信扫码登录
选择项目进行部署【自己的】，此处我选择的是这一个，其实只要选一个就行。
第三步：对项目进行快速部署，只需要选择ThinkPhp（Apache）即可，然后等待部署
第四步：部署完成后，就能够在服务列表中看到刚才所部署的项目
第五步：将封面图和写好的页面上传到对象存储当中
第六步：点击上传的页面的详情按钮，然后复制下载地址，发送给对方即可
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI工具资料包</title>
<!-- 添加Open Graph (OG) 标签 -->
<meta property="og:type" content="website">
<meta property="og:title" content="AI工具资料包">
<meta property="og:description" content="这是关于AI工具的资料包，包含各种有用的资源。">
<!-- <meta property="og:url" content="https://yourdomain.com/path/to/this/page"> -->
<meta property="og:image" content="https://7072-prod-0grhs8soe4597496-1328499642.tcb.qcloud.la/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240805152200.jpg?sign=66359676f856f4e311ff302a671d1ca0&t=1722845251">
<!-- 可选: 添加Twitter Card标签 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="AI工具资料包">
<meta name="twitter:description" content="这是关于AI工具的资料包，包含各种有用的资源。">
<meta name="twitter:image" content="https://7072-prod-0grhs8soe4597496-1328499642.tcb.qcloud.la/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240805152200.jpg?sign=66359676f856f4e311ff302a671d1ca0&t=1722845251">
</head>
<body>
<div>
<img src="https://7072-prod-0grhs8soe4597496-1328499642.tcb.qcloud.la/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240805145534.jpg?sign=2dbb8555e12d0aa856b1bd8eb38b6d64&t=1722840992" alt="个人照片" style="max-width: 100%; height: auto;">
</div>
</body>
</html>代码说明
Open Graph (OG) 标签：
og:type: 定义页面类型，这里设为website。og:title: 页面的标题。og:description: 页面的描述。og:url: 页面的URL地址。og:image: 封面图片的URL地址。Twitter Card 标签（可选）：
twitter:card: 设置为summary_large_image表示大图像摘要卡。twitter:title: 页面的标题。twitter:description: 页面的描述。twitter:image: 封面图片的URL地址。
为了让图片适应手机屏幕的大小，我们需要确保 <img> 标签中的图片能够响应式地调整尺寸。这可以通过设置 max-width 和 height: auto 的 CSS 属性来实现。
