BUG | 白嫖日本知名 WebDav 云盘 35G-45GB 容量 国内无需代理可直接用 国内主流云盘都不支持WebDav挂载，像阿里云盘、百度云盘这些产品虽然我们也可以通过部署Alist之类的开源程序来实现挂载，但这只能算是一种第三方的适配，官方随时可以封掉。国内唯一官方支持WebDav的坚果云，42GB容量一年售价199元......所以再看看标题你还觉得45GB少吗？WebDav除了可以让我们像挂载本地外置存储一样将云盘挂载到本地，还能让许多支持WebDav的应用通过它将数据同步到我们自己的网络存储位置当中，这才是WebDav最大的优势。下面是前几年坚果云整理的部分支持WebDav同步的应用，现在早已不止这些。{message type="warning" content="本文涉及到利用BUG获取云盘容量，BUG随时可能被修复或者容量被收回，即使收回我们也应该有35G或25G容量。当然，也有可能被封号。"/}第一步打开主页打开 infini Cloud https://infini-cloud.net/en/第二步注册点击 Create Account 输入个人信息注册，注册时自己设置的UserID需要记住，待会会用到。邮箱建议Gmail或Outlook，用Outlook的话注册验证邮件可能会被归类到垃圾邮件里。第三步激活提交注册信息之后打开邮箱找到验证邮件，点击验证链接即可验证，验证后进入 My Page 。第四步领取5G下拉 My Page 在下面截图中位置输入果闻邀请码 R97LN 你可以获得5GB永久容量，同时我也会获得2G有效期1年的容量。可能又有人要说了 “好家伙 原来是想拉我们人头！” 有这种想法的哥们建议寻思寻思自己稀不稀罕这种带有效期的容量......反正我是拿来也不会用的，提供邀请码纯粹方便各位撸这5GB永久容量。第五步领取20G至此我们已经获得了25G容量，那么最后的骚操作来了。事情是这样的，现在 infiniCloud 给新注册用户20GB免费容量，这就会导致对之前那些只有10GB免费容量的 TeraCloud 老用户不公平。于是 infiniCloud 给老用户群发邮件，老用户打开邮件内的链接可以再领10GB容量，infiniCloud 本意是想让新老用户都有20GB的初始容量。但 infiniCloud 提供的这个领取链接并没有做鉴权验证，这就导致我们自带20GB容量的新用户也能领。并且 infiniCloud 提供的领取链接有英文版和日文版，两个链接都可以分别各自领10GB容量，别人都是叠Buff，infiniCloud 这是搁着叠Bug呢？{message type="success" content="英文版10G容量领取入口"/}{alert type="success"}https://infini-cloud.net/ja/modules/bonus/code=202304_10GB_en/userid=此处输入你刚才注册时设置的UserID{/alert}{message type="success" content="日文版10G容量领取入口"/}隐藏内容，请前往内页查看详情务必修改尾部参数再访问第六步 打开webdav容量都领取之后我们还需要开启一下WebDav访问，回到 My Page 找到 App Connection 设置项，勾选开启Turn on Apps Connection。{message type="info" content="注意：开启 Apps Connection 后需要等10分钟左右才能进行WebDav连接，并不是你在网页端开启后立刻就能连接上。"/}Windows文件管理器的网络和Mac的访达都只有基本的挂载功能，要实现一些高级功能可以使用MountainDuck、CloudMounter、Raidrive之类的第三方挂载客户端。infiniCloud 目前在国内不需要科学就能用，实测不用任何代理，上传数据速率能跑满我的上传带宽，我推测他们应该是上传和下载都对等的200Mbps。

Typecho-1.2.0 版本出现严重漏洞 可植入XSS木马 事情经过4月2号被人XSS评论植入木马，改了首页后台。4月4日才发现，直接一键还原，查了下原来是typecho1.2.0有BUG，大家尽快更新到1.2.1版本。Typecho-1.2.1 官方下载地址： https://github.com/typecho/typecho/releases/tag/v1.2.1-rc木马结构分析官方文档：https://github.com/typecho/typecho/issues/1545对方可以在你评论区 评论内容+输入网站选项时植入XSS木马，并在404.php写入木马从而获取你的cookie值，对方直接登入你的后台解决办法把Typecho升级到1.2.1版本（官方已经解决了这个问题）如果你已经被植入过XSS了，那你应该检查一下你的数据库了如果是宝塔用户，那么宝塔有一个数据库每天都自动备份的功能，如果你开了，那就删除当天被植入过的数据库，恢复前一天的数据库，对方登入你的后台后，点击外观→编辑当前外观，对方也是可以修改你主题文件源代码的，因为你也不知道对方到底改了哪里，所以最好是导入新的主题文件使用宝塔安装日志清理工具，扫描 全选 清理所有垃圾，这样一套操作下来基本无后顾之忧了

全网首发-小米AX6000路由器解锁ssh并固化ssh+2.5G有线mesh组网+公网访问路由后台+红米AX6/小米AX6/AX3600/AX6000/AX9000全系列适用 全网首发-小米AX6000路由器解锁ssh并固化ssh+2.5G有线mesh组网+公网访问路由后台+红米AX6/小米AX6/AX3600/AX6000/AX9000全系列适用

5分钟搞定2022群辉NAS同步阿里云网盘webdav 话不多说直接上教程第一步第二步第三步[wm_collapse title="阅读全文"]第四步其中，REFRESH_TOKEN 环境变量为你的阿里云盘 refresh_token，WEBDAV_AUTH_USER 和 WEBDAV_AUTH_PASSWORD 为连接 WebDAV 服务的用户名和密码。{collapse}{collapse-item label="自动获取refresh_token"}自动获取: 登录阿里云盘后，控制台粘贴JSON.parse(localStorage.token).refresh_token{/collapse-item}{collapse-item label="手动获取refresh_token"}登录阿里云盘后，可以在开发者工具 -> Application -> Local Storage 中的 token 字段中找到。注意：不是复制整段 JSON 值，而是 JSON 里 refresh_token 字段的值，如下图所示红色部分：{/collapse-item}{collapse-item label="使用移动端App获取token"}需要在其前增加 app: 前缀,如 refresh token 为 abcd 则填入 app:abcd{/collapse-item}{/collapse}第五步第六步第七步自定义目录：/docker/xxxxx固定死：/etc/aliyundrive-webdav/第八步第九步第十步第十一步Docker命令一键部署隐藏内容，请前往内页查看详情[/wm_collapse]

Typecho博客生成HTML静态网页 提高网站打开速度 博客生成HTML静态网页 提高网站打开速度

NAS一键批量清除重复文件 解题思路一、利用「存储空间分析器」 这是个群晖的工具，它可以帮我们找到所有重复的文件，注意，这里找的不光是文件名重复，而是文件内容的重复。找出来之后，得到一份「csv」文件。二、运用「一键清理重复文件工具」 这种方法唯一的缺点就是：一次只能分析 5000 个文件。如果重复的文件比较多，那就需要多弄几次。取得重复文件分析报告1、在「套件中心」中安装打开「存储空间分析器」。2、新建报告配置文件，名字随便，最大报告数5000。3、选择报告项目中只选择「潜在的重复文件」。[wm_collapse title="阅读全文"]4、高级设置里，勾选「忽略文件名」和「忽略修改时间」，然后点完成。5、任务名称-右键选择「立即生成报告」。6、等「成功」之后，选择「查看历史报告」。这就是分析一次重复文件的步骤，实测第一次比较慢，后面越来越快，最后一分钟左右就可以搞定。上传文件1、下载历史报告2、上传csv报告文件&「NAS 重复文件脚本」把解压之后的 csv 文件上传到 NAS，这里推荐用 File Station 的方式，注意 csv 文件名一定要改成「duplicate_file.csv」。3、复制脚本路径在脚本文件repeat_file_remove.py右键点一下属性，复制下这个路径留着用。/volume1/docker/临时中转/repeat_file_remove.py跑脚本1、远程连接 ssh 到群晖2、root模式sudo -i3、进入脚本所在目录cd /volume1/docker/临时中转/（你路径中除了repeat_file_remove.py的部分）4、运行脚本python3 repeat_file_remove.py接着 按 Y，回车 ，开始删除。接着它会飞快的刷屏，跑完之后，就删除完了。5、你可以在存储空间分析器里，点小箭头，查看「分析此报告内容」就能看到同一份文件只留了一份，其他的都被删除了。6、重复接着重复生成csv报告到最后一步，就可以一直删除全部重复文件了。实际操作只需 生成报告，上传，跑脚本 ，很快的。脚本下载

Typecho开启CDN加速-主题静态文件全站加速 Typecho开启全站CDN加速,主题静态文件全站加速

ShortCode自定义简码预览 一、错误框

青龙面板必装依赖及青龙各种问题解决 一、服务器一键安装1、一键安装所有依赖进入青龙面板docker exec -it 青龙名称 bash复制下面命令执行，等待执行完毕即可！注意你的青龙目录这里的目录为qlpackage_name="canvas png-js date-fns axios crypto-js ts-md5 tslib @types/node dotenv typescript fs require tslib" for i in $package_name; do case $i in canvas) cd /ql/scripts npm ls $i ;; *) npm ls $i -g ;; esac done二、手动安装(在面板里安装的依赖-个人推荐)NodeJs下crypto-js prettytable dotenv jsdom date-fns tough-cookie tslib ws@7.4.3 ts-md5 jsdom -g jieba fs ds form-data json5 global-agent png-js @types/node require typescript js-base64 axios momentPython3下requests canvas ping3 jiebaLinux下bizCode bizMsg lxml libc-dev python3-dev gcc三、部分依赖问题解决方法1.一般出现这种错误：(缺依赖){message type="error" content="Error: Cannot find module ‘xx’"/}{message type="success" content="解决方法：docker exec -it 容器名 pnpm install xx"/}2.一般出现这种错误：(缺文件){message type="error" content="Error: Cannot find module ‘./xx’"/}{message type="success" content="解决方法：一般是拉库命令不完整，请检查或复制完整的拉库命令重新拉库。"/}3.一般出现这种错误：(缺py依赖){message type="error" content="ModuleNotFoundError: No module named ‘xxx’.py"/}{message type="success" content="解决方法：docker exec -it 容器名 pip3 install xxx"/}4.遇到这种问题：(脚本问题){message type="error" content="TypeError: Cannot read property ‘xxxx’ of undefined"/}{message type="warning" content="这种脚本问题、IP问题、服务器网络、京东接口修改或者账号活动被限制等！导致的脚本无法正常运行。解决方法:此类问题较为复杂根据实际情况解决吧。最好搞动态IP。"/}

JOE主题未来展望-持续更新 一、网站维护 {x}{collapse}{collapse-item label="版本一" close}1.在function里加上选项代码//网站维护 $JDefend = new Typecho_Widget_Helper_Form_Element_Select( 'JDefend', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否开启网站维护', '介绍：开启后，网站所有页面将会显示维护界面，不可访问。' ); $JDefend->setAttribute('class', 'joe_content joe_nobb'); $form->addInput($JDefend->multiMode());2.在zhinianblog的版本include.php末尾添加<!--网站维护开始--> <?php if ($this->options->JDefend === 'on') : ?> <!DOCTYPE html> <html lang="en" style="height: 100%;"> <head> </head> <body style="height: 100%; display: flex; align-items: center; justify-content: center;"> <div class="container"> <div class="j-defend"> <h1 style="text-align:center;font-family:&quot;text-indent:2em;"> <strong><span style="color:#FF6600;"><span style="background-color:#FF9900;color:#FFFFFF;"> </span><span style="background-color:#FF9900;color:#FFFFFF;">通 知 </span></span></strong> </h1> <h2 style="font-family:&quot;text-indent:2em;"> <strong>尊敬的访客:</strong> </h2> <blockquote> <h2 style="font-family:&quot;"> <strong>您好，本博客正在更新迭代中，暂时无法访问！每次的更新都为您带来更好的体验，敬请期待！</strong> </h2> </blockquote> <h2 style="text-align:right;font-family:&quot;text-indent:2em;"> <strong>感谢您的支持！ </strong><strong> </strong> </h2> </div> </div> </div> </body> </html> <?php exit; ?> <?php endif; ?> <!--网站维护结束-->{/collapse-item}{/collapse}{collapse}{collapse-item label="版本二" close}1.添加后台开关在主题目录下的 functions.php 里添加以下代码（因为我引入了自定义配置文件，所以我是放在 public/custom.php 文件里的）代码：//网站维护 $Maintain = new Typecho_Widget_Helper_Form_Element_Select( 'Maintain', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'off', '是否开启全站维护功能', '介绍：开启后，全站进入维护状态' ); $Maintain->setAttribute('class', 'joe_content joe_nobb'); $form->addInput($Maintain->multiMode());2.添加全局跳转因为我一般更新都是整站屏蔽的，所以我这里是添加的全局跳转，直接在public/header.php顶部添加以下代码如果你只想某些页面跳转，比如只想跳转首页，你可以在index.php添加下面的代码<!-- 网站维护跳转 --> <?php if(Helper::options()->Maintain === 'on') { header("Location: Maintain.html"); exit; } ?>3.上传维护页面下载下面的文件，上传到Typecho主程序的根目录记得把文件名改为Maintain.html（区分大小写，注意：不是 主题 根目录）点我下载 转自：fuuuy.cn/archives/346.html{/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}二、右键屏蔽{x}{collapse}{collapse-item label="参考代码" close}1.在function里加上选项代码//右键屏蔽 $JContextMenuStatus = new Typecho_Widget_Helper_Form_Element_Select( 'JContextMenuStatus', array('off' => '关闭（默认）', 'on' => '开启'), 'on', '是否开启禁用鼠标右键、禁止复制（仅限PC）', '介绍：开启后则鼠标右键、复制不可用' ); $JContextMenuStatus->setAttribute('class', 'joe_content joe_nobb'); $form->addInput($JContextMenuStatus->multiMode()); 2.在zhinianblog的版本include.php末尾添加<!--禁止右键、复制--> <?php if ($this->options->JContextMenuStatus === 'on') : ?> <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> <?php endif; ?>{/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}三、是否开启评论画板{x}{collapse}{collapse-item label="参考代码" close} 1.在function里加上选项代码 //评论画板 $huaban = new Typecho_Widget_Helper_Form_Element_Select( 'huaban', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启画板评论', '介绍：开启后，文章评论部分出现画板。' ); $huaban->setAttribute('class', 'joe_content joe_nobb'); $form->addInput($huaban->multiMode());2.修改comment.php修改<?php if ($this->options->huaban === 'on') : ?><button class="item" data-type="draw">画图模式</button><?php endif; ?>{/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}四、Typecho后台撰写文章时插入标签{collapse}{collapse-item label="参考" close}把以下代码复制到 ./admin/write-post.php 指定位置就行了{tabs}{tabs-pane label="代码"} <!-- 标签选择 --> <section class="typecho-post-option"> <label for="token-input-tags" class="typecho-label"><?php _e('标签'); ?></label> <p> <input id="tags" name="tags" type="text" value="<?php $post->tags(',', false); ?>" class="w-100 text" /> <style>.tagshelper a{cursor: pointer; padding: 0px 6px; margin: 2px 0;display: inline-block;border-radius: 2px;text-decoration: none;}.tagshelper a:hover{background: #ccc;color: #fff;} </style> <script> $(document).ready(function(){ $('#tags').after('<div style="margin-top: 35px;" class="tagshelper">标签选择：<ul style="list-style: none;border: 1px solid #D9D9D6;padding: 6px 12px; max-height: 240px;overflow: auto;background-color: #FFF;border-radius: 2px;"><?php $stack = Typecho_Widget::widget('Widget_Metas_Tag_Cloud')->stack; $i = 0; while (isset($stack[$i])) { echo "<a id=\"$i\" onclick=\"$(\'#tags\').tokenInput(\'add\', {id: \'".$stack[$i]['name']."\', tags: \'".$stack[$i]['name']."\'});\">",$stack[$i]['name'], "</a>"; $i++; if (isset($stack[$i])) echo " ";} ?></ul></div>'); }); </script> </p> </section>{/tabs-pane}{tabs-pane label="位置"}{/tabs-pane}{/tabs}{/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}五、文章页添加目录和双击自动下滑阅读{collapse}{collapse-item label="参考" close} https://blog.csdn.net/weixin_43872379/article/details/124154545 https://vircloud.net/default/change-theme.html/comment-page-34 {/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}六、给文章添加阅读模式{collapse}{collapse-item label="参考" close} https://www.fuuuy.cn/archives/859.html1.添加后台开关在Joe/functions.php 里添加（也可以在 Joe/public/custom.php 里添加，前提是你创建并引用了这个文件）/ 是否启用阅读模式 $ReadBook = new Typecho_Widget_Helper_Form_Element_Select( 'ReadBook', array( 'off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否启用阅读模式', '介绍：开启后，文章页可以进入阅读模式' ); $ReadBook->setAttribute('class', 'joe_content joe_custom'); //没有joe_custom就改成joe_other $form->addInput($ReadBook->multiMode());2.添加开关按钮在 Joe/public/footer.php 的 <div class="joe_action"> 内部添加以下代码<!-- 阅读模式 --> <?php if ($this->options->ReadBook === 'on' && $this->is('post')) : ?> <!-- 检测是否为文章页 --> <div class="joe_action_item read_book" title="阅读模式"> <svg t="1651294208728" class="icon-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" fill="var(--minor)" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" fill="var(--minor)" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> <svg t="1651294208728" class="icon-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> </div> <?php endif; ?>3.添加JS首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js在 Joe/assets/js/joe.post_page.min.js 最后一个 }); 前加入以下代码当然你也可以加在Joe/assets/js/joe.post_page.js里再使用minify进行压缩$(".joe_action div").hasClass("read_book")&&($(".joe_container div").hasClass("joe_post")&&($(".joe_action_item.read_book").addClass("active"),$(".joe_action_item.read_book .icon-1").addClass("active")),$(".joe_action_item.read_book").on("click",function(){$(".joe_action_item.read_book svg").hasClass("icon-1 active")?($(".joe_header").css("display","none"),$(".HeaderImg").css("display","none"),$(".joe_aside").css("display","none"),$(".joe_detail").css("backgroundColor","#bfa"),$(".joe_detail__related").css("display","none"),$(".joe_comment").css("display","none"),$(".joe_footer").css("display","none"),$(".joe-stretch").css("display","none"),$(".joe_detail__article").css("font-size","20px")):($(".joe_header").removeAttr("style"),$(".HeaderImg").removeAttr("style"),$(".joe_aside").removeAttr("style"),$(".joe_detail").removeAttr("style"),$(".joe_detail__related").removeAttr("style"),$(".joe_comment").removeAttr("style"),$(".joe_footer").removeAttr("style"),$(".joe-stretch").removeAttr("style"),$(".joe-stretch").removeAttr("style"),$(".joe_detail__article").removeAttr("style")),$(".joe_action_item.read_book .icon-1").toggleClass("active"),$(".joe_action_item.read_book .icon-2").toggleClass("active")}))4.添加按钮css在 Joe/assets/css/joe.post.min.css 里加入以下代码.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}{/collapse-item}{/collapse}七、文章添加语音朗诵功能{collapse}{collapse-item label="参考" close}参考 https://laolion.com/archives/2536.html https://vircloud.net/default/change-theme.html/comment-page-34 {/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}八、评论添加显示IP归属地 {x}{collapse}{collapse-item label="参考" close}nothing{/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}九、copyright优化{collapse}{collapse-item label="参考" close}效果图：修改copyright.php<span>版权属于：</span>本文由—→<span class="text"><?php $this->author(); ?></span>←—发布，转载请标明出处！！！ …… <span class="custom-copyright-title">文章转载：</span> <span>作品采用：</span><span class="text">《<a class="link" href="//creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a>》许可协议授权。</span>{/collapse-item}{/collapse}{dotted startColor="#eeff00" endColor="#1989fa"/}十、网站添加大红灯笼{collapse}{collapse-item label="参考" close}参考① JOE主题魔改版自带后台设置：地址 https://laolion.com/archives/2591.html 参考② https://laolion.com/archives/2196.html<head> <style> .deng-box { position: fixed; top: -40px; right: -20px; z-index: 999; pointer-events:none; } .deng-box1 { position: fixed; top: -30px; right: 30px; z-index: 999; pointer-events:none; } .deng-box2 { position: fixed; top: -30px; left: 30px; z-index: 999; pointer-events:none; } .deng-box3 { position: fixed; top: -30px; left: -20px; z-index: 999; pointer-events:none; } .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng-box1 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, 0.1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03; } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: #ffa500; border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng-t { font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: bold; line-height: 85px; text-align: center; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent !important; } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } } @media screen and (max-width: 700px) { .deng-box { right: 55px; zoom:0.45 } .deng-box1 { right: 190px; zoom:0.45 } .deng-box2 { left: 190px; zoom:0.45 } .deng-box3 { left: 55px; zoom:0.45 } } </style> <body> <!-- 灯笼1 --> <div class="deng-box"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">庆</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <!-- 灯笼2 --> <div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">国</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <!-- 灯笼3 --> <div class="deng-box2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">度</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> <!-- 灯笼4 --> <div class="deng-box3"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">欢</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div> </body>{/collapse-item}{/collapse}十一、BUG修复置顶一篇文章后，再修改那篇文章，首页会显示两篇一样的文章十二、JOE后台外观编辑：保存密钥、授权码十三、添加CDN功能十四、鼠标滑动有BUG，在首页、文章页等滑动不顺畅十五、微信吸粉{collapse}{collapse-item label="参考" close}吸粉参考 {/collapse-item}{/collapse}十六、首页文章分页采取pjax动态响应十七、添加侧边导读目录树{collapse}{collapse-item label="参考" close}1.在全局设置 - 自定义增加<head></head>里添加<!-- 侧边文章目录导读 --> <style type="text/css"> .outline-outside-modal-opened { z-index: 10000 !important; left: 0; width: 300px !important; } </style> <link rel="stylesheet" href="https://cdn.nobb.cc/jsdelivr/gh/yaohaixiao/autocjs/dist/css/autoc.min.css"> 2.在全局设置 - 自定义<body></body>末尾位置内容里添加<!-- 侧边文章目录导读 --> <script src="https://cdn.nobb.cc/jsdelivr/gh/yaohaixiao/autocjs/dist/autoc.min.js"></script> <script> // 文章导航 if ( $(".joe_detail__article").length > 0 ){ // 创建 Outline 实例 let navigation = new AutocJs({ // 文章正文 DOM 节点的 ID 选择器 article: '.joe_detail__article', // 要收集的标题选择器 selector: 'h1,h2,h3,h4,h5,h6', // 侧边栏导航的标题 title: '文章导读', // 文章导读导航的位置 // outside - 以侧边栏菜单形式显示（默认值） // inside - 在文章正文一开始的地方显示 position: 'outside', // 标题图标链接的 URL 地址 // （默认）没有设置定制，点击链接页面滚动到标题位置 // 设置了链接地址，则不会滚动定位 anchorURL: '', // 链接的显示位置 // front - 在标题最前面（默认值） // back - 在标题后面 anchorAt: 'back', // 是否生成文章导读导航 isGenerateOutline: true, // 是否在文章导读导航中显示段落章节编号 isGenerateOutlineChapterCode: false, // 是否在正文的文章标题中显示段落章节编号 isGenerateHeadingChapterCode: false, // 是否在正文的文章标题中创建锚点 isGenerateHeadingAnchor: false }); } </script>{/collapse-item}{/collapse}十八、侧边栏开关{collapse}{collapse-item label="参考" close}1.添加后台开关在 Joe/functions.php 里添加一下代码（当然，如果你看过我其他教程，引入了 Joe/public/custom.php这个文件，你也可以直接加在这个里面 ）// 伸缩侧边栏开关 $AsideStretch = new Typecho_Widget_Helper_Form_Element_Select( 'AsideStretch', array( 'off' => '关闭（默认）', 'on' => '开启', ), 'on', '是否启用伸缩侧边栏开关功能', '介绍：开启后，页面出现可伸缩侧边栏的模块' ); $AsideStretch->setAttribute('class', 'joe_content joe_change'); //如未生效，需将joe_change换成joe_other $form->addInput($AsideStretch->multiMode());2.添加按钮将以下代码加入 Joe/post.php 中<!-- 伸缩侧边栏 --> <?php if ($this->options->AsideStretch === 'on') : ?> <div class="joe-stretch"> <div class="contain"> <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M1024 894.976c0 71.68-51.2 129.024-114.688 129.024H116.736c-63.488 0-114.688-57.344-114.688-129.024V129.024C0 57.344 51.2 0 116.736 0h790.528c63.488 0 114.688 57.344 114.688 129.024v765.952zM987.136 155.648c0-65.536-47.104-118.784-106.496-118.784H145.408c-59.392 0-108.544 53.248-108.544 118.784v712.704c0 65.536 47.104 118.784 106.496 118.784h735.232c59.392 0 106.496-53.248 106.496-118.784V155.648z m0 0" p-id="17709"></path> <path d="M923.648 288.768c0 32.768-24.576 57.344-55.296 57.344H165.888c-30.72 0-55.296-26.624-55.296-57.344V172.032c0-32.768 24.576-57.344 55.296-57.344h702.464c30.72 0 55.296 26.624 55.296 57.344v116.736z m0 0M638.976 851.968a57.344 57.344 0 0 1-57.344 57.344H169.984a57.344 57.344 0 0 1-57.344-57.344V475.136a57.344 57.344 0 0 1 57.344-57.344h411.648a57.344 57.344 0 0 1 57.344 57.344v376.832z m0 0M931.84 851.968a57.344 57.344 0 0 1-57.344 57.344h-112.64a57.344 57.344 0 0 1-57.344-57.344V475.136a57.344 57.344 0 0 1 57.344-57.344h112.64a57.344 57.344 0 0 1 57.344 57.344v376.832z m0 0" p-id="17710"></path> </svg> </div> </div> <?php endif; ?>3.添加JS和CSS①添加JS代码在 Joe/assets/js/joe.post_page.min.js 最后一个括号前添加以下代码（当然你也可以添加在 Joe/assets/js/joe.post_page.js ，然后用minify插件压缩后替换就行了）// 伸缩侧栏 { if ($(".joe_post div").hasClass("joe-stretch")) { $(".joe-stretch .contain").css("top", $(".joe_header").height() + 40); $(".joe-stretch").on("click", function () { $(".joe_aside").toggleClass("inactive"); }); } }②添加css代码在 Joe/assets/css/joe.post.min.css 内添加以下代码.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}{/collapse-item}{/collapse}