1.把下面的代码插入到主题文件的index.php合适位置。
</s><i> </i> <?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... */<i> </i><e>
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 = '';
$output.= '';
$output.= '最新动态'. $time_content. '';
$output.= '';
$output.= '';
$output.= ''. $content. '';
if (!empty($image_content)) {
$output.= '';
foreach ($image_content as $image_link) {
$output.= '';
}
$output.= '';
}
$output.= '';
$output.= ''. $tag_content. '';
$output.= '>>点击评价';
$output.= '';
$output.= '';
return $output;
}
```