---
title: Alist主题
tags: Alist主题
categories: Alist
abbrlink: 64793
date: 2022-06-06 19:35:31 
---
# AlistCSS

## 调用

请使用在alist后台的==“自定义头部”==内加入以下内容来使用主题。

``` html	
<link rel="stylesheet" href="%CDNurl%/AlistCSS/css/%themename%" type="text/css">
```

> 注意：
>
> 1. ==%CDNurl%==在仓库首页查询
> 2. ==%themename%==对应为css文件夹下的文件。

## 高级

你可以使用css变量来进行自定义，方法如下：

1. 按照调用步骤添加link标签

   1. .添加如下内容
      ``` html
      <style>
          :root{
              %vars%
          }
      </style>
      ```

      ==%vars% 对应内容在对应主题下的css文件中查询。==

## 示例

以下是一个完整示例,其中主题为def.css，使用加速域名https://cdn.jsdelivr.net/gh/shixinboy/cdn，版本为**2.3.0**

``` html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shixinboy/cdn@2.3.0/alistCSS/css/def.min.css" type="text/css">
<style>
    :root{
    /*背景模糊度*/
    --BG_blur:1em;

	/*图标颜色，默认与字体颜色一致*/
	--Icon_color:var(--FT_color);
	/*背景色*/
	--BG_color_G:rgba(255,255,255,0.5);
	/*标题栏背景色，留空与背景色一致*/
	--BG_color_T:rgba(66, 170, 255, 0.5);

	/*圆角大小:header左上角右上角，footer左下角和右下角*/
	--BOR_Radius:8px;
	/*模糊背景的圆角大小*/
	--BG_radius:8px;
	/*item的圆角*/
	--Item_radius:8px;

	/*字体颜色*/
	--FT_color:black;
	/*上下边距*/
	--BG_margin_T_B:2em;
	/*内边距*/
	--BG_padding_G:0px;

	/*阴影设置,数值对应如下*/
	--BG_shadow:
		/*x偏移 y偏移 模糊度 颜色*/
		0em 0em 2em rgba(0, 0, 0, 0.5);
	/*main-box的hover样式*/
	/*颜色*/
	--BG_color_ListItem_HOVER:rgba(0 ,0 ,0, 0.3);
	/*阴影，默认无 修改参照 --BG_shadow 条目*/
	--BG_shadow_HOVER:none;
    }
</style>       
```

## 更新内容

参见仓库readme文件

---

<center>
    Powered By <a href="https://shixin.vercel.app">思卿长安归</a>
    <br>
    Copyright © 2021 - 2023 思卿长安归 All Rights Reserved
</center>


<center></center>