Typecho 主题优化增加文章导读目录功能

时隔两年再度回看 Akina 主题，已更新到V4版本，但本站主题是基于 V2 二次开发，已经修修改改许多
值得注意的是原作者 V4 版本中集成了一个文章导读功能，非常nice，于是我移植了过来
但是！！！不兼容移动端，于是再度二次开发。

引言

不想折腾的可以直接用另一个方式，使用 插件 形式实现文章导读功能，或者开源项目：自动目录导读 AutoCJS

本文主要探讨的是基于主题形式的优化文章导读功能。

效果图

两个模式

技术分析

1. 主题中目录导读功能是由 js 进行渲染
2. 目录导读展示由 CSS 进行适配

在 style.css 关键部分处使用媒体查询屏蔽了分辨率低于1380x设备(即是移动端设备)显示目录

@media(max-width: 1380px){
  #toc-container {
    display: none;
  }
}

原作者估计是考虑移动端设备显示效果不佳，做了屏蔽处理
那么如果需要调整也即是对 CSS 部分进行调整
考虑到导读栏目在移动设备的显示会遮住正文内容，于是需要做层级调整

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1; /* 层堆叠属性 */
}

属性定义及使用说明

| 默认值 | auto |
| 继承 | no |
| 版本 | CSS2 |
| JavaScript | object.style.zIndex="1" |

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

思路及其实现

• [整体实现] 在文章正文内容中时间显示右侧处新增一个 button 实现移动端/PC端的点击切换开关导读菜单，使用 JQuery 进行事件绑定。当 button Click 则显示文章导读菜单，这样便可实现移动端的手动切换显示。
• [技术细节] Click 时往文章导读 class toc-container 新增 style 样式使得其显示；关闭时将新增样式置空，使用默认 css 样式

display: inline;
z-index: 100;
background-color: white;
left: 0;
right: 0;

• [适配暗夜模式] JQuery 监听系统是否为暗夜模式以更改导读菜单栏背景色，切换透明度显示，模拟遮罩效果
• [代码实现] 见下文

CSS布局样式

推荐放 style.css(可选)

/*文章目录*/
.cateBar{
    padding: 10px;
    -webkit-transition: font-size 0.25s linear, width 0.25s linear;
    -moz-transition: font-size 0.25s linear, width 0.25s linear;
    transition: font-size 0.25s linear, width 0.25s linear;
}

导读菜单切换监听

推荐放 footer.php

<script type = "text/javascript">
    /**
    * 
    * 导读栏 | 兼容移动端
    * @author Suroy(https://suroy.cn)
    *
    */
    let isGuideListen = false;
    $(document).ready(function(){
      $("#guide-toggle").click(function(){
        let isOpened = $(this).children("img").attr('src').indexOf("hide") != -1;
        let imgSrc = "<?php echo theurl?>images/" + (isOpened ? "guide_show.svg":"guide_hide.svg");
        $(this).children("img").attr('src', imgSrc);
        let setColor = ( window.matchMedia('(prefers-color-scheme: dark)').matches ) ? "#171717":"#ffffff";
        console.info("导读菜单:", isOpened);
        let styles = isOpened ? "display: inline; z-index: 100; left: 0; right:0; background-color: " + setColor + "c9;" : "";
        $("#toc-container").attr("style", styles);
        isGuideListen = true; //启用导读监测重置
      });
      
    });
    
    //导读栏状态重置
    function guideInit(){
        if(isGuideListen && $("#toc-container").is(":hidden")){
            let imgSrc =  $("#guide-toggle").children("img").attr('src');
            $("#guide-toggle").children("img").attr('src', imgSrc.replace('show','hide'));
            isGuideListen = false;
        }
    }
    
    function show_runtime()
    {
        guideInit();//定时轮询
        }
</script>

功能实现

写入到 post.php 文章展示页面

        <header class="entry-header">
        <!-- 标题输出 -->
        <h1 class="entry-title"><?php $this->title() ?></h1>
        <hr>
        <div class="breadcrumbs">    
            <div itemscope itemtype="http://schema.org/WebPage" id="crumbs">最后更新时间：<?php echo date('Y年m月d日' , $this->modified);?>
            
            <!-- 目录展开 -->
            <a id="guide-toggle" style="float: right; height:21px; width:21px" onClick="javascript:;" aria-label="guide Toggle"title="打开导读菜单"><img src="<?php echo theurl?>images/guide_hide.svg" alt="打开导读菜单"></a>
            </div>
        </div>    
        </header>

参考文献

更新深色模式主题并支持 prefers-color-scheme
CSS.z-index

致谢

原作者：Akina for typecho 始作者：Akina