0、未修复的BUG
1.初次加载页面没有目录树，需要刷新页面后才有目录树
2.置顶一篇文章后，再修改那篇文章，首页会显示两篇一样的文章
3.短代码折叠面板、标签页等添加云盘下载后界面会乱套
{/collapse-item}
一、网站维护
//网站维护
$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:"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:"text-indent:2em;">
<strong>尊敬的访客:</strong>
</h2>
<blockquote>
<h2 style="font-family:"">
<strong>您好，本博客正在更新迭代中，暂时无法访问！每次的更新都为您带来更好的体验，敬请期待！</strong>
</h2>
</blockquote>
<h2 style="text-align:right;font-family:"text-indent:2em;">
<strong>感谢您的支持！ </strong><strong> </strong>
</h2>
</div>
</div>
</div>
</body>
</html>
<?php exit; ?>
<?php endif; ?>
<!--网站维护结束-->{/collapse-item}
代码：
//网站维护
$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}
二、右键屏蔽
//右键屏蔽
$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末尾添加
{/collapse-item}
三、是否开启评论画板
//评论画板
$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}
四、Typecho后台撰写文章时插入标签
<!-- 标签选择 -->
<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}
{/collapse-item}
五、给文章添加阅读模式
/ 是否启用阅读模式
$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"> 内部添加以下代码
3.添加JS
首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js
在 Joe/assets/js/joe.post_page.min.js 最后一个 }); 前加入以下代码
当然你也可以加在Joe/assets/js/joe.post_page.js里再使用minify进行压缩
此处内容已经被作者隐藏，请输入验证码查看内容请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“TechBars”或者“TechBars”或者微信扫描右侧二维码都可以关注本站微信公众号。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}
六、copyright优化
<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}
七、网站添加大红灯笼（支持自定义文字）
利用 易航主题 china-lantern.min.js实现
1.在function里添加开关
//新年灯笼
$NewYearLantern = new \Typecho\Widget\Helper\Form\Element\Text(
'NewYearLantern',
NULL,
NULL,
'新年灯笼挂件文字',
'介绍：填写后网站顶部将会始终展示新年灯笼挂件，增添网站新年氛围<br>
示例：新年快乐<br>
关于：春节，亦称农历新年，是中国最重要的传统节日之一，春节时期往往伴随着阖家团圆和一个新的开始，春节不仅是一个普通的节日，它凝聚了中华民族的历史记忆和文化情感，承载着深厚的文化意义和社会价值'
);
$NewYearLantern->setAttribute('class', 'joe_content joe_nobb');
$form->addInput($NewYearLantern->multiMode());2.在footer.php加入引入代码
<!-- 新年灯笼 -->
<?php if (!empty($this->options->NewYearLantern)) : ?>
<script src="<?= _CdnUrl4Themes('assets/plugin/china-lantern.min.js?text='. $this->options->NewYearLantern);?>"></script>
<?php endif; ?>
3.china-lantern.min.js内容(已格式化，建议压缩)
/**
* @name: 中国灯笼
* @author: 易航
* @version 1.7.0
*/
! function(t) {
"function" == typeof define && define.amd ? define(t) : t()
}((function() {
"use strict";
! function(t, e) {
void 0 === e && (e = {});
var n = e.insertAt;
if (t && "undefined" != typeof document) {
var r = document.head || document.getElementsByTagName("head")[0],
a = document.createElement("style");
a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
}
}(`@charset "UTF-8";.lantern__warpper{position:fixed;top:${(document.querySelector('.joe_header') ? document.querySelector('.joe_header').clientHeight : 0) + 12}px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:999}.lantern__warpper.lantern__secondary .lantern__box{-webkit-animation-duration:3s;animation-duration:3s}.lantern__box{position:relative;display:inline-block;width:90px;height:70px;background:rgba(216,0,15,.8);border-radius:50% 50%;animation:lantern-swing 3s ease-in-out infinite alternate-reverse;-webkit-transform-origin:50% -70px;-ms-transform-origin:50% -70px;transform-origin:50% -70px;-webkit-box-shadow:-5px 5px 50px 4px #fa6c00;box-shadow:-5px 5px 50px 4px #fa6c00}.lantern__box:after,.lantern__box:before{content:"";position:absolute;height:8px;width:45px;left:50%;border:1px solid #dc8f03;background:-webkit-gradient(linear,left top,right top,from(#dc8f03),color-stop(orange),color-stop(#dc8f03),color-stop(orange),to(#dc8f03));background:-o-linear-gradient(left,#dc8f03,orange,#dc8f03,orange,#dc8f03);background:linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern__box:before{top:0;border-radius:5px 5px 0 0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.lantern__box:after{bottom:0;border-radius:0 0 5px 5px;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%)}.lantern__line{position:absolute;width:2px;height:12px;top:0;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);background:#dc8f03}.lantern__circle{width:80%;-webkit-box-sizing:border-box;box-sizing:border-box}.lantern__circle,.lantern__circle .lantern__ellipse{height:100%;margin:0 auto;border-radius:50%;border:2px solid #dc8f03}.lantern__circle .lantern__ellipse{width:50%}.lantern__circle .lantern__text{font-family:华文行楷,Microsoft YaHei,sans-serif;font-size:24.3px;color:#dc8f03;font-weight:700;line-height:66px;text-align:center}.lantern__tail{position:relative;width:4px;height:12px;margin:0 auto;animation:lantern-swing 4s ease-in-out infinite alternate-reverse;background:orange;border-radius:0 0 5px 5px}.lantern__tail .lantern__junction{position:absolute;top:0;left:50%;width:8px;height:8px;-webkit-transform:translate(-50%,8.4px);-ms-transform:translate(-50%,8.4px);transform:translate(-50%,8.4px);background:#e69603;border-radius:50%}.lantern__tail .lantern__rect{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%,10.8px);-ms-transform:translate(-50%,10.8px);transform:translate(-50%,10.8px);width:8px;height:24px;background:orange;border-radius:5px 5px 0 5px}@-webkit-keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@media (max-width:460px){.lantern__warpper{top:${(document.querySelector('.joe_header') ? document.querySelector('.joe_header').clientHeight : 0) + 8}px}.lantern__box{width:50px;height:40px;-webkit-transform-origin:50% -40px;-ms-transform-origin:50% -40px;transform-origin:50% -40px;-webkit-box-shadow:-5px 5px 50px -1px #fa6c00;box-shadow:-5px 5px 50px -1px #fa6c00}.lantern__box:after,.lantern__box:before{height:4px;width:25px}.lantern__line{width:2px;height:8px}.lantern__circle .lantern__text{font-size:13.5px;line-height:38px}.lantern__tail{width:4px;height:8px}.lantern__tail .lantern__junction{width:8px;height:8px;-webkit-transform:translate(-50%,5.6px);-ms-transform:translate(-50%,5.6px);transform:translate(-50%,5.6px)}.lantern__tail .lantern__rect{-webkit-transform:translate(-50%,7.2px);-ms-transform:translate(-50%,7.2px);transform:translate(-50%,7.2px);width:8px;height:16px}}`);
var customText = (new URLSearchParams(document.currentScript.src.split('?')[1])).get('text');
var texts = customText ? customText.split('') : ['新', '年', '快', '乐'];
var t;
(t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = `<div class="lantern__warpper"style="left:5vw;"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">${texts[0]}</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper"style="left:20vw;"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">${texts[1]}</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"style="right:20vw;"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">${texts[2]}</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"style="right:5vw;"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">${texts[3]}</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>`, document.body.appendChild(t)
}));{/collapse-item}
八、添加侧边导读目录树
<!-- 侧边文章目录导读 -->
<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}
九、侧边栏开关
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 中
{hide}
<!-- 伸缩侧边栏 -->
<?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; ?>{hide}
{/tabs-pane}
{tabs-pane label="添加位置"}
{/tabs-pane}
3.添加JS和CSS
①添加JS代码
在 Joe/assets/js/joe.post_page.js 最后一个});前添加以下代码
（当然你也可以添加在 Joe/assets/js/joe.post_page.min.js ）
// 伸缩侧栏
{
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 内添加以下代码
此处内容已经被作者隐藏，请输入验证码查看内容请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“TechBars”或者“TechBars”或者微信扫描右侧二维码都可以关注本站微信公众号。{/collapse-item}
十、版权处添加二维码
生成器获取二维码格式：https://xxxxx/api.php?getqrcode&url=网址
2.在copyright.php里面版权处添加代码:
<img class="ewm" src="https://xxxxx/api.php?getqrcode&url=<?php $this->permalink() ?>">
示例：
<div class="joe_detail__copyright">//定位点
<img class="ewm" src="https://xxxxx/api.php?getqrcode&url=<?php $this->permalink() ?>"> //这里是二维码接口，需要自行搭建
<div class="content">//定位点添加全局css代码
此处内容已经被作者隐藏，请输入验证码查看内容请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“TechBars”或者“TechBars”或者微信扫描右侧二维码都可以关注本站微信公众号。{/collapse-item}
十一、评论添加隐私评论
{/collapse-item}
十二、友情链接在线提交
{/collapse-item}
本文共 1619 个字数,平均阅读时长 ≈ 5分钟
![[typecho]给Joe主题添加评论隐私回复](https://img.nobb.cc/blog/typecho/uploads/2025/02/428679361.webp)
慢慢折腾啊