样式展示

引入pagemap.min.js

你可以直接引用npm镜像的地址也可以向我一样将其下载下来放到本地使用。项目地址

因为在post页面引入pagemap.min.js会出现各种问题如：post页面script代码先加载而引入代码还在加载中导致找不到函数或者是直接进入post界面加载，返回主页后重新进入post界面不加载，所以我们直接将引用放置在主题的inject里或者是所有界面通用的nav.pug文件里

方法一：

yml

inject:
  head:
    - <script data-pjax src = "/js/custom/pagemap.min.js"></script>
  bottom:

方法二

打开[themes]\layout\includes\header\nav.pug文件,在其中最后添加如下内容:

pug

nav#nav
......
//修改成自己的引用位置
script(data-pjax src=url_for('/js/custom/pagemap.min.js'))

添加pagemap页面地图导航

打开[themes]\layout\post.pug文件,在其中最后添加如下内容:

pug

#post
.
.
.
    //在post的下一级里，注意缩进
    canvas#map
    script(data-pjax defer).
        var mapElement = document.querySelector('#map');
        var colorScheme = window.getComputedStyle(document.body).getPropertyValue('color-scheme');
        var isDarkMode = colorScheme.trim() === 'dark';

        var map = {
            viewport: null,
            styles : {
                'h1,a': 'rgba(0,0,0,0.10)',
                'h2,h3,h4': 'rgba(0,0,0,0.08)',
                'aside-content,#footer,post-bg': 'rgba(0,0,0,0)'
            },
            back: isDarkMode ? 'rgba(102,204,255,0.18)' : 'rgba(102,204,255,0.02)',
            view: isDarkMode ? 'rgba(102,204,255,0.45)' : 'rgba(102,204,255,0.05)',
            drag: isDarkMode ? 'rgba(102,204,255,0.90)' : 'rgba(102,204,255,0.10)',
            interval: null
        };

        pagemap(mapElement, map);

这里面的颜色你可以自己调试出适合自己网站的颜色,我的夜间模式的颜色调试的不是很好

添加css样式

css

#map {
    position: fixed;
    top: 0;
    right: 0;
    width: 84px;
    height: 100%;
    z-index: 100;
}

此时，pagemap页面地图导航就创建完成了，是一直显示在你的页面上，假如你需要将其隐藏，只有在鼠标移动到上面才显示，你可以修改css，修改如下：

css

/*注意合并规则*/
#map {
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}
#map:hover {
    opacity: 1;
}

滚动时显示pagemap页面地图导航

假如你已经设置了其隐藏，但是想在滚动的时候显示出来，你可以修改post.pug文件，如下：
打开[themes]\layout\post.pug文件，在最后面添加

pug

#post
.
.
.
    //在post的下一级里，注意缩进,可以去除script(data-pjax defer).将其放入到上面的script里，注意缩进
    script(data-pjax defer).
        mapElement.addEventListener('mouseover', function() {
            mapElement.style.opacity = '1';
            mapElement.style.pointerEvents = 'auto';
        });
        mapElement.addEventListener('mouseout', function() {
            mapElement.style.opacity = '0';
            mapElement.style.pointerEvents = 'none';
        });
        var scrollTimeout;
        window.addEventListener('scroll', function() {
            var scrollPosition = window.scrollY || document.documentElement.scrollTop;
            clearTimeout(scrollTimeout);
            if (scrollPosition > 100) {
                mapElement.style.opacity = '1';
                mapElement.style.pointerEvents = 'auto';
            } else {
                mapElement.style.opacity = '0';
                mapElement.style.pointerEvents = 'none';
            }
            scrollTimeout = setTimeout(function() {
                mapElement.style.opacity = '0';
                mapElement.style.pointerEvents = 'none';
            }, 1000);
        });

这样你就得到了一个在静止时隐藏，滚动时显示的页面地图导航啦

Butterfly魔改:文章页添加pagemap页面地图导航（骨架屏侧边栏）