前段时间花了那么多的时间折腾了《WordPress首页调用memos方法!》后,怎么又来折腾Wordpress首页调用typecho呢!原因有这样的两点,首先memos的作者对memos的更新真的是太随意了,每次版本的升级,你会想不到他会把什么功能给删掉、或是更想不到把数据库的结构给改了、还有就是随意改变API的接口。也正因为他的随意,一部分人还保持在低版本来使用,另外一部分人就是直接弃用了,所以我想着说不定哪一天也会弃用memos。另外的一个原因就是除了老张博客之外,我还有一个老张随笔,一直保持每日一更新,字数都是在二百字,就像朋友圈一样,最初是用typecho程序,后来改用memos,目前那个typecho上面还放着一千两百多篇随笔。我想与其这样牵强的用着memos,不如退回来用typecho算了。
有了上面的想法后,就想着把我的wordpress和typecho来个“整合”,在wordpress调用typecho的首篇文章。有了上一次的折腾,这次算是轻车熟路了,前前后后的折腾有两个小时。通过这次的折腾,让我对AI又有了新的认识,上次我认为是“豆包最聪明”,结果经过这次的“折腾”发现把相同的问题多次的提问同一个AI,每次他给出的答案也是不一样的。单单就响应速度来说,官方的GPT最为快,所以这次代码就是借助官方GPT来完成的。话不多说,直接上代码吧!
忘了一个重要的事: typecho本身没有提供API接口服务,这里我找到一款插件,Restful,安装后直接启用就行,因为我是直接调用文章的,其他的API接口就被我给关了!
1.把下面的代码插入到主题文件的index.php合适位置。
<?php
$data = fetch_typecho_data();
if ($data):
?>
<div class="latest-update" style="background-color: #f8f8f8;">
<div class="latest-update-header">
<h2>最新动态</h2>
<span class="latest-update-time"><?php echo esc_html($data['time_content']); ?></span>
</div>
<div class="latest-update-divider"></div>
<div class="latest-update-content"><?php echo esc_html($data['content']); ?></div>
<div class="latest-update-images">
<?php foreach ($data['image_content'] as $img_url): ?>
<a href="<?php echo esc_url($img_url); ?>" data-lightbox="latest-update-gallery">
<img src="<?php echo esc_url($img_url); ?>" alt="Image">
</a>
<?php endforeach; ?>
</div>
<div class="latest-update-footer">
<span class="latest-update-tag"><?php echo esc_html($data['tag_content']); ?></span>
<a class="latest-update-link" href="<?php echo esc_url($data['link_content']); ?>" target="_blank">查看全文</a>
</div>
</div>
<?php endif; ?>
<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">
2.把CSS样式代码放置到主题CSS定义设置里,当然也可以直接放到style.css中。
/* 首页调用typecho样式 */
.latest-update {
width: calc(100% - 40px); /* 设置宽度为100%减去40px,确保有左右边距 */
background-color: #f8f8f8 ; /* 强制设置背景颜色为浅灰色 */
border: 1px solid #ddd; /* 添加1像素的灰色边框 */
border-radius: 10px; /* 圆角边框,半径为10px */
padding: 20px 20px 10px 20px; /* 内边距,上下10px,左右20px */
margin: 20px 0; /* 外边距,上下20px,左右0 */
text-align: left; /* 文本左对齐 */
margin-top: -10px; /* 减少与顶部的距离为0 */
margin-bottom: 30px; /* 增加与文章列表的距离为40px */
margin-right: 20px; /* 设置右边距为20px */
}
.latest-update-header {
display: flex; /* 使用弹性盒模型布局 */
justify-content: space-between; /* 头部元素左右分散排列 */
align-items: center; /* 垂直居中对齐 */
margin-bottom: 10px; /* 头部与下方内容的外边距为10px */
}
.latest-update h2 {
font-size: 15px; /* 标题字体大小为15px */
margin: 0; /* 去除默认外边距 */
padding-left: 0px; /* 左边填充为0 */
}
.latest-update-time {
font-size: 14px; /* 时间字体大小为14px */
color: #666; /* 时间文本颜色为中灰色 */
margin-right: 0px; /* 右边距为0 */
}
.latest-update-divider {
border-bottom: 1px solid #333; /* 添加底部边框,颜色为深灰色 */
margin: 10px 0; /* 上下外边距为10px */
}
.latest-update-content {
text-align: left; /* 内容文本左对齐 */
line-height: 1.5; /* 行高设置为1.5倍 */
margin: 10px 0; /* 上下外边距为10px */
}
.latest-update-images {
text-align: left; /* 图片区域文本左对齐 */
margin: 10px 0; /* 上下外边距为10px */
}
.latest-update-images img {
width: 100px; /* 图片宽度为80px */
height: 75px; /* 图片高度为80px */
object-fit: cover; /* 图片覆盖方式,保持比例并裁剪 */
border-radius: 8px; /* 图片圆角,半径为8px */
box-shadow: 0 4px 10px rgba(0, 0, 0, 1); /* 添加阴影效果 */
margin: 3px; /* 图片外边距为5px */
transition: transform 0.3s, opacity 0.3s; /* 添加平滑过渡效果 */
}
.latest-update-images img:hover {
transform: scale(1.1); /* 鼠标悬停时放大10% */
opacity: 0.9; /* 鼠标悬停时透明度降低到0.9 */
}
.latest-update-footer {
display: flex; /* 使用弹性盒模型布局 */
justify-content: space-between; /* 底部元素左右分散排列 */
align-items: center; /* 垂直居中对齐 */
margin-top: 10px; /* 底部与上方内容的外边距为10px */
padding-top: 10px; /* 上内边距为10px */
border-top: 1px solid #ddd; /* 添加顶部边框,颜色为浅灰色 */
}
.latest-update-tag {
background-color: #e0e0e0; /* 标签背景颜色为淡灰色 */
border-radius: 5px; /* 标签圆角,半径为5px */
padding: 5px 10px; /* 内边距,上下5px,左右10px */
font-size: 14px; /* 标签字体大小为14px */
}
.latest-update-link {
text-decoration: none; /* 去除链接的下划线 */
color: #0073aa; /* 设置链接颜色为蓝色 */
font-size: 14px; /* 链接字体大小为14px */
}
/* 首面调用typecho结束 */
3.把下面代码插入到主题functions.php文件中。
//-------首页调用typehco代码-----开始
function fetch_typecho_data() {
$api_url = "https://suibi.zhangbo.net/api/posts?pageSize=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 ($data['status'] !== 'success' || empty($data['data']['dataSet'])) {
return;
}
$post = $data['data']['dataSet'][0];
// 1. 链接内容
$link_content = "https://suibi.zhangbo.net/archives/" . $post['cid'] . ".html";
// 2. 标签内容
$tag_content = "#" . $post['categories'][0]['name'];
// 3. 时间内容
$created_time = (int)$post['created'];
$current_time = time();
$time_diff = $current_time - $created_time;
if ($time_diff < 3600) {
$time_content = floor($time_diff / 60) . "分钟前";
} elseif ($time_diff < 86400) {
$time_content = floor($time_diff / 3600) . "小时前";
} elseif ($time_diff < 2592000) {
$time_content = floor($time_diff / 86400) . "天前";
} else {
$time_content = date("Y年m月d日", $created_time);
}
// 4. 摘要内容
$digest = strip_tags($post['digest'], "");
$content = mb_strlen($digest, 'UTF-8') <= 200 ? $digest : mb_substr($digest, 0, 200, 'UTF-8') . "......";
// 5. 图片内容
preg_match_all('/<img.*?src=["\'](.*?)["\'].*?>/i', $post['digest'], $matches);
$image_content = $matches[1];
return [
'link_content' => $link_content,
'tag_content' => $tag_content,
'time_content' => $time_content,
'content' => $content,
'image_content' => $image_content
];
}
还真是老张+AI=无限可能,太能整活了
@Feng: 以前是不知道AI,现在用起来,不用代码也可以实现自己想要的东西。
memos篇现在折腾结束咯
@段先森: 开始折腾其他的了,
曾经我也用ty搭建朋友圈主题
博客用wp,想过把页面放wp,可惜不会代码哈哈哈
@ah新: 我现在也就是主用Wp和ty
wordpress就没有类似随笔的功能吗?
@广树: 有些主题带的。
这嫁接效果不错~~
@obaby: 都是AI做的!
这是用 AI 砸了程序员的饭碗😂
@沉沦: 就是的,想不会代码的人也会编程了!
Memos简洁,就是数据没法管理。typecho写几句又觉得不实用
@空空裤兜: 其实现在很多typecho有类似于朋友圈的主题,我感觉用着也很好。
博主能不能出个教程zblog转typecho的
在考虑转换
@faryou: 网上这个教程有的呀
额,要不转换一下数据格式,全部迁移过来?
@Kevin: 这个还没有考虑过,下步想着折腾,可以直接开发主题,带这个功能的,就不需要运行两个程序了!
上次我给ai问麻了。
@网友小宋: 我也是,主要是基础不行,没有问到点子上去!
早弃用memos是个好选择,tp还是好用的,我现在就是用的ty来做记录,当然博客也是tp,轻量,速度快,非常好
@满心: 已经有这个打算了!!
想法是真的好,这两天我也在折腾,重写“朋友圈” 因为前面的版本有欠缺。
@Dabenshi: 想法实现了。。呵。
这个功能很牛逼,写写怎么利用AI吧?
@秦大叔: 写利用Ai感觉没有什么好写的,主要是提问得要问到点子上去。
第一次看到老张的博客,经验了,作为一个程序员,非常佩服您的“折腾”能力!
我正准备搭建一个个人博客,您博客的主题很好看,是仅仅用WordPress+Twenty Twelve主题就能搭建出来您博客这样的效果吗?
@dearliuliu: 我这个主题也是别人做好了的,直接拿来用的,底下有链接。
我直接调用rss,输出标题放在侧栏,也还行
@Mr.He: 每个人的想法做法不一样,达到自己的目标就行。
话说typecho还有在维护更新吗?记得1.0版本好久才发布出来
@Liudon: 现在版本是1.2.1万年不变了估计 。
现在的首页很酷了,尤其memos那个框,我也想想哪天来抄作业,看看怎么把你这样的模式植入到我的com站。
@XIGE: 我也是看了你的,才有这个想法的。
有想法加AI就可以无限可能了。
@威言威语: 对,现在基本上实现了自己想的东西。
打到memos,从老张做起。
打倒memos,从老张做起。
@keyle: memos也能将就着用!!
无折腾不生活。哈哈。
@wu先生: 对呀,总要找些事的折腾!
懂技术就是好,你的网站布局是真赞!
爱折腾的老张依然爱折腾,还是原来的老张,一样的优秀,不闲着就是干!
样式和博客整体风格很搭啊。老张哥审美可以的
wp和ty,都是老朋友了
许久没来,这几天真多事
写得太复杂了,我的博客首页,右上角就是调用另外一个博客的rss,写入到文件做缓存,就一个读取rss的代码