alist如何将默认布局设置为图片布局

前言:

因为做了一个相册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>