修改关于页面细节样式
detailed： 1.修改关于页面中十年之约的进度条的圆角样式 2.修改关于页面中卡片“banner-button-group”的位置
This commit is contained in:
parent
d197c0e95c
commit
7f8b310cf7
@ -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 |
|
||||
|
||||
|
||||
|
||||
@ -750,8 +750,9 @@ spec:
|
||||
label: 爱发电赞助
|
||||
value:
|
||||
powerLink: /
|
||||
url: https://api.afdian.cnkj.site/api/creator/get-top-sponsors?user_id=
|
||||
userId:
|
||||
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: 最大展示条数
|
||||
|
||||
@ -1,87 +1,91 @@
|
||||
.timeline {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: var(--heo-background);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 0.5rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: var(--heo-background);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 1.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: var(--heo-main);
|
||||
position: absolute;
|
||||
animation: progressAnimation 2s linear forwards;
|
||||
animation-delay: -0.1s;
|
||||
border-radius: 0.5rem
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: var(--heo-main);
|
||||
position: absolute;
|
||||
animation: progressAnimation 2s linear forwards;
|
||||
animation-delay: -0.1s;
|
||||
border-radius: 1.5rem
|
||||
}
|
||||
|
||||
.past-time {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #3498db;
|
||||
position: absolute;
|
||||
transform-origin: left;
|
||||
animation: pastTimeAnimation 3s linear forwards;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #3498db;
|
||||
position: absolute;
|
||||
transform-origin: left;
|
||||
animation: pastTimeAnimation 3s linear forwards;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
color: var(--heo-card-bg);
|
||||
font-weight: bold;
|
||||
top: 10px;
|
||||
white-space: nowrap;
|
||||
transition: left 0.5s linear;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
color: var(--heo-card-bg);
|
||||
font-weight: bold;
|
||||
top: 10px;
|
||||
white-space: nowrap;
|
||||
transition: left 0.5s linear;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.time-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.time-labels>div {
|
||||
font-size: 14px;
|
||||
color: var(--heo-fontcolor);
|
||||
font-size: 14px;
|
||||
color: var(--heo-fontcolor);
|
||||
}
|
||||
|
||||
@keyframes progressAnimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: var(--progress-percentage, 0);
|
||||
}
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: var(--progress-percentage, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pastTimeAnimation {
|
||||
0% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(var(--past-time-percentage, 0));
|
||||
}
|
||||
0% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(var(--past-time-percentage, 0));
|
||||
}
|
||||
}
|
||||
|
||||
.timeline:hover {
|
||||
animation: btn31-eff 3s linear infinite;
|
||||
cursor: pointer;
|
||||
animation: btn31-eff 3s linear infinite;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes btn31-eff {
|
||||
0% {
|
||||
box-shadow: 0 0 2px var(--heo-main);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px var(--heo-main);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 2px var(--heo-main);
|
||||
}
|
||||
0% {
|
||||
box-shadow: 0 0 2px var(--heo-main);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 40px var(--heo-main);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 2px var(--heo-main);
|
||||
}
|
||||
}
|
||||
@ -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 show_num = GLOBAL_CONFIG.source.power.showNum
|
||||
var user_id = GLOBAL_CONFIG.source.power.userId;
|
||||
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
|
||||
fetch(url)
|
||||
const url = GLOBAL_CONFIG.source.power.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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1
templates/assets/libs/crypto/crypto-js.min.js
vendored
Normal file
1
templates/assets/libs/crypto/crypto-js.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -16830,8 +16830,8 @@ span.hexo-douban-pagenum {
|
||||
|
||||
.author-content-item .card-content .banner-button-group {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
right: 2rem;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.author-content-item .card-content .banner-button-group .banner-button {
|
||||
|
||||
@ -151,6 +151,8 @@
|
||||
<script th:src="${assets_link + '/libs/aplayer/Meting2.min.js'}"></script>
|
||||
|
||||
<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
|
||||
|
||||
@ -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 }]],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user