实用指南：Typecho 系统的 Joe 主题美化技巧持续更新

博主： demius
发布时间：2024 年 10 月 09 日
380 次浏览
1 条评论
17001字数
分类： typecho

说明：

生命不息，折腾不止，哎，就是玩儿......

本站环境：

PHP：8.0.2

Mysql：8.4.2
Typecho：1.2.1正式版
Joe：7.7.1
其他版本的PHP、Typecho和Joe不确定其可行性，请自行测试~

基础设置

这个其实不用写，安装Joe主题后去配置网站基础设置就好了。

开启gzip压缩

打开typecho目录下的 index.php，并在开头添加
ob_start('ob_gzhandler');

robots.txt

在网站根目录下创建并设置 robots.txt,方便搜索引擎爬虫爬取:


User-agent: *
Allow: /*.html$
Allow: /usr
Allow: /*.png$
Allow: /*.jpg$
Allow: /*.jepg$
Allow: /*.gif$
Allow: /*.bmp$
Disallow: /admin/
Disallow: /install/
Disallow: /var/
Disallow: /config.inc.php
Disallow: /install.php
Disallow: /.js
Disallow: /.css
Disallow: /feed
Sitmap: 你的域名/sitemap.xml

可借助你的域名/robots.txt 查看是否设置成功。之后在百度收录平台完成 robots.txt 的更新

美化

网站主题各种颜色修改

位置：主题后台设置-全局设置-自定义CSS：


body {
    --theme: #000000;
    --background: #ffffff;
    --main: #303133;
    --routine: #606266;
    --minor: #909399;
    --seat: #c0c4cc;
    --classA: #dcdfe6;
    --classB: #e4e7ed;
    --classC: #ebeef5;
    --classD: #f2f6fc;
    --radius-wrap: 10px;
    --radius-inner: 15px;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}

说明：
--theme
主题颜色，用于修改整个网站的主题色彩，冒号后面的是颜色的色彩值，这个色彩值可以用常见的颜色格式。
--background
主体卡片背景颜色，调整透明度的话，可以填写 rgba 值，例如半透明：rgba(255,255,255,0.5)
--main
文字的颜色，颜色最深的
--routine
文字的颜色，颜色稍微次于上面那个
--minor
文字的颜色，颜色稍微次于上面那个
--seat
文字的颜色，颜色稍微次于上面那个
--classA
横线、分割线用的颜色，颜色最深的
--classB
横线、分割线用的颜色，颜色稍微次于上面那个
--classC
横线、分割线用的颜色，颜色稍微次于上面那个
--classD
横线、分割线用的颜色，颜色稍微次于上面那个
--radius-wrap
外层包裹的圆角度数，如果不需要圆角，可以写0px
--radius-inner
里层包裹的圆角度数，如果不需要圆角，可以写0px
--text-shadow
文章标题的字体阴影，只在文章详情页用到，区别不大
--box-shadow
主体卡片阴影

右上角搜索框文字修改

修改文件，在主题目录Joe/public/header.php中，大概139行：可将Search修改为任意字，比如“搜索” 大概138行：可修改默认显示字体，即可将搜索框中“请输入关键字...”修改为任意字。

头像呼吸灯

在主题后台设置-全局设置-自定义CSS里添加：


/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar {
 border-radius: 50%;
 animation: light 4s ease-in-out infinite;
 transition: 0.5s;
}
.avatar:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
 0%{box-shadow: 0 0 4px #f00;}
 25%{box-shadow: 0 0 16px #0f0;} 
 50%{box-shadow: 0 0 4px #00f;}
 75%{box-shadow: 0 0 16px #0f0;} 
 100%{box-shadow: 0 0 4px #f00;}
}

文章目录树

目前目录树的结构有很多，比如添加在页面左侧隐藏式的，或者是添加在文章左侧的。这里采用的是添加在右侧栏当中的，随文章置顶的：效果图： ![](https://tc.demius.tech/i/2024/10/07/6703f0cdce74e.webp)

首先，在public/aside.php文件中，添加如下内容，可以在作者卡片之后添加，不过具体想摆放的位置看自己的设计，当前设计是放在作者卡片之后。


<!--  仅在文章生效，如果需要页面，下面第一行判断加上 || $this->is('page')-->
      <?php if ($this->is('post')) : ?>
          <section class="joe_aside__item catalogue">
              <div class="joe_aside__item-title">
                  <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="2084"
                       width="18" height="18">
                      <path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
                            p-id="2085"></path>
                  </svg>
                  <span class="text">目录</span>
                  <span class="line"></span>
              </div>
              <div class="joe_aside__item-contain">
                  <ul class="catalogue-items">
                  </ul>
              </div>
          </section>
      <?php endif; ?>

在主题后台设置-全局设置-自定义JS中：添加如下内容，或者你也可以加在assets/js/joe.global.js文件中，记得将joe.global.min.js也同步更新下，如果你使用的是joe.global.js那就不用管了


function get_catalogs(article_content) {
        const titleTag = ["H1", "H2", "H3"];
        let titles = [];
        article_content.childNodes.forEach((e, index) => {
            const id = "header-" + index;
            if (titleTag.includes(e.nodeName)) {
                titles.push({
                    id: id,
                    text: e.textContent,
                    level: Number(e.nodeName.substring(1, 2))
                });
                e.setAttribute("id", id);
            }
        });
        return titles;
    }

    // 找到目录容器
    article_content = document.querySelector('.joe_detail__article');
    if (article_content) {
        var catalog = get_catalogs(article_content);
        if (catalog.length == 0) {
            // 无目录，隐藏
            $('.catalogue').hide();
        } else {
            let catalogue = '';
            for (let i = 0; i < catalog.length; i++) {
                let node = '<li class="catalogue-item"><a href="javascript:;" id="to-' + catalog[i].id + '" to="' + catalog[i].id + '" title="' + catalog[i].text + '">' + catalog[i].text + '</a>';
                if (i == catalog.length - 1) {
                    catalogue += node + '</li>'
                } else {
                    if (catalog[i + 1].level == catalog[i].level) {
                        catalogue += node + '</li>';
                    } else if (catalog[i + 1].level > catalog[i].level) {
                        catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>';
                    } else {
                        if (catalog[i + 1].level - catalog[i].level == -2) {
                            catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>';
                        } else {
                            catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>';
                        }

                    }
                }
            }
            document.querySelector('.catalogue-items').innerHTML = catalogue;
            $('.catalogue-item > a').on('mouseenter', function () {
                $(this).parent().addClass('_active');
            });
            $('.catalogue-item > a').on('mouseleave', function () {
                $(this).parent().removeClass('_active');
            });
            // 根据目录定位到标题
            $('.catalogue-item > a').on('click', function () {
                document.removeEventListener("scroll", autoActive);
                $('.catalogue-item').removeClass('active');
                $(this).parent().addClass('active');
                let aim = document.querySelector('#' + $(this).attr('to'));
                let aim_top = aim.offsetTop;
                let aim_h = aim.clientHeight;
                let above_h = document.querySelector('.joe_header__above').clientHeight;
                let below_h = document.querySelector('.joe_header__below').clientHeight;
                let offset = 0;
                let case1 = !document.querySelector('.joe_header__above').className.includes('active');
                let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top;
                if (case1 && case2) {
                    offset = above_h;
                }
                window.scrollTo({
                    top: aim_top - offset - below_h - 10,
                    behavior: 'smooth'
                });
                setTimeout(() => {
                    document.addEventListener("scroll", autoActive);
                }, 500);
            });
            if (catalog.length)
                $('.catalogue-item').eq(0).addClass('active');
            // 目录侧标题自动定位
            let autoActive = function () {
                let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度
                for (let i = 0; i < catalog.length; i++) {
                    let offset = 0;
                    let h_id = '#' + catalog[i].id;
                    let h_offset = document.querySelector(h_id).offsetTop;
                    let above_h = document.querySelector('.joe_header__above').clientHeight;
                    let below_h = document.querySelector('.joe_header__below').clientHeight;

                    if (!document.querySelector('.joe_header').className.includes('active'))
                        offset = above_h;
                    if (h_offset + below_h + offset + 10 >= html_top) {
                        $('.catalogue-item').removeClass('active');
                        if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) {
                            //还没到下一个标题
                            i--;
                        }
                        $('#to-' + catalog[i].id).parent().addClass('active');
                        break;
                    }
                }
            };
            document.addEventListener("scroll", autoActive);
        }
    } else {
        // 不是文章，隐藏目录
        $('.catalogue').hide();
    }

在主题后台设置-全局设置-自定义css中：加入如下样式：


.joe_aside__item.catalogue {
    z-index: 999;
    position: sticky;
    top: 60px;
    margin-bottom: 15px;
    transition: top 0.35s;
    background: var(--background)
}

.joe_aside__item.catalogue .joe_aside__item-contain {
    padding: 0;
    margin: 0 0 0 10px;
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items {
    border-left: 1px solid var(--classC);
    border-bottom: 1px solid var(--background);
    padding: 15px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item {
    margin: 0;
    padding: 0;
    line-height: 26px;
    font-size: 16px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a {
    position: relative;
    display: block;
    line-height: 26px;
    color: var(--main);
    transition: color 0.5s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a:hover {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    width: 2px;
    height: 26px;
    background-color: var(--theme);
    transition: height 0.35s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2.catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 14px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -34px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -51px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul {
    padding-left: 17px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul {
    display: block;
    list-style-type: disc
}

其实上述三步已经可以实现文章目录了，此时刷新页面，在右侧博主头像吓应该可以看到目录了。
但是上述直接添加可能会导致文章在滑动的时候，目录下面的其他内容卡片没有固定。
即在public/aside.php文件中将作者卡片下面的其他卡片用section标签包裹起来，修改如下：


<section class="sticky_layout">
除作者卡片之外的卡片内容都包裹在这个标签当中
</section>

然后再修改刚刚第三步的CSS：


section.sticky_layout {
    position: sticky;
}

.joe_aside__item.catalogue {
    z-index: 999;
    margin-bottom: 15px;
    transition: top 0.35s;
    background: var(--background)
}

.joe_aside__item.catalogue .joe_aside__item-contain {
    padding: 0;
    margin: 0 0 0 10px;
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items {
    border-left: 1px solid var(--classC);
    border-bottom: 1px solid var(--background);
    padding: 15px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item {
    margin: 0;
    padding: 0;
    line-height: 26px;
    font-size: 16px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a {
    position: relative;
    display: block;
    line-height: 26px;
    color: var(--main);
    transition: color 0.5s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a:hover {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    width: 2px;
    height: 26px;
    background-color: var(--theme);
    transition: height 0.35s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2.catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 14px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -34px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -51px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul {
    padding-left: 17px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul {
    display: block;
    list-style-type: disc
}

如果开启了舔狗卡片，则需要再修改一下，需要将assets/js/joe.global.js文件中的头部滚动部分的函数进行修改，替换成如下内容：


{
        if (!window.Joe.IS_MOBILE) {
            let flag = true;
            const handleHeader = (diffY) => {
                if (window.pageYOffset >= $(".joe_header").height() && diffY <= 0) {
                    if (flag) return;
                    $(".joe_header").addClass("active");
                    $(".joe_aside .sticky_layout").css("top", $(".joe_header").height() - 60 + 15);
                    flag = true;
                } else {
                    if (!flag) return;
                    $(".joe_header").removeClass("active");
                    $(".joe_aside .sticky_layout").css("top", $(".joe_header").height() + 15);
                    flag = false;
                }
            };
            let Y = window.pageYOffset;
            handleHeader(Y);
            let _last = Date.now();
            document.addEventListener("scroll", () => {
                let _now = Date.now();
                if (_now - _last > 15) {
                    handleHeader(Y - window.pageYOffset);
                    Y = window.pageYOffset;
                }
                _last = _now;
            });
        }
    }

这第四步主要修改的内容是将原本的最后一个卡片不滚动，改成除了作者卡片其他不滚动，如果不介意滚动的话则不需要这一步，同时注意开始如果目录放置的地方不在头像卡片下方，则修改包裹在section标签的卡片内容也要一致。

底部页面加载耗时

页面加载耗时的功能和样式的实现可以看到本博客底部页面的一些样式和功能，样式的实现：可以去【 shields.io 】网站去自定义，种类很多，像ICP、版权信息等等。功能的实现：找到usr/themes/Joe/public目录下的footer.php第47行，加入以下代码：


document.getElementById('pagetimes').innerHTML = '<img src="https://img.shields.io/badge/页面加载耗时：-<?php _endCountTime(); ?>-green">';

_endCountTime()是获取页面耗时的函数；
pagetimes是前台标签的ID值，放到前台你想显示的位置即可。


<a href="javascript:(0)" id="pagetimes"></a>

给你的网站博客侧边栏添加一个联系我/关注我/个人信息

方法一：

效果图
代码

这个效果图标可以渐变色。

下面的代码放到主题后台，侧边栏，自定义即可，相应信息改成你自己的哦。


<div style="background: var(--background);">
    <ul style="list-style: none; padding: 0; margin: 0;">
      <li style="font-size: 12px; margin-bottom: 10px; background: #fff; color: #525252; line-height: 40px; border: 1px solid #DDD; border-radius: 2px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
        <img src="https://tc.demius.tech/i/2024/10/04/66ffda4aa0a58.webp" style="width: 20px; height: 20px; vertical-align: middle;">
        <span style="float: right; text-align: center; width: 40%; -moz-transition: all.5s ease; -webkit-transition: all.5s ease; -ms-transition: all.5s ease; -o-transition: all.5s ease; transition: all.5s ease; transition: all 0.5s; animation: change 10s infinite;">QQ 号</span>228209506
      </li>
      <li style="font-size: 12px; margin-bottom: 10px; background: #fff; color: #525252; line-height: 40px; border: 1px solid #DDD; border-radius: 2px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
        <img src="https://tc.demius.tech/i/2024/10/04/66ffda4b029f0.webp" style="width: 20px; height: 20px; vertical-align: middle;">
        <span style="float: right; text-align: center; width: 40%; -moz-transition: all.5s ease; -webkit-transition: all.5s ease; -ms-transition: all.5s ease; -o-transition: all.5s ease; transition: all.5s ease; transition: all 0.5s; animation: change 10s infinite;">邮箱帐号</span>demius@foxmail.com
      </li>
    </ul>
  </div>

  <style>
    @keyframes change {
      0% {
        background-color: #5cb85c;
      }
      25% {
        background-color: #556bd8;
      }
      50% {
        background-color: #e40707;
      }
      75% {
        background-color: #66e616;
      }
      100% {
        background-color: #67bd31;
      }

    li span {
      display: block;
      width: 100%;
      line-height: 40px;
    }
  </style>

方法二

位置：主题后台设置-侧栏设置-自定义侧栏模块


<div class="guanzhu">
      <ul>
        <li class="sina"><a href="https://weibo.com/ftianxiang" target="_blank" rel="external nofollow"><span>新浪微博</span>哒哒哒哒</a></li>
        <li class="qq"><a href="http://wpa.qq.com/msgrd?v=3&uin=1322360062&site=qq&menu=yes" target="_blank" rel="external nofollow"><span>QQ号</span>228209506</a></li>
        <li class="email"><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=keX48P-p_PD-9r-39P-20eDgv-L_-A" target="_blank" rel="external nofollow"><span>邮箱帐号</span>demius@foxmail.com</a></li>
        <li class="wxgzh"><a href="https://www.xtboke.com/about.html" target="_blank" ><span>微信号</span>XXXXXXXX</a></li>
      </ul>
    </div>

位置：主题后台设置-全局设置-自定义CSS


/*关注*/
.guanzhu{background: var(--background);}
.guanzhu ul li { font-size: 12px; margin-bottom: 10px; background: #fff; color: #525252; line-height: 40px; padding: 0 0 0 34px; border: 1px solid #DDD; border-radius: 2px; position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.guanzhu .sina { border: #ec3d51 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 10px #fff }
.guanzhu .qq { border: #2ab39a 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 -98px  #fff}
.guanzhu .email { border: #12aae8 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 -150px  #fff}
.guanzhu .wxgzh { border: #199872 1px solid; background: url(https://tc.demius.tech/i/2024/10/07/6703a2023c51e.webp) no-repeat 0 -200px  #fff}
.guanzhu ul li span { float: right; text-align: center; width: 100px; -moz-transition: all .5s ease; -webkit-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; transition: all 0.5s; }
.guanzhu .sina span { background: #ec3d51; }
.guanzhu .qq span { background: #2ab39a; }
.guanzhu .email span { background: #12aae8; }
.guanzhu .wxgzh span { background: #199872; }
.guanzhu a span { color: #FFF }
.guanzhu ul li:hover span { width: 120px; }

侧边栏添加百度搜索框

位置：主题后台设置-侧栏设置-自定义侧栏模块


<section class="joe_aside__item qrcode">
    <div class="joe_aside__item-contain" style="padding-bottom: 10px;">
       <div class="baidu-dwo">
          <form class="baidu-dwo_form" action="https://www.baidu.com/s"
              method="GET" target="_blank">
              <input class="baidu-dwo_input" type="text" name="wd"
                  validatetarget="q"
                  validatetype="must"
                  placeholder="关键词：深秋" value="沈丘博客">
              <input class="baidu-dwo_submit" type="submit" value="搜索">
          </form>
       </div>  
    </div>
</section>

位置：主题后台设置-全局设置-自定义CSS


.baidu-dwo{
                width: 100%;
                padding-bottom: 6px;
            }
            .baidu-dwo_form{
                position: relative;
                box-sizing: border-box;
                border: 1px solid var(--theme);
                border-radius: 4px; 
                margin-bottom:5px;
                overflow: hidden;
            }
            .baidu-dwo_input{ 
                border: none;
                font-size: 16px!important;
                font-weight: 100!important;
                color: var(--main);
                outline: none;
                border-radius: 0; 
                padding: 9px 8px;
                margin-bottom: -2px;
                background-color: transparent!important;
            }
            .baidu-dwo_input:focus{
                outline: none;
            }
            .baidu-dwo_submit{
                position: absolute;
                right:2px ;
                top: 50%;
                transform: translateY(-50%);
                box-sizing: border-box;
                border: none;
                border-radius: 4px;
                background-color: var(--theme);
                color: #ffffff;
                padding: 6px 8px;
                cursor: pointer;
            }
            .baidu-dwo_tip{
                font-size: 13px;
                color: var(--minor);
            }

侧边栏增加广告位

第一步：

位置
代码

主题文件：public/aside.php下，如图箭头所指位置下方添加代码


<!--新增侧边栏广告位-->
  <?php if ($this->options->JADContent) : ?>
    <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent)[1]; ?>" title="深秋的广告栏">
        <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent)[0]; ?>" alt="深秋的广告栏" />
        <span class="icon">深秋的广告栏</span>
    </a>
<?php endif; ?>

<?php if ($this->options->JADContent2) : ?>
    <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent2)[1]; ?>" title="深秋的广告栏2">
        <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent2)[0]; ?>" alt="深秋的广告栏2" />
        <span class="icon">深秋的广告栏2</span>
    </a>
<?php endif; ?>

<?php if ($this->options->JADContent3) : ?>
    <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent3)[1]; ?>" title="深秋的广告栏3">
        <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent3)[0]; ?>" alt="深秋的广告栏3" />
        <span class="icon">深秋的广告栏3</span>
    </a>
<?php endif; ?>

第二步

位置
代码

在主题文件：Joe/functions.php下


// 现有的广告选项
$JADContent = new Typecho_Widget_Helper_Form_Element_Textarea(
    'JADContent',
    NULL,
    NULL,
    '深秋-广告栏（侧） - PC',
    '介绍：用于设置深秋-广告栏（侧） <br />
         格式：广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)
         PS：可填作者的，可填写：https://tc.demius.tech/i/2024/10/08/67055279a699c.webp || https://sq.demius.tech'
         );
$JADContent->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JADContent);

// 新增的广告选项
$JADContent2 = new Typecho_Widget_Helper_Form_Element_Textarea(
    'JADContent2',
    NULL,
    NULL,
    '深秋-广告栏（侧）2 - PC',
    '介绍：用于设置深秋-广告栏（侧）2 <br />
         格式：广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)
         PS：可填作者的，可填写：https://tc.demius.tech/i/2024/10/08/67055279a699c.webp || https://sq.demius.tech'
);
$JADContent2->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JADContent2);

$JADContent3 = new Typecho_Widget_Helper_Form_Element_Textarea(
    'JADContent3',
    NULL,
    NULL,
    '深秋-广告栏（侧）3 - PC',
    '介绍：用于设置深秋-广告栏（侧）3 <br />
         格式：广告图片 || 跳转链接 (中间使用两个竖杠分隔)<br />
         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)
         PS：可填作者的，可填写：https://tc.demius.tech/i/2024/10/08/67055279a699c.webp || https://sq.demius.tech'
);
$JADContent3->setAttribute('class', 'joe_content joe_aside');
$form->addInput($JADContent3);

注意：如果不想要更多的广告位，删除相应的代码片段就行，原主题已经自带了一个广告位，这里再次增加了三个，总共就是四个了哦。

给评论加一个一键打卡功能

先看效果图：

请输入图片描述

找到 themes/Joe/public/comment.php 的57行
<div class="owo joe_owo__contain"></div>
在其下面一行添加：
<div class="comment-clockIn" onclick="javascript:clockIn()">打卡</div>

在主题后台设置-全局设置-自定义CSS里添加：


/*评论打卡*/
.joe_comment__respond-form .foot {
    justify-content: flex-start!important
}
.comment-clockIn {
    text-align: center;
    color: #606266;
    height: 26px;
    line-height: 26px;
    background: rgba(255,255,255,0.7);
    opacity: .85;
    border-radius: 13px;
    width: 70px;
    margin-left: 5px;
    cursor: pointer
}

后台主题设置-全局设置-自定义JS中添加：


/*评论打卡*/
function clockIn() {
    let time = (new Date).toLocaleTimeString();
    let clockInCon = '滴！贵宾卡！打卡时间：' + time + '，请上车的乘客系好安全带~';
    $(".joe_owo__target").val(clockInCon);
}

下载的文件上传到主题assets里css文件夹里：

此处内容需要评论回复后（审核通过）方可阅读。

后台外观设置-全局设置-自定义css添加代码：


<!-- 扫光引入开始 -->
<link rel="stylesheet" href="你的域名网址/usr/themes/这里也是按自己的填（joe|Joe-master）/assets/css/heylie.css">
<!-- 扫光引入结束 -->

实现Joe主题首页大图及文章大图设置

第一步：引入CSS

首先上传下载的css文件至网站目录（就是创建完网站的域名主目录）

然后在后台设置-全局设置-自定义里放入

<link rel="stylesheet" href="你的域名/heylie.min.css">

第二步：首页大图

位置
代码

修改 index.php 文件
文件目录 Joe主题文件/index.php
大概第25行代码下方，即：
<?php $this->need('public/header.php'); ?> 这行代码下方放入

options->title(); ?>

第三步：文章顶部大图

位置
代码

Joe/post.php
大概21行
<?php $this->need('public/header.php'); ?> 下方放入代码


<div class="HeaderImg" style="background: url(<?php echo _getThumbnails($this)[0] ?>) center;background-size:cover;">
                <div class="infomation">
                    <div class="title"><?php $this->title() ?></div>
                    <div class="desctitle">
                        <div class="item">
                <span class="text"><?php $this->date('Y-m-d'); ?></span>
                <span class="line"></span>
                <span class="text"><?php $this->commentsNum('%d'); ?> 评论</span>
                <span class="line"></span>
                <span class="text" id="Joe_Article_Views"><?php _getViews($this); ?> 阅读</span>
                <span class="line"></span>
                <span class="text" id="Joe_Article_Views"><?php _getAgree($this) ?> 点赞</span>
            </div>
                    </div>
                </div>
                <section class="HeaderImg_bottom">
                    <svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                        <defs>
                            <path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path>
                        </defs>
                        <g class="parallax">
                            <use xlink:href="#gentle-wave" x="48" y="0"></use>
                            <use xlink:href="#gentle-wave" x="48" y="3"></use>
                            <use xlink:href="#gentle-wave" x="48" y="5"></use>
                            <use xlink:href="#gentle-wave" x="48" y="7"></use>
                        </g>
                    </svg>
                </section>
            </div>

给Jeo博客主题的友链界面新增一个同意勾选

找到主题文件夹下friends.php
从开始位置选中到 need('public/article.php'); ?>
然后复制下面的代码覆盖：


<div id="Joe">
    <?php $this->need('public/header.php'); ?>
    <div class="joe_container">
      <div class="joe_main">
        <div class="joe_detail" data-cid="<?php echo $this->cid ?>">
          <?php $this->need('public/batten.php'); ?>
          <div class="form-container">
  <form id="conditionsForm">
       <h2 class="center-text">请勾选你符合的条件：</h2>
    <label>
      <input type="checkbox" name="condition[]" value="added_friend_link">
      <span>我已添加 沈丘 博客的友情链接</span>
    </label>

    <label>
      <input type="checkbox" name="condition[]" value="personal_blog"> 
      <span>我的链接主体为 个人，网站类型为博客</span>
    </label>

    <label>
      <input type="checkbox" name="condition[]" value="accessible_in_cn"> 
      <span>我的网站现在可以在中国大陆区域正常访问</span>
    </label>
  
    <label>
      <input type="checkbox" name="condition[]" value="accessible_fl"> 
      <span>我接受并同意本站相关规则及政策</span>
    </label>

    <label>
      <input type="checkbox" name="condition[]" value="compliant_laws">
      <span>网站内容符合中国大陆法律法规</span>
    </label>
    <p id="instructions" class="hidden">勾选后展示评论区发送申请</p>
  </form>
</div>
          <?php $this->need('public/article.php'); ?>


<style>
                        /* BLOG.HEYLIE.CN基础样式 */
                        body {
                            position: relative;
                            min-height: 100%;
                            background: var(--heo-background);
                            color: var(--heo-fontcolor);
                            font-size: 16px;
                            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
                            line-height: 2;
                            -webkit-tap-highlight-color: transparent;
                            margin: 0
                        }

                        .form-container {
                            max-width: 800px;
                            margin: auto;
                        }

                        .center-text {
                            text-align: center;
                        }

                        #conditionsForm {
                            margin-bottom: 20px;
                            font-size: 16px;
                            border: 1px solid #ccc;
                            padding: 15px;
                            background-color: #f9f9f9;
                            border-radius: 5px;
                        }

                        #conditionsForm label {
                            display: block;
                            margin-top: 10px;
                            cursor: pointer;
                        }

                        #conditionsForm input[type="checkbox"] {
                            margin-right: 8px;
                            vertical-align: middle;
                        }

                        #conditionsForm input[type="checkbox"]:checked+span {
                            color: green;
                            font-weight: bold;
                        }

                        #conditionsForm label:hover {
                            background-color: #e0e0e0;
                            padding-left: 5px;
                        }

                        #instructions {
                            text-align: center;
                            opacity: 0.5;
                            /* 默认透明度为0.5 */
                            transition: opacity 0.3s ease-in-out;
                        }

                        .hidden {
                            opacity: 0;
                            pointer-events: none;
                            /* 阻止鼠标事件 */
                        }
                    </style>


<script>
                        // 监听所有复选框的变化
                        document.querySelectorAll('#conditionsForm input[type="checkbox"]').forEach(function (checkbox) {
                            checkbox.addEventListener('change', checkConditions);
                        });

                        function checkConditions() {
                            // 获取所有的条件复选框
                            var conditions = document.getElementsByName('condition[]');
                            var allChecked = true;

                            // 检查是否有未选中的复选框
                            for (var i = 0; i < conditions.length; i++) {
                                if (!conditions[i].checked) {
                                    allChecked = false;
                                    break;
                                }
                            }

                            // 根据复选框的状态显示或隐藏评论区
                            var commentsSection = document.getElementById('comments');
                            commentsSection.style.display = allChecked ? 'block' : 'none';
                        }
                    </script>

## 说明：

生命不息，折腾不止，哎，就是玩儿......

## 本站环境：

PHP：8.0.2

Mysql：8.4.2
Typecho：1.2.1正式版
Joe：7.7.1
其他版本的PHP、Typecho和Joe不确定其可行性，请自行测试~

## 基础设置

这个其实不用写，安装Joe主题后去配置网站基础设置就好了。

### 开启gzip压缩

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ba1b24c2e7de3f30b45b7f18e465d10686" aria-expanded="true"><div class="accordion-toggle"><span style="">开启gzip压缩</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ba1b24c2e7de3f30b45b7f18e465d10686" class="collapse collapse-content"><p></p>

打开typecho目录下的 index.php，并在开头添加
`ob_start('ob_gzhandler');`

### robots.txt

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f8a4722a8218f7fd574b0f345b59509e12" aria-expanded="true"><div class="accordion-toggle"><span style="">robots.txt</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f8a4722a8218f7fd574b0f345b59509e12" class="collapse collapse-content"><p></p>

在网站根目录下创建并设置 robots.txt,方便搜索引擎爬虫爬取:

```java
User-agent: *
Allow: /*.html$
Allow: /usr
Allow: /*.png$
Allow: /*.jpg$
Allow: /*.jepg$
Allow: /*.gif$
Allow: /*.bmp$
Disallow: /admin/
Disallow: /install/
Disallow: /var/
Disallow: /config.inc.php
Disallow: /install.php
Disallow: /.js
Disallow: /.css
Disallow: /feed
Sitmap: 你的域名/sitemap.xml
```

可借助 你的域名/robots.txt 查看是否设置成功。之后在百度收录平台完成 robots.txt 的更新
<p></p></div></div></div>

## 美化

### 网站主题各种颜色修改

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-43f8a86d13f07060efd90382669d0b6c1" aria-expanded="true"><div class="accordion-toggle"><span style="">网站主题各种颜色修改</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-43f8a86d13f07060efd90382669d0b6c1" class="collapse collapse-content"><p></p>
位置：主题后台设置-全局设置-自定义CSS：

```css
body {
    --theme: #000000;
    --background: #ffffff;
    --main: #303133;
    --routine: #606266;
    --minor: #909399;
    --seat: #c0c4cc;
    --classA: #dcdfe6;
    --classB: #e4e7ed;
    --classC: #ebeef5;
    --classD: #f2f6fc;
    --radius-wrap: 10px;
    --radius-inner: 15px;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}
```

### 右上角搜索框文字修改

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5d52c0140c29c39d19af0c70968fbc1499" aria-expanded="true"><div class="accordion-toggle"><span style="">右上角搜索框文字修改</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5d52c0140c29c39d19af0c70968fbc1499" class="collapse collapse-content"><p></p>
修改文件，在主题目录Joe/public/header.php中，大概139行：
可将Search修改为任意字，比如“搜索”
大概138行：可修改默认显示字体，即可将搜索框中“请输入关键字...”修改为任意字。
<p></p></div></div></div>

### 头像呼吸灯

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-659b3e2d2e57aa429ae601bab320acca41" aria-expanded="true"><div class="accordion-toggle"><span style="">头像呼吸灯</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-659b3e2d2e57aa429ae601bab320acca41" class="collapse collapse-content"><p></p>
在主题后台设置-全局设置-自定义CSS里添加：

```java
/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar {
 border-radius: 50%;
 animation: light 4s ease-in-out infinite;
 transition: 0.5s;
}
.avatar:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
 0%{box-shadow: 0 0 4px #f00;}
 25%{box-shadow: 0 0 16px #0f0;} 
 50%{box-shadow: 0 0 4px #00f;}
 75%{box-shadow: 0 0 16px #0f0;} 
 100%{box-shadow: 0 0 4px #f00;}
}
```

### 文章目录树

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-00b9f99c46cdf96db5a7a3d78ad937ea86" aria-expanded="true"><div class="accordion-toggle"><span style="">文章目录树</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-00b9f99c46cdf96db5a7a3d78ad937ea86" class="collapse collapse-content"><p></p>
目前目录树的结构有很多，比如添加在页面左侧隐藏式的，或者是添加在文章左侧的。
这里采用的是添加在右侧栏当中的，随文章置顶的：
效果图：
![](https://tc.demius.tech/i/2024/10/07/6703f0cdce74e.webp)

首先，在public/aside.php文件中，添加如下内容，可以在作者卡片之后添加，不过具体想摆放的位置看自己的设计，当前设计是放在作者卡片之后。

```php

      <?php if ($this->is('post')) : ?>
          <section class="joe_aside__item catalogue">
              <div class="joe_aside__item-title">
                  <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="2084"
                       width="18" height="18">
                      <path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
                            p-id="2085"></path>
                  </svg>
                  <span class="text">目录</span>
                  <span class="line"></span>
              </div>
              <div class="joe_aside__item-contain">
                  <ul class="catalogue-items">
                  </ul>
              </div>
          </section>
      <?php endif; ?>
```

</div><div role="tabpanel" id='tabs-6d4fc6b603db736bad6773786be2e1dc541' class="tab-pane fade  ">

```java
function get_catalogs(article_content) {
        const titleTag = ["H1", "H2", "H3"];
        let titles = [];
        article_content.childNodes.forEach((e, index) => {
            const id = "header-" + index;
            if (titleTag.includes(e.nodeName)) {
                titles.push({
                    id: id,
                    text: e.textContent,
                    level: Number(e.nodeName.substring(1, 2))
                });
                e.setAttribute("id", id);
            }
        });
        return titles;
    }

// 找到目录容器
    article_content = document.querySelector('.joe_detail__article');
    if (article_content) {
        var catalog = get_catalogs(article_content);
        if (catalog.length == 0) {
            // 无目录，隐藏
            $('.catalogue').hide();
        } else {
            let catalogue = '';
            for (let i = 0; i < catalog.length; i++) {
                let node = '<li class="catalogue-item"><a href="javascript:;" id="to-' + catalog[i].id + '" to="' + catalog[i].id + '" title="' + catalog[i].text + '">' + catalog[i].text + '</a>';
                if (i == catalog.length - 1) {
                    catalogue += node + '</li>'
                } else {
                    if (catalog[i + 1].level == catalog[i].level) {
                        catalogue += node + '</li>';
                    } else if (catalog[i + 1].level > catalog[i].level) {
                        catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>';
                    } else {
                        if (catalog[i + 1].level - catalog[i].level == -2) {
                            catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>';
                        } else {
                            catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>';
                        }

}
                }
            }
            document.querySelector('.catalogue-items').innerHTML = catalogue;
            $('.catalogue-item > a').on('mouseenter', function () {
                $(this).parent().addClass('_active');
            });
            $('.catalogue-item > a').on('mouseleave', function () {
                $(this).parent().removeClass('_active');
            });
            // 根据目录定位到标题
            $('.catalogue-item > a').on('click', function () {
                document.removeEventListener("scroll", autoActive);
                $('.catalogue-item').removeClass('active');
                $(this).parent().addClass('active');
                let aim = document.querySelector('#' + $(this).attr('to'));
                let aim_top = aim.offsetTop;
                let aim_h = aim.clientHeight;
                let above_h = document.querySelector('.joe_header__above').clientHeight;
                let below_h = document.querySelector('.joe_header__below').clientHeight;
                let offset = 0;
                let case1 = !document.querySelector('.joe_header__above').className.includes('active');
                let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top;
                if (case1 && case2) {
                    offset = above_h;
                }
                window.scrollTo({
                    top: aim_top - offset - below_h - 10,
                    behavior: 'smooth'
                });
                setTimeout(() => {
                    document.addEventListener("scroll", autoActive);
                }, 500);
            });
            if (catalog.length)
                $('.catalogue-item').eq(0).addClass('active');
            // 目录侧标题自动定位
            let autoActive = function () {
                let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度
                for (let i = 0; i < catalog.length; i++) {
                    let offset = 0;
                    let h_id = '#' + catalog[i].id;
                    let h_offset = document.querySelector(h_id).offsetTop;
                    let above_h = document.querySelector('.joe_header__above').clientHeight;
                    let below_h = document.querySelector('.joe_header__below').clientHeight;

if (!document.querySelector('.joe_header').className.includes('active'))
                        offset = above_h;
                    if (h_offset + below_h + offset + 10 >= html_top) {
                        $('.catalogue-item').removeClass('active');
                        if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) {
                            //还没到下一个标题
                            i--;
                        }
                        $('#to-' + catalog[i].id).parent().addClass('active');
                        break;
                    }
                }
            };
            document.addEventListener("scroll", autoActive);
        }
    } else {
        // 不是文章，隐藏目录
        $('.catalogue').hide();
    }
```

</div><div role="tabpanel" id='tabs-5aad314db48364771ae196725fad1162702' class="tab-pane fade  ">
            
在主题后台设置-全局设置-自定义css中：加入如下样式：

```java
.joe_aside__item.catalogue {
    z-index: 999;
    position: sticky;
    top: 60px;
    margin-bottom: 15px;
    transition: top 0.35s;
    background: var(--background)
}

.joe_aside__item.catalogue .joe_aside__item-contain {
    padding: 0;
    margin: 0 0 0 10px;
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items {
    border-left: 1px solid var(--classC);
    border-bottom: 1px solid var(--background);
    padding: 15px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item {
    margin: 0;
    padding: 0;
    line-height: 26px;
    font-size: 16px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a {
    position: relative;
    display: block;
    line-height: 26px;
    color: var(--main);
    transition: color 0.5s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a:hover {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a {
    color: var(--theme)
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active > a::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    width: 2px;
    height: 26px;
    background-color: var(--theme);
    transition: height 0.35s
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2.catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 14px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -34px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active > a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active > a::before {
    left: -51px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item {
    font-size: 12px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul {
    padding-left: 17px
}

.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul {
    display: block;
    list-style-type: disc
}
```

</div><div role="tabpanel" id='tabs-91d7c24136013aa5053b39096a484b1a843' class="tab-pane fade  ">
            
其实上述三步已经可以实现文章目录了，此时刷新页面，在右侧博主头像吓应该可以看到目录了。
但是上述直接添加可能会导致文章在滑动的时候，目录下面的其他内容卡片没有固定。
即在public/aside.php文件中将作者卡片下面的其他卡片用section标签包裹起来，修改如下：

```java
<section class="sticky_layout">
除作者卡片之外的卡片内容都包裹在这个标签当中
</section>
```

然后再修改刚刚第三步的CSS：

```java
section.sticky_layout {
    position: sticky;
}

.joe_aside__item.catalogue {
    z-index: 999;
    margin-bottom: 15px;
    transition: top 0.35s;
    background: var(--background)
}