一、前期准备工作（10分钟内完成）
1.1 备份原文件
必做步骤，防止修改失败无法恢复：
- 进入phpcms安装根目录的`/phpcms/templates/default/content/`（假设使用默认模板，自定义模板请替换对应路径）
- 将`index.html`、`lists.html`（可选，单页也可能调用新闻组件）复制一份，重命名为`index_bak_202X0X0X.html`、`lists_bak_202X0X0X.html`
- 进入`/statics/css/default/`，复制`content.css`为`content_bak_202X0X0X.css`
1.2 打开文件编辑工具
推荐使用VS Code（下载地址：https://code.visualstudio.com/）、Sublime Text 4或HBuilderX，避免用记事本，防止编码乱码。
二、定位并提取原新闻模块代码
2.1 找到原首页新闻模块
打开根目录下的`/phpcms/templates/default/content/index.html`，通常默认新闻模块在`
`或`
`标签内，以下是v9默认的核心新闻模块结构：
```html
{pc:content action="lists" catid="1" num="1" order="id DESC" thumb="1"}
![{$r[title]}]({thumb($r[thumb],300,225)})
{$r[title]}
{/pc}
{pc:content action="lists" catid="1" num="10" order="id DESC" thumb="0" start="1"}
- {str_cut($r[title],36,'...')} {$r[inputtime]|date='m-d',}
{/pc}
```
如果找不到对应标签，可通过浏览器右键首页“国内新闻”标题→检查元素快速定位。
三、优化新闻模块布局（响应式+视觉分层）
3.1 替换原新闻模块HTML结构
替换刚才找到的整个新闻模块`
...
`为以下
可直接复制的响应式分层结构：
```html
{pc:content action="lists" catid="1" num="12" order="id DESC" thumb="0" start="5"}
-
{str_cut($r[title],32,'...')}
{$r[inputtime]|date='m-d',}
{/pc}
```
关键修改说明：
1. 新增`loading="lazy"`实现图片懒加载，提升首屏加载速度
2. 补充`moreinfo="1"`调用摘要字段
3. 调整图片尺寸为黄金比例，提升视觉适配性
4. 按重要性分层：头条大图带摘要→副头条2栏→普通新闻多列
5. 统一使用`_blank`打开新页，避免覆盖首页
3.2 添加响应式CSS样式
打开根目录下的`/statics/css/default/content.css`，在文件
最底部添加以下
可直接复制的CSS代码：
```css
/ 全局新闻容器 /
.news-wrapper {
width: 100%;
max-width: 1200px;
margin: 20px auto;
padding: 0 15px;
box-sizing: border-box;
overflow: hidden;
}
/ 分区标题 /
.news-section-title {
position: relative;
font-size: 20px;
font-weight: bold;
color: 333;
padding: 10px 0;
border-bottom: 2px solid e60012;
margin-bottom: 20px;
}
.title-icon {
display: inline-block;
width: 5px;
height: 20px;
background: e60012;
margin-right: 10px;
vertical-align: middle;
}
.more-btn {
float: right;
font-size: 14px;
color: 666;
text-decoration: none;
margin-top: 5px;
transition: color 0.3s;
}
.more-btn:hover {
color: e60012;
}
/ 头条大图 /
.featured-news {
float: left;
width: 49%;
margin-bottom: 20px;
}
.featured-link {
display: block;
text-decoration: none;
color: 333;
position: relative;
overflow: hidden;
border-radius: 8px;
}
.featured-link img {
width: 100%;
height: auto;
transition: transform 0.5s;
}
.featured-link:hover img {
transform: scale(1.03);
}
.featured-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: fff;
}
.featured-info h4 {
font-size: 18px;
margin: 0 0 8px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.featured-info p {
font-size: 14px;
margin: 0 0 8px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-date {
font-size: 12px;
color: ddd;
}
/ 副头条2栏 /
.sub-news-grid {
float: right;
width: 49%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.sub-news-card {
width: 48%;
margin-bottom: 15px;
text-decoration: none;
color: 333;
overflow: hidden;
border-radius: 6px;
}
.sub-news-card img {
width: 100%;
height: 140px;
object-fit: cover;
transition: transform 0.3s;
}
.sub-news-card:hover img {
transform: scale(1.02);
}
.sub-news-card h5 {
font-size: 14px;
margin: 8px 0 5px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: normal;
}
.sub-date {
font-size: 12px;
color: 999;
}
/ 普通新闻多列 /
.common-news-list {
clear: both;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.common-news-list li {
width: 32%;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.list-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: e60012;
margin-right: 8px;
flex-shrink: 0;
}
.common-news-list a {
flex: 1;
font-size: 14px;
color: 333;
text-decoration: none;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.2s;
}
.common-news-list a:hover {
color: e60012;
}
.common-date {
font-size: 12px;
color: 999;
flex-shrink: 0;
margin-left: 10px;
}
/ 响应式适配 /
@media screen and (max-width: 992px) {
.featured-news, .sub-news-grid {
float: none;
width: 100%;
}
.sub-news-card {
width: 49%;
}
.common-news-list li {
width: 48%;
}
}
@media screen and (max-width: 576px) {
.news-section-title {
font-size: 18px;
}
.featured-info h4 {
font-size: 16px;
}
.featured-info p {
display: none;
}
.sub-news-card {
width: 100%;
}
.sub-news-card img {
height: 180px;
}
.common-news-list li {
width: 100%;
}
}
```
四、清除缓存并测试
4.1 清除phpcms缓存
登录phpcms后台（地址为`你的域名/index.php?m=admin`），进入
「系统设置」→「更新缓存」，勾选所有选项，点击「确定更新」。
4.2 多端测试
打开浏览器清除本地缓存（Ctrl+Shift+Delete，Windows系统；Command+Shift+Delete，Mac系统），访问首页，检查以下内容：
1. 视觉分层是否清晰：头条大图最显眼，副头条次之，普通新闻有序排列
2. 响应式是否正常：缩小浏览器窗口或用手机、平板访问，检查布局是否自适应
3. 图片是否懒加载：滚动页面时再加载副图
4. 链接是否正常：点击新闻标题、更多按钮，是否跳转到对应页面
5. 悬停效果是否生效：鼠标放在图片、普通新闻标题上，是否有缩放、变色效果
五、自定义调整说明（按需修改）
1. 更换新闻栏目：将所有`catid="1"`替换为目标栏目的ID（后台「内容」→「管理栏目」中查看）
2. 调整新闻数量：修改`num="X"`、`start="X"`参数（start表示从第几条开始，默认为1）
3. 更换主题色：将CSS中所有`e60012`替换为目标颜色值
4. 调整图片尺寸：修改`thumb($r[thumb],宽,高)`参数，同时调整CSS中对应图片的`height`或`object-fit`属性
相关推荐
