89 lines
3.7 KiB
Plaintext
89 lines
3.7 KiB
Plaintext
<link rel="stylesheet" href="/fonts/banner/banner.css">
|
|
|
|
<div class="banner-container">
|
|
<mdui-card class="banner-title">
|
|
<div class="banner-title-text1"><%- titleText1 %></div>
|
|
<div class="banner-title-text2"><%- titleText2 %></div>
|
|
|
|
<% if (get_path() === '/post/') { %>
|
|
<mdui-chip variant="filled">
|
|
<mdui-icon name="calendar_today" slot="icon"></mdui-icon>
|
|
<%= page.date.format('YYYY-MM-DD') %>
|
|
</mdui-chip>
|
|
|
|
<% if (page.categories && page.categories.length > 0) { %>
|
|
<mdui-chip variant="filled">
|
|
<mdui-icon name="folder" slot="icon"></mdui-icon>
|
|
<%= page.categories.data[0].name %>
|
|
</mdui-chip>
|
|
<% } %>
|
|
|
|
<% if (page.tags && page.tags.length > 0) { %>
|
|
<mdui-chip variant="filled">
|
|
<mdui-icon name="tag" slot="icon"></mdui-icon>
|
|
<%= page.tags.data[0].name %>
|
|
</mdui-chip>
|
|
<% } %>
|
|
<% } %>
|
|
</mdui-card>
|
|
|
|
<mdui-card class="banner-image">
|
|
<div style="margin: 16px; text-align: center;">
|
|
<p class="banner-hitokoto" variant="filled">
|
|
<mdui-icon slot="icon">format_quote</mdui-icon>
|
|
<a href="#" id="hitokoto_text" style="color: var(--mdui-color-on-surface); text-decoration: none; font-style: italic;">
|
|
<span id="hitokoto_inner">获取中...</span><span id="hitokoto_cursor">|</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
function typeText(el, text, speed, cursorEl) {
|
|
if (!el) return;
|
|
el.textContent = '';
|
|
let i = 0;
|
|
if (cursorEl) cursorEl.style.opacity = '1';
|
|
function step(){
|
|
if (i < text.length) {
|
|
el.textContent += text.charAt(i);
|
|
i++;
|
|
setTimeout(step, speed);
|
|
} else {
|
|
if (cursorEl) cursorEl.style.opacity = '0';
|
|
}
|
|
}
|
|
step();
|
|
}
|
|
|
|
function fetchHitokoto(){
|
|
fetch('https://v1.hitokoto.cn')
|
|
.then(function(r){ return r.json(); })
|
|
.then(function(data){
|
|
var inner = document.getElementById('hitokoto_inner');
|
|
var cursor = document.getElementById('hitokoto_cursor');
|
|
var link = document.getElementById('hitokoto_text');
|
|
if (!inner || !link) return;
|
|
if (data && data.hitokoto) {
|
|
var text = data.hitokoto + (data.from ? ' — ' + data.from : '');
|
|
if (data.uuid) link.href = 'https://hitokoto.cn/?uuid=' + data.uuid;
|
|
typeText(inner, text, 40, cursor);
|
|
}
|
|
})
|
|
.catch(function(){ /* ignore errors */ });
|
|
}
|
|
|
|
// 添加简单的光标闪烁样式
|
|
var _s = document.createElement('style');
|
|
_s.textContent = '#hitokoto_cursor{display:inline-block;margin-left:6px;opacity:1;transition:opacity .2s}@keyframes _hk{0%{opacity:1}50%{opacity:0}100%{opacity:1}} #hitokoto_cursor{animation:_hk 1s steps(1) infinite}';
|
|
document.head.appendChild(_s);
|
|
|
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
|
fetchHitokoto();
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', fetchHitokoto);
|
|
}
|
|
})();
|
|
</script>
|
|
</mdui-card>
|
|
</div> |