一、网站维护
//网站维护
$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末尾添加
<!--禁止右键、复制-->
<?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}
三、是否开启评论画板
//评论画板
$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"> 内部添加以下代码
<!-- 阅读模式 -->
<?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}
七、文章添加语音朗诵功能
八、评论添加显示IP归属地
九、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}
十、网站添加大红灯笼
<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}
十一、BUG修复
置顶一篇文章后，再修改那篇文章，首页会显示两篇一样的文章
十二、JOE后台外观编辑：保存密钥、授权码
十三、添加CDN功能
十四、鼠标滑动有BUG，在首页、文章页等滑动不顺畅
十五、微信吸粉
{/collapse-item}
十六、首页文章分页采取pjax动态响应
十七、添加侧边导读目录树
<!-- 侧边文章目录导读 -->
<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}
十八、侧边栏开关
// 伸缩侧边栏开关
$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}
本文共 1419 个字数,平均阅读时长 ≈ 4分钟
慢慢折腾啊