多图带标题添加多一个字段副标题使用。
时间：2025-08-31 来源：外贸网站建设
后台的多图带描述默认的程序是只有标题和描述两个字段：
假如我们需要三个字段，要如何处理呢？
好的，现在开始对代码进行修改：
第一步：先修改后台的HTML代码，content.html如果你的专题页也需要的话，就也修改一下：single.html
如果我们是对多图带描述进行修改，就搜索24，对附件修改，可以找26。在1320行左右，在foreach循环中，我们需要添加一行代码：
<dt><input type='text' name='".$name."|subtitle[]' value='".$value2['subtitle']."' placeholder='副标题' class='subtitle-input' style='width:95%'/></dt>
这个地方是修改文章时显示之前提交的数据，将subtitle显示出来，注意一下，这里的CLASS里面使用的类名，因为后面在JS生成的时候都要用到。
第二步：我们先修改一下数据保存：
打开:ContentController.php，同样搜索24找到多图文处理之处
添加一行副标题的代码，如下：一共有两处，都添加新增的一行代码即可。
case 24: // 多图文处理
case 26: // 多附件处理
if($field_data) {
$pics_arr = explode(',', $field_data);
$pics_arr2 = [];
foreach ($pics_arr as $key2 => $value2) {
$pics_arr2[$key2]['src'] = $pics_arr[$key2];
$pics_arr2[$key2]['title'] = array_values(post($value->name . '|title'))[$key2];
$pics_arr2[$key2]['subtitle'] = array_values(post($value->name . '|subtitle'))[$key2]; //这是新增加的一行
$pics_arr2[$key2]['desc'] = array_values(post($value->name . '|desc'))[$key2];
}
$field_data = serialize($pics_arr2);
} else {
$field_data = '';
}
break;这个时候，我们已经可以通过修改的方式看到副标题能显示了。但是在新增加文章和通过图库生成的时候，还不能显示。
第三步：
为何在添加文章的时候，不需要修改呢，因为添加文章的时候是通过JS动态生成的，我们看HTML代码就可以看到，他是通过：
<a class="layui-btn layui-btn-warm" onclick="GetPictureFolder(100,'[value->name]','3');"><i class="layui-icon layui-icon-picture"></i>图库</a> 通过图库动态生成
<script type="text/javascript">picsSortable('[value->name]'); </script> 通过上传图片动态生成所以我们首先修改通过上传图片动态生成的位置：
在mylayui.js中。 //执行多图片上传实例中，type=3里面，我们新增一行副标题：
"<dt><input type='text' name='" + des + "|subtitle[]' value='' placeholder='副标题' class='subtitle-input' style='width:95%'/></dt>" + // ← 新增副标题
变成：
html3 += "<dl><dt><img src='" + sitedir + value + "' data-url='" + value + "' alt='" + picsname[index] + "'></dt><a class='replace replace_" + des + desk + "'>更换</a><dd>删除</dd>" + "<dt><input type='text' name='" + des + "|title[]' value='" + picsname[index] + "' placeholder='标题' class='title-input' style='width:95%'/></dt>" + "<dt><input type='text' name='" + des + "|subtitle[]' value='' placeholder='副标题' class='subtitle-input' style='width:95%'/></dt>" + // ← 新增副标题 "<dt><textarea name='" + des + "|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:50px;min-height:50px;width:95%'></textarea></dt>" + "</dl>";
然后在comm.js中找到：
function picsSortable(field, upinput = true) {
$(document).ready(function() {
var group = (field == 'pics') ? 'pic' : 'pics';
var sortable = new Sortable(document.getElementById(field + '_box'), {
group: group,
ghostClass: 'sortable-bg',
fallbackTolerance: 3,
animation: 150,
onEnd: function(evt) {
var data = $('#' + field + '_box dl dt img').map(function() {
return $(this).data("url");
}).get();
if (upinput) {
$('input[name=' + field + ']').val(data.join(","));
}
var newName = $(evt.item).parent('.pic').attr('id').replace('_box', '');
var $input = $(evt.item).find('input.title-input');
$input.attr('name', $input.attr('name').replace(field, newName));
if (field != 'pics') {
var $textarea = $(evt.item).find('textarea.layui-textarea');
$textarea.attr('name', $textarea.attr('name').replace(field, newName));
}
var newData = $('#' + newName + '_box dl dt img').map(function() {
return $(this).data("url");
}).get();
if (upinput) {
$('input[name=' + newName + ']').val(newData.join(","));
}
if (field !== newName) {
layer.msg('跨组拖拽排序完成！', {
icon: 6
});
}
}
});
});
}并修改成如下代码：
function picsSortable(field, upinput = true) {
$(document).ready(function () {
var group = (field == 'pics') ? 'pic' : 'pics';
var sortable = new Sortable(document.getElementById(field + '_box'), {
group: group,
ghostClass: 'sortable-bg',
fallbackTolerance: 3,
animation: 150,
onEnd: function (evt) {
// 重新整理图片URL顺序，写回隐藏input
var data = $('#' + field + '_box dl dt img').map(function () {
return $(this).data("url");
}).get();
if (upinput) {
$('input[name=' + field + ']').val(data.join(","));
}
// 拖拽的dl对应的新字段名
var newName = $(evt.item).parent('.pic').attr('id').replace('_box', '');
// 标题
var $titleInput = $(evt.item).find('input.title-input');
$titleInput.attr('name', $titleInput.attr('name').replace(field, newName));
// 副标题
var $subtitleInput = $(evt.item).find('input.subtitle-input');
$subtitleInput.attr('name', $subtitleInput.attr('name').replace(field, newName));
// 描述
var $textarea = $(evt.item).find('textarea.layui-textarea');
$textarea.attr('name', $textarea.attr('name').replace(field, newName));
// 更新对应input值（图片路径集合）
var newData = $('#' + newName + '_box dl dt img').map(function () {
return $(this).data("url");
}).get();
if (upinput) {
$('input[name=' + newName + ']').val(newData.join(","));
}
// 提示跨组
if (field !== newName) {
layer.msg('跨组拖拽排序完成！', { icon: 6 });
}
}
});
});
}由此，通过上传图片也可以自动生成：图片，标题，副标题，描述了。
但是通过图库直接选择图片还不行。
第四步： 修改通过图库自动生成。
在后台找到：media_index.html，修改代码：
else if (inputType == '3') {
html += "<dl><dt><img src='" + sitedir + images_array[i] + "' data-url='" + images_array[i] + "' alt='" + images_name_array[i] + "'></dt><dd>删除</dd>" +
"<dt><input type='text' name='" + inputId + "|title[]' value='" + images_name_array[i] + "' placeholder='标题' class='title-input' style='width:95%'/></dt>" +
"<dt><input type='text' name='" + inputId + "|subtitle[]' placeholder='副标题' class='subtitle-input' style='width:95%'/></dt>" + //新增副标题
"<dt><textarea name='" + inputId + "|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:50px;min-height:50px;width:95%'></textarea></dt>" +
"</dl>";
}按以上步骤，基本上就完成了此次改造。
多附件添加副标题字段
既然多图都加了副标题了。那么多附件最好也加一个副标题吧。因为很多地方用了相同的代码。
多附件扩展是26，所以
第一步：我们在content.html中搜索：26
在1400行左右，修改内容的地方添加：
<dt><input type='text' name='".$name."|subtitle[]' value='".$value2['subtitle']."' placeholder='附件副标题' class='subtitle-input' style='width:95%'/></dt>
第二步：修改content的控制器，在上面的修改多图中，我们已经修改过了，他们用的是相同的代码，所以这里就不需要修改了。
第三步：在mylaui.js中找到： //执行多附件上传实例
添加代码：
"<dt><input type='text' name='" + des + "|subtitle[]' placeholder='附件副标题' class='subtitle-input' style='width:95%'/></dt>" +
因为附件都是要上传文件，所以就不用像上面考虑图库直接拉取图片或者文件的问题了。
由此，改造完成。
TAG:
