alist如何设置默认为图片布局成？
摘要：前言: 因为做了一个相册web访问页,使用Alist访问共享图库,但alist默认的布局为"列表视图",用户访问时需要手动切换"图片视图&quot
前言:
因为做了一个相册web访问页,使用Alist访问共享图库,但alist默认的布局为"列表视图",用户访问时需要手动切换"图片视图"才能很好的预览图片,但很多用户跟本不懂如何切换,且手动切换也有些麻烦.
所以我希望所有用户访问时默认的视图是”图片视图“，而不是默认的”列表视图“。在网上搜索无果,要么需要手动,要么需要改源代码.于是自己琢磨它实现默认布局的方式,找到了最佳的解决办法.(最后一部分有介绍)
先说说手动方式:
1,手动指定当前目录的视图
2,手动指定全局默认布局:(仅针对当前浏览器)
再说说改源代码方式:
网友提供的方法,在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页面切换默认视图时,会自动存储相应的值在本地,那我们就可以通过代码,直接将这个值改成我们需要的布局
比如:
那我们可以通过alist自带的自定义头部,使用js代码将默认值自动注入到访问者的浏览器,实现我们想实现的默认布局.(相当于帮用户选择了默认视图)
最终实现代码供参考:
网格视图:<script>localStorage.setItem('global_default_layout', 'grid');</script>
图片视图:<script>localStorage.setItem('global_default_layout', 'image');</script>