对于这个多图带描述的功能，之前如果需要新增的话，都是需要上传图片或者从图库中选择一张图片从而生成一个数据段，然后才能修改标题，副标题和描述。

对于熟悉程序的人来说，倒能理解。

但是对于陌生的用户来说，这理解起来让人有点转不过弯来。

所以我们们可以新增加一个按钮：新增一条。

同时，假如再对这个功能进行深入开发的话，文字内容比较 多的话，却又不需要图片，那这个功能就非常合适了。

代码修改非常简单。在后台的：content.html或者单页模板：single.html中修改：

第一步：新增文章处：大概700行左右。找到：

 {if($value->type==24)}
                                <!-- 多图上传（带标题/描述） -->

然后修改：先增加一个按钮。

  <!-- 新增按钮 -->
                                    <a class="layui-btn add-new-btn" href="javascript:;" data-des="[value->name]"><i class="layui-icon layui-icon-add-circle"></i>新增一条</a>

在末尾处加入JS：

<!-- 新增一条 JS -->
<script>
$(document).on("click", ".add-new-btn", function() {
    var des = $(this).data('des'); 
    var box = $("#" + des + "_box");
    var input = $("#" + des);

    // 添加占位 src（用于保存）
    var oldVal = input.val();
    if (oldVal) {
        input.val(oldVal + ",noimg");
    } else {
        input.val("noimg");
    }

    // 默认占位图
    var defaultImg = "/static/images/ico1.png";

    // 新增结构
    var html = "<dl>" +
        "<dt><img src='" + defaultImg + "' data-url='noimg' alt=''></dt>" +
        "<a class='replace replace_" + des + "'>更换</a><dd>删除</dd>" +
        "<dt><input type='text' name='" + des + "|title[]' placeholder='标题' class='title-input' style='width:95%'></dt>" +
        "<dt><textarea name='" + des + "|subtitle[]' placeholder='副标题' class='layui-textarea' style='display:unset;height:60px;min-height:60px;width:95%'></textarea></dt>" +
        "<dt><textarea name='" + des + "|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:250px;min-height:250px;width:95%'></textarea></dt>" +
    "</dl>";

    box.append(html);
});
</script>

然后在修改文章处，大概1500行左右。

   {if($value->type==24)}
                                <!-- 多图上传（带标题/描述） -->

中新增一个按钮：

  <a class="layui-btn  add-new-btn" data-des="[value->name]" href="javascript:;"><i class="layui-icon layui-icon-picture"></i>新增一条</a>

然后面末尾处添加JS:

 <script>
$(document).on("click", ".add-new-btn", function() {
    var des = $(this).data('des'); // 字段名
    var box = $("#" + des + "_box"); // box 容器
    var input = $("#" + des); // hidden src input

    // 空图占位（你后台显示用的）
    var defaultImg = "/static/images/ico1.png";

    // ① 先在 src input 中追加一个占位值
    var oldVal = input.val();
    if (oldVal) {
        input.val(oldVal + ",noimg");
    } else {
        input.val("noimg");
    }

    // ② 再新增 UI 结构
    var html = "<dl>" +
        "<dt><img src='" + defaultImg + "' data-url='noimg' alt=''></dt>" +
        "<a class='replace replace_" + des + "'>更换</a><dd>删除</dd>" +
        "<dt><input type='text' name='" + des + "|title[]' placeholder='标题' class='title-input' style='width:95%'/></dt>" +
        "<dt><textarea name='" + des + "|subtitle[]' placeholder='副标题' class='layui-textarea' style='display:unset;height:60px;min-height:60px;width:95%'></textarea></dt>" +
        "<dt><textarea name='" + des + "|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:250px;min-height:250px;width:95%'></textarea></dt>" +
    "</dl>";

    box.append(html);
});

</script>

这样开发就完成了。

同时我们可以新开发一个单独的扩展字段，并调整CSS，来实现以下效果：具体开发过程看下一篇文章吧。