IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    Joe主题引入文章目录，非插件版本

    JayHrn发表于 2023-12-19 09:35:28
    love 0

    一直想搞一个动态博客，但是没有找到什么好看的（好看的都收费去了），发现了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;
                });
            }
        }

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



沪ICP备19023445号-2号
友情链接