文章目录 「隐藏」
老张一直想把wordpress和memos能整合在一起，前几天在段先生的博客上看到了教程，便死皮赖脸的问他方法，原来是AI搞定的。刚开始的时候是直接拿段先生的用，但是里面有一些达不到自己想要的效果。比如段先生是从memos的RSS文件里取数但，如果memo里有多篇图片的话，RSS只能输出一张链接地址，其他找不到。通过找木木大佬，用了他提供的《Memos API 非官方不完全说明》便可以解决。另外在CSS布局上也不是自己想要的效果，便想着自己也来让AI搞吧！
让AI帮你写代码，你必须要学会怎么样能更好的和AI对话，必须要有一点点的代码基础，才能把把问题问在点子上。我在把memos的API输出的数据模式先告诉AI，然后再提出自己的要求，要求如下：
我想在wordpress获取memos的api发布第一条动态内容，API的链接地址是https://zhangbo.net/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=1 ,内容格式如下：
按以下要求进行操作：
1.读取第一个"id"后面的数据，并形成“https://zhangbo.net/m/+“id后面的数据”” 做为链接，赋值给变量$link_content
2.读取"content"后面的数据，读取以#号开始、空格结束的内容，并在前面加#号后赋值给变量$tag_content。
3.读取"createdTs"后面的数值，转化为时间后与当前时间计算时间间隔。时间间隔为1小时内的，以时间间隔+“分钟前”赋值给$time_content;时间间隔为24小时内的，以时间间隔+“小时前”赋值给$time_content;时间间隔为30天内的，以时间间隔+“天之前”赋值给$time_content;时间间隔超过30天的，直接以“年月日”形式赋值给$time_content。
4.读取"content"后面的数据，排除“![]()”图片形式、排除#、#及空格前的内容后，赋值给$content。
5.读取"content"后面的数据，如果有“![]()”图片形式，将（）内的图片链接赋值给$image_content;如果"externalLink": 后面有数据，赋值给$image_content；如果"filename"后面有数据，将以“https://zhangbo.net/o/r/+filename上第四行ID后的数值+"filename"的数据”赋值给$image_content。如果以上情况都存在，那将以数值组形式赋值。
以上生成的代码，将保存在wordpress的主题文件functions.php中以便调用。
按以下要求生成CSS代码
1.对于在首页展示的要求，在首页文章列表上方，与首页文章空两行
2.显示框宽度100%、背景灰色、四角椭圆。
3.第一个DIV展示框以"h2”格式展示“最新动态”四个字、靠左对齐、左边距空20px；务必同一行展示$time_content值，右居中对齐，右边距空20PX
4.第二DIV插入细实线、深灰色
5.第三DIV展示$content值
5.第四DIV展示$image_content值的缩略图，缩略图四角椭圆并有阴影，如果多图从左往右排列。并按确保引入 Lightbox.js，也写入到本代码中，达到点击放大效果
6.第五DIV靠左对齐展示$tag_content值，背景灰色并四角椭圆，靠右展示“点击评价”点击链接到$link_content。
再生成输出代码以便插入在首页文件index.php，以便在首页显示。/我分别测试了官方GPT、三方GPT和豆包，结果是官方GPT直接来句“问题太复杂，请分类进行提问”，三方GPT给出的代码效果完全不对，而豆包给出的代码基本上达到要求。当然，还是由于自己的表述，导致代码在图片显示这块有些问题。今天中午利用几分钟时间，进行了修改，对获取图片链接地址重新让AI写，我是这样提问的：
我现在的要求是其他代码不需修改，只对获取图片链接重新按以下要求来修改
1.读取"content"后面的数据，如果有“![]()”图片形式，将（）内的图片链接赋值给$image_content;
2.获取 "resourceList": []的中括号里数据，这是图片组，每组以{}进行区分，查询每个{}内的"externalLink"，如果"externalLink": 后面有数据，赋值给$image_content；如果"externalLink"无数据，则以“https://zhangbo.net/o/r/+该图片id+"filename"的数据”赋值给$image_content。
如果以上情况都存在，那将以数值组形式赋值。经过这样的修改，图片才得要正确显示。后来又陆陆续续的修改了CSS样式，最终达到目前的效果。
现在把相关代码贴给大家吧，需要的自取，不合自己要求的，也可以让AI帮你来修改。
1.把下面的代码插入到主题文件的index.php合适位置。
<?php
$memoOutput = processMemoData();
if ($memoOutput) {
echo $memoOutput;
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox-plus-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">/* Your code... */2.把CSS样式代码放置到主题CSS定义设置里，当然也可以直接放到style.css中。
/* 首页调用memos效果---开始 */
/* 缩小与顶部距离，增加与首页文章列表距离 */
.memo-display {
margin-top: 0px; /* 减少与顶部的距离 */
margin-bottom: 40px; /* 增加与文章列表的距离 */
width: 100%;
background-color: #f2f2f2;
border-radius: 10px;
padding: 20px;
border: 1px solid #ccc; /* 添加细线边框，颜色为浅灰色 */
}
/* 第一个 DIV：展示“最新动态”和时间 */
.memo-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.memo-header h2 {
margin-left: 0px;
}
.memo-header span {
margin-right: 0px;
}
/* 第二 DIV：插入细实线、深灰色 */
.memo-divider {
border-top: 1px solid #999;
margin: 10px 0;
}
/* 第三 DIV：展示内容 */
.memo-content {
margin-bottom: 10px;
}
/* 第四 DIV：展示缩略图 */
.memo-images {
display: flex;
flex-wrap: wrap;
}
.memo-images img {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin-right: 10px;
cursor: pointer;
transition: transform 0.3s ease; /* 添加过渡效果 */
}
.memo-images img:hover {
transform: scale(1.1); /* 鼠标悬浮时放大 */
}
/* 第五 DIV：展示标签和链接 */
.memo-footer {
display: flex;
align-items: center;
margin-top: 10px; /* 设置与上面容器的距离为 30px */
}
.memo-footer div:first-child {
background-color: #9999;
border-radius: 6px;
padding: 5px 10px;
margin-right: 10px;
}
.memo-footer a {
text-decoration: none;
margin-left: auto; /* 靠右对齐 */
margin-right: 0px; /* 右边距 20px */
}
/* 首页调用memos效果---结束 */
3.把下面代码插入到主题functions.php文件中。
/* Your code... */
//-------首页调用memoe代码-----开始
function processMemoData() {
$api_url = 'https://zhangbo.net/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=1';
$response = wp_remote_get($api_url);
if (is_wp_error($response)) {
return;
}
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (empty($data)) {
return;
}
$memo = $data[0];
$id = $memo['id'];
$link_content = 'https://zhangbo.net/m/'. $id;
$content = $memo['content'];
preg_match('/#([^ ]*)/', $content, $matches);
$tag_content = isset($matches[1])? '#'. $matches[1] : '';
$createdTs = $memo['createdTs'];
$current_time = time();
$time_diff = $current_time - $createdTs;
// 处理时间差
if ($time_diff < 60 * 60) {
$time_content = floor($time_diff / 60). '分钟前';
} elseif ($time_diff < 24 * 60 * 60) {
$time_content = floor($time_diff / (60 * 60)). '小时前';
} elseif ($time_diff < 30 * 24 * 60 * 60) {
$time_content = floor($time_diff / (24 * 60 * 60)). '天之前';
} else {
$date = date('Y-m-d', $createdTs);
$time_content = $date;
}
// 检查内容中的图片链接
preg_match_all('/!\[.*?\]\((.*?)\)/', $content, $image_matches);
$image_content = [];
$has_external_link = false;
// 检查内容中的图片链接并添加到 $image_content
if (!empty($image_matches[1])) {
$image_content = array_merge($image_content, $image_matches[1]);
}
// 检查 resourceList 中的 externalLink
if (!empty($memo['resourceList'])) {
foreach ($memo['resourceList'] as $resource) {
if (!empty($resource['externalLink'])) {
// 检查 externalLink 是否是完整的图片链接
if (filter_var($resource['externalLink'], FILTER_VALIDATE_URL) &&
preg_match('/\.(jpg|jpeg|png|gif|bmp|webp)$/i', $resource['externalLink'])) {
$image_content[] = $resource['externalLink'];
$has_external_link = true;
}
} else {
if (!empty($resource['filename'])) {
// 这里获取当前图片所在的资源对象的 id，作为图片 id
$resource_id = $resource['id'];
$image_content[] = 'https://zhangbo.net/o/r/'. $resource_id. '/'. $resource['filename'];
}
}
}
}
$content_without_tags_and_images = preg_replace('/#.*? /', '', $content);
$content_without_tags_and_images = preg_replace('/!\[.*?\]\(.*?\)/', '', $content_without_tags_and_images);
$content = $content_without_tags_and_images;
// 构建输出内容
$output = '';
return $output;
}
OK，结束！折腾十几个小时，就是出了这篇教程！！
嚯，都开始让AI干活了
赶紧来抄作业了，俺们也要“武装”起来
memos 的 api 更新太沙雕了，动不动废弃 api，也是无语，整体来说产品规划非常不友好。
@obaby： 确实沙雕，导致我现在的说说广场还有一大堆bug，也懒得改了，能浏览就行。
牛哇，为你折腾不止的精神点赞
优秀
哇哇，你这个更完美，现在我用的只是调用文字，图片的不调用。
有技术就是好，自己动手丰衣足食。
memos每个版本都不同……我都不敢动了
手机端可能需要调整一下容器右侧的外边距
越来越专业了