Joe主题大图设置 {callout color="#0000ff"}PS:本教程使用版本为typecho 1.21 +Joe 7.71{/callout}修改首页修改 index.php 文件目录 Joe/index.php{tabs}{tabs-pane label="效果图"}{/tabs-pane}{tabs-pane label="代码"}<div class="HeaderImg" style="background: url(这里填写你的图片地址) center;background-size:cover;"> <div class="infomation"> <div class="title"><?php $this->options->title(); ?></div> <div class="desctitle"> <span class="motto joe_motto"</span> </div> </div> <section class="HeaderImg_bottom"> <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0"></use> <use xlink:href="#gentle-wave" x="48" y="3"></use> <use xlink:href="#gentle-wave" x="48" y="5"></use> <use xlink:href="#gentle-wave" x="48" y="7"></use> </g> </svg> </section> </div>{/tabs-pane}{/tabs}修改CSS把这个css代码保存为heylie.min.css，放在typecho根目录，然后去后台，外观设置，全局设置找到图片上的地方，添加代码，然后保存设置。{tabs}{tabs-pane label="效果图"}{/tabs-pane}{tabs-pane label="代码"}<link rel="stylesheet" href="你的域名/heylie.min.css">{/tabs-pane}{tabs-pane label="CSS代码"}.Reward{text-align:center;margin-left:30px;color:var(--minor);font-size:12px}.Reward .footer_flex{width:42px;height:42px;background-color:#f56c6c;border-radius:50%;position:relative;z-index:10;display:flex;justify-content:center;align-items:center;margin-bottom:8px}.Reward .footer_flex:hover{background-color:var(--theme);cursor:pointer}.Reward .footer_flex:hover .flex_rows{display:block}.Reward .footer_flex .flex_rows{box-shadow:0px 1px 4px 2px var(--theme);cursor:auto;height:200px;width:170px;position:absolute;top:-215px;background:var(--background);display:none;border-radius:8px}.Reward .footer_flex .flex_rows::after{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}.Reward .footer_flex .flex_rows .flex-footer{overflow:hidden;margin:10px;position:relative;width:150px;height:180px}.Reward .footer_flex .flex_rows .flex-footer .RewardImg{width:900px;position:absolute;left:0}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li{float:left;overflow:hidden}.Reward .footer_flex .flex_rows .flex-footer .RewardImg li img{width:150px;border-radius:2px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn{display:inline-flex;border-radius:5px;position:absolute;border:1px solid var(--classC);bottom:0px;left:0}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:nth-of-type(n + 2){border-left:1px solid var(--classC)}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li div{height:20px;font-size:12px;color:var(--routine);padding:2px;border-radius:2px}.Reward .footer_flex .flex_rows .flex-footer .RewardBtn li:hover{cursor:pointer}.imgUpload_btn{margin:-10px auto 5px;text-align:right}.imgUpload_btn span{cursor:pointer;margin-right:5px}.top-social{position:relative;padding:5px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:50px;text-align:center;position:relative;height:32px}.top-social li a{height:100%}.top-social li div{height:100%}.top-social li img{height:100%}.top-social li .WeChatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-180px;left:-50px;transform:translate3d(0, 16px, 0);width:150px;height:150px;z-index:2}.top-social li .WeChatInner::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:var(--background);filter:drop-shadow(0px 4px 2px var(--theme))}.top-social li .WeChatInner img{border-radius:2px;width:140px;height:auto;margin:5px;background:none}.top-social li:hover .WeChatInner{display:block}.pe-social{width:100%}.joe_comment__respond-form .foot{justify-content:flex-start}.joe_comment__respond-form .foot .joe_owo__contain{position:static}.joe_comment__respond-form .foot .joe_owo__contain .box{position:absolute;bottom:100%;margin-bottom:6px;left:0px;padding-top:5px;border:1px solid rgba(0,0,0,.15);border-color:transparent;box-shadow:0 0 10px 8px rgba(116,116,116,.08)}.joe_comment__respond-form .foot .comment_box{cursor:pointer;text-align:center;color:var(--routine);height:26px;line-height:26px;background:var(--background);opacity:.85;border-radius:13px;width:70px;margin-left:5px}.joe_comment__respond-form .foot .comment_box:hover{background:var(--theme);color:#fff}.joe_comment__respond-form .foot .comment_box .dropdown-menu{cursor:default;position:absolute;top:auto;bottom:100%;margin-bottom:6px;z-index:10;display:none;min-width:160px;padding:5px 0;font-size:14px;text-align:left;list-style:none;background-color:var(--background);color:var(--minor);background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-color:transparent;border-radius:4px;box-shadow:0 0 10px 8px rgba(116,116,116,.08)}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image{width:250px;padding:8px 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p{margin:0 0 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p textarea{resize:vertical}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .form-control{display:block;width:100%;padding:6px 12px;font-size:14px;line-height:1.42857143;border:1px solid #ccc;border-radius:4px;border-color:transparent;background:var(--classD);color:#4e5358;max-height:200px;min-height:90px;box-shadow:none;transition:border-color ease-in-out .15s,background ease-in-out .15s,box-shadow ease-in-out .15s,opacity ease-in-out .3s}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right{text-align:right}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .error{float:left;color:var(--theme);-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but{border-radius:4px;display:inline-block;line-height:1.44;background:var(--theme);color:#fff;padding:.3em 1em}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .but:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment__respond-form .foot .press-down{background:var(--theme) !important;color:#fff !important}.HeaderImg{position:relative;width:100%;height:50rem;display:flex;margin-top:-4rem;justify-content:center;align-items:center;flex-direction:column;height: calc(70vh + 70px);}.HeaderImg.minImg{max-width:83rem;height:25rem;margin:auto}.HeaderImg.minImg .infomation .desctitle{font-size:1.5rem}.HeaderImg img{-o-object-fit:cover;object-fit:cover}.HeaderImg .infomation{position:absolute;line-height:2}.HeaderImg .infomation .title{font-size:2rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 .1875rem .3125rem #1c1f21;letter-spacing:.3rem}.HeaderImg .infomation .desctitle{display:flex;align-items:center;justify-content:center;text-align:center;color:#f3f3f3;font-size:1rem;padding:0 1rem;text-shadow:0 .1875rem .3125rem #1c1f21}.HeaderImg .HeaderImg_bottom{width:100%;position:absolute;left:0;bottom:-5px}.HeaderImg .HeaderImg_bottom .waves-svg{width:100%;height:3rem}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use{-webkit-animation:move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;animation:move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:first-child{-webkit-animation-delay:-2s;animation-delay:-2s;-webkit-animation-duration:7s;animation-duration:7s;fill:var(--background);opacity:.9}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(2){-webkit-animation-delay:-3s;animation-delay:-3s;-webkit-animation-duration:10s;animation-duration:10s;fill:var(--background);opacity:.8}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(3){-webkit-animation-delay:-4s;animation-delay:-4s;-webkit-animation-duration:13s;animation-duration:13s;fill:var(--background);opacity:.9}.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(4){-webkit-animation-delay:-5s;animation-delay:-5s;-webkit-animation-duration:20s;animation-duration:20s;fill:var(--background)}@-webkit-keyframes move-forever{0%{transform:translate3d(-90px, 0, 0)}to{transform:translate3d(85px, 0, 0)}}@keyframes move-forever{0%{transform:translate3d(-90px, 0, 0)}to{transform:translate3d(85px, 0, 0)}}.HeaderImg:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=)}@media(max-width: 768px){.HeaderImg{height:15rem;margin-top:0;height: calc(35vh + 35px);}.HeaderImg.minImg{width:100%;height:15rem}.HeaderImg .infomation .title{font-size:1.5rem}.HeaderImg .infomation .desctitle{font-size:0.9rem}.HeaderImg .HeaderImg_bottom .waves-svg{height:3rem}}.joe_aside.inactive{display:none}.joe_main{position:relative}@media(max-width: 768px){.joe-stretch{display:none}}.joe-stretch{height:100%;position:absolute;top:0;right:0;padding:40px 0}.joe-stretch .contain{position:-webkit-sticky;position:sticky;transition:top .5s;-webkit-animation:swingIconSet 2s infinite linear alternate;animation:swingIconSet 2s infinite linear alternate;z-index:333}@-webkit-keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes swingIconSet{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}.joe-stretch .contain::before{content:"";position:absolute;top:0;left:0;width:10px;height:25px;border-top:2px solid var(--minor);border-right:2px solid var(--minor);transition:border .35s}.joe-stretch .contain svg{position:absolute;top:25px;left:-3px;width:24px;height:24px;fill:var(--minor);cursor:pointer;transition:fill .35s}.joe-stretch .contain:hover{-webkit-animation-play-state:paused;animation-play-state:paused}.joe-stretch .contain:hover svg{fill:var(--theme)}.joe-stretch .contain:hover::before{border-color:var(--theme)}.joe-stretch.active{display:block}.joe_action_item.read_book{visibility:hidden;transform:scale(0)}.joe_action_item.read_book.active{visibility:visible;transform:scale(1)}.joe_action_item.read_book svg{transform:scale(0);opacity:0;transition:transform .85s,opacity .85s}.joe_action_item.read_book svg.active{transform:scale(1);opacity:1}{/tabs-pane}{/tabs}文章页顶部显示修改post.php，文件目录joe/post.php{tabs}{tabs-pane label="效果图"}{/tabs-pane}{tabs-pane label="代码"}<div class="HeaderImg" style="background: url(<?php echo _getThumbnails($this)[0] ?>) center;background-size:cover;"> <div class="infomation"> <div class="title"><?php $this->title() ?></div> <div class="desctitle"> <div class="item"> <span class="text"><?php $this->date('Y-m-d'); ?></span> <span class="line"></span> <span class="text"><?php $this->commentsNum('%d'); ?> 评论</span> <span class="line"></span> <span class="text" id="Joe_Article_Views"><?php _getViews($this); ?> 阅读</span> <span class="line"></span> <span class="text" id="Joe_Article_Views"><?php _getAgree($this) ?> 点赞</span> </div> </div> </div> <section class="HeaderImg_bottom"> <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0"></use> <use xlink:href="#gentle-wave" x="48" y="3"></use> <use xlink:href="#gentle-wave" x="48" y="5"></use> <use xlink:href="#gentle-wave" x="48" y="7"></use> </g> </svg> </section> </div>{/tabs-pane}{/tabs}默认文章自带，可以自行更换图库方法：将代码中 <?php echo _getThumbnails($this)[0] ?> 换成自己的图片地址即可

Nginx高效缓存策略指南：静态与动态资源的缓存设置 一、基础概念与准备工作缓存的作用 缓存将频繁访问的资源存储在快速存储介质（如内存或磁盘）中，减少重复请求对服务器的压力，提升响应速度。缓存类型静态资源：图片、CSS、JS、HTML等固定文件。动态内容：PHP生成的页面、API响应等后端计算结果。环境准备Nginx安装：默认目录为/etc/nginx，确保已安装Nginx（版本≥1.18）。数据库支持：使用PDO_SQLite存储缓存元数据（需PHP支持）。二、静态资源缓存配置基础配置 在nginx.conf或站点配置文件（如/etc/nginx/sites-available/default）中添加以下内容：http { #静态文件缓存设置 server { listen 80; server_name example.com; root /var/www/html; #匹配常见静态文件类型 location ~* \.(jpgjpegpnggificocssjshtmlwebp)$ { expires 30d; #缓存30天 add_header Cache-Control "public, no-transform"; #允许公共缓存 add_header ETag ""; #禁用ETag验证（简化配置） access_log off; #关闭访问日志以提升性能 } } }参数说明：expires：定义浏览器缓存时间。Cache-Control：控制中间代理和浏览器缓存行为。版本控制优化 防止更新后的文件被旧缓存覆盖，可在文件名中添加哈希值（需结合构建工具），例如：<link href="/style.css?v=123456" rel="stylesheet">三、动态内容缓存配置反向代理缓存 适用于PHP、Node.js等动态内容：http { #定义动态缓存区 proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=dynamic_cache:10m max_size=1g inactive=60m use_temp_path=off; server { location / { proxy_pass http://localhost:9000; #后端服务地址（如PHP-FPM） proxy_cache dynamic_cache; #启用缓存区 proxy_cache_key "$scheme$request_method$host$request_uri"; #唯一缓存键 proxy_cache_valid 200 302 10m; #成功响应缓存10分钟 proxy_cache_valid 404 1m; #404页面缓存1分钟 add_header X-Proxy-Cache $upstream_cache_status; #显示缓存命中状态 } } }关键指令：proxy_cache_path：定义缓存路径、大小及失效时间。proxy_cache_valid：按HTTP状态码设置缓存时长。FastCGI缓存（PHP专用） 针对PHP动态页面优化：http { fastcgi_cache_path /var/cache/nginx/fastcgi levels=1:2 keys_zone=php_cache:10m; server { location ~ \.php$ { fastcgi_pass unix:/var/run/php/php7.4-fpm.sock; #PHP-FPM地址 fastcgi_cache php_cache; #启用缓存 fastcgi_cache_valid 200 60m; #缓存60分钟 fastcgi_cache_use_stale error timeout updating; #容错机制 } } }四、高级优化技巧缓存分层与热数据优化使用多级缓存路径（levels=1:2）提升文件查找效率。通过proxy_cache_min_uses 2设置至少被请求2次才缓存，避免冷数据占用资源。缓存锁与并发控制 防止多个进程同时写入缓存导致冲突：proxy_cache_lock on; #启用缓存锁 proxy_cache_lock_timeout 5s; #锁超时时间大文件分片传输 启用http_slice_module模块优化大文件（如视频）传输：location /videos/ { slice 1m; #分片大小1MB proxy_cache_key "$uri$slice_range"; proxy_set_header Range $slice_range; }五、安全与维护敏感数据防缓存 在location块中添加规则，禁止缓存登录页或API：location /api/ { proxy_cache_bypass $http_cache_control; #根据请求头绕过缓存 proxy_no_cache $cookie_sessionid; #会话ID存在时不缓存 add_header Cache-Control "no-store"; #强制不缓存 }缓存清理策略手动清理：删除/var/cache/nginx目录下的文件。自动化清理：使用cron定时任务定期清理过期文件：0 3 * * * find /var/cache/nginx -type f -mtime +7 -delete监控与日志检查缓存命中率：grep "X-Proxy-Cache" /var/log/nginx/access.log。启用Nginx状态模块：location /nginx_status { stub_status on; allow 127.0.0.1; #仅允许本机访问 deny all; }六、常见问题排查缓存不生效检查文件路径权限：chown -R www-data:www-data /var/cache/nginx。验证配置语法：nginx -t。动态内容更新延迟 缩短proxy_cache_valid时间，或通过URL添加版本号强制刷新：rewrite ^/article/(.*)$ /article/$1?v=20240508 last;通过以上步骤，你可以快速搭建一个高效的Nginx缓存系统，显著提升网站性能。遇到问题时，优先检查日志和响应头中的X-Proxy-Cache状态。

硬盘挂载固定挂载路径，解决只会自动挂载一个盘的问题 1.用root用户登录。blkid2.可以直接Vim改/etc/fstab，但改之前建议先添加一条写入信息然后再改，让系统先生成自己系统盘相关信息。同时也可以提前备份一下，乱改可能会无法开机。也可以使用命令echo "UUID=×××× /mnt/××× ext4 defaults 0 0" >>/etc/fstab 此处填挂载盘现在的文件系统，有fat32、ntfs等等，此命令是在/etc/fstab下写入硬盘固定的位置等信息。关于/etc/fstab下如defaults 0 0配置的含义，有网络 教程https://blog.csdn.net/youmatterhsp/article/details/83933158https://blog.csdn.net/b7376811/article/details/120607514

欢迎使用 Typecho 如果您看到这篇文章,表示您的 blog 已经安装成功.