https://www.ailmu.cn/ 艾霂's Blog【AILMU.CN】全新一代自媒体新主流博客，是艾霂Mr.记录生活点滴，与时事新闻金融资讯和资源技术分享的个人技术型博客，艾霂's Blog – 秋霂漫漫！ https://ailmu.cn/technique/15.html 2024-11-19T20:41:00+08:00 用过 Joe 主题的都知道，只有电脑端才会有侧边栏模块，而手机端只有中间的文章分类栏目和页面栏目，这导致很多人自定义的侧边栏在手机端无法查看。 很显然这样会让手机端侧边栏空落落的，今天的教程就是为手机端菜单栏添加自定义模块，为手机端侧边栏增添浅浅滴活力！ 效果展示 操作步骤 {message type="warning" content="注意：此教程基于Joe主题原版而修改的，因为Joe主题二开的较多，所以添加的位置不一定一样，不过规律都是一样，修改前请备份文件！"/} 准备以下代码： </ul> <br/> </ul> <ul class="joe_header__slideout-menu panel-box"> 这里填入你自己的代码 进入网站根目录 /usr/themes/Joe/public/header.php 文件，将上面代码复制粘贴在下图位置即可（这里我就不添加代码了，你们可以自行添加想展现的代码） 具体位置应该在 </div> <div class="joe_header__mask"></div> 上面，进入文件拉到最底部就看见咯！ {callout color="#f0ad4e"} 方法是死的，但是代码是活的，大家根据自己的需求添加在不同的位置， 切记 干什么事一定先备份。 {/callout} https://ailmu.cn/technique/14.html 2024-11-18T19:51:00+08:00 本站一直致力追寻对 Typecho 博客系统 Joe 主题的美化，为了不让博客美化过度只是增加了一些实用功能，并对 Joe 主题进行优化修复，赋予它新的生命力。 这不今天 ‌UP主 （艾霂Mr.）又带来了新的力作，很可能大家在别的主题或者其他系统都见过它，虽然不是很实用但是绝对会为您的博客带来眼前一亮的感觉！没错今天为大家带来的就是，给侧边栏添加仿mac操作栏🍵 效果展示 Mac样式CSS代码 {callout color="#f0ad4e"} 在Typecho后台 -- 设置外观 -- 全局设置 -- 自定义CSS -- 添加下面的样式 {/callout} /*侧边栏添加Mac样式*/ .aimac { position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #fc625d !important; width: 11px; height: 11px; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; float: right; right: 55px; top: 17px; } 修改侧边栏模板 侧边栏模板在 Typecho 根目录这个文件： /usr/themes/Joe/public/aside.php 在每个侧边栏标题后面加个 <span> </span> 标签并且设置样式名和你添加的一致，我这里叫 aimac <span class="aimac"></span> 具体添加位置看下图：（其它侧边栏类似） https://ailmu.cn/gossip/13.html 2024-11-17T08:50:00+08:00 互联网上的攻击和扫描流量非常多，为了保证网站安全，为网站新增 WAF 防护是必要的！之前有了解过 宝塔云WAF ，但需要独立的一台服务器来部署，架构不够灵活，对于个人用户来说成本太高了。 得知 雷池WAF ，基于 Nginx 开发，以反向代理方式接入，部署架构灵活，可以与 WEB 服务部署在同一台服务器 （官方不推荐） ，是一款广受好评的 社区WAF 项目！不过在网站管理上，个人用户大多都是通过宝塔面板进行管理，宝塔面板的 Nginx 默认监听端口为 80 和 443 ，这就导致共存部署时 雷池WAF 默认无法监听 80 和 443 端口，那怎么办呢？ 本文将提供在 宝塔面板 怎样部署 雷池WAF 以及详细过程，同时帮大家避坑安装 雷池WAF 过程有可能踩的雷。 安装宝塔和配置环境 怎样安装宝塔我这里就不多赘述了，自行去 宝塔官网 安装，根据自己网站情况配置环境，（啰嗦一句安装好宝塔后不用着急安装Docker，后续安装雷池WAF时会帮你安装。） 修改Nginx端口避免80和443端口被占用 {message type="info" content="先随便创建个站点，然后启用一下ssl证书，再开启个强制HTTPS（避坑，下文会用到）"/} 在宝塔面板，网站中找到对应的站点，单击右侧的设置！ 切换到配置文件，修改监听端口为其他非占用端口，这里我把 80 端口改为 88 端口， 443 端口改为 444 端口（根据个人修改）单击保存即可。图中的 if 判断后面的端口是强制 HTTPS 的判断端口,(一定要改，不然反复重定向)如果你没有开启强制 HTTPS 就没有这个 if 判断代码，就不需要改。 进入 /www/server/panel/vhost/nginx/ 目录，分别编辑 0.default.conf 和 phpfpm_status.conf 文件，将默认监听端口修改为其他非占用端口（和上面配置相似分别把80端口和443端口进行修改，必须把这两个文件所有上述端口进行修改），最后保存退出。 配置完成后重启 Nginx ，如果可以正常重启则说明配置正确。后期新增的网站域名一定要写 a.com:xx ， xx 写你的非标端口， HTTPS 端口也要改，否则默认使用 80 端口会出现各种意想不到的 BUG ！（记住要在宝塔防火墙和服务器防火墙添加端口规则，放行其刚才修改的端口） 安装雷池WAF 前往 雷池WAF官网 复制对应系统脚本在SSH终端执行安装。 在宝塔面板左侧菜单选择终端，执行已复制的命令进行安装 雷池WAF ，提示安装 Docker 时确定即可。雷池WAF安装目录选择默认的（如果自定义安装路径，更新/卸载是个大麻烦） 雷池安装成功以后，你可以打开浏览器访问 http://你的ip:9443 来使用雷池控制台。 {message type="warning" content="注意对9443的端口放行"/} 然后会提示你绑定一个TOTP验证软件，这里推荐使用腾讯身份验证器绑定（我没有提示绑定软件🤷‍♂️这里还是要讲述一下） {callout color="#f0ad4e"} 请注意：这里有个坑，雷池的按钮有些在手机端单击无效，需要长按，长按即可解决，腾讯身份验证器TOTP绑定需要扫码，你可以用俩设备或者截图后用QR扫码提取一下验证代码验证，这里不再赘述。 {/callout} 雷池WAF添加站点网上有很多教程，这里我就不赘述了！这里主要说一下这个上游怎么请求，配置错误会出现502错误。 选择 雷池WAF 和 宝塔 通讯用 HTTP 协议就写 HTTP 协议你写的非标端口，我的示例是 88端口 ，一定要注意， HTTP 协议的上游写 http://127.0.0.1:88 注意协议和端口。 选择 雷池WAF 和 宝塔 通讯用 HTTPS 协议就写 HTTPS 协议你写的非标端口，我的示例是 444 端口，一定要注意， HTTPS 协议的上游写 https://127.0.0.1:444 注意协议和端口。 如果你都按照上面的教程操作，是不会出现端口被占用情况的，请自行排查问题关键。 目前发现如果已经部署了站点，雷池WAF可能会出现莫名其妙的占用现象，目前暂时没发现有解决方案，只能重装雷池WAF安装防护、升级等... 雷池WAF 官网均有教程，请自行查阅，这里不再过多赘述。 解决宝塔无法获取访客真实IP问题 在雷池防护站点，全局配置中把 源 IP 获取方式更换为从 源 IP 获取方式从 HTTP-Header 中获取，并把 HTTP-Header 设置为 X-Forwarded-For 并开启 {x} 清空并重写 X-Forwarded-For 在 Nginx 配置中的 HTTP 代码块增加一下代码 set_real_ip_from 0.0.0.0/0; real_ip_header X-Forwarded-For; real_ip_recursive on; #使用CDN时考虑，不然会无法获取访客IP只能获取CDN的IP {callout color="#f0ad4e"} 本站已接入 长亭雷池WAF 请勿恶意 DDoS 本站！ {/callout} https://ailmu.cn/gossip/12.html 2024-11-16T19:59:00+08:00 不知道这段时间为什么老是遭到 DDoS 攻击，本博客只是个人博客并没有动谁的蛋糕，并且是新站不知道某些人的用意是什么。导致本站无法正常运营在这里说声抱歉！ 遭受DDoS记录 从11月10号到11月14号都有不同的 DDoS 攻击，我可能为了省钱没有添加 CDN ，某些人感觉比较好玩吧，或者前几天我在 Joe 主题群里，发布我的网站遭到同行的嫉妒，嫉妒我的博客主题美化的不错😐就恶意攻击！ 这并不能阻止我建站的热情，为了防止下次被 DDoS 我这次妥协了🫥选择了给网站加 CDN 并且有多个防护措施，就是不知道有没有用。 服务器配置 厂商 CPU 内存 系统盘 DDoS防护 腾讯云 4核 4GB 70GB 100Gbps {callout color="#f0ad4e"} 恶意 DDoS 攻击别人的网站是违法行为，请就此收手。 {/callout} https://ailmu.cn/gossip/11.html 2024-11-14T19:23:00+08:00 2025年起我国法定节假日增加2天 激发出游热情 《国务院关于修改〈全国年节及纪念日放假办法〉的决定》11月12日公布，自2025年1月1日起施行。决定规定，全体公民放假的假日增加2天，即农历除夕、5月2日。全体公民放假的假日，可合理安排统一放假调休，结合落实带薪年休假等制度，实际形成较长假期。除个别特殊情形外，法定节假日假期前后连续工作一般不超过6天。 同一天，国务院办公厅关于2025年部分节假日安排的通知12日也向社会发布。根据通知，2025年，春节放假8天，劳动节放假5天，国庆节、中秋节放假8天 春节“五一”各增1天 此次修改分别增加了春节和劳动节的假期天数。修改前，我国全体公民放假的节日有7个，分别包括元旦、春节、清明节、劳动节、端午节、中秋节、国庆节，共放假11天。根据修改后的《办法》，节日数量维持在7个，但放假天数增至13天。增加的2天，1天是农历除夕，1天是5月2日。 修改后的7个假期放假安排也已落定。根据《国务院办公厅关于2025年部分节假日安排的通知》，2025年春节自农历除夕起放假调休8天，国庆节自10月1日起放假调休7天，劳动节放假调休5天，元旦、清明节、端午节、中秋节分別放假调休或连休3天(如逢周三则只在当日放假)，国庆节放假如逢中秋节则合并放假8天。 北京第二外国语学院旅游科学学院教授谷慧敏认为，选择春节增加假期一方面能够缓解春运的交通压力，另一方面也让民众在“回家”和“旅游”的安排上有更充分的选择空间；而增加劳动节的假期天数则能更好平衡上半年和下半年的放假天数。 此外，文化和旅游部“十四五”规划专家委员会委员、北京交通大学现代旅游研究院名誉院长张辉表示，增加春节和“五一”的假期天数也适应了民众对于季节性出行的需求，增加民众的幸福感 放假与调休规则明确 除了增加假期以外，《决定》还明确了放假调休规则。 此次修改在原有办法基础上增加了第七条：“全体公民放假的假日，可合理安排统一放假调休，结合落实带薪年休假等制度，实际形成较长假期。除个别特殊情形外，法定节假日假期前后连续工作一般不超过6天。” 按照上述规则，2025年元旦将在1月1日(周三)放假1天，不调休；春节在1月28日(农历除夕、周二)至2月4日(农历正月初七、周二)放假调休，共8天，1月26日(周日)、2月8日(周六)上班；清明节在4月4日(周五)至6日(周日)放假，共3天；劳动节在5月1日(周四)至5日(周一)放假调休，共5天，4月27日(周日)上班；端午节在5月31日(周六)至6月2日(周一)放假，共3天；国庆节、中秋节在10月1日(周三)至8日(周三)放假调休，共8天，9月28日(周日)、10月11日(周六)上班。 近年来，放假安排形成了较为固定的调休原则。不过，不少民众曾被假期调休困扰，在社交媒体平台上，“调休”话题也多次引发讨论。此次《办法》将调休原则进行了明确和公布，有助于民众梳理未来几年的放假安排，为其提前规划节假日出行提供了便利。 双向奔赴的回应 据了解，1949年12月23日《全国年节及纪念日放假办法》首次发布，此后分别于1999年、2007年、2013年、2024年进行了四次修订。 在谷慧敏看来，放假安排关系着全社会劳动效率、群众休息休闲需求。随着经济社会的发展，民众的收入和生活水平进一步提升，闲暇时间和生活的幸福感越发被重视。此次对于假期安排的优化进一步平衡了社会生产运营和民众生活质量。 张辉表示，此次调整是在现代居民在工业化和城镇化发展中，对民众休息权利的满足。因此，新的放假安排发布也会得到民众的支持，从而与政府部门对民众期待的回应形成“双向奔赴”。 放假时间的调整激发了更多人出游的热情，各大在线旅游平台的搜索量出现激增。据携程数据，在《决定》发布后，携程平台上2025年春节期间的机票搜索量增长1.7倍，除夕当天的机票搜索量增长2.5倍。从当前预订情况看，除夕当天，北京、上海、香港、深圳、广州、苏州、杭州等地用户预订机票数量较高。此外，《决定》发布半小时后，飞猪、同程、去哪儿等平台机票搜索量也呈现增长趋势，其中飞猪平台上春节假期机票搜索量环比增长约2倍。 去哪儿大数据研究院研究员肖鹏表示，对旅游行业来说，8天假期能让旅客错峰在节中出游，单日客流量会更平衡，旅客出游也较舒适。 https://ailmu.cn/gossip/10.html 2024-11-13T19:50:00+08:00 最近在做一个项目，需要用到按钮代码，我在网上找到一些实列资料，感觉都不是很符合我的标准，HHH...我决定动手DIY一下效果看着还不错！ 今天趁着有空发一下成果，顺便谁一篇文章🧑‍💻 实践过程 按钮代码可以通过 HTML 和 CSS 实现，非常简单上手。 html代码 <button> 艾霂's Blog </button> css代码 <style> button { --green: #1BFD9C; font-size: 15px; padding: 0.7em 2.7em; letter-spacing: 0.06em; position: relative; font-family: inherit; border-radius: 0.6em; overflow: hidden; transition: all 0.3s; line-height: 1.4em; border: 2px solid var(--green); background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%); color: var(--green); box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1); } button:hover { color: #82ffc9; box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2); } button:before { content: ""; position: absolute; left: -4em; width: 4em; height: 100%; top: 0; transition: transform .4s ease-in-out; background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%); } button:hover:before { transform: translateX(19em); } </style> 实列展示 艾霂's Blog button { --red: #FF00FF; font-size: 15px; padding: 0.7em 2.7em; letter-spacing: 0.06em; position: relative; font-family: inherit; border-radius: 0.6em; overflow: hidden; transition: all 0.3s; line-height: 1.4em; border: 2px solid var(--red); background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%); color: var(--red); box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1); } button:hover { color: #FF00FF; box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2); } button:before { content: ""; position: absolute; left: -4em; width: 4em; height: 100%; top: 0; transition: transform .4s ease-in-out; background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%); } button:hover:before { transform: translateX(19em); } https://ailmu.cn/technique/9.html 2024-11-12T19:31:00+08:00 我想大多数的站长，基本上每年都是进入 footer.php 修改博客网站底部 Copyright © 年份吧！但往往都是过了好久才想起来，要改下这个可有可无的数值。 那么为了更好的维护好这些网站，降低自己的工作量，今天与大家分享下自动更新的方法。 版权年份自动更新代码 这里有两种方案，一种是插入 JavaScript ，通过 document.write 的方式插入最新的年份；另一种是 PHP 年份调用。 而由于 Typecho 就是 PHP 程序， 艾霂Mr. 更倾向于后者，毕竟有些人喜欢屏蔽些功能什么的，导致显示错误，而使用 PHP 调用的话就没有这样的问题，即便是 PHP 加速缓存，也可以快速更新。 JavaScript代码 <script>document.write(new Date().getFullYear())</script> PHP代码 <?php echo date('Y'); ?> 上面其实已经写的非常明白了，为了让小白站长更加简单明白的使用，这里以自己的博客为例，给大家做个例子，小伙伴们可根据自己的需求增加删减内容。 Copyright &copy; 2024 - <?php echo date('Y'); ?> <a href="<?php echo home_url() ?>"><?php echo get_bloginfo('name') ?></a> {callout color="#f0ad4e"} &copy; 是 © 符号的代码； <?php echo home_url() ?> 是站点地址，用 <a> 标签进行超链接； <?php echo get_bloginfo('name') ?> 是站点名称。 {/callout} https://ailmu.cn/technique/8.html 2024-11-11T18:29:00+08:00 date() 函数是我们在 php 开发中常碰到并且会使用到的一个日期函数，下面我来给大家介绍 date() 函数的一些基本扮靓和方法，感兴趣的朋友跟随 艾霂Mr. 一起看看吧！ 日期时间函数是 PHP 的核心组成部分。无需安装即可使用这些函数。下面来详细说说 date 函数的具体用法。 PHP Date() 函数 PHP Date() 函数可把时间戳格式化为可读性更好的日期和时间。 语法 date(format,timestamp) 参数说明 参数 说明 format 必须规定时间戳的格式。 timestamp 可选，规定时间戳，默认是当前日期和时间。 PHP的日期时间函数date() $t=time(); echo date("Y-m-d H:i:s",$t); 第一个参数的格式分别表示: 1. 年-月-日 echo date('Y-m-j'); 2007-02-6 echo date('y-n-j'); 07-2-6 大写Y表示年四位数字，而小写y表示年的两位数字； 小写m表示月份的数字(带前导)，而小写n则表示不带前导的月份数字。 echo date('Y-M-j'); 2007-Feb-6 echo date('Y-m-d'); 2007-02-06 大写M表示月份的3个缩写字符，而小写m则表示月份的数字(带前导0); 没有大写的J，只有小写j表示月份的日期，无前导o；若需要月份带前导则使用小写d。 echo date('Y-M-j'); 2007-Feb-6 echo date('Y-F-jS'); 2007-February-6th 大写M表示月份的3个缩写字符，而大写F表示月份的英文全写。(没有小写f) 大写S表示日期的后缀，比如“st”、“nd”、“rd”和“th”，具体看日期数字为何。 小结： 表示年可以用大写的Y和小写y; 表示月可以用大写F、大写M、小写m和小写n(分别表示字符和数字的两种方式); 表示日可以用小写d和小写j，大写S表示日期的后缀。 2. 时:分:秒 默认情况下， PHP 解释显示的时间为“格林威治标准时间”，与我们本地的时间相差8个小时。 echo date('g:i:s a'); 5:56:57 am echo date('h:i:s A'); 05:56:57 AM 小写g表示12小时制，无前导0，而小写h则表示有前导0的12小时制。 当使用12小时制时需要表明上下午，小写a表示小写的“am”和“pm”，大写A表示大写的 “AM”和“PM”。 echo date('G:i:s'); 14:02:26 大写G表示24小时制的小时数，但是不带前导的；使用大写的H表示带前导的24小时制小时数 小结： 字母g表示小时不带前导，字母h表示小时带前导； 小写g、h表示12小时制，大写G、H表示24小时制。 3. 闰年、星期、天 echo date('L'); 今年是否闰年：0 echo date('l'); 今天是：Tuesday echo date('D'); 今天是：Tue 大写L表示判断今年是否闰年，布尔值，为真返回1，否则为0； 小写l表示当天是星期几的英文全写(Tuesday)； 而使用大写D表示星期几的3个字符缩写(Tue)。 echo date('w'); 今天星期：2 echo date('W'); 本周是全年中的第 06 周 小写w表示星期几，数字形式表示 大写W表示一年中的星期数 echo date('t'); 本月是 28 天 echo date('z'); 今天是今年的第 36 天 小写t表示当前月份又多少天 小写z表示今天是本年中第几天 4. 其他 大写T表示服务器的时间区域设置echo date('T'); UTC 大写I表示判断当前是否为夏令时，为真返回1，否则为0echo date('I'); 大写U表示从1970年1月1日到现在的总秒数，就是Unix时间纪元的UNIX时间戳。echo date('U'); 1170769424 小写c表示ISO8601日期，日期格式为YYYY-MM-DD，用字母T来间隔日期和时间，时间格式为HH:MM:SS，时区使用格林威治标准时间(GMT)的偏差来表示。echo date('c'); 2007-02-06T14:24:43+00:00 小写r表示RFC822日期。echo date('r'); Tue, 06 Feb 2007 14:25:52 +0000 {callout color="#f0ad4e"} 到此这篇关于 PHP 日期时间函数 date() 详解的文章就介绍到这了,希望大家以后多多支持 艾霂's Blog ！ {/callout} https://ailmu.cn/technique/6.html 2024-11-10T09:06:00+08:00 Joe 是 Typecho 博客中一款开源免费且非常精美的主题，但是这款主题很早就停止维护了，有些功能作者并没有开发，并且在 Typecho 更新到 1.2.1 版本后还出现了一些小问题🤢 Joe 主题的知名度很高，所以在原作者停止维护后，很多大佬都发布过自己的魔改版本，魔改后的主题虽然修复了 BUG 而且新增了很多功能，但是大佬都是基于自己的想法魔改的，我个人觉得有些过于花里胡哨！于是决定自己动手修复一下下，本次主要修复在 Typecho 1.2.1 版本中搜索关键字不回显的问题。 下图既是问题所在！ 据猜测只有在使用 Typecho 1.2.1 以上版本才会出现这个问题，这并不是 BUG 只是主题并没有适配新版，看了一下源码后发现只是简单的取值问题而已，改一串代码基本搞定。 找到主题文件夹所在位置，编辑 /archive.php 文件，大概在25行左右可以看到他取值为 _keywords ，把这个值改为 archiveTitle 即可，这样搜索关键字不回显的问题，就解决咯！ {callout color="#f0ad4e"} 本篇文章算是小小的笔记吧，有用得到的朋友自行取走。 {/callout} https://ailmu.cn/technique/5.html 2024-11-10T07:39:00+08:00 最近一直在折腾我的博客，本站一直以来用的 WordPress 但感觉有一点臃肿，索性更换为 Typecho 并采用 Joe 主题，因为自己比较追求完美吗🤦‍♂️感觉评论框空荡荡的，今天就为评论框加个背景图！ 效果展示 食用方法 以 Joe 主题为例，将下面 css 代码添加到 Joe/assets/css/joe.global.min.css 文件内即可。 css代码 .joe_comment__respond-form .body 就是评论框主题，可以直接在前端按F12查看自己主题的是哪个组！ .joe_comment__respond-form .body{padding:15px;background:url(https://www.iarc.top/usr/uploads/2024/03/1257364055.png);background-position:right;background-repeat:no-repeat;resize:none;}.joe_comment__respond-form .body:hover{background-position-x:4000px;transition:ease-in-out 2s;} 背景图片 背景图片，最好自己保存下来，以防失效。 {callout color="#f0ad4e"} 有需要的小伙伴自行取走，方法很简单适用范围很广就看大家的动手能力了。这篇文章就相当于一个记录了，以防不时之需！ {/callout}