然后通过点击相应的缩略图，左侧的大图区域即可切换出与缩略图一致的大图展示效果，以获取对应的图片照看状态。通过查看效果，对于它的实现我们又该如何操作呢？一起来分析下吧~~~ 2....实现的原理分析 2.1 结构与样式搭建 结构的搭建看起来很简单，总共分为左侧大图展示与右侧缩略图展示两个区域。但是实际书写时配合上一个合适的背景、阴影之后，用到的结构就相对多了一些层级。...因为后面为了实现预载的形式，所以在使用图片时存储了两张，一张用来展示缩略图，一张用来获取其地址，然后再切换时把地址参数传给左侧的大图区域。...2.2 功能逻辑分析 首先让左侧的大图区域展示一个初始化图片，即直接传递一张图片来使用； 然后借助JQ的hover为右侧的缩略图添加鼠标悬停时的动画提示状态； 最后实现点击图片切换与大图展示的功能，同时对图片的展示做加载处理...此时只需要获取到在缩略图结构中存放的第二张图片的地址，然后调用图片载入函数loadPhoto()，对其传入相应的图片地址，为左侧的大图区域设置背景图即可。
，优化效果显著（SEO规范均按照搜索引擎白皮书制作）； 文章缩略图自定义大图模式，还有三图、单图和无图模式； 文章标题附带推荐（编辑文章开启推荐），热文（浏览数超过1000），最新（发布时间小时24小时...文章功能展示： 推荐：标题左侧显示推荐字样，如果大于1000显示热门，如果发布时间小于24小时显示最新，如果开启推荐，则优先显示。...大图：开启之后文章列表显示大图模块（文章图片超过三张的时候如果开启大图则优先显示此样式，如果没有图片开启大图则随机分配一张图片，随机图片路径“/zb_users/theme/quietslee/include...-- 新增缩略图裁剪功能，功能设置，裁剪质量，款和高度，建议：质量90，W：210，H：159 PS：缩略图裁剪功能仅仅适用分类列表的单图模式，不适用大图和多图和其他模式。...首页文章列表导航标签设置：此处设置文章列表导航标签，文章列表导航标签对应图1（为空则不显示），滚动字母对应图2。注意：右侧开关针对右侧滚动字幕。
V、删除360搜索出图代码。 更新日志：2020/08/10 V、优化搜索模板代码，删除一处无用JS。 V、精简php和删除不规范代码。...主题更新日志：（2020/04/19） 优化分类列表文章缩略图的显示方案。 优化移动端叠加评论时左侧的间距。 优化搜索页文章描述调用方式。...主题设置介绍： 按照我的习惯设置步骤走，首页我可能会先设置侧栏信息，左侧的导航调用的模块是，导航栏（模块管理，导航栏），设置完导航在设置右侧的侧栏信息，标注下各模板对应的侧栏模块： 首 页 模 板（对应...）模块管理---右侧，默认侧栏； 分类列表页（对应）模块管理---右侧，侧栏2； 文章页模板（对应）模块管理---右侧，侧栏3； 具体展示哪些模块自己在系统模块和主题自带模块，拖拽到对应侧栏即可。...卡片背景图（对应）分类列表右侧图片，看图： 这个图片，你可以直接复制新浪微博的地址，然后粘贴在背景图接口，保存就行了。
V、顶部导航背景图固定模式。 更新说明（2020年/05/12）： V、优化评论js代码。 V、优化自适应夜间模式样式表。...更新说明（2019年/9月18）： V、首页右侧新增图文开关，轮播和右侧图文分离开关，可以在关闭右侧图文信息的情况下保留轮播（注：如果关闭右侧图文，请更换轮播图片，宽约：1200，高度自定） V、商品页文章信息转移至左侧图片下方...更新公告模块（原微语模式）效果如下： 设置方式： 左侧菜单，页面管理，新建页面，标题和正文随意，然后设置底部“别名”（例如：notice）然后右侧提交。...轮播设置： 默认情况下：轮播的图片尺寸为：831*380（像素）右侧对应的是四篇文章，如果你开启了百度的信息流广告，那么文章就得减少一篇，如果右侧文章想设置其他数量，那么左侧的轮播高度也要随之增减，看具体情况...第二个：侧栏，先说下侧栏的调用顺序：左侧菜单，模块管理，找到主题和插件创建的模块，然后把你想展示的模块拖拽到右侧。
-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。 V 2.3.9（22/12/07） -- 修复某些情况下因插件不兼容导致评论框间距过大的问题。...-- 优化主题核心js代码，修改原域名链接。 -- 优化部分用户中心代码兼容问题。 -- 修复主题设置右侧设置说明地址错误的问题。...2021/05/22 -- 修复开启大图模式下偶尔无法打开页面的BUG。 -- 修改侧栏评论样式代码。 -- 修复侧栏随机文章样式细节代码。 -- 优化和适配夜间模式代码。...-- 优化侧栏左侧背景图底部渐显代码。 -- 新增搜索框下拉显示自定义文章功能，主题设置--全局设置--设置搜索下拉文章or开启。 -- 适配相关页面夜间模式代码。...但是也有缺点，就是在搜索快照下显示占位图片，不显示文章缩略图，因为快照下不会加载js，所以只能显示占位图片。
2020/05/26更新： V、优化文章列表缩略图php代码。 2020/05/16更新： V、优化搜索页模板。 2020/05/11更新： V、优化评论js代码优化ajax预加载。...--.精简js文件及css样式表代码。 --.优化侧栏智能跟随，当网页下拉时自动跟随左侧文章列表对齐，无需手动对齐。 --.新增网站底部右侧的图标优化，可自定义一个图标接口。...--.修改缩略图裁剪方案。 --.修复开启 “作者-佳句赏析” 无效的BUG。 --.修复随机图文展示缩略图优先显示自定义的功能。 --.修复文章单页没有右侧评论按钮功能的BUG。...--.其他方面就是精简优化css和js，现在整体效果非常好。 --.修复开启自定义缩略图相关文章不获取自定义图片的BUG ---- --.优化瀑布流模板展示效果。...--.自带404模板页（无需设置） 特别说明：热门标签数量，这个是为了首页左侧模块和右侧侧栏对齐使用的，因为底部有横向轮播，如果左侧内容过多可以设置标签展示的数量，直到两侧对齐。
5、文章中无图显示随机缩略图 缩略图比例：大于等于280×210px，因本主题为响应式设计，页面会随着屏幕大小的改变而缩放，所以缩略图比例必须相同，否则有些模板和模块会显示错位。...下面左侧是正常页面中输入的文字（可用于企业简介），右侧调用的是8篇最新文章。...begin主题使用说明（详解教程） 页脚小工具 左侧是自定义菜单小工具，需单独新建一个菜单，并在“自定义菜单”小工具中调用这个新建的菜单，不能有二级菜单。 右侧是文本小工具，可添加任意HTML代码。...最新文章，调用指定分类的最新文章，并带缩略图图 热门文章，调用一定时间段内点击最多的文章，必须安装wp-postview插件，并有计数统计。...至于JS文件主题本身已经过压缩，不要听信一些所谓优化建议，将JS文件放在一个文件中，会造成部分功能不可用。
dede （55） 我们在使用dede图片集的时候经常会碰到列表页或者内容页要调用一张图片而并非缩略图，那么碰到这样的问题怎么办呢？...今天就给大家分享一个解决办法： 步骤一： 修改include/extend.func.PHP 添加如下代码： //取第一张图地址 function firstimg(str_pic) { str_sub...=substr(str_pic,0,-7).”.jpg”;//删除缩略图字符串最后七位，然后再补上后缀.jpg return str_sub; } 步骤二：直接在dede模板里面写调用标签 然后在模板里循环调用
- 优化删除侧栏标题右侧背景图。 - 优化SEO规范，减少部分模板页出现重复的关键词及描述等问题。 2020/08/05 - 优化首页轮播，显示文字标题。...2020/05/25 V、优化网站缩略图php代码。 V、优化导航栏之间的间距。 V、优化搜索结果，在没有内容的情况下，友好提示！ 2020/05/18 V、优化顶部背景图视觉差特效。...2020/04/09 V、修复分类列表文章缩略图太小显示不全的问题。 V、优化列表分类之间间距，适配移动端显示效果。 V、修复用户模板页无法打开的BUG。 V、增加其他模板顶部背景图接口。...2020/03/07 1.优化侧栏热门模块，模块管理-热门文章，拖拽到右侧侧栏，随意编辑文章，提交生成缓存文件即可。 2.优化网友反馈问题。 3.精简主题样式表和js文件。...4.修改主题模板缩略图。 5.优化更新首页轮播图js代码，修复部分情况下360浏览器单击轮播不跳转的BUG。 6.修复分类列表作者头像加V错乱的bug。
-- 删除主题缩略图裁剪功能（文章基数大引起CPU飙升，所以删除）。 V 1.5.6（23/02/20） -- 修复文章模板底部相关推荐文章调用出错的问题。...-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。...-- 修复缩略图接口策略，优化文章无图但自定义缩略图设置图片依然不显示的BUG。 -- 优化移动端顶部搜索框代码及样式。...-- 修复关闭UE编辑器后引起js错误提示。 -- 优化文章编辑时右侧侧栏跟随效果，取消官方跟随代码。 1.3.3（22/1/10） -- 临时修复部分分辨率下导航栏错位问题。...更新日志：2021/08/20 -- 优化网页缩略图代码。 -- 新增文章缩略图多图开关，文章即使超过三张图片也默认显示一张，需要开启三张则单独开启功能。
侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。...但一般来讲，由于视觉习惯和用户行为，侧边栏位于左侧更容易第一时间吸引用户注意力，因而也能很高效地给用户提供导航；而右侧的侧边栏则常被看做是二级导航，因而可以丰富网站的结构层次。...Grace chuang Grace chuang是一个作品集单页网站，该网站布局分为三大部分，左侧为带有logo和社交按钮的侧边栏，中心是网站所有者的照片展示，右侧是自我介绍。 ? 4....Quinntonharris Quinntonharris是一个非常美观的个人网站，以大图和文字讲述网站主人的生活事迹，侧边栏导航使用圆点，会有垂直翻页的幻灯片的感觉。...Deanie chen Deanie chen的侧边栏具有留白、简单、素净的特点，和右侧轮播展示的色彩丰富的大图形成了鲜明对比。 ? 13.
V、优化评论js。 V、优化文章缩略图代码。 更新说明：（2020/05/15） V、修复文章页评论翻页无效的BUG。 V、精简代码，提升网站加载速度。...更新说明：（2020/05/08） V、优化评论JS代码，删除旧版和不兼容的代码。 更新说明：（2020/04/16） V、增加文章页面收录提交地址接口，自行设置提交的网址。...V、左侧导航内容增加开关。 V、优化自适应显示效果。...360搜索出图，开不开随意，这个是前提不是必要，即使开启了，也不一定会有结果出图，所以开不开自己决定。 自定义缩略图建议开启，开启之后编辑文章的时候，右侧有缩略图，这个针对文章资讯有用。...小众模式预览图：
-- 优化模板首页轮播代码，减少无用js加载，加速网页速度。 -- 优化缩略图显示优化方案。 V 2.7（22/12/22） -- 修复某些情况下因插件不兼容导致评论框间距过大的问题。...-- 修复缩略图接口策略，优化文章无图但自定义缩略图设置图片依然不显示的BUG。 -- 优化移动端顶部搜索框代码及样式。 -- 优化奥森图标代码，取缔奥森CDN链接，采用本地链接方案。...-- 优化文章页图片灯箱插件，改用更为精简的js代码，提高网站效率。 -- 优化页面头部整体代码，减少无用js和css样式代码。...-- 优化评论js函数代码。 -- 重写留言评论翻页代码。...-- 优化主题后台幻灯片预览图显示效果。 -- 优化文章列表缩略图在非4:3比例显示被拉伸的问题。 2021/10/29 -- 修复后台授权验证代码，减少非大陆主机引起的无法调用授权接口的代码。
主题自带部分接口，可以在主题后台实现修改背景图，自带SEO优化功能，如果您开启了SEO插件，那么请在后台关闭SEO设置，否则代码冲突会导致网站没有标题。...更新日志： V 1.7（22/05/03） -- 修复缩略图接口无效的BUG。 -- 修复导航栏高亮无效的问题，兼容链接管理插件。 -- 优化文章缩略图部分尺寸被拉伸的问题。...2020/10/30 -- 优化文章分类列表左侧角标代码。 2020/07/15 -- 导航新增搜索功能。 -- 优化移动端顶部导航菜单出错的问题。...2020/06/22 --优化缩略图显示方案。 很简单的主题，无需过多的设置，右侧还自带了客户QQ和微信展示，需要的话在主题设置修改。
自定义样式和js接口，满足不同要求的你。 自带丰富广告展示接口。 主题模块支持开关，是否开启随您心意。 主题视频教程制作中，请稍后。。。...-- 优化侧栏标题右侧角标。 更新详情：09/23 -- 优化文章的时间格式代码。 更新详情：09/09 -- 修复缩略图在百度快照下不显示的问题。 -- 优化文章打赏代码及接口。...更新详情：（06/26） -- 修复顶部登录开关无效的问题； -- 新增顶部左侧导航开关。 更新详情：（06/11） 优化百度分享代码，删除原分享接口，更新之后在功能设置，开启分享就行了。...更新详情：（05/23） 优化文章列表缩略图PHP代码。 更新详情：（05/14） 优化评论js代码。 优化冗余代码，提升网站打开速度！ 更新详情：（05/03） 优化夜间模式兼容。...使用教程（以网站地图为例），页面管理，新建文章，自拟题目和文章内容，然后右侧，模板选择“sitemap”然后点击提交，刷新，前台效果图：其他页面请选择对应模板，links友联模板、tags标签聚合模板。
） 预览缩略图 preview_img 预览列表 preview_list 左按钮 arrow_prev 右按钮 arrow_next 小图列表 preview_items 产品详细信息区域 itemInfo_wrap...1号盒子 本模块 命名为产品模块 product_intro （ introduction介绍） 此模块不要给高度 因为右侧的模块内容高度不固定 里面有2个盒子 分为是2号盒子 和 3号盒子 2号盒子为...预览区域 preview_wrap 给宽度，给高度， 左浮动 3号盒子为 产品详细信息区域 itemInfo_wrap 给宽度 ，不要给高度 左侧浮动 4)....1号盒子 为 图片预览 命名为 preview_img 注意里面的图片，我们切图的时候是 398*398 像素的 2号盒子 为 预览列表 命名为 preview_list 3.1 preview_list...大盒子为 product_detail 模块 不要给高度 ，别忘记清除浮动 1号盒子 左侧浮动 命名为 aside 有宽度 不给高度 2号盒子 右侧浮动 命名为 detail 有宽度不给高度 6.1)
此款主题灵感来源“”和“”，原因就是想要一款层次分明的主题，要一些大的R角和透明状态，我的第一感觉是用宁静致远主题重新适配，但是不确定是否需要的人多，所以就重新制作一款吧，反正已经有几个月没制作新主题了...2020/12/01 -- 优化缩略图php代码。 -- 新增图片异步加载代码。...但是也有缺点，就是在搜索快照下显示占位图片，不显示文章缩略图，因为快照下不会加载js，所以只能显示占位图片。...-- 优化网页右侧客服小秘书，功能开关，后台可以设置标题内容，也是在功能开关设置，默认关闭。 -- 优化php代码，精简无用函数。...接下来看看主题后台及预览图： 后台基本配置： 后台全局配置： 首页预览图： 夜间模式： 分类预览图： 文章预览图：
横幅大图、主题色、字体、布局、首页大图轮播、侧边栏悬浮 文章设置：文章缩略图、版权声明、文章分享、捐赠二维码等 侧边栏配置：侧边栏展示(详情见下方表)、各模块类型的具体设置 页面设置：设置友链页面、标签页面等...增强功能：鼠标设置、特效显示、访客统计、自动推送等 定制主题：主题样式自定义设置 侧边栏模板类型 模块位置 备注 信息模块 左侧（1） 1....彩字停顿检查当前用户详情中描述是否填写 音乐模块 左侧（2） 简单配置填写网易云歌单 ID 即可，获取方法：网易云音乐歌单链接中一串数字 最近文章模块 左侧（3） 无 公告模块 右侧（1） 无 目录模块...右侧（2） 目录仅在文章详情页显示 广告模块 右侧（3） 无 文章分类模块 右侧（4） 无 文章标签模块 右侧（5） 无 4.5 模板 提供一份页面“关于”的通用模板： # 个人信息 - 昵称：...Halo 部署难度不大，难度大的是坚持更新博客，让我们共同努力，致敬每一位还在写博客的你！
目前，适配iPhone6+时，除了一些铺满全屏的大图（LogoIcon、LaunchImage）需提供三倍图，其他的小图仍可沿用原有的二倍图自适应拉伸。...同时，绝对坐标布局会导致在大屏下出现偏左偏上的问题。...（1）缩略图标 在左侧边栏layer list中选中frame，再command选中文件类型缩略图对象thumbnail，进行 Measure spacing，丈量缩略图左侧相对frame的间距为24px...进行 Measure spacing，丈量按钮左侧相对detail间距为20px。...这样，左侧钉住thumbnail，右侧钉住button，中间信息部分的宽度无需给定，计算被动约束的横向余量即可。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
