🍕功能说明：小图模式

Function description: Small - picture mode

/* 为了展示效果，本文设置了小图模式，你可以切换模式来体验

小图模式的设计理念

在发布2024搜狐城市万有影力活动设计理念一文时，由于文章文字、配图都很多，且图片尺寸大小各不相同，导致页面排版非常不舒服，这个问题主要是在PC端，由于屏幕横向的宽高比例导致在观看竖屏图片时，在不改变当前全局样式情况下，整个页面也无法完整展示一张图。

所以我就开始想，有必要增加一个小图模式了。

我一开始考虑是在所有文章页的所有图片上都添加一个切换按钮，鼠标悬浮时显示，点击任意按钮后整篇文章的模式都进行切换，但做出来之后发现了很多问题，最重要的问题是有些页面其实根本没有切换的必要，因为有的文章页图片很少甚至无图，他们更适合默认的排版。

所以我开始考虑另一种方式，那就是由文章发布者在后台先设置好。默认的文章设置是大图的模式，不对原先的排版做任何改造。只有当特定页面更适合小图模式时，那么在发表文章的时候，勾选小图模式，将这一设置通过php后台处理并保存到数据库，然后在前台页面对应的文章页加载时，读取这个设置，显示为小图模式适配的页面显示交互方案。

小图模式的页面显示交互方案

小图模式的文章页面所有图片都会1：1的比例网格排列展示，这样在一些图片比较多的页面中，会显示出类似微博、朋友圈等社交媒体的九宫格样式。考虑到这也有可能给阅读带来不便，所以页面在加载完成后3s底部弹出提示栏：当前文章作者设置了小图预览模式，并在右侧提供了两个按钮，分别是：保持预览模式、切换大图浏览。这个提示栏会在10s后隐藏，变成一个小的悬浮窗常驻在页面的右下角，读者可以随时点击相应的图标来切换。

小图模式的实现过程

一、后台设置功能

改造了织梦（dede cms）的后台文章/图集添加和编辑页面，前端htm模板位于dede\templets\目录（album_edit.htm、article_edit.htm、article_add.htm），以album_add.htm为例，找到以下代码，大约在175行：

<input type="button" name="Submit2" value="站内选择" style="margin-left:8px;" onClick="SelectImage('form1.picname','small');" class='np coolbg'/>
<input type="button" name="Submit2" value="裁剪" style="margin-left:8px;" onClick="imageCut('picname');" class='np coolbg'/>
<br/>
<input type='checkbox' class='np' name='ddisremote' value='1' id='ddisremote'/>远程

在这里后面添加一个小图模式的输入框：<input type='checkbox' id='small_img' name='small_img' value='1' class='np' />小图模式

然后把接下来复杂的工作交给AI：

@dede 仔细分析后台文件夹，在后台添加图集/文档，和编辑图集/文档的页面中有一个远程选项按钮，以添加图集为例它的位置在@album_add.htm 178行；我需要在这些页面中远程按钮的后面加一个小图模式的选项开关，默认不勾选，然后处理后台php程序以及数据库设置（给我sql执行语句），确保这个设置被记录在数据库中，并且生成这个全局变量 {dede:field.small_img/}
@album_add.htm @album_edit.htm @article_edit.htm @article_add.htm

接下来，需要把AI提供的sql语句在phpMyAdmin里执行。这样，后台的配置就完成了，运行和测试一切正常。

二、前端页面显示

我让AI帮我在之前给页面所有图片包裹<div>并添加title内的文字显示的js（templets\default\js\image-caption.js）中添加以下功能：

现在我需要添加判断，你看是用什么方式可以获取到刚才创建的 {dede:field.small_img/} ，判断如果是小图模式，则给在@image-caption.js 里面创建的所有image-box添加small-box样式标签，请注意判断需要在创建了DOM结构完成以后，用最清晰不易出错的方式写，不需要你添加任何css样式，只需要实现功能框架即可

经过反复的调试和修改，最终我和AI商讨出的方案是，在templets\default\article_image.htm文章模板页面的<head>中添加：

<meta name="small_img" content="{dede:field.small_img/}">

然后使用js读取这个数值，如果是1，就添加small-box样式，如果是0就什么都不做。然后手动调整了small-box样式内部的元素的css样式。

这样我们就完成了页面的判断和外观，接下来继续让AI帮我们在js中添加提示窗和切换按钮的悬浮窗，这样整个功能就全部完成了。

值得一提的是，我花了大量的精力，最终做的这样一个小窗模式，其实对于用户来说是完全无感的，对于用户来说，只是在整个网站中极少数的文章中，发现有一个小图和大图切换的提示，并且可以自己切换。他们永远不会知道为了这个不起眼的小功能，背后也花了我好几天的个人时间来探索最佳方案。

不过我觉得，最好的设计就是没有设计，这也是我做这个功能的核心理念，只在真正需要的时候出现，而不是始终把复杂的功能和设置一股脑地展示出来。