前言:
因为做了一个相册web访问页,使用Alist访问共享图库,但alist默认的布局为"列表视图",用户访问时需要手动切换"图片视图"才能很好的预览图片,但很多用户跟本不懂如何切换,且手动切换也有些麻烦.
所以我希望所有用户访问时默认的视图是"图片视图"，而不是默认的"列表视图"。在网上搜索无果,要么需要手动,要么需要改源代码.于是自己琢磨它实现默认布局的方式,找到了最佳的解决办法.(最后一部分有介绍)
先说说手动方式:
指定目录手动:
全局手动:
再说说改源代码方式:
网友提供的方法,在alist-web的layout.tsx中添加这个:
onMount(() => {
const currentUrl = window.location.href;
const targetUrl_1 = "your_url_1";
const targetUrl_2 = "your_url_2";
if (currentUrl === targetUrl_1) {
setLayout('image');
}
if (currentUrl === targetUrl_2) {
setLayout('list');
}
});
最后说说我找到的方法:
在alist页面切换默认视图时,会自动存储相应的值在本地,那我们就可以能过代码,直接将这个值改成我们需要的布局
比如:
localStorage.setItem('global_default_layout', 'image');
localStorage.setItem('global_default_layout', 'grid');
那我们可以通过alist自带的自定义头部,将上面的js代码自动注入到访问者的浏览器实现我们想实现的默认布局.
最终代码:<script>localStorage.setItem('global_default_layout', 'image');</script>