Alist 样式美化

关于alist，你可以点击这里去了解~

这里分享一些主观上美化样式与自定义内容的东西，适用于v3版本~

预览图如下：

Github地址：alist-customize，你可以进行查阅或者二次开发，希望对你有所帮助。

预览地址：Kasuie の 库

好了以下就主要讲讲怎么使用。

使用

请注意下方资源链接中version关键字，需要替换成具体的版本号，你可以在仓库右侧releases 处查看所有版本号。

在 alist后台管理-设置-全局，自定义头部写入css文件：

<link href="https://cdn.jsdelivr.net/gh/kasuie/alist-customize@version/v3/css/index.min.css" rel="stylesheet" type="text/css" />

这个文件包含整体样式的调整优化，如果你不需要对站点底部特殊自定义，你可以选择仅引入该文件，不引入后面的js文件。

自定义内容处写入：

<div id="footer-data" style="display: none;">
    [
       {"url": "https://github.com", "text": "Github", "icon": 0, "target": "_blank"}
       {/* 根据自己需要，参照上面这个示例数据填写即可 */}
    ]
<div>

<script src="https://cdn.jsdelivr.net/gh/kasuie/alist-customize@version/v3/js/index.min.js"></script>

这部分目前只是对网站下方footer做自定义用的，也就是这部分：

特别注意，数组对象key需要双引号，数组最后一个元素后面没有逗号，这是标准格式，不然识别不出来。

参数说明：

{
  url: 字符串，必填，代表 a 标签的跳转链接 
  text: 字符串，必填，a 标签的文本内容 
  icon: 数字，非必填，是否展示链接的 icon
  target: 字符串，非必填，a 标签的 target 属性
}

根据自己的需要参照调整数组里的对象，其他地方保持不变即可，你不需要自定义，引入 css 文件就好。

以下是我的填写示例，可参考：

关于主题

内置主题色为rgb(100, 209, 226), 如需要修改其他颜色，修改index.css文件内的变量即可，修改--mio-primary, --mio-primary50这个两个变量一般就能满足情况，注意需要使用rgb通道值。

内置背景图使用图库为：Mio 图库，你可以在这里查看相关文档。如果你有更好的图库，也可以替换掉index.css文件中body::before的background-image的值为你想要的就好了。

写在最后；

地点： 成都

时间: 2024-04-30 15:29:57

心情：要放五一了，但好像并没有很开心，或者不开心