修改关于页面细节样式

detailed：
1.修改关于页面中十年之约的进度条的圆角样式
2.修改关于页面中卡片“banner-button-group”的位置

README.md

@@ -3,11 +3,12 @@
 <img width="100px" src="https://api.minio.yyds.pink/moony/files/2024/04/halo-theme-hao-sbxqdmuv.png">
 <!-- 主题名称 -->
 <h1>Halo-Theme-Hao</h1>
+</div>
 
 ## 🔥 预览
 
-|    站点名称    |          站点地址          |
+|    站点名称     |          站点地址         |
-|:----------:|:----------------------:|
+|:--------------:|:------------------------:|
 | 小小笔记大大用处 |   https://blog.uptoz.cn  |
 
 

settings.yaml

@@ -750,8 +750,9 @@ spec:
           label: 爱发电赞助
           value:
             powerLink: /
-            url: https://api.afdian.cnkj.site/api/creator/get-top-sponsors?user_id=
+            url: https://afdian.net/api/open/query-sponsor
             userId: 
+            apiToken:
             showNum: 3
           children:
             - $formkit: url
@@ -763,6 +764,9 @@ spec:
             - $formkit: text
               name: userId
               label: 用户ID
+            - $formkit: text
+              name: apiToken
+              label: API-Token
             - $formkit: number
               name: showNum
               label: 最大展示条数

templates/assets/css/tenyear.css

@@ -1,87 +1,91 @@
 .timeline {
-    width: 100%;
+	width: 100%;
-    height: 20px;
+	height: 20px;
-    background-color: var(--heo-background);
+	background-color: var(--heo-background);
-    position: relative;
+	position: relative;
-    overflow: hidden;
+	overflow: hidden;
-    margin-bottom: 20px;
+	margin-bottom: 20px;
-    border-radius: 0.5rem;
+	border-radius: 1.5rem;
-    height: 2.5rem;
+	height: 2.5rem;
 }
 
 .progress {
-    width: 0;
+	width: 0;
-    height: 100%;
+	height: 100%;
-    background-color: var(--heo-main);
+	background-color: var(--heo-main);
-    position: absolute;
+	position: absolute;
-    animation: progressAnimation 2s linear forwards;
+	animation: progressAnimation 2s linear forwards;
-    animation-delay: -0.1s;
+	animation-delay: -0.1s;
-    border-radius: 0.5rem
+	border-radius: 1.5rem
 }
 
 .past-time {
-    width: 2px;
+	width: 2px;
-    height: 20px;
+	height: 20px;
-    background-color: #3498db;
+	background-color: #3498db;
-    position: absolute;
+	position: absolute;
-    transform-origin: left;
+	transform-origin: left;
-    animation: pastTimeAnimation 3s linear forwards;
+	animation: pastTimeAnimation 3s linear forwards;
 }
 
 .percentage-label {
-    position: absolute;
+	position: absolute;
-    left: 0;
+	left: 0;
-    font-size: 14px;
+	font-size: 14px;
-    color: var(--heo-card-bg);
+	color: var(--heo-card-bg);
-    font-weight: bold;
+	font-weight: bold;
-    top: 10px;
+	top: 10px;
-    white-space: nowrap;
+	white-space: nowrap;
-    transition: left 0.5s linear;
+	transition: left 0.5s linear;
-    visibility: hidden;
+	visibility: hidden;
 }
 
 .time-labels {
-    display: flex;
+	display: flex;
-    justify-content: space-between;
+	justify-content: space-between;
-    width: 100%;
+	width: 100%;
 }
 
 .time-labels>div {
-    font-size: 14px;
+	font-size: 14px;
-    color: var(--heo-fontcolor);
+	color: var(--heo-fontcolor);
 }
 
 @keyframes progressAnimation {
-    0% {
+	0% {
-        width: 0;
+		width: 0;
-    }
+	}
-    100% {
+
-        width: var(--progress-percentage, 0);
+	100% {
-    }
+		width: var(--progress-percentage, 0);
+	}
 }
 
 @keyframes pastTimeAnimation {
-    0% {
+	0% {
-        transform: scaleX(0);
+		transform: scaleX(0);
-    }
+	}
-    100% {
+
-        transform: scaleX(var(--past-time-percentage, 0));
+	100% {
-    }
+		transform: scaleX(var(--past-time-percentage, 0));
+	}
 }
 
 .timeline:hover {
-    animation: btn31-eff 3s linear infinite;
+	animation: btn31-eff 3s linear infinite;
-    cursor: pointer;
+	cursor: pointer;
 }
 
 @keyframes btn31-eff {
-    0% {
+	0% {
-        box-shadow: 0 0 2px var(--heo-main);
+		box-shadow: 0 0 2px var(--heo-main);
-    }
+	}
-    50% {
+
-        box-shadow: 0 0 40px var(--heo-main);
+	50% {
-    }
+		box-shadow: 0 0 40px var(--heo-main);
-    100% {
+	}
-        box-shadow: 0 0 2px var(--heo-main);
+
-    }
+	100% {
+		box-shadow: 0 0 2px var(--heo-main);
+	}
 }

templates/assets/js/halo.js

@@ -18,7 +18,6 @@ let halo = {
 		var e = document.querySelector("link[data-code-theme=light]"),
 			o = document.querySelector("link[data-code-theme=dark]");
 		(o || e) && ("light" === t ? (o.disabled = !0, e.disabled = !1) : (e.disabled = !0, o.disabled = !1))
-
 	},
 
 	/**
@@ -32,7 +31,6 @@ let halo = {
 
 		if (!Prism.plugins.toolbar) {
 			console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');
-
 			return;
 		}
 
@@ -322,7 +320,8 @@ let halo = {
 					'limit': '100'
 				});
 
-				fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/v2/stats/latest_comments?' + queryParams.toString(),
+				fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/v2/stats/latest_comments?' + queryParams
+						.toString(),
 						statheaderList)
 					.then((e => e.json())).then((({
 						data: t
@@ -375,12 +374,64 @@ let halo = {
 	},
 
 	getTopSponsors() {
-		var user_id = GLOBAL_CONFIG.source.power.userId
+		var user_id = GLOBAL_CONFIG.source.power.userId;
-		var show_num = GLOBAL_CONFIG.source.power.showNum
+		var show_num = GLOBAL_CONFIG.source.power.showNum;
+		var api_token = GLOBAL_CONFIG.source.power.apiToken;
+		var url = GLOBAL_CONFIG.source.power.url;
+
+		//计算sign
+		function calculateSign(token, params, ts, userId) {
+			// 按照签名规则拼接字符串
+			const signString = `${token}params${params}ts${ts}user_id${userId}`;
+			// 使用MD5库计算签名
+			const sign = CryptoJS.MD5(signString).toString();
+			return sign;
+		}
+
+		//查询赞助者
+		async function callQuerySponsorApi() {
+			//查询参数
+			const params = {
+				page: 1,
+				per_page: 10
+			}
+			// 获取秒级时间戳
+			const ts = Math.floor(Date.now() / 1000);
+			// 计算签名
+			const sign = calculateSign(api_token, JSON.stringify(params), ts, user_id);
+			// 构建请求体
+			const request = {
+				user_id: user_id,
+				params: JSON.stringify(params),
+				ts: ts,
+				sign: sign
+			};
+
+			// 发送请求
+			const response = await fetch(url, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(request)
+			});
+
+			// 处理响应
+			if (response.ok) {
+				const data = await response.json();
+				console.log('API Response:', data);
+			} else {
+				console.error('API Error:', response.status, response.statusText);
+			}
+		}
+
 
 		function getPower() {
-			const url = GLOBAL_CONFIG.source.power.url + user_id
+			const url = GLOBAL_CONFIG.source.power.url;
-			fetch(url)
+			const ts = Math.floor(Date.now() / 1000);
+			const sign =
+				// + user_id
+				fetch(url)
 				.then(res => res.json())
 				.then(data => {
 					if (200 === data["ec"]) {
@@ -439,7 +490,8 @@ let halo = {
 			if (data) {
 				renderer(JSON.parse(data))
 			} else {
-				getPower()
+				callQuerySponsorApi();
+				getPower();
 			}
 		}
 

templates/assets/zhheo/zhheoblog.css

@@ -16830,8 +16830,8 @@ span.hexo-douban-pagenum {
 
 .author-content-item .card-content .banner-button-group {
 	position: absolute;
-	bottom: 1.5rem;
+	bottom: 1rem;
-	right: 2rem;
+	right: 1rem;
 }
 
 .author-content-item .card-content .banner-button-group .banner-button {

templates/modules/layouts/layout.html

@@ -152,6 +152,8 @@
     
     <script th:src="${assets_link + '/libs/pjax/pjax.min.js'}"></script>
 	
+	<script th:src="${assets_link + '/libs/crypto/crypto-js.min.js'}"></script>
+    
     <!-- swiper 在瞬间滚动时会使用 -->
     <script th:if="${theme.config.top.moment}" data-pjax
             src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/6.6.2/swiper-bundle.min.js"></script>

templates/modules/variables/site-config.html

@@ -59,7 +59,8 @@
                 powerLink: [[${theme.config.sidebar.power.powerLink}]],
                 url: [[${theme.config.sidebar.power.url}]],
                 userId: [[${theme.config.sidebar.power.userId}]],
-                showNum: [[${theme.config.sidebar.power.showNum}]]
+                showNum: [[${theme.config.sidebar.power.showNum}]],
+				apiToken:[[${theme.config.sidebar.power.apiToken}]]
             },
             links: {
                 linksUrl: [[${ theme.config.link.linksUrl }]],