第一次使用Typecho，写完文章发现图片无法手动排版，Typecho默认排版非常不符合我个人的审美，感觉杂乱无章。所以有了PictureOrder插件，插件支持文章图片自适应排版和自定义排版，功能不是很完善，但是目前够用了，至少文章图片不是那么乱了PS：此插件结合AI模型产出，测试本站完全兼容，有建议及BUG请评论留言，大佬勿喷哈！效果展示 /* PictureOrder Gallery Styles */ #picture-order-6a75232b54fb5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-6a75232b54fb5 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-6a75232b54fb5 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 修复文字溢出：通用标签样式 */ #picture-order-6a75232b54fb5 .film-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-6a75232b54fb5 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-6a75232b54fb5 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-6a75232b54fb5 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-6a75232b54fb5 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-6a75232b54fb5 .gallery-item { background-color: #fff; padding: 18px; border: 1px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); position: relative; } #picture-order-6a75232b54fb5 .gallery-item::before { content: ''; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px; border: 1px solid #f5f5f5; border-radius: 4px; pointer-events: none; } #picture-order-6a75232b54fb5 .gallery-item img { border-radius: 4px; transition: transform 0.3s ease; } #picture-order-6a75232b54fb5 .gallery-item:hover { border-color: #c0c0c0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } #picture-order-6a75232b54fb5 .gallery-item:hover img { transform: scale(1.02); } 1000063717 1000063718 1000063720 1000063719 插件结构PictureOrder/ ├── Plugin.php # 主插件入口 ├── Action/ │ └── Handler.php # 处理内容解析和回调 ├── Helper/ │ ├── Image.php # 图片处理工具 │ └── Layout.php # 布局生成工具 ├── Config.php # 插件配置管理 └── assets/ ├── css/ │ └── style.css # 插件样式表 └── js/ └── lazyload.js # 图片懒加载脚本更新记录V1.0：插件发布V1.1：优化图片显示不匀称等bug统一桌面端及移动端图片显示比例去除无关紧要的功能使用方法下载PictureOrder插件后上传到对应插件目录解压即可，解压后需保证插件名为PictureOrder即可，Typecho后台激活启用插件，根据需求设置插件。默认模式：根据你短代码内部图片的数量进行横向自动排列自定义模式：自定义横向排列数量，多出来的自动换行进行二次排列下载地址此处内容已隐藏，回复后(需要填写邮箱)可见