#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);

#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);
        });