给自己网站侧边栏新增一个看视频的小组件 {tabs}{tabs-pane label="效果图"}{/tabs-pane}{tabs-pane label="源代码"}<section id="xiaojiejie"> <div class="xiaojiejie"><style>#player { margin: 1px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style> <button type="button" id="ckxjj">点我看小姐姐视频</button> <div id="xjjsp"> <video id="player" src="https://api.heylie.cn/api/video?v=emo" controls="" alt="小姐姐视频"></video> <div class="kzsp"> <button id="switch">连续: 开</button> <button id="next">下一个</button> </div> <button type="button" id="gbxjj">关闭视频</button> </div> <script> var player = document.getElementById('player'); var bind = function (element, event, callback) { return element.addEventListener(event, callback); }; var sp = 0; $(document).ready(function () { $('#ckxjj').click(() => { $('#ckxjj').hide(); $('#xjjsp').show(); if (sp == 0) { randomm(); sp = null } player.onerror = () => { randomm() } player.play(); }); $('#gbxjj').click(() => { $('#ckxjj').show(); $('#xjjsp').hide(); player.pause(); }) }); var get = function (id) { return document.getElementById(id); }; var auto = true; // 生成播放视频 function randomm() { player.src = 'https://api.heylie.cn/api/video?v=emo'; player.play(); }; bind(get('next'), 'click', randomm); bind(get('switch'), 'click', function () { auto = !auto; this.innerText = '连续：' + (auto ? '开' : '关'); }); bind(player, 'ended', function () { if (auto) randomm(); }); player.pause(); </script> </div> </section>{/tabs-pane}{/tabs}{message type="success" content="演示"/}2025-05-11 21:28:39 星期日{mtitle title="点击开始"/} #player { margin: 1px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; } 点我看小姐姐视频 连续: 开 下一个 关闭视频 var player = document.getElementById('player'); var bind = function (element, event, callback) { return element.addEventListener(event, callback); }; var sp = 0; $(document).ready(function () { $('#ckxjj').click(() => { $('#ckxjj').hide(); $('#xjjsp').show(); if (sp == 0) { randomm(); sp = null } player.onerror = () => { randomm() } player.play(); }); $('#gbxjj').click(() => { $('#ckxjj').show(); $('#xjjsp').hide(); player.pause(); }) }); var get = function (id) { return document.getElementById(id); }; var auto = true; // 生成播放视频 function randomm() { player.src = 'https://api.heylie.cn/api/video?v=emo'; player.play(); }; bind(get('next'), 'click', randomm); bind(get('switch'), 'click', function () { auto = !auto; this.innerText = '连续：' + (auto ? '开' : '关'); }); bind(player, 'ended', function () { if (auto) randomm(); }); player.pause(); {progress percentage="99%" color="#0000ff"/}

实现评论时自动随机输入一条评论功能 　修改 core/function.php将下面代码复制粘贴到joe/function.php文件里！{tabs}{tabs-pane label="效果图"}{/tabs-pane}{tabs-pane label="代码"}/* 自动随机评论功能 */ function random_comment() { $comments = array('对小白真的很友好，写的很全面', '终于找到这篇文章了，感谢作者的分享', '喜欢这篇文章，作者666，文章真棒', '支持博主，一定多分享', '这篇文章写的真不错，真详细，点个赞', '这篇文章肯定会火，作者666大顺', '受益匪浅，感谢博主', '学习到了，感谢博主'); return $comments[rand(0,count($comments)-1)]; }{/tabs-pane}{/tabs}　修改public/comment.php将下面代码覆盖到joe/public/comment.php文件里的同样位置！{tabs}{tabs-pane label="效果图"}{/tabs-pane}{tabs-pane label="代码"}<textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"><?php echo random_comment(); ?></textarea>{/tabs-pane}{/tabs}

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状态。

nginx 的 server 块配置解析 http { server_tokens off; # 隐藏版本号 # 想要彻底清除 Server 响应头可以选择 ngx_headers_more 模块，这个模块需要额外安装。或者直接安装 nginx-extras 包也会带上这个模块。 more_clear_headers Server; # 清除 Server 响应头 # 阻止ip访问 server { # default_server 是一个配置参数，用于指定当请求的域名（Host 头）没有匹配任何 server 块时，Nginx 应该使用哪个 server 块来处理这些请求。 listen 443 ssl default_server; server_name _; # 匹配所有未配置的域名或IP，这样设置了 default_server 的 server 块（即本块）就会处理所有未匹配的请求。 ssl_certificate 证书.pem; # 签名证书路径，相对路径、绝对路径都可以 ssl_certificate_key 私钥.key; # 私钥路经 return 403; # 返回禁止访问 } # https配置模板 server { # https的默认端口是443，只有把端口写成443，登录网站的时候才不需要写端口号 listen 443 ssl; # [::] 是 IPv6 的通配符地址，表示监听所有可用的 IPv6 地址（类似于 IPv4 的 0.0.0.0） listen [::]:443 ssl; # Nginx 会先检查请求的域名是否与某个 server_name 精确匹配， # 如果没有精确匹配，会尝试使用通配符匹配。如果没有找到匹配的 server_name，Nginx 会将请求交给 default_server 的 server 块。 server_name 这里写你的域名; # ssl配置，证书可以使用免费的Let's Encrypt生成，阿里云上也有，但是签名需要域名， # 不需要域名的可以自己使用 openssl 创建自签名证书，但是自签名证书不受信任 ssl_certificate 证书.pem; # 签名证书路径，nginx支持pem格式的证书 ssl_certificate_key 私钥.key; # 私钥路经 # 启用ssl协议，强制使用 TLS 1.2 和 1.3 版本 ssl_protocols TLSv1.2 TLSv1.3; # 启用加密套件，加密套件的顺序用冒号分隔。很重要，Nginx 会按照这个顺序选择一个加密套件 ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256'; # 强制性要求浏览器在加密连接时优先使用 服务器端 的加密套件 ssl_prefer_server_ciphers on; # 会话缓存：会话缓存能够存储客户端和服务器之间建立的 SSL/TLS 会话，避免每次请求都重新建立完整的握手过程，从而提升性能，减少 CPU 使用。通常 1 MB 可以存储大约 4000 个会话。 ssl_session_cache shared:SSL:1m; # 会话缓存时间：用于设置 SSL 会话缓存中会话的过期时间。在指定时间内，客户端可以重用之前缓存的会话，对于大多数网站，设置为 5m（5 分钟）到 10m（10 分钟）是合理的范围。 ssl_session_timeout 5m; # 向 HTTP 响应中添加自定义的 HTTP 头部信息。语法：add_header <header_name> <value> [always]; # add_header 指令可以写在 http、server 或 location 块中，作用范围会逐级缩小。如果多个级别的 add_header 冲突，优先使用最具体（内层）的配置。 # 强制客户端使用 HTTPS 访问，防止中间人攻击。 # max-age=31536000：缓存 1 年。includeSubDomains：对子域生效。preload：允许加入浏览器 HSTS 预加载列表。 # [always]: 默认情况下，add_header 只会在响应状态码为 200、204、206、301、302、303 或 304 时添加。如果加上 always 参数，头部会在所有响应中添加（包括错误状态码，如 404 或 500）。 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; # 只允许特定的 HTTP 方法。 add_header Access-Control-Allow-Methods "GET, POST, OPTIONS"; # 限制加载资源的来源，防止恶意脚本注入。 # default-src 'self' 仅允许加载本域的资源。如果你不熟悉域的概念就别用 # script-src 'self' 'unsafe-inline' 限制脚本加载来源，仅允许本域和内联脚本。如果你不熟悉域的概念就别用 # img-src 'self' data: 限制图片来源，仅允许本域和 data: 协议。 add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:;"; # 启用 gzip 压缩，优化传输速度和网络带宽使用。 gzip on; # 文件大于 1KB 才压缩，对于小文件（小于 1KB 的资源），压缩的效果不明显，还可能导致处理开销增加，因此跳过。 gzip_min_length 1024; # 设置压缩等级为 5，这是一种性能和压缩比的折中选择。Gzip 压缩需要消耗服务器的 CPU 资源，过高的压缩等级可能增加服务器的负载。推荐压缩等级为 4~6。 gzip_comp_level 5; # 指定要压缩的资源类型：text/plain: 纯文本文件。text/css: CSS 样式表文件。application/json: JSON 数据（比如 API 响应）。 # application/javascript: JavaScript 文件。text/xml 和 application/xml: XML 文件。image/svg+xml: 矢量图片（SVG 格式）。 # 图片文件通常不需要 Gzip 压缩。他们已经是高度压缩了。 gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml; # 添加 Vary: Accept-Encoding 头部用于通知缓存服务器根据客户端是否支持 Gzip 压缩返回不同的内容。 gzip_vary on; # 为所有代理请求启用压缩，适用于反向代理场景。 gzip_proxied any; # location 指令用于定义一个位置块，它根据请求的 URI 匹配特定的路径。location也可以嵌套在其他location块中。 # 前端代理，根路径 / 指向静态文件 index/index.html。 location / { # 指定静态文件的根目录 root html/course; # 指定当请求为url目录时，默认返回的页面 index index/index.html; } # 后端代理，将 /api/ 开头的请求转发到后端服务器的 http://localhost:5000 上 location /api/ { # proxy_pass 指定代理的后端服务器的地址。 # 注意：http://localhost:5000/ 和 http://localhost:5000 所代表的url拼接规则是不一样的。自己去搜 proxy_pass 参数怎么用 proxy_pass http://localhost:5000/; # proxy_set_header 用于设置转发给后端服务器的请求头部。 # Host头部保持了原始请求的Host值。 proxy_set_header Host $host; # X-Real-IP头部记录了原始客户端的IP地址。 proxy_set_header X-Real-IP $remote_addr; # X-Forwarded-For头部是一个逗号分隔的列表，包含了从客户端到代理服务器的所有IP地址（包括客户端的IP地址）。 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # X-Forwarded-Proto头部记录了原始请求使用的协议（如http或https）。 proxy_set_header X-Forwarded-Proto $scheme; } # WebSocket 代理，我使用的是 flask_socketio，请根据实际情况修改匹配的url location /socket.io/ { proxy_pass http://localhost:5000; # 这里必须使用 http1.1 版本，因为1.1版本才是长连接 proxy_http_version 1.1; # 设置 Upgrade 请求头，用于处理协议升级（从 HTTP 升级到 WebSocket）。 proxy_set_header Upgrade $http_upgrade; # 强制将 Connection 设置为 "upgrade"，以支持协议切换。 proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 设置超时时间为 60 秒，用于保持 WebSocket 连接。 proxy_read_timeout 60s; } # 单独按文件类型配置静态资源，可以单独为图片、CSS、JS 文件设置不同的缓存策略。 # 也可以写到某页的 location 块中。比如： # location / { # root html/course; # index index/index.html; # expires 30d; # add_header Cache-Control "public, max-age=2592000"; # } # 这里我选择统一缓存网站的所有静态资源，使用正则表达式匹配文件后缀。每页的 location 块中也可以单独配置，如上。 # 配置图片、视频缓存 location ~* \.(jpg|jpeg|png|gif|ico|svg|webp|mp4)$ { # 必须设置 root 参数，指定静态文件的根目录。不然无法找到静态文件。 root html/course; # 设置静态资源的缓存时间为 30 天。 expires 30d; # 设置浏览器缓存策略。public：表示该资源可以被任何缓存（包括浏览器缓存和中间代理缓存）存储和共享。max-age=2592000 表示缓存时间为 30 天。 # 浏览器在 30 天内不会重新请求资源，直接从本地缓存加载。 add_header Cache-Control "public, max-age=2592000"; } # 配置 CSS 和 JS 文件缓存 location ~* \.(css|js)$ { root html/course; expires 1d; # 缓存 1 天 add_header Cache-Control "public, max-age=86400"; } # 页面资源（HTML 文件） location ~* \.(html)$ { root html/course; add_header Cache-Control "no-cache, no-store, must-revalidate"; # 确保内容实时更新 } # 防止访问隐藏文件（如 .git 文件） location ~ /\. { deny all; } # 404错误页面配置：当请求的文件不存在时，转入 /404.html 页面 error_page 404 /404.html; # 匹配 /404 错误页面，=表示精确匹配 location = /404.html { # 指定 404.html 页面的位置 root /usr/share/nginx/html/404.html; } } }

微梦图床速度测试 微梦图床

Typecho-Joe主题新增文章阅读时长统计 1.修改functions.php文件，底部增加，文件路径：/usr/themes/Joe// 文章阅读时长设置 $onlineTime = new Typecho_Widget_Helper_Form_Element_Select( 'onlineTime', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'on', '是否启用文章阅读时长统计', '介绍：开启后，文章底部展示文章字数，预计阅读时长和已阅读时长' ); $onlineTime->setAttribute('class', 'joe_content joe_custom'); //如果设置无法展示，请将joe_custom替换为joe_other $form->addInput($onlineTime->multiMode());2.修改article.php文件，文件路径：usr/themes/Joe/public第一段代码<div class="contain" style="margin-bottom: 10px; <?php if(Helper::options()->onlineTime !== 'on') echo 'display:none;' ?>"> <blockquote id="onlineTime">本文共 <?php art_count($this->cid); ?> 个字数,平均阅读时长 ≈ <?php echo art_time($this->cid); ?>分钟</blockquote> </div> </div>第二段代码<?php //文章阅读时间统计 function art_time ($cid){ $db=Typecho_Db::get (); $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1)); $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']); $text_word = mb_strlen($text,'utf-8'); echo ceil($text_word / 400); } //文章字数统计 function art_count ($cid){ $db=Typecho_Db::get (); $rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1)); $text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']); echo mb_strlen($text,'UTF-8'); } ?> <script language="javascript"> var second=0; var minute=0; var hour=0; window.setTimeout("interval();",1000); function interval() { second++; if(second==60) { second=0;minute+=1; } if(minute==60) { minute=0;hour+=1; } var onlineTime = "您已阅读：" + hour + "时" + minute + "分" + second + "秒。"; var joe_message_content = "本文共 " + <?php art_count($this->cid); ?> + "个字数，平均阅读时长 ≈ " + <?php echo art_time($this->cid); ?> + "分钟，"; $('#onlineTime').text(joe_message_content + onlineTime); window.setTimeout("interval();", 1000); } </script>

Typecho-joe主题手机侧边栏加图标颜色 1.修改教程，路径/Joe/public/header.php修改首页，官版327行。<span><font color="#ff8900" style="font-weight:600;"> <i class="fa fa-home"></i> 首页</font></span>2.修改栏目，用下面代码替换 <span>栏目</span><span><font color="0909f7b" style="font-weight:600;"> <i class="fa fa-mail-reply-all"></i> 栏目</font></span>3.页面<span><font color="#f709f7b" style="font-weight:600;"> <i class="fa fa-window-restore"></i> 页面</font></span>4.推荐<span><font color="#66ff00b" style="font-weight:600;"> <i class="fa fa-thumbs-o-up"></i> 推荐</font></span>