源代码
头部框架，这里直接用的【插入代码v1.10】插件，插入到头部
替换文章链接、图片，可添加多个文章链接
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推荐文章框架</title>
<link rel="stylesheet" href="view/css/styles.css">
</head>
<body>
<div class="recommended-section">
<div class="recommended-image">
<img src="https://aifeisheng.com/upload/attach/202403/1_U2YM35BUAWT3UEZ.jpg" alt="推荐文章图片">
</div>
<div class="recommended-content">
<!-- 给大标题添加超链接和醒目的样式 -->
<h1 class="main-title"><a href="https://aifeisheng.com/thread-122.htm">关注本站公众号：AI飞升笔记</a></h1>
<!-- 给小标题添加超链接 -->
<h2><a href="https://aifeisheng.com/thread-1.htm">从零开始了解AI飞升社区：基本介绍</a></h2>
<h2><a href="https://aifeisheng.com/thread-24.htm">AI工具导航【写作对话】</a></h2>
</div>
</div>
</body>
</html>CSS样式 ，新建一个styles.css文件
放入目录view/css/
只在电脑端显示，移动端自动隐藏
/* 原有样式保持不变 */
.recommended-section {
display: flex;
max-width: 795px; /* 添加最大宽度限制 */
margin: 0 auto; /* 水平居中 */
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-top: 2px; /* 根据需要调整顶部间距 */
margin-bottom: 20px; /* 添加底部间距 */
}
.recommended-image img {
width: 100%; /* 使图片宽度自适应其容器 */
height: auto;
max-width: 150px; /* 限制图片最大宽度，防止过大 */
}
.recommended-content {
flex-grow: 1;
margin-left: 40px;
}
/* 为大标题添加醒目样式 */
.main-title a {
font-size: 18px; /* 字体大小 */
margin-top: 0;
color: #ff0000; /* 红色文本使标题更醒目 */
text-decoration: none; /* 移除下划线 */
font-weight: bold; /* 加粗字体 */
}
/* 为小标题设置样式 */
.recommended-content h2 a {
font-size: 15px; /* 字体大小 */
margin-top: 10px;
text-decoration: none; /* 移除下划线 */
color: inherit; /* 继承父元素颜色 */
}
/* 可以选择性地添加鼠标悬停效果 */
.recommended-content h1 a:hover,
.recommended-content h2 a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
/* 新增媒体查询，当屏幕宽度小于或等于 600px 时隐藏 .recommended-section */
@media (max-width: 600px) {
.recommended-section {
display: none; /* 隐藏整个推荐栏目 */
}
}也许可以做成插件？还没研究过xiuno的插件
