技术教程
(共63篇)
搜索到
63
篇与
技术教程
的结果
-
【笔记】反向代理的坑 在本地搭建的兰空图床，使用内网穿透后，可以使用ip+端口正常访问，但是存在https和http混用，导致网页端显示异常且报错，所以请教了AI模型，给出了反代配置如下 #PROXY-START/ location ^~ / { proxy_pass http://81.68.192.192:9090; 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; # 新增 proxy_set_header X-Forwarded-Host $host; # 新增 proxy_set_header X-Forwarded-Port 443; # 新增 proxy_set_header X-Forwarded-Scheme https; # 新增 proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_http_version 1.1; # proxy_hide_header Upgrade; # 关键：修复混合内容 proxy_set_header Accept-Encoding ""; # 禁用压缩以便替换 sub_filter_once off; sub_filter_types text/html text/css application/javascript application/json; sub_filter 'http://pic.fuuuy.cn' 'https://pic.fuuuy.cn'; sub_filter 'http://$host' 'https://$host'; sub_filter 'href="http://' 'href="https://'; sub_filter 'src="http://' 'src="https://'; sub_filter 'action="http://' 'action="https://'; sub_filter 'url("http://' 'url("https://'; sub_filter "url('http://" "url('https://"; sub_filter '\"http://' '\"https://'; sub_filter "'http://" "'https://"; sub_filter 'https://https://' 'https://'; add_header X-Cache $upstream_cache_status; #Set Nginx Cache set $static_filelr9SU9OZ 0; if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" ) { set $static_filelr9SU9OZ 1; expires 1m; } if ( $static_filelr9SU9OZ = 0 ) { add_header Cache-Control no-cache; } } #PROXY-END/
-
【原创】【教程】群晖搭建typecho并开启地址重写功能 一、搭建typecho程序搭建教程先按下不表二、开启伪静态功能1、Apache 环境开启伪静态在网站根目录下的.htaccess文件中添加代码，如没有该文件，则先创建：<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1] </IfModule>2、Nginx 环境开启伪静态群晖的Nginx配置文件在 /etc/nginx/sites-enabled 文件夹里面，但是具体文件名为乱码显示可以直接ssh获取文件夹列表，再一个一个打开找到后修改亦可以使用我之前的教程获取root权限后使用WinSCP打开后修改在相应的文件里 server 内部添加一下代码#地址重写 if (-f $request_filename/index.html){ rewrite (.*) $1/index.html break; } if (-f $request_filename/index.php){ rewrite (.*) $1/index.php; } if (!-f $request_filename){ rewrite (.*) /index.php; }保存后进入网站刷新即可三、开启地址重写直接进入 设置-永久链接，改成如下图所示可能会提示检测失败，直接勾选再保存即可
-
『笔记』『学习』Typecho常量 Typecho常量，在 config.inc.php 最后面插入一行代码就可以启动一些功能或者重新定义一些参数，在 config.inc.php 中加是全局生效的，不在 config.inc.php 中其实也可以生效，只是在你加的位置那个局部生效。debug模式平时不建议开启，遇到报错或者开发东西时最好开启，可以看到更详细的报错define('__TYPECHO_DEBUG__', true);强制https当你用https的时候typecho会自动识别的，但是因为大家的环境千差万别，会有识别错误的情况，比如你https都布置好了，但是程序依旧只会加载http的，所以该常量的作用就是强制程序使用https，解决识别错误的情况。define('__TYPECHO_SECUER__', true);公共头像地址替换Typecho用的GRAVATR的公共头像地址，GRAVATR的服务器在美国，虽然它在全世界做镜像，但是在国内依旧很慢。然后发现有国内有很多人为其做反向代理，把头像缓存到本地，来提高速度，以前大家可能会使用插件来替换Typecho的GRAVATR的默认地址，实际上不需要，我们用这个常量就可以了，比如我们替换成 https://gravatar.cat.net/avatar/ ，用法如下 用法 在config.inc.php最后面插入 define('__TYPECHO_GRAVATR_PREFIX__', 'https://gravatar.cat.net/avatar'); 这样一来typecho就会替换成 https://gravatar.cat.net/avatar/ 渠道的头像地址。【有些模板可能不支持】后台路径自定义后台路径字定义，用于修改程序后台地址，提高安全性。 typecho默认后台地址是admin，如果我们想改成typecho-admin，那么首先登陆服务器把admin文件夹名字改成typecho-admin。 然后在config.inc.php找到define('__TYPECHO_ADMIN_DIR__', '/admin/');将其中的admin改成typecho-admin即可。自定义上传附件目录可以单独定义一个不在typecho下的附件上传地址 存储到这里有什么用呢？ 在config.inc.php最后面插入define('__TYPECHO_UPLOAD_DIR__', '/www/static'); define('__TYPECHO_UPLOAD_URL__', 'https://xxxxx.upyun.com');开启动态域名如果你站绑定了多个域名，可能非后台设置的域名访问会出现跨域加载问题，可以使用他开启动态域名，这样就可以使用多个域名绑定在同一个站点了define('__TYPECHO_DYNAMIC_SITE_URL__',true);
-
-
『笔记』『教程』搭建FRP内网穿透，轻松实现外网访问群晖 前言内网穿透frp穿透教程来了，不多bb直接上教程，想了解frp具体原理和详情的请百度搜索名，这里最终演示的目的是通过frp登陆群晖。 本教程适用于一下人群：没有公网想进行外网访问nas的有公网在公网出问题增加一个外网访问保障的{alert type="success"}友情提示，如果对linux或者命令不怎么熟悉的，就完全按照我的教程做（本教程已经尽力最简化了），我这里怎么操作，你就怎么操作，先保证成功，然后在根据自身个性化设置。{/alert}一、服务端操作（一）前提条件SSH工具：FinalShell 下载地址一台具有公网ip的云服务器（二）设置服务器root密码和ssh1、 首先登陆腾讯云，修改服务器root密码（知道的话可以不修改）2、用ssh工具登陆云服务器。（三）安装frps1、因为frps官方安装需要vi编辑器和linux等命令，这里为了简便，采用github上开源的一键脚本安装frps，脚本有两个源，国外VPS用Github的源，国内的VPS建议使用Aliyun的源，要不可能很慢。Aliyun（阿里云源） #下载脚本（依次复制输入） wget https://code.aliyun.com/MvsCode/frps-onekey/raw/master/install-frps.sh -O ./install-frps.sh #设置脚本权限 chmod 700 ./install-frps.sh #运行脚本 ./install-frps.sh install2、本教程使用的是腾讯云国内服务器，使用Aliyun的源，依次输入命令，如下图。3、输入第三条命令以后回车进入配置界面，选择下载frps的下载地址，这里面我们选择【1】。下面的一些端口号及配置请根据自身选择输入，不要完全按照我的照搬，如果不明白端口的意思就按照我的输入，在教程完成之后，明白了端口的意义，在根据自身需求修改。（尤其标记重要的请一定要修改）4、输入frps的通信端口，请根据自己需求输入，我这里输入【7000】5、输入http通信端口，我这里输入【8880】（重要）6、输入https通信端口，我这里输入【8443】（重要）7、输入frp信息面板端口，我这里输入【8444】8、分别输入管理面板用户名和密码，例如用户名为admin，管理密码为admin。9、输入通信密码，我这里输入去、12345678（重要）10、设置域名，如果有就填写，没有就默认IP，这里我选择默认。11、接下来的步骤一路默认敲击回车就行 12、出现这个界面核对之前输入的信息是否正确，然后继续下一步。13、稍等片刻，会出现如下界面。14、登陆腾讯云控制台找到【防火墙设置】开放4、5、6、7步骤的端口，这里我开放【7000】【8880】【8443【8444】】端口。（多个端口请用英文输入状态下的,隔开）15、 浏览器输入域名（ip）:端口号，如果出现下面网页说明后台搭建成功，这里我输入 http://152.136.119.20:8444 用户名和密码为步骤8设置。服务器端成功部署完成，总体来说使用一键脚本部署还是非常简单的，感谢一键脚本的开发作者。群辉客户端1、登录群辉，打开file station在docker目录下新建frp文件夹，在桌面新建立一个文本文档，然后将文本文档拖动到frp目录中。2、 双击文本文档，粘贴下如下命令，请根据自己情况灵活改变配置，这里举两个例子，一个是使用http协议访问NAS，一个是使用tcp协议登录ssh，然后ctrl+s保存，将文件重命名为frpc.ini。[common] # 服务器ip server_addr = 152.136.119.20 token = 12345678 # 端口 server_port = 7000 #名字,自定义 [nas] # 类型 type = tcp # 局域网内设备ip local_ip = 192.168.31.11 # 局域网内设备端口 local_port = 5000 # 监听端口*可以修改为任意字母，等号后面的数字 remote_port = 5002 #名字,自定义 [ssh] # 类型 ssh类型为tcp type = tcp # 局域网内设备ip local_ip = 192.168.31.11 # 局域网内设备端口 local_port = 22 # 监听端口*可以修改为任意字母，等号后面的数字注意：所有监听端口都需要在服务区防火墙中开放。 3、 打开群辉docker→注册表搜索'stilleshan'选择stilleshan-frpc下载镜像,下载好以后再镜像中启动。4、 下载完成以后启动映像，容器名称默认，勾选使用高级权限执行容器，然后点击高级设置。5、 按照下面设置。 高级设置：勾选启用自动重新启动 存储空间：建立如下链接映射路径为：/frp/frpc.ini网络：勾选与docker host相同的网络端口设置、链接、环境保持默认设置不用修改6、按照第5步配置完成以后，容器成功启动，如下图。7、这时候我们在浏览器中输入（域名）服务器ip:端口号即可以成功在外网访问。 域名方式：http://152.136.119.20:5002
-
『原创』『教程』博客评论框添加随机一言 前言由于我的博客之前经常有人回复一些无意义的内容，导致很多垃圾评论所以我在想既然很多游客喜欢回复一些垃圾评论，不如我直接设置一个随机一言，让他们省去了垃圾评论的打字时间，同时又能让我的评论区少一些无意义的评论而且那些真正认真回复的人只需要一键删除即可，也不会很影响评论体验，所以就给自己的评论框添加了随机一言前段时间有小伙伴留言让我出个评论随机一言的教程，而我这边突然爆发了疫情，前些天自己又感染了，所以一直拖到现在效果展示按照惯例，先来一波效果展示本教程仅以Joe主题为例，其他主题可自行发挥能力，如有技术问题，博主可提供简单的指导教程开始一、添加后台控制在 Joe/functions.php 或者 Joe/public/custom.php（有的话） 内添加以下代码// 评论框随机语录功能 $Comment_Citation = new Typecho_Widget_Helper_Form_Element_Select( 'Comment_Citation', array('off' => '关闭（默认）', 'on' => '开启'), 'off', '是否开启评论框随机语录功能', '介绍：开启后，评论框自动随机填充随机语录' ); $Comment_Citation->setAttribute('class', 'joe_content joe_change'); // 如果后台无法展示该设置，将joe_change修改为joe_other $form->addInput($Comment_Citation->multiMode()); //评论框随机语录链接/文字 $Comment_Citation__text = new Typecho_Widget_Helper_Form_Element_Textarea( 'Comment_Citation__text', NULL, "https://api.vvhan.com/api/ian", '评论框随机语录', '介绍：用于修改评论框随机语录（可以为api地址） <br /> 格式：一行一个，可以为api地址，也可为文字，可以填写多个API地址<br /> 注意：必须填写JSON格式的API，API需要开启跨域权限才能调取，否则会调取失败！<br /> 如果为api地址可在前台按钮刷新内容，如果为文字只能刷新页面来刷新内容（建议使用api地址）<br /> 推荐API：https://api.vvhan.com/api/ian' ); $Comment_Citation__text->setAttribute('class', 'joe_content joe_change'); // 如果后台无法展示该设置，将joe_change修改为joe_other $form->addInput($Comment_Citation__text);二、添加刷新按钮（可省略）在 Joe/public/comment.php 添加以下代码，不添加则不设置刷新按钮{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}<?php if ($this->options->Comment_Citation !== "off") : ?> <div class="Comment_Citation" title="语录"> <div class='comment_box'> <i class='fa fa-fw fa-refresh' aria-hidden='true'></i> <span class="title">语录</span> </div> </div> <?php endif; ?>{/tabs-pane}{/tabs}三、添加内容获取1、添加后端获取在 Joe/core/function.php 添加以下代码{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}/* 获取评论框随机语录 */ function _getComment_Citation() { $CitationRandom = explode("\r\n", Helper::options()->Comment_Citation__text); echo $CitationRandom[array_rand($CitationRandom)]; }{/tabs-pane}{/tabs}2、添加前端获取在 Joe/public/config.php 添加以下代码{tabs}{tabs-pane label="添加位置"}{/tabs-pane}{tabs-pane label="添加代码"}CITATION: `<?php _getComment_Citation() ?>`, // 评论随机语录{/tabs-pane}{/tabs}四、添加核心代码在 Joe/assets/js/joe.global.min.js 或者 Joe/assets/js/custom.min.js（有的话） 添加以下代码隐藏内容，请前往内页查看详情五、添加刷新按钮样式（可省略）这是刷新按钮样式，如果前面没添加刷新按钮，可跳过此步骤在 Joe/assets/css/joe.global.min.css 或者 Joe/assets/css/custom.min.css（如果有）添加以下代码.joe_owo__contain { position: static; .box { position: absolute; bottom: 100%; margin-bottom: 6px; left: 0px; padding-top: 5px; border: 1px solid rgba(0, 0, 0, 0.15); border-color: transparent; box-shadow: 0 0 10px 8px rgb(116 116 116 / 8%); } } .comment_box { cursor: pointer; text-align: center; color: var(--routine); height: 26px; line-height: 26px; background: var(--background); opacity: 0.85; border-radius: 13px; width: 70px; margin-left: 5px; &:hover { background: var(--theme); color: #fff; }}结语教程稍有点复杂，但其实是沿用侧栏随机一言的方法，所以如果你能看懂核心js的话，可以仅修改 第四步 中ajax的 url 来实现，那样会简单很多很多
-
『原创』『教程』给兰空图床添加一个后台获取Tonken功能 前言因为一直用的GitHub+jsdelivr的免费图床，自从去年jsdelivr挂了之后，博客的图片就无法加载了，所以只好自己搭建图床经过一段时间的折腾，在自己组装的all in one上搭建了兰空图床，利用兰空pro插件可以实现粘贴上传到图床并直接插入文章但是兰空图床免费版的token需要使用第三方请求来获取，非常的不方便所以我就自己在后台程序中加了一个post请求，使用异步请求来获取token实现效果实现教程添加代码直接在 /resources/views/common/api.blade.php 文件里合适的位置添加以下代码隐藏内容，请前往内页查看详情添加位置刷新后台建议使用强制刷新Ctrl+F5结语其实实现原理很简单，就是使用jQuery的Ajax来获取的之前看到 冷寂 搭建了一个专门用来获取兰空图床token的程序，我觉得麻烦了，所以才有了这个简便的想法
-
-
『笔记』『教程』群晖DSM7.0.1开启ssh及sftp及root用户登录，访问群辉根目录 一、开启SSH：打开控制面板，打开终端机和SNMP，选择启动SSH功能，端口号填写22我这里修改了默认端口二、开启SFTP：打开控制面板，选择文件服务，选择FTP，选择启动SFTP，端口号22三、开启sftp的root登录通过有管理员权限的用户SSH登录通过输入 sudo -i 或者 sudo su - ,然后输入当前用户密码, 进入 root sudo -i sudo su -这里需要使Vi编辑器编辑sshd_config 文件。隐藏内容，请前往内页查看详情{callout color="#ff0000"} 注意：这里需要重启ssh服务，可以通过关闭再开启群晖的SSH选项来完成 {/callout}四、修改root默认密码输入如下命令可以修改root 用户的密码synouser --setpw root 123456 #123456为密码五、使用WinSCP登录打开winscp添加sftp信息，保存后登录直接登录不出意外就能进入群辉的根目录补一张root用户登录截图可以看到我这里显示了我两个硬盘文件夹名，这就是群辉的根目录了
-
『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用） 前言我又来拔flag了，最近立了好多flag，但是最近重庆太热了，不想写文章（其实就是懒了）既然给小伙伴立了flag，还是要说到做到，不然没有小伙伴来玩了。这个功能也是xcshare定制的功能，但是我还是分享出来吧成果展示教程开始一、添加后台开关一样的，还是在 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());二、添加开关按钮在 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; ?>三、添加JS首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js在 Joe/assets/js/joe.post_page.min.js 最后一个 }); 前加入以下代码当然你也可以加在Joe/assets/js/joe.post_page.js里再使用minify进行压缩 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.js 里，再进行压缩 隐藏内容，请前往内页查看详情四、添加按钮css在 Joe/assets/css/joe.post.min.css 里加入以下代码 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.scss 里，再用scss to 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}结语其实教程很简单，就是隐藏一些组件和更换页面底色没有固定的方法，只有固定的思维，所以一定要多思考、多变通。
-
-
『原创』『教程』为Joe主题文章页添加伸缩侧边栏的小挂件 前言其实这个小挂件在Joe4.X的时候有的，只不过升级5.0之后作者将它删除了我也是移植过来的，上个月有一位小伙伴看到后非常喜欢，让我出个教程当时答应的很愉快，但是却是立了一个Flag，后半个月忙得不可开交，直到今天小伙伴又来问我，我才想起Flag还没拔 :$(发呆) 答应了的事不能再拖了，也很久没更新博客了，正好今天有空，就来写一写吧效果展示教程开始一、 添加后台开关在 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());二、添加按钮将以下代码加入 Joe/post.php 中{tabs}{tabs-pane label="添加代码"}隐藏内容，请前往内页查看详情{/tabs-pane}{tabs-pane label="添加位置"}{/tabs-pane}{/tabs}其他页面，如留言、说说等页面都是一样的添加到相应的位置就行了三、添加JS和CSS1、添加JS代码在 Joe/assets/js/joe.post_page.min.js 最后一个括号前添加以下代码（当然你也可以添加在 Joe/assets/js/joe.post_page.js ，然后用minify插件压缩后替换就行了）隐藏内容，请前往内页查看详情2、添加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}结语教程到这里就结束了，此教程不仅Joe主题可以使用，也可以用在其他主题，灵活变通一下就可以了没有固定的方法，只有固定的思维，所以一定要多思考、多变通。
