有时候好久不更新，确实也没啥更新的，博客我主要就是用来当日记本了，偶尔想发个牢骚，发片文章几个字又感觉挺水的，哈哈哈。刚好oneblog主题自带有微语功能，通过Typecho的评论系统构建，但是主题主打一个轻量并没有加入微语回复功能，刚好最近公司放假了在家没事干，瞎折腾。目前微语已经支持评论功能，并且加入了邮件通知和表情包，邮件通知使用PHPMailer，表情包使用张洪Heo的开源项目目前测试了一下，好像都没啥大毛病，样式有点像朋友圈，哈哈哈，感觉看着还行。微语地址：https://www.luohuayu.cn/weiyu.html目前把微语融入到博客首页，按照时间发布和文章混在一起可以用来平时记录一些细言碎语`(∩_∩)′
看了下博客的收录情况，竟然只有个首页，，哈哈哈，虽然个人博客我感觉收录也没啥用吧，但是有总比没有好是吧，在几个优秀博主网站下了几个推送插件，不知道为啥没有效果，可能是我配置的问题(¯―¯٥)于是丢在了我训练了N次的AI里面，历经“千辛万苦”终于成功训练出了BingApiSubmit推送插件，AI真好用 ᖰ⌯'▾'⌯ᖳ，完全不用动🧠了 /* PictureOrder Gallery Styles */ #picture-order-69a97ee0cde06 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0cde06 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0cde06 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0cde06 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0cde06 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0cde06 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0cde06 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0cde06 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0cde06 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0cde06 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0cde06 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0cde06 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0cde06 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0cde06 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0cde06 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0cde06 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0cde06 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0cde06 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 光影之间，世界静止 插件支持同时使用Bing API和IndexNow API进行文章推送，新文章发布或者更新旧文章及页面时，插件会进行自动推送，并反馈状态码至插件日志。设置页面添加了手动随机推送，建议是10条推送哈，因为我推送全部，给我的小机卡死了T﹏T插件适配1.2.1版本 其他版本不知道能不能用～ /* PictureOrder Gallery Styles */ #picture-order-69a97ee0cde52 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0cde52 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0cde52 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0cde52 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0cde52 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0cde52 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0cde52 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0cde52 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0cde52 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0cde52 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0cde52 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0cde52 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0cde52 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0cde52 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0cde52 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0cde52 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0cde52 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0cde52 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 用镜头捕捉生活中的小确幸 镜头里藏着世界的温柔 有需要的小伙伴自取：此处内容已隐藏，回复后(需要填写邮箱)可见 /* PictureOrder Gallery Styles */ #picture-order-69a97ee0cde6e { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0cde6e .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0cde6e img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0cde6e { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0cde6e .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0cde6e { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0cde6e { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0cde6e .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0cde6e .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0cde6e .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0cde6e .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0cde6e .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0cde6e .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0cde6e .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0cde6e .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0cde6e .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0cde6e .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0cde6e .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 每一张照片都有一个故事 每一张照片都是时间的礼物 鸡蛋盐放多了，豇豆出锅忘记尝了半熟，又炒了一遍，这算不算回锅肉？
折腾的东西越来越多，昨晚删错东西，又给整崩了，这篇文章，当个备份用，哈哈哈。本博客基于Typecho1.2.1搭建，搭配开源主题oneblog～https://docs.oneblog.net/评论区域comments1.显示评论这归属地，使用XQLocation插件，合适位置调用<?php XQLocation_Plugin::render($comments->ip); ?>css样式/彩色渐变美化/* IP归属地样式 */ .comment-location { font-size: 12px; font-weight: bold; background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe, #43e97b, #fa709a, #fee140); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 4s ease infinite; margin-left: 8px; } 2.评论框添加每日一言添加css样式/* 富文本编辑器一言占位符样式 */ .rich-editor-hitokoto[contenteditable="true"]:empty:before { content: attr(data-placeholder); color: #aaa; font-style: italic; pointer-events: none; display: block; } .rich-editor-hitokoto[contenteditable="true"]:focus:before { color: #ccc; } 添加引用JS 评论框 首页/底部菜单栏/顶部菜单栏css1.首页文章分割线美化样式.post { border-bottom: none !important; position: relative; padding-bottom: 35px; margin-bottom: 35px; } .post::after { content: '〰️ 〰️ 〰️ 〰️ 〰️'; position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; font-size: 20px; letter-spacing: 6px; opacity: 0.7; transition: all 0.3s ease; /* 创建渐变效果 */ background: linear-gradient(90deg, #d4c5b9, #8b7355, #d4c5b9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .post:hover::after { opacity: 1; font-size: 22px; letter-spacing: 8px; /* 悬停时渐变更明显 */ background: linear-gradient(90deg, #8b7355, #d4c5b9, #8b7355); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .post:last-child::after { display: none; }2.PC端顶部菜单栏样式header/* PC端导航栏样式 */ .pc-header { position: sticky; top: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; display: none; /* 默认隐藏，只在PC端显示 */ } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 60px; } .nav-logo img { height: 40px; width: auto; } .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 30px; } .nav-menu a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s; position: relative; } .nav-menu a:hover, .nav-menu a.active { color: var(--theme-color); } .nav-menu a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 2px; background: var(--theme-color); } /* 响应式显示控制 */ @media (min-width: 768px) { .pc-header { display: block; } } /* 暗色模式适配 */ .night .pc-header { background: #2d2d2d; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .night .nav-menu a { color: #e0e0e0; } 未完待续～
最近给博客做了一些小美化(≧ｗ≦)添加了随机文章页面，随机展现网站的某一篇文章：随便看看前台添加Live2D看板娘，只添加了最基础的看板娘版本，刚好用来跳转随机文章，哈哈哈基础版： /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d0d4a { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d0d4a .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d0d4a img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d0d4a { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d0d4a .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d0d4a { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d0d4a { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d0d4a .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d0d4a .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d0d4a .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d0d4a .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d0d4a .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d0d4a .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d0d4a .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d0d4a .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d0d4a .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d0d4a .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d0d4a .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 按下快门的瞬间，定格了整个世界 每一张照片都是一段旅程 添加了评论排行榜页面 看了各位大佬的博客好像都有，必须搞一个，紧跟潮流，刚好放在评论框右下方，不过好像有点不是很美观༎ຶ‿༎ຶ /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d0e24 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d0e24 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d0e24 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d0e24 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d0e24 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d0e24 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d0e24 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d0e24 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d0e24 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d0e24 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d0e24 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d0e24 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d0e24 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d0e24 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d0e24 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d0e24 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d0e24 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d0e24 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 按下快门，留住此刻 按下快门的瞬间，定格了整个世界 明天去接老爸转院，不知道为啥这边的康复医院消费满2w或者住满一个月就不让住了，必须去其他医院住，或者回家一周再过来重新办理住院，好奇怪(／_＼)刚好这几天调休，回去陪陪老爸(ง •̀_•́)ง最后，人是铁，饭是钢，干饭最重要(っ˘ڡ˘ς) /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d0e3d { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d0e3d .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d0e3d img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d0e3d { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d0e3d .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d0e3d { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d0e3d { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d0e3d .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d0e3d .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d0e3d .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d0e3d .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d0e3d .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d0e3d .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d0e3d .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d0e3d .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d0e3d .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d0e3d .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d0e3d .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 照片是看得见的历史
记录一下最近在忙的事情(๑-﹏-๑)首先是家里的事情，老爸目前已经从住院部出院，转到康复中心了，本来应该是没啥问题的，结果由于长时间卧槽导致肠胃不蠕动，肚子里大便钙化了，:-(。没办法只能禁水禁食，老妈一个人在医院又跑不过来，我又得上班，最后综合考虑请了护工一天150，不过确实护工也比较好，请了之后老妈的负担也小了，我这边也可以安心工作了，目前就是每天做康复训练，老妈在医院陪护，希望早日康复⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄工作上由于我也是刚到这家公司，属于长城旗下做汽车零部件的厂子，之前也没有接触过汽车这块的自动化，目前感觉的话还是比较难搞的，不过好在公司目前比较闲，刚好方便照顾家人。后期的话还是考虑做光伏这一块吧，毕竟做了这么多年了，现在再重新学习新的东西也有点学不进去了，刚好苏州这边有一个光伏的新项目在招人，昨天投了简历，说是会进行筛选，希望能通过吧(ง •̀_•́)ง然后最近搞了一个RSS的聚合插件，目前使用和展示效果感觉还好，具体可以看RSS友圈，后面有空想加几个页面的美化，再优化一下加载速度，目前感觉有点卡，大家有啥好意见可以留言哈 /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d2273 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d2273 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d2273 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d2273 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d2273 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d2273 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d2273 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d2273 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d2273 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d2273 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d2273 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d2273 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d2273 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d2273 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d2273 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d2273 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d2273 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d2273 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 每一张照片都有一个故事 摄影是捕捉时间的艺术 最后分享一下我的小锅巴 /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d2295 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d2295 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d2295 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d2295 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d2295 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d2295 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d2295 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d2295 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d2295 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d2295 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d2295 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d2295 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d2295 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d2295 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d2295 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d2295 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d2295 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d2295 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 光影之间，世界静止
用惯了WordPress，之前使用的主题移动端基本都带底部导航，看习惯了，换成Typecho搭配oneblog主题之后，移动端底部没有导航栏，不太习惯，自己瞎捣鼓了一个，感介又不太好看，索性加了一个悬浮球装饰。功能比较简单，支持左右两个位置自定义选择，目前是加了3个子悬浮球，太多了也不美观，个人感觉3个刚刚好，可以自定义开启。图标建议使用阿里图标库，直接下载PNG透明图标使用即可。图标链接直接填写URL或者你需要的JS事件。推荐JS使用：1.联系QQ：javascript:window.location.href='mqqwpa://im/chat?chat_type=wpa&uin=你的QQ&version=1&src_type=web&web_src=oicqzone.com';2：联系邮箱：javascript:location.href='mailto:你的邮箱'3：图片弹出：javascript:(()=>{const existing=document.getElementById('popupContainer');if(existing)existing.remove();else{const container=document.createElement('div');container.id='popupContainer';container.style.position='fixed';container.style.top='0';container.style.left='0';container.style.width='100%';container.style.height='100%';container.style.zIndex='9998';container.onclick=()=>container.remove();const img=document.createElement('img');img.src='你的图片地址';img.style.position='fixed';img.style.top='50%';img.style.left='50%';img.style.transform='translate(-50%, -50%)';img.style.zIndex='9999';img.style.boxShadow='0 0 20px rgba(0,0,0,0.3)';img.style.maxWidth='90%';img.style.maxHeight='90vh';img.onclick=e=>e.stopPropagation();container.appendChild(img);document.body.appendChild(container);}})();插件功能比较鸡肋哈，不过用来装饰还是不错滴，填填联系方式啥的，哈哈哈。 /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d3579 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d3579 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d3579 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d3579 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d3579 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d3579 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d3579 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d3579 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d3579 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d3579 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d3579 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d3579 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d3579 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d3579 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d3579 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d3579 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d3579 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d3579 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 光影交错，记录生活的点滴 每一张照片都是时光的标本 下载地址此处内容已隐藏，回复后(需要填写邮箱)可见
第一次使用Typecho，写完文章发现图片无法手动排版，Typecho默认排版非常不符合我个人的审美，感觉杂乱无章。所以有了PictureOrder插件，插件支持文章图片自适应排版和自定义排版，功能不是很完善，但是目前够用了，至少文章图片不是那么乱了PS：此插件结合AI模型产出，测试本站完全兼容，有建议及BUG请评论留言，大佬勿喷哈！效果展示 /* PictureOrder Gallery Styles */ #picture-order-69a97ee0d4f39 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin: 0; padding: 0; line-height: 0; font-size: 0; } #picture-order-69a97ee0d4f39 .gallery-item { position: relative; width: 100%; height: 150px; overflow: hidden; border-radius: 4px; margin: 0; padding: 0; display: block; } #picture-order-69a97ee0d4f39 img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; vertical-align: top; } /* 移动端响应式调整 */ @media (max-width: 1024px) { #picture-order-69a97ee0d4f39 { grid-template-columns: repeat(2, 1fr); gap: 7.2px; } #picture-order-69a97ee0d4f39 .gallery-item { height: 160px !important; } } @media (max-width: 768px) { #picture-order-69a97ee0d4f39 { gap: 6.4px; } } @media (max-width: 480px) { #picture-order-69a97ee0d4f39 { gap: 5.6px; } } /* PictureOrder Frame Styles */ #picture-order-69a97ee0d4f39 .gallery-item { background: #fdfcf7; padding: 12px 12px 38px 12px; border-radius: 2px; box-shadow: 0 4px 12px rgba(139, 69, 19, 0.08); box-sizing: border-box; transform: rotate(-2.5deg); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } #picture-order-69a97ee0d4f39 .gallery-item::before { content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 50px; border: 1px dashed rgba(139, 69, 19, 0.15); border-radius: 1px; pointer-events: none; z-index: 1; } #picture-order-69a97ee0d4f39 .gallery-item .film-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: 'Luohuayu', 'Courier New', Courier, monospace; color: #a09070; letter-spacing: 1px; opacity: 0.7; z-index: 2; white-space: nowrap; } #picture-order-69a97ee0d4f39 .gallery-item:nth-child(even) { transform: rotate(2deg); background: #faf8f0; } #picture-order-69a97ee0d4f39 .gallery-item:nth-child(3n) { transform: rotate(-1.8deg); background: #fcfbf5; } #picture-order-69a97ee0d4f39 .gallery-item:nth-child(4n) { transform: rotate(1.2deg); } #picture-order-69a97ee0d4f39 .gallery-item:nth-child(5n) { transform: rotate(-0.8deg); } #picture-order-69a97ee0d4f39 .gallery-item img { border-radius: 1px; filter: sepia(0.25) contrast(1.08) saturate(0.85) brightness(1.0); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; z-index: 0; } #picture-order-69a97ee0d4f39 .gallery-item:hover { transform: rotate(0deg) scale(1.08) translateY(-8px); box-shadow: 0 12px 28px rgba(139, 69, 19, 0.2); z-index: 10; } #picture-order-69a97ee0d4f39 .gallery-item:hover img { filter: sepia(0.18) contrast(1.12) saturate(0.88) brightness(1.03); } #picture-order-69a97ee0d4f39 .gallery-item:hover .film-label { opacity: 0.9; color: #8b7355; } 最好的照片，是那些能唤起情感的照片 照片是记忆的钥匙 时光荏苒，影像永恒 照片是情感的载体 插件结构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后台激活启用插件，根据需求设置插件。默认模式：根据你短代码内部图片的数量进行横向自动排列自定义模式：自定义横向排列数量，多出来的自动换行进行二次排列下载地址此处内容已隐藏，回复后(需要填写邮箱)可见