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

前言:

因为做了一个相册web访问页,使用Alist访问共享图库,但alist默认的布局为"列表视图",用户访问时需要手动切换"图片视图"才能很好的预览图片,但很多用户跟本不懂如何切换,且手动切换也有些麻烦.

 

所以我希望所有用户访问时默认的视图是”图片视图“，而不是默认的”列表视图“。在网上搜索无果,要么需要手动,要么需要改源代码.于是自己琢磨它实现默认布局的方式,找到了最佳的解决办法.(最后一部分有介绍)

先说说手动方式:

指定目录手动:

全局手动:

再说说改源代码方式:

网友提供的方法,在alist-web的layout.tsx中添加这个:

/* by 01130.hk - online tools website : 01130.hk/zh/txtcount.html */   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页面切换默认视图时,会自动存储相应的值在本地,那我们就可以能过代码,直接将这个值改成我们需要的布局

比如:

/* by 01130.hk - online tools website : 01130.hk/zh/txtcount.html */ localStorage.setItem('global_default_layout', 'image');

localStorage.setItem('global_default_layout', 'grid');

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

 

最终代码:<script>localStorage.setItem('global_default_layout', 'image');</script>

刘飞博客：http://www.cnblogs.com/colinliu/
博客版权：本文以学习、记录、分享为目的。欢迎大家转载，但务必注明原文地址，谢谢合作！