Files
halo-theme-pix/templates/modules/header.html
T

141 lines
4.7 KiB
HTML

<header id="masthead" class="site-header">
<div class="top_bar uk-sticky">
<div class="mobile_logo">
<a href="/"><img th:src="${theme.config.base_top_set.mobile_logo}"></a>
</div>
<th:block th:replace="~{'modules/header/header-search'}"></th:block>
<th:block th:if="${not #strings.contains('mod_third,mod_third_s',theme.config.style.layout_set)}">
<th:block th:replace="~{modules/header/header-tool :: header-tool}"></th:block>
</th:block>
<th:block th:unless="${not #strings.contains('mod_third,mod_third_s',theme.config.style.layout_set)}">
<th:block th:replace="~{modules/header/header-tool :: header-tool-third}"></th:block>
</th:block>
</div>
<div class="uk-sticky-placeholder" hidden="" style="height: 72px; width: 590px; margin: 0px;"></div>
</header><!-- #masthead -->
<!-- <div class="index_banner">
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="user_info">
<div class="top">
<div class="left">
<div class="name">[[${theme.config.base_set.nice_name}]]</div>
<div class="des">[[${theme.config.base_set.admin_des}]]</div>
</div>
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
</div>
</div>
</div> -->
<div class="index_banner" id="banner" uk-img="loading: eager">
<div class="user_info">
<div class="top">
<div class="left">
<div class="name">[[${theme.config.base_set.nice_name}]]</div>
<div class="des">[[${theme.config.base_set.admin_des}]]</div>
</div>
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
</div>
</div>
</div>
<script>
// --------------------------
// 配置区域(请替换为实际图片地址)
// --------------------------
const BANNER_CONFIG = {
seasonal: {
'春': '/upload/chun.jpg',
'夏': '/upload/xia.jpg',
'秋': '/upload/qiu.jpg',
'冬': '/upload/dong.jpg'
},
fallback: '/upload/dingbu-siji.png'
};
// --------------------------
// 原有 Cookie 工具函数(保持不变)
// --------------------------
function anian_setDailyCookie(name, value) {
const now = new Date();
const china = new Date(now.getTime() + 8 * 3600 * 1000);
const expires = new Date(Date.UTC(china.getUTCFullYear(), china.getUTCMonth(), china.getUTCDate(), 15, 59, 59));
document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
}
function anian_getCookie(name) {
const nameEQ = encodeURIComponent(name) + '=';
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length));
}
return null;
}
// --------------------------
// 新增:Banner 图片切换逻辑
// --------------------------
function setBanner(lunarInfo) {
const banner = document.getElementById('banner');
if (!banner) return;
// 根据季节选图,无匹配则用兜底
const season = lunarInfo?.jijie;
const imgUrl = BANNER_CONFIG.seasonal[season] || BANNER_CONFIG.fallback;
// 可以根据日期、节日覆盖imgUrl
// 设置图片并触发 UIkit 加载
banner.setAttribute('data-src', imgUrl);
window.UIkit && UIkit.update(banner);
}
// --------------------------
// 初始化逻辑(优化版)
// --------------------------
(function() {
const apiUrl = 'https://api.anian.cc/lunar';
const cookieName = 'anian_lunar_info';
// 1. 优先尝试从 Cookie 读取
const cached = anian_getCookie(cookieName);
if (cached) {
try {
setBanner(JSON.parse(cached));
return; // 有缓存直接结束
} catch (e) {}
}
// 2. 无缓存则请求 API
fetch(apiUrl)
.then(res => res.json())
.then(data => {
// 组装农历信息,保持 cookie 字段名不变
const lunarInfo = {
ganzhiYear: data.nian || '',
lunarMonth: data.yue || '',
lunarDay: data.ri || '',
jieqi: data.jieqi || '',
jijie: data.jijie || '',
shengxiao: data.shengxiao || '',
traditionalFestival: data.jieri || ''
};
// 存 Cookie 并设置 Banner
anian_setDailyCookie(cookieName, JSON.stringify(lunarInfo));
setBanner(lunarInfo);
})
.catch(() => {
// 3. 失败兜底:显示默认图
setBanner(null);
});
})();
</script>