一直想搞一个动态博客，但是没有找到什么好看的（好看的都收费去了），发现了Joe主题还挺好的，于是最近开始在对typecho的Joe主题进行魔改，本教程主要记录自己魔改的一些内容，后续也都将会记录。至于这个主题魔改后的效果可以查看本域名下面的另一个站点予星辰。

这里主要是为了解决Joe7.7.1主题不支持目录的问题，目前只支持H1、H2、H3级目录。

开始

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--  仅在文章生效，如果需要页面，下面第一行判断加上 || $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那就不用管了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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文件中加入如下样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.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
}

上述直接添加可能会导致文章在滑动的时候，下面的东西没有固定，所以我们需要将作者卡片下面的其他卡片用section包裹起来，例如如下

1
2
3
<section class="sticky_layout">
除作者卡片之外的卡片
</section>

然后更改成如下css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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文件中的头部滚动部分的函数进行修改，替换成如下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
        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;
            });
        }
    }

主要替换的内容是将原本的最后一个卡片不滚动，改成除了作者卡片其他不滚动。