找到
9
篇与
typecho
相关的结果
-
【Typecho】给Joe主题后台添加custom自定义功能！ 大家好，今天来添加一下自定义功能！ 😂 温馨提示：站长已经通过本地环境测试custom自定义功能，功能正常可以使用，按照我的操作来一定成功！ 大纲 创建custom.php 粘贴代码到custom.php文件 引入custom.php文件 添加li标签代码 引入custom.min.css 引入custom.min.js 总结 摘要 本文主要是教各位给自己的joe主题完成一个后台的自定义设置的功能，以后你要添加带有开关的功能直接在自定义设置里面添加即可！ 图片展示 title="m8y8or85.png"图片 如图所示，今天要完成的功能就是图片中的自定义设置！下面跟着我的操作来完成。 创建custom.php 登录你的服务器面板（小皮面板、宝塔面板等）找到joe主题的usr/themes/Joe/ public 进去之后创建一个名字为custom.php文件，然后复制以下代码头进行粘贴： <?php ?> 这个php代码的头部声明吧，以后要添加的php代码全部要放在：<?php 代码放这里面 ?> 怕你们看不懂，如下图所示： title="m8y8y891.png"图片 上面的创建php和粘贴一起说了。下面就是引入custom.php文件了，注意看！！！ 引入custom.php 还是一样的，找到目录：/usr/themes/ Joe ，找到 functions.php 文件并打开，打开之后我们看到最后的位置，粘贴下面的代码： // 引入自定义设置 require_once("public/custom.php"); 放心，有演示图片的，不要着急！！！ 演示图片 title="m8y97hcy.png"图片 看到图片中的符号没？ 🔜 } 把引入代码放在它的前面即可！ 每次添加完代码都要先保存，保存后先不要急着关闭functions.php，我们继续找到这个文件的开头位置准备添加以下代码： <li class="item" data-current="joe_custom">自定义设置</li>演示图 title="m8y9cpec.png"图片 放好之后我们保存，然后我就去引入custom.css和js文件了，这个简单啊！！！ 引人custom.css&js 找到/usr/themes/Joe/assets/ css 点击创建文件，名字命名为custom.min.css,保存之后打开它，粘贴以下代码： html{--reading: #faf9de}html[data-night=night] body{--reading: #424242}html[data-night=night] body::before{filter:brightness(0.2)}html[data-night=night] body img:not(.owo_image,.shang,.user_logo),html[data-night=night] body .joe_detail__leaving-list .item,html[data-night=night] body .js_ad,html[data-night=night] body .a-js-ad,html[data-night=night] body .joe_detail__friends-item{filter:brightness(0.6)}html .joe_header__above-logo{overflow:hidden}html .joe_header__above-logo::before{content:"";position:absolute;top:-50px;left:-15px;width:250px;height:25px;background-image:linear-gradient(rgba(255, 255, 255, 0), var(--background));opacity:.8;transform:rotate(-45deg);-webkit-animation:flashlights 1s ease-in 1s infinite;animation:flashlights 1.5s ease-in 1s infinite}@-webkit-keyframes flashlights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes flashlights{0%{left:-100px;top:0}to{left:120px;top:100px}}@media(max-width: 1200px){.joe_header__above-search{display:none}.joe_header__above-searchicon{display:block}.joe_header__below-sign .joe_dropdown__link span{display:none}}.js_ad{margin-top:10px;position:relative;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);overflow:hidden;height:120px}@media(max-width: 768px){.js_ad{height:100px}}.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-top:10px;display:flex;flex-wrap:wrap;justify-content:space-around}.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:20}.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%;background:var(--background);border-radius:var(--radius-wrap);padding:10px 15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_comment__respond-form .body .text{background:var(--background);border-radius:var(--radius-inner);padding:5px}.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,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code{width:250px;padding:8px 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code p{margin:0 0 10px}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image p textarea,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code p textarea{resize:vertical}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .form-control,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code .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,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code .text-right{text-align:right}.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-image .text-right .error,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code .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,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code .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,.joe_comment__respond-form .foot .comment_box .dropdown-menu .dropdown-code .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}@media(max-width: 768px){.joe_comment__respond-form .foot .title{display:none}.joe_comment__respond-form .foot .owo .seat,.joe_comment__respond-form .foot .comment_box{width:26px}}.HeaderImg{position:relative;width:100%;height:15rem;display:flex;margin-left:auto;margin-right:auto;justify-content:center;align-items:center;flex-direction:column}.HeaderImg.minImg{width:82.5rem;height:25rem}.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:.5rem}.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 .infomation .desctitle h1{font-size:1rem}.HeaderImg .infomation .desctitle h1.post_h{font-size:1.5rem}.HeaderImg .HeaderImg_arrow{opacity:1;cursor:pointer;margin-top:1.5rem;position:absolute;left:50%;bottom:20%;width:40px;height:40px;margin-left:-20px}.HeaderImg .HeaderImg_arrow .HeaderImg_arrow__bou{transform:translateX(-50%);transition-delay:5s;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transform-origin:center bottom;-webkit-animation-name:go_down_animation;animation-name:go_down_animation;-webkit-animation-timing-function:cubic-bezier(0.28, 0.84, 0.42, 1);animation-timing-function:cubic-bezier(0.28, 0.84, 0.42, 1)}@-webkit-keyframes go_down_animation{0%{transform:scale(1, 1) translateY(0px)}10%{transform:scale(1.1, 0.9) translateY(0px)}30%{transform:scale(0.9, 1.1) translateY(-30px)}50%{transform:scale(1.05, 0.95) translateY(0px)}57%{transform:scale(1, 1) translateY(-7px)}64%{transform:scale(1, 1) translateY(0px)}100%{transform:scale(1, 1) translateY(0px)}}@keyframes go_down_animation{0%{transform:scale(1, 1) translateY(0px)}10%{transform:scale(1.1, 0.9) translateY(0px)}30%{transform:scale(0.9, 1.1) translateY(-30px)}50%{transform:scale(1.05, 0.95) translateY(0px)}57%{transform:scale(1, 1) translateY(-7px)}64%{transform:scale(1, 1) translateY(0px)}100%{transform:scale(1, 1) translateY(0px)}}.HeaderImg .HeaderImg_bottom{width:100%;position:absolute;left:0;bottom:-5px}.HeaderImg .HeaderImg_bottom .waves-svg{width:100%;height:6rem}.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}.HeaderImg.minImg{width:100%;height:15rem}.HeaderImg .infomation .title{font-size:1.2rem}.HeaderImg .infomation .desctitle h1.post_h{font-size:1rem}.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}.joe_action_item.directory{display:none;transform:scale(0)}.joe_action_item.directory.active{display:inline-flex;transform:scale(1)}.joe_action_item.directory svg{transform:scale(0);opacity:0;transition:transform .85s,opacity .85s}.joe_action_item.directory svg.active{transform:scale(1);opacity:1}.joe_action_item.directory .tree{opacity:0;width:15rem;height:20rem;overflow:auto;position:absolute;z-index:-10;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);-webkit-animation:rebox .5s forwards;animation:rebox .5s forwards;cursor:default}@-webkit-keyframes rebox{0%{transform:scale(1);opacity:1;transform:translateY(0px);right:45px;bottom:0}100%{transform:scale(0);opacity:0;width:0;height:0}}@keyframes rebox{0%{transform:scale(1);opacity:1;transform:translateY(0px);right:45px;bottom:0}100%{transform:scale(0);opacity:0;width:0;height:0}}.joe_action_item.directory .tree.active{-webkit-animation:box .5s forwards;animation:box .5s forwards}@-webkit-keyframes box{0%{transform:scale(0);opacity:0;width:0;height:0}100%{transform:scale(1);opacity:1;transform:translateY(0px);right:45px;bottom:0}}@keyframes box{0%{transform:scale(0);opacity:0;width:0;height:0}100%{transform:scale(1);opacity:1;transform:translateY(0px);right:45px;bottom:0}}.joe_action_item.directory .tree .title{font-size:16px;border-bottom:1px solid var(--routine);color:var(--routine);position:sticky;position:-webkit-sticky;padding:5px 10px;top:0;font-weight:bold}.joe_action_item.directory .tree .text{padding:5px 10px;overflow-y:auto;overflow-x:hidden;height:85%;white-space:nowrap;text-overflow:ellipsis}.joe_action_item.directory .tree .text a{text-decoration:none;color:var(--minor);font-size:15px;line-height:1.8;cursor:pointer}.joe_action_item.directory .tree .text a:hover{color:var(--theme);border-bottom:1px solid var(--theme)}.joe_detail__count-information .meta .item .icon{fill:var(--minor);margin:0 5px} 粘贴完成之后我们继续返回到/usr/themes/Joe/assets/ js 文件夹，在Js文件夹里面创建名字为custom.min.js的文件，记住哈是文件不是文件夹！ 表情图片 代码如下： document.addEventListener("DOMContentLoaded",function(){if($(".Reward").length){let e=document.querySelector(".RewardImg"),t=document.querySelectorAll(".RewardImg li img"),o=document.querySelectorAll(".RewardBtn li"),a=document.querySelectorAll(".RewardBtn li div");for(let n=0;n<a.length;n++){e.style.width=150*t.length+"px";let i=0;a[0].style.backgroundColor="var(--theme)",a[0].style.color="#fff",o[n].style.width=1/a.length*(150-(a.length+1))+"px",a[n].num=n,a[n].onclick=function(){i=this.num;for(let e=0;e<a.length;e++)a[e].style.backgroundColor="",a[e].style.color="";a[i].style.backgroundColor="var(--theme)",a[i].style.color="#fff",e.style.left=-150*i+"px"}}}if($(".WeChat").length){$WeChatA=$(".WeChatA");let e=$WeChatA.get(0).outerHTML;e=e.replace(/^<a/,"<div"),e=e.replace(/\/a>$/,"/div>"),$WeChatA.replaceWith(e),$(".WeChat").mouseenter(function(){$(".WeChat").append('<div class="WeChatInner"><img src="javascript:;" /></div>'),$(".WeChatInner img").attr("src",$(".WeChatA").attr("href"))}),$(".WeChat").mouseleave(function(){$(".WeChatInner").remove()})}if($(".Comment_Citation").length){function e(){let e=Joe.CITATION,t=/(https?:\/\/[^\s]+)/g;t.test(e)?$.ajax({url:e,dataType:"text",success:e=>$(".joe_comment__respond-form .body textarea").val(e)}):$(".joe_comment__respond-form .body textarea").val(e)}e(),$(".Comment_Citation").click(function(){e()})}if($(".Comment_ImageUrl").length&&($(".Comment_ImageUrl").click(function(e){e.stopPropagation(),$(".Comment_ImageUrl .dropdown-menu").slideToggle("fast",function(){$(".Comment_ImageUrl .comment_box").toggleClass("press-down")}),$(".dropdown-image .text-right span").text(""),$(".dropdown-image textarea").val("")}),$(document).click(function(){$(".Comment_ImageUrl .dropdown-menu").stop().slideUp("fast"),$(".Comment_ImageUrl .comment_box").removeClass("press-down")}),$(".Comment_ImageUrl .dropdown-menu").on("click",function(e){e&&e.stopPropagation?e.stopPropagation():window.event&&(window.event.cancelBubble=!0)}),$(".dropdown-image [type='submit']").click(function(){let e=$(this).parents(".dropdown-image").find("textarea"),t=e.val(),o=$(".joe_comment__respond-form .body textarea").val(),a=/\http[s]{0,1}:\/\/.([^<>"]*)(\.(jpg|jpeg|png|gif|webp))/;a.test(t)?(t="[img="+t+"]\n",$(".joe_comment__respond-form .body textarea").val(o+t),$(".Comment_ImageUrl .dropdown-menu").stop().slideUp("fast"),$(".Comment_ImageUrl .comment_box").toggleClass("press-down"),t=e.val("")):($(".dropdown-image .text-right span").addClass("error"),$(".dropdown-image .text-right span").text("格式错误！"))})),$(".Comment_Code").length&&($(".Comment_Code").click(function(e){e.stopPropagation(),$(".Comment_Code .dropdown-menu").slideToggle("fast",function(){$(".Comment_Code .comment_box").toggleClass("press-down")}),$(".dropdown-code .text-right span").text(""),$(".dropdown-code textarea").val("")}),$(document).click(function(){$(".Comment_Code .dropdown-menu").stop().slideUp("fast"),$(".Comment_Code .comment_box").removeClass("press-down")}),$(".Comment_Code .dropdown-menu").on("click",function(e){e&&e.stopPropagation?e.stopPropagation():window.event&&(window.event.cancelBubble=!0)}),$(".dropdown-code [type='submit']").click(function(){let e=$(this).parents(".dropdown-code").find("textarea"),t=e.val(),o=$(".joe_comment__respond-form .body textarea").val();""==t?($(".dropdown-code .text-right span").addClass("error"),$(".dropdown-code .text-right span").text("请输入内容！")):(t="[code]\n"+t+"\n[/code]\n",$(".joe_comment__respond-form .body textarea").val(o+t),$(".Comment_Code .dropdown-menu").stop().slideUp("fast"),$(".Comment_Code .comment_box").toggleClass("press-down"),t=e.val(""))})),$(".comment-list .substance img:not(img.owo_image)").each(function(){$(this).attr("data-src")?$(this).wrap($(`<span style="display: block;" data-fancybox="Joe" href="${$(this).attr("data-src")}"></span>`)):$(this).wrap($(`<span style="display: block;" data-fancybox="Joe" href="${$(this).attr("src")}"></span>`))}),$(".comment-list__item").length){let e=$(".joe_comment > ol.comment-list").children(".comment-list__item"),t='<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8885993286780110"crossorigin="anonymous"></script><ins class="adsbygoogle"style="display:block" data-ad-format="fluid"data-ad-layout-key="-g8-h+6z-cm-d" data-ad-client="ca-pub-8885993286780110" data-ad-slot="5758522083"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';for(let o=0;o<e.length;o++)o%4==3&&$("<li class='js_ad' style='margin-bottom:10px'>"+t+"</li>").insertAfter(e[o])}if($(".joe-stretch").length&&($(".joe-stretch .contain").css("top",$(".joe_header").height()+40),$(".joe-stretch").on("click",function(){$(".joe_aside").toggleClass("inactive")})),$(".read_book").length&&($(".joe_post").length&&($(".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","var(--reading)"),$(".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")})),$(".joe_post").length&&$(".joe_detail__article").find("h2,h3,h4,h5,h6").length){$("body").outerWidth()>=768?($(".joe_action_item.directory").addClass("active"),$(".joe_action_item.directory .icon-2").addClass("active"),$(".joe_action_item.directory .tree").addClass("active")):($(".joe_action_item.directory").addClass("active"),$(".joe_action_item.directory .icon-1").addClass("active"));let e=$(".joe_detail__article").find("*"),t=0;for(let o=0;o<e.length;o++)if("h"==e[o].localName.charAt(0)&&!isNaN(e[o].localName.charAt(1))){e[o].setAttribute("id","t"+t);let a=parseInt(e[o].localName.charAt(1))-2;for(;a--&&!(a<0);)$(".directory .tree .text").append(" ");$(".directory .tree .text").append("<a href='#t"+t+"'>"+$(e[o]).text()+"</a></br>"),t++}$(".joe_action_item.directory").on("click",function(){$(".joe_action_item.directory .tree").toggleClass("active"),$(".joe_action_item.directory .icon-1").toggleClass("active"),$(".joe_action_item.directory .icon-2").toggleClass("active")}),$(".directory .tree").on("click",function(e){e&&e.stopPropagation?e.stopPropagation():window.event&&(window.event.cancelBubble=!0)}),$(".directory .tree a").bind("click touch",function(){$("html,body").animate({scrollTop:$($(this).attr("href")).offset().top-65},1e3)})}$(".HeaderImg_arrow").length&&$(".HeaderImg_arrow").on("click",function(){$("body").outerWidth()>=768&&window.scrollTo({top:300,behavior:"smooth"})})});{function loveSiteTime(e,t){window.setTimeout(function(){loveSiteTime(e,t)},1e3);let o=1e3,a=60*o,n=60*a,i=24*n,r=365*i,s=new Date,l=s.getFullYear(),d=s.getMonth()+1,c=s.getDate(),m=s.getHours(),p=s.getMinutes(),_=s.getSeconds(),g=Date.UTC(2019,10,19,21,0,0);t&&(g=Date.UTC(t.split("-")[0],t.split("-")[1],t.split("-")[2],t.split("-")[3],t.split("-")[4],t.split("-")[5]));let h=Date.UTC(l,d,c,m,p,_),f=h-g,u=Math.floor(f/r),C=Math.floor(f/i-365*u),y=Math.floor((f-(365*u+C)*i)/n),v=Math.floor((f-(365*u+C)*i-y*n)/a),w=Math.floor((f-(365*u+C)*i-y*n-v*a)/o);$("#loveSiteTime4Aside")&&$("#loveSiteTime4Aside").html(e+"</br>"+u+"年"+C+"天"+y+"时"+v+"分"+w+"秒啦</br>"),$("#loveSiteTime4Header")&&$("#loveSiteTime4Header").html(e+"</br>"+u+"年"+C+"天"+y+"时"+v+"分"+w+"秒啦</br>")}}保存之后，去引入这两个文件。 在include.php中引入css\js文件文件路径：/usr/themes/Joe/ public 找到include.php文件并打开，在下面图片中的相应位置添加以下代码： title="m8y9t698.png"图片 <script src="<?php $this->options->themeUrl('assets/js/custom.min.js'); ?>"></script><link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.min.css'); ?>">总结 创建必要的文件custom.php，引入设置，即可在joe后台看见并使用自定义设置功能，以后添加开关就直接在custom.php文件中添加就行了，不用在funstions.php文件去找地方添加了。快去试试吧！
-
Typecho 开启 Debug 调试模式完整指南 Typecho 开启 Debug 调试模式完整指南 方法一：通过配置文件开启（推荐） 找到 Typecho 根目录下的 config.inc.php 文件 添加/修改以下代码： /** 开启调试模式 */ define('__TYPECHO_DEBUG__', true); 保存文件 方法二：通过数据库开启（临时调试） 登录 Typecho 后台 进入路径：控制台 → 设置 → 评论 在"评论设置"底部添加： ** 开启调试模式 */ define('__TYPECHO_DEBUG__', true); 方法三：通过插件开启 安装调试插件（如 "Typecho Debug Helper"） 在插件设置中启用调试功能 调试模式功能说明 ✅ 显示详细错误信息 ✅ 记录SQL查询语句 ✅ 显示执行时间 ✅ 显示内存使用情况 高级调试配置 如需更详细调试，可在 config.inc.php 中添加： ** 显示所有错误 */ error_reporting(E_ALL); ini_set('display_errors', '1');注意事项 ⚠️ 安全提示： 仅限开发环境使用 生产环境必须关闭 调试后及时关闭或删除调试代码 🔧 推荐做法： 配合日志文件使用 使用版本控制系统管理配置变更 考虑使用 .htaccess 限制调试模式的访问IP 提示：调试完成后，请务必将 __TYPECHO_DEBUG__ 改为 false 或删除该行代码。更多技术文章请访问 6v6-博客网
-
Typecho 极致美化：打造与众不同的博客 Typecho 极致美化：打造与众不同的博客 Typecho 是一款轻量级的博客系统，但通过一些高级美化技巧，你可以让它变得与众不同。本文将介绍如何通过 自定义 JS、自定义 CSS、自定义侧边栏模块 等功能，实现 Typecho 的极致美化。 1. 自定义 JS：动态效果与交互 通过自定义 JS，你可以为 Typecho 添加动态效果和交互功能。 示例 1：页面滚动动画 在 header.php 中添加以下代码： <script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script> <script> ScrollReveal().reveal('.post', { delay: 200, distance: '20px', origin: 'bottom', easing: 'ease-in-out', }); </script>示例 2：暗黑模式切换 在 footer.php 中添加以下代码： <button id="dark-mode-toggle">切换暗黑模式</button> <script> const toggleButton = document.getElementById('dark-mode-toggle'); toggleButton.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); }); </script>2. 自定义 CSS：独特风格与布局 通过自定义 CSS，你可以为 Typecho 设计独特的风格和布局。 示例 1：卡片式文章布局 在 style.css 中添加以下代码： .post { background: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 20px; transition: transform 0.3s ease; } .post:hover { transform: translateY(-5px); }示例 2：自定义字体与颜色 在 style.css 中添加以下代码： body { font-family: 'Source Sans Pro', sans-serif; color: #333; line-height: 1.6; } h1, h2, h3 { color: #2c3e50; }3. 自定义侧边栏模块：丰富功能与内容 通过自定义侧边栏模块，你可以为 Typecho 添加更多功能和内容。 示例 1：热门文章列表 在 sidebar.php 中添加以下代码： <div class="widget"> <h3>热门文章</h3> <ul> <?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=5')->to($posts); ?> <?php while ($posts->next()): ?> <li><a href="<?php $posts->permalink(); ?>"><?php $posts->title(); ?></a></li> <?php endwhile; ?> </ul> </div>示例 2：社交媒体链接 在 sidebar.php 中添加以下代码： <div class="widget"> <h3>关注我</h3> <ul> <li><a href="https://twitter.com/yourprofile">Twitter</a></li> <li><a href="https://github.com/yourprofile">GitHub</a></li> <li><a href="https://weibo.com/yourprofile">微博</a></li> </ul> </div>4. 插入代码功能：增强文章表现力 通过插入代码功能，你可以让文章更具表现力。 示例 1：高亮代码块 在 footer.php 中添加以下代码： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/monokai.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> <script>hljs.highlightAll();</script>示例 2：行内代码样式 在 style.css 中添加以下代码： code { background: #f4f4f4; padding: 2px 4px; border-radius: 4px; font-family: 'Courier New', monospace; }5. 插件推荐：扩展美化功能 以下是一些可以增强 Typecho 美化效果的插件： Custom Fonts：自定义字体。 CodeHighlighter：代码高亮。 Sticky Sidebar：固定侧边栏。 注意事项 兼容性：确保自定义代码在不同浏览器中正常运行。 性能优化：避免加载过多外部资源，影响网站速度。 备份：在修改代码前，备份主题文件。 了解更多技术内容，请访问：6v6博客
-
Typecho 自定义网站字体：推荐与教程 Typecho 自定义网站字体：推荐与教程 在 Typecho 网站中，自定义字体是提升网站视觉效果的重要方式之一。本文将推荐几款适合网站使用的字体，并教你如何在 Typecho 中自定义字体。 推荐字体 1. 思源黑体（Source Han Sans） 特点：开源字体，支持中英文，简洁现代。 适用场景：博客、新闻类网站。 获取方式：Google Fonts 或 GitHub。 2. 站酷字体（ZCOOL） 特点：免费商用，风格独特，适合标题。 适用场景：创意类、设计类网站。 获取方式：站酷字库。 3. 阿里巴巴普惠体（Alibaba Sans） 特点：免费商用，简洁大方，适合正文。 适用场景：企业官网、电商网站。 获取方式：阿里巴巴普惠体官网。 4. Google Fonts 字体 推荐字体： Roboto：现代感强，适合科技类网站。 Open Sans：简洁易读，适合正文。 Lato：圆润优雅，适合多种场景。 获取方式：Google Fonts。 5. 本地字体 推荐字体： 苹方（PingFang SC）：苹果系统默认字体，适合中文。 微软雅黑（Microsoft YaHei）：Windows 系统默认字体，适合中文。 获取方式：系统自带，无需额外下载。 如何在 Typecho 中自定义字体 方法 1：通过 CSS 引入 Google Fonts 打开 Typecho 主题的 header.php 文件。 在 <head> 标签内添加 Google Fonts 的链接： <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 在主题的 style.css 文件中设置字体： body { font-family: 'Roboto', sans-serif; } 方法 2：使用本地字体 将字体文件（如 .ttf 或 .woff）上传到 Typecho 主题的 fonts 文件夹中。 在主题的 style.css 文件中定义字体： @font-face { font-family: 'MyCustomFont'; src: url('fonts/MyCustomFont.woff2') format('woff2'), url('fonts/MyCustomFont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'MyCustomFont', sans-serif; } 方法 3：使用插件 安装 Typecho 插件，如 Custom Fonts。 在插件设置中上传字体文件并应用。 注意事项 字体加载速度：使用外部字体（如 Google Fonts）时，注意加载速度，避免影响用户体验。 版权问题：确保使用的字体可以免费商用，避免侵权。 兼容性：为不同浏览器提供多种字体格式（如 .woff、.woff2）。 了解更多技术内容，请访问：6v6博客
-
Typecho后台美化插件推荐 Typecho后台美化插件推荐 在使用Typecho搭建博客的过程中，Joe主题因其简洁美观而受到很多人的喜爱。然而，有时候我们可能希望进一步美化后台界面，使其更加个性化和舒适。下面为大家介绍几款实用的Typecho后台美化插件，并提供相关下载地址和详细信息。 1. Typecho后台美化插件（Adminify） 功能特点 丰富的自定义选项：可更改后台的主题颜色、字体样式等，能让Joe主题的后台界面更加美观和个性化。你可以根据自己的喜好调整各种颜色参数，让后台界面与你的整体风格相匹配。 自定义菜单图标：支持自定义后台菜单的图标，使菜单看起来更加清晰直观。这样在查找和管理不同的功能模块时会更加方便快捷。 安装方法 下载Adminify插件的压缩包：Adminify插件下载地址 （请将此链接替换为真实的下载地址） 登录Typecho后台，在“控制台” - “外观” - “插件”中点击“安装插件”。 在弹出的文件选择窗口中，找到刚才下载的Adminify插件压缩包，选中并上传安装。 安装完成后，在插件列表中找到Adminify并启用它。之后就可以在插件的设置页面中对后台进行美化设置了。 2. Typecho后台UI增强插件（BackToTop等辅助类） 功能特点 这类插件虽然主要功能侧重于某些特定方面的优化，但也能间接起到美化后台的作用。例如： BackToTop插件：可以在后台页面添加返回顶部按钮，优化用户在浏览长页面时的体验。 布局优化插件：还有一些插件可以优化后台界面的布局显示，让各个元素排列更加合理美观。 安装方法 与Adminify插件安装步骤类似，先下载插件压缩包（BackToTop等辅助类插件下载地址 ，请替换为真实地址），然后在Typecho后台的插件安装页面上传安装，安装成功后启用并根据需要进行相关配置（如果有）。 插件获取更多信息及交流 如果你想了解更多关于这些插件的详细信息或者与其他用户进行交流，可以访问我们的插件交流社区：6v6博客 - 插件交流区 （请将此链接替换为真实的社区地址） 通过使用这些插件，你可以让你的Typecho Joe主题后台焕然一新，提升使用体验。
-
typecho跨博客双方文章同步（实现一方发文章双方全有） 1. 实现原理 每个博客（A 和 B）提供一个 API 接口，用于接收对方博客发来的文章。 当 A 发布新文章时，调用 B 的 API 接口，将文章发布到 B 博客。 当 B 发布新文章时，调用 A 的 API 接口，将文章发布到 A 博客。 双方通过注册为对方的用户，获得发文权限，但不会共享管理员账号。 2. 实现步骤 步骤 1：在 A 和 B 博客中创建 API 接口 每个博客需要创建一个 API 接口，用于接收对方发来的文章。 A 博客的 API 接口示例代码： <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; // 接收文章数据 $input = file_get_contents('php://input'); $data = json_decode($input, true); // 验证请求（可选） $token = $_SERVER['HTTP_AUTHORIZATION'] ?? ''; if ($token !== '你的API密钥') { header('HTTP/1.1 401 Unauthorized'); exit; } // 插入文章 $db = Typecho_Db::get(); $insert = $db->insert('table.contents') ->rows([ 'title' => $data['title'], 'slug' => $data['slug'], 'created' => time(), 'modified' => time(), 'text' => $data['content'], 'authorId' => $data['authorId'], // 对方的用户 ID 'type' => 'post', 'status' => 'publish', 'commentsNum' => 0, 'allowComment' => 1, 'allowPing' => 1, 'allowFeed' => 1 ]); $db->query($insert); // 返回成功响应 header('Content-Type: application/json'); echo json_encode(['status' => 'success']); 步骤 2：在 A 和 B 博客中注册为对方的用户 在 A 博客中注册 B 博客的管理员账号为一个普通用户，记录其用户 ID。 在 B 博客中注册 A 博客的管理员账号为一个普通用户，记录其用户 ID。 步骤 3：在 A 和 B 博客中开发文章同步功能 当 A 发布新文章时，调用 B 的 API 接口；当 B 发布新文章时，调用 A 的 API 接口。 A 博客的同步代码： function syncPostToBlogB($post) { // B 博客的 API 地址 $url = 'https://B博客地址/api/sync-post'; // 文章数据 $data = [ 'title' => $post['title'], 'slug' => $post['slug'], 'content' => $post['text'], 'authorId' => 'B博客中A的用户ID' // A 在 B 博客中的用户 ID ]; // 发送 HTTP 请求 $ch = curl_init($url); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data)); curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Content-Type: application/json', 'Authorization: 你的API密钥' ]); $response = curl_exec($ch); curl_close($ch); // 记录日志（可选） file_put_contents(__TYPECHO_ROOT_DIR__ . '/usr/plugins/SyncToBlogB/log.txt', $response . PHP_EOL, FILE_APPEND); } B 博客的同步代码： 代码与 A 博客类似，只需修改 API 地址和用户 ID。 步骤 4：挂载文章发布事件 在 A 和 B 博客中，挂载文章发布事件，调用同步函数。 A 博客的挂载代码： Typecho_Plugin::factory('Widget_Contents_Post_Edit')->finishPublish = array('SyncToBlogB_Plugin', 'syncPostToBlogB'); B 博客的挂载代码： Typecho_Plugin::factory('Widget_Contents_Post_Edit')->finishPublish = array('SyncToBlogA_Plugin', 'syncPostToBlogA'); 3. 测试同步功能 在 A 博客发布一篇文章，检查是否同步到 B 博客。 在 B 博客发布一篇文章，检查是否同步到 A 博客。 确保双方原有的文章不受影响。 注意事项 API 安全性：使用 HTTPS 加密传输数据，并在 API 接口中添加身份验证（如 API 密钥）。 用户权限：确保对方用户只能发布文章，不能修改或删除其他文章。 文章格式：确保文章内容格式兼容（如 Markdown 或 HTML）。 性能优化：如果文章数量较多，可以增加错误重试机制和日志记录。 更多技术分享和实用教程，欢迎访问我的博客：6v6 博客，一起探索技术的无限可能！
-
Typecho 编辑器插件大搜罗：HTML、Markdown 互转与全能编辑 Typecho 编辑器插件大搜罗：HTML、Markdown 互转与全能编辑 在使用 Typecho 搭建博客时，一个好的编辑器插件可以极大地提升写作体验。无论是需要支持 HTML 编辑，还是希望使用 Markdown 语法，甚至两者互转，Typecho 都有丰富的插件可供选择。今天，就让我们一起探索这些强大的编辑器插件，找到最适合你的那一款。 一、WindsCkEditor：功能强大的 HTML 编辑器 1. 功能特点 功能丰富：集成了最新的 CkEditor 4.21 版本，支持代码插入、图片和附件上传，满足各种复杂的编辑需求。 高度可定制：支持自定义工具栏和在线配置，可以根据个人喜好调整编辑器的功能和布局。 扩展性强：可以通过插件扩展支持 Markdown 编辑，实现 HTML 和 Markdown 的无缝切换。 2. 安装方法 下载插件：从 WindsCkEditor 官方页面下载最新版本。 上传插件：将下载的插件文件夹重命名为 WindsCkEditor，并上传到 Typecho 的 usr/plugins/ 目录下。 激活插件：登录 Typecho 后台，进入插件管理页面，启用 WindsCkEditor 插件。 配置插件：根据需要修改 WindsCkEditor/ckeditor/config.js 文件，自定义工具栏和配置。 二、XEditor：基于 Vditor 的 Markdown 编辑器 1. 功能特点 所见即所得：支持实时预览、即时渲染和分屏预览模式，让写作更加直观。 短代码支持：支持自定义按钮和短代码渲染，方便插入复杂的格式和内容。 Markdown 编辑：专注于 Markdown 语法，但可以通过插件扩展支持 HTML 编辑。 2. 安装方法 下载插件：从 XEditor 官方页面下载最新版本。 上传插件：解压后将文件夹重命名为 XEditor，并上传到 Typecho 的 usr/plugins/ 目录下。 激活插件：登录 Typecho 后台，进入插件管理页面，启用 XEditor 插件。 自定义工具栏：根据需要修改 assets/js/toolbar.js 文件，自定义工具栏功能。 三、EditorMD for Typecho：Markdown 编辑器的全能选手 1. 功能特点 实时预览：支持实时预览、代码折叠、Emoji 表情等，让写作更加流畅。 扩展语法：支持 ToC（Table of Contents）、Github Task lists 等 Markdown 扩展语法。 简洁配置：提供简洁明了的配置界面，方便快速上手。 2. 安装方法 下载插件：从 EditorMD for Typecho 官方页面下载最新版本。 上传插件：解压后将文件夹重命名为 EditorMD，并上传到 Typecho 的 usr/plugins/ 目录下。 激活插件：登录 Typecho 后台，进入插件管理页面，启用 EditorMD 插件。 更新设置：根据需要更新插件设置，调整编辑器功能。 四、HTML2TEXT：HTML 转 Markdown 的神器 1. 功能特点 HTML 转 Markdown：将 HTML 代码转换为 Markdown 格式，适合需要将旧文章从 HTML 转换为 Markdown 的用户。 完整元数据导出：支持完整的元数据导出，确保文章信息完整。 2. 安装方法 下载插件：从 HTML2TEXT 官方页面下载最新版本。 上传插件：将下载的插件文件夹上传到 Typecho 的 usr/plugins/ 目录下。 激活插件：登录 Typecho 后台，进入插件管理页面，启用 HTML2TEXT 插件。 五、Typecho-Markdown：专注于 Markdown 的解析插件 1. 功能特点 严格遵循规范：支持 CommonMark 和 GFM（GitHub-Flavored Markdown）规范，确保 Markdown 的正确解析。 额外元素支持：提供额外的 Markdown 元素支持，满足更多写作需求。 简洁配置界面：提供简洁明了的配置界面，方便快速上手。 2. 安装方法 克隆项目：使用 Git 克隆项目源码： bash复制 git clone https://github.com/mrgeneralgoo/typecho-markdown.git 安装依赖：进入项目根目录，运行 Composer 安装依赖： bash复制 cd typecho-markdown composer install 上传插件：将 MarkdownParse 文件夹上传到 Typecho 的 usr/plugins/ 目录下。 激活插件：登录 Typecho 后台，进入插件管理页面，启用 Typecho-Markdown 插件。 六、总结 根据你的需求，如果你需要一个支持 HTML 和 Markdown 互转的编辑器，可以尝试 WindsCkEditor 或 EditorMD for Typecho。如果你主要需要 Markdown 编辑功能，XEditor 和 Typecho-Markdown 是不错的选择。如果你需要将旧文章从 HTML 转换为 Markdown，可以使用 HTML2TEXT 插件。 这些插件各有特点，可以根据你的具体需求选择最适合的编辑器。希望这些信息能帮助你找到理想的写作工具，提升你的博客写作体验。如果你还有其他问题，欢迎随时提问！
-
如何在 Typecho 中编辑器输入#标签实现自动填充标签 如何在 Typecho 中实现 Joe 编辑器标签自动填充 在 Typecho 的文章编辑过程中，如果你使用 Joe 编辑器，可能会希望输入#标签后能自动提取并填充到文章的标签输入框中，以提高工作效率。接下来，我们将详细介绍如何通过开发一个 Typecho 插件来实现这一功能。 一、功能实现原理 这个功能的实现依赖于 JavaScript 来监听 Joe 编辑器中的输入事件，通过正则表达式提取出#开头的标签，然后将这些标签填充到 Typecho 文章编辑页面的标签输入框中。同时，我们使用 Typecho 的插件机制，将相关的 JavaScript 代码注入到文章编辑页面中。 二、准备工作 了解 HTML 结构 通过浏览器的开发者工具（如 Chrome 的 F12），确定 Joe 编辑器的文本输入框和 Typecho 标签输入框的 HTML 元素。例如，Joe 编辑器文本输入框的 class 为 cm - editor cm - focused ͼ1 ͼ2 ͼ4，Typecho 标签输入框的 id 为 token - input - tags。 熟悉 JavaScript 和 Typecho 插件开发基础 需要了解基本的 JavaScript DOM 操作和事件监听知识，以及 Typecho 插件开发的基本规范和流程。 三、插件代码编写 （一）创建插件文件 在 Typecho 的 usr/plugins 目录下创建一个新目录，例如 AutoTagExtractor。 在 AutoTagExtractor 目录下创建一个 PHP 文件，命名为 AutoTagExtractor.php。 （二）编写插件代码 footer = array('AutoTagExtractorPlugin', 'addScript'); return _t('插件已激活，可从Joe编辑器提取#标签并自动填充到文章标签输入框'); } /** * 禁用插件方法 * * @return string */ public static function deactivate() { return _t('插件已停用'); } /** * 配置插件方法 * * @param Typecho_Widget_Helper_Form $form * @return void */ public static function config(Typecho_Widget_Helper_Form $form) { // 这里可添加插件配置项，目前暂不需要 } /** * 个人用户的配置方法 * * @param Typecho_Widget_Helper_Form $form * @return void */ public static function personalConfig(Typecho_Widget_Helper_Form $form) { // 这里可添加个人用户的配置项，目前暂不需要 } /** * 在文章编辑页面底部添加JavaScript脚本 * * @return void */ public static function addScript() { echo ''; // 当页面的DOM加载完成后执行以下代码 echo 'document.addEventListener(\'DOMContentLoaded\', function () {'; // 获取Joe编辑器的文本输入框元素，通过类名选择器 echo 'const joeEditorTextareaElements = document.getElementsByClassName(\'cm - editor cm - focused ͼ1 ͼ2 ͼ4\');'; // 取第一个匹配到的元素作为Joe编辑器的文本输入框 echo 'const joeEditorTextarea = joeEditorTextareaElements.length > 0? joeEditorTextareaElements[0] : null;'; // 获取Typecho标签输入框元素，通过id选择器 echo 'const tagInput = document.getElementById(\'token - input - tags\');'; // 检查是否成功获取到这两个元素 echo 'if (joeEditorTextarea && tagInput) {'; // 为Joe编辑器的文本输入框添加keyup事件监听器 echo 'joeEditorTextarea.addEventListener(\'keyup\', function () {'; // 获取当前输入框中的文本内容 echo 'const inputText = joeEditorTextarea.value;'; // 用于存储提取出的标签 echo 'const tags = [];'; // 使用正则表达式匹配所有以#开头，且后面跟着非#字符的内容 echo 'const tagMatches = inputText.match(/#([^#]+)/g);'; // 如果匹配到了标签 echo 'if (tagMatches) {'; // 遍历所有匹配到的标签 echo 'tagMatches.forEach(function (tagMatch) {'; // 去除标签前面的#符号，并去除前后空格 echo 'let tag = tagMatch.substring(1).trim();'; // 检查标签是否已经存在于tags数组中，如果不存在则添加 echo 'if (tags.indexOf(tag) === -1) {'; echo 'tags.push(tag);'; echo '}'; echo '});'; // 将tags数组中的标签用逗号连接成字符串 echo 'const tagString = tags.join(\',\');'; // 将处理后的标签字符串填充到Typecho标签输入框中 echo 'tagInput.value = tagString;'; echo '} else {'; // 如果没有匹配到标签，清空Typecho标签输入框 echo 'tagInput.value = \'\';'; echo '}'; echo '});'; echo '}'; echo '});'; echo ''; } } （三）代码解释 激活插件方法（activate）：通过 Typecho_Plugin::factory 注册一个钩子，当加载 admin/write - post.php（文章编辑页面）的页脚时，调用 addScript 方法，在页面中注入 JavaScript 代码。 禁用插件方法（deactivate）：简单返回一个提示信息，表示插件已停用。 配置插件方法（config）和个人用户配置方法（personalConfig）：目前这两个方法为空，后续如果需要添加插件的全局配置或个人用户配置项，可以在这里进行扩展。 添加脚本方法（addScript）： 使用 document.addEventListener('DOMContentLoaded', function () {... }) 确保页面 DOM 加载完成后再执行后续代码。 通过 document.getElementsByClassName 获取 Joe 编辑器的文本输入框元素，由于该方法返回一个类数组对象，所以取第一个元素作为实际的输入框。 通过 document.getElementById 获取 Typecho 标签输入框元素。 为 Joe 编辑器的文本输入框添加 keyup 事件监听器，当用户松开按键时触发。 在事件处理函数中，获取输入框的文本内容，使用正则表达式 /#([^#]+)/g 匹配所有以#开头的标签。 遍历匹配到的标签，去除#符号和前后空格，检查是否重复，将不重复的标签添加到 tags 数组中。 将 tags 数组中的标签用逗号连接成字符串，填充到 Typecho 标签输入框中。如果没有匹配到标签，则清空标签输入框。 四、插件安装与启用 上传插件文件 如果你在本地开发环境创建了插件文件，可以使用 FTP 工具将整个 AutoTagExtractor 文件夹上传到 Typecho 网站的 usr/plugins 目录下。 启用插件 登录 Typecho 后台管理界面。 点击左侧菜单中的 “插件” 选项。 在插件列表中找到 “自动标签提取插件”（即 AutoTagExtractorPlugin），点击 “启用” 按钮。启用成功后，会显示提示信息 “插件已激活，可从 Joe 编辑器提取 #标签并自动填充到文章标签输入框”。 五、插件使用与测试 打开文章编辑页面 点击左侧菜单中的 “撰写文章”，进入文章编辑页面。 测试标签提取功能 在 Joe 编辑器中输入带有#开头的标签，例如 #软件 #工具 #免费。当你输入完成或松开按键时，Typecho 文章编辑页面的 token - input - tags 标签输入框会自动填充处理后的标签，显示为 软件,工具,免费，并且会自动去除重复标签和前后空格。 六、注意事项 元素选择器准确性：确保 Joe 编辑器的文本输入框的类名和 Typecho 标签输入框的 id 是准确的。如果这些元素的选择器发生变化，需要相应地修改插件中的 JavaScript 代码。 兼容性：该插件在大多数现代浏览器中应该可以正常工作，但在一些旧版本的浏览器中可能需要进行兼容性处理。 插件更新与维护：如果后续需要对插件进行功能扩展或修复问题，可以直接修改 AutoTagExtractor.php 文件中的代码，修改完成后保存并刷新 Typecho 后台页面即可生效。 通过以上步骤，你就成功地在 Typecho 中实现了 Joe 编辑器标签自动填充的功能，这将大大提高你撰写文章时添加标签的效率。
