找回密码
 立即注册
首页 业界区 业界 alist如何将默认布局设置为图片布局

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

筒霓暄 3 小时前
前言:
因为做了一个相册web访问页,使用Alist访问共享图库,但alist默认的布局为"列表视图",用户访问时需要手动切换"图片视图"才能很好的预览图片,但很多用户跟本不懂如何切换,且手动切换也有些麻烦.
 
所以我希望所有用户访问时默认的视图是”图片视图“,而不是默认的”列表视图“。在网上搜索无果,要么需要手动,要么需要改源代码.于是自己琢磨它实现默认布局的方式,找到了最佳的解决办法.(最后一部分有介绍)
先说说手动方式:
指定目录手动:
1.png

全局手动:
2.png

再说说改源代码方式:
网友提供的方法,在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');
3.png

那我们可以通过alist自带的自定义头部,将上面的js代码自动注入到访问者的浏览器实现我们想实现的默认布局.
4.png

 
最终代码:

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

相关推荐

您需要登录后才可以回帖 登录 | 立即注册