落花雨记 - PictureOrder
type: channel
link: https://www.biubiubiu.me/tag/PictureOrder/
items: Typecho图片自动排版插件PictureOrder支持自定义

Typecho图片自动排版插件PictureOrder支持自定义
type: item
date: 2025-10-03T13:51:00+08:00
description: 第一次使用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-6a75…