Alist 样式美化
发表于
浏览量2629
评论数3
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
心情:要放五一了,但好像并没有很开心,或者不开心
留下你的评论吧
http(s)://