Alist小记

2022-10-27 Thu Views 教程方法708字4 min read繁

一段时间没看 Alist 已经更新到v3版本了，UI变得更现代化，右上角去除了直链复制和文件搜索，右下角侧边栏统合到了更多里。后台似乎也变了不少。

但是和v2不兼容，不能直接升级。还是继续用v2吧🤣。

官网都升级了，自己的那不得也美化一下。

折腾了一天（~~找了一天背景图~~），最后还是发现纯白最好看。。

全局字体试了五六种，最后改为霞鹜文楷 ^[1]，品位一下上去了🤓：

<!--引入字体-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<style>
/*字体霞鹭文楷*/
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}
</style>

去掉主列表框架，实现更好的嵌入效果^[2]：

<!--全白无框-->
<style>
.chakra-ui-light{
  background-color: #FFFFFF;
}
.main-box {
  border-radius: 15px !important;
  box-shadow: unset !important;
}
.chakra-ui-light .main-box {
  background-color: rgba(255,255,255,0.9) !important;
}
.chakra-ui-light .readme-box {
  background-color: rgba(255,255,255,0.9) !important;
}
.readme-box {
  border-radius: 15px !important;
  box-shadow: unset !important;
}
</style>

加了一句哲学、文学以及诗词类的一言：

<p id="hitokoto" align="center">:D 获取中...</p>
   <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>

<script>
  fetch('https://v1.hitokoto.cn/?c=k&c=d&c=i')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById('hitokoto');
      hitokoto.innerText = data.hitokoto; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

底部加了个不大起眼的支付宝红包弹出按钮：

 <style>
    /*弹出*/
    .footer_flex { width: 88px; height: 29px; background-color: #e1e1e1; border-radius: 12%; cursor: pointer; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#191919; font-size:12px; }
    .footer_flex:hover { background-color: #e1e1e1; }
    /*top*/
    .footer_flex:hover .flex-footer { display: block; }
    .footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px #e1e1e1; border-radius: 8px; width: 420px; height: 604px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 5px; background: #e1e1e1; display: none; }
    .flex-footer input{vertical-align:middle; margin-bottom:3px; *margin-bottom:3px;}
    
    </style>
    <script language="javascript" type="text/javascript">
	function zfb(){
     var obj=document.getElementById("ewm");
	 obj.src="http://tuchuang.azad.asia/imgs/2022/10/b1af5dc30bfdca53.jpg";
	};
	
	</script> 
   <div align="center">
    <div class="footer_flex" >
        
        <div class="flex-footer">
        <img id="ewm" src="http://tuchuang.azad.asia/imgs/2022/10/b1af5dc30bfdca53.jpg" width="413px" height="599px">
        
		<div style="height:40px; background:rgba(0,0,0,0);"></div>
        </div>
    <span class="font-theme text-base" x-text="shang"><font size="2">💰 领个红包</font></span>
    </div>

最后突发奇想加了 valine ，视觉效果似乎还不错：

放上地址：