kasuie page cover

Alist 样式美化

发表于

浏览量2629

评论数3

Alist 样式美化

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

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

预览图如下:

preview

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

预览地址:Kasuie の 库Kasuie の 库

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

使用

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

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做自定义用的,也就是这部分:
footer

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

参数说明

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

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

以下是我的填写示例,可参考:
demo

关于主题

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

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

C.C.

写在最后;

地点: 成都

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

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

猫
最后修改:2024年04月30日

留下你的评论吧

http(s)://

回到顶部