Butterfly魔改:文章页添加pagemap页面地图导航(骨架屏侧边栏)
白夜样式展示
引入pagemap.min.js
你可以直接引用npm镜像
的地址也可以向我一样将其下载下来放到本地使用。项目地址
因为在post
页面引入pagemap.min.js
会出现各种问题如:post页面script代码先加载而引入代码还在加载中导致找不到函数或者是直接进入post界面加载,返回主页后重新进入post界面不加载,所以我们直接将引用放置在主题的inject
里或者是所有界面通用的nav.pug
文件里
方法一:
inject:
head:
- <script data-pjax src = "/js/custom/pagemap.min.js"></script>
bottom:
方法二
打开[themes]\layout\includes\header\nav.pug
文件,在其中最后添加如下内容:
nav#nav
......
//修改成自己的引用位置
script(data-pjax src=url_for('/js/custom/pagemap.min.js'))
添加pagemap页面地图导航
打开[themes]\layout\post.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样式
#map {
position: fixed;
top: 0;
right: 0;
width: 84px;
height: 100%;
z-index: 100;
}
此时,pagemap页面地图导航就创建完成了,是一直显示在你的页面上,假如你需要将其隐藏,只有在鼠标移动到上面才显示,你可以修改css,修改如下:
/*注意合并规则*/
#map {
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
#map:hover {
opacity: 1;
}
滚动时显示pagemap页面地图导航
假如你已经设置了其隐藏,但是想在滚动的时候显示出来,你可以修改post.pug
文件,如下:
打开[themes]\layout\post.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);
});
这样你就得到了一个在静止时隐藏,滚动时显示的页面地图导航啦