halo-theme-hao/templates/macro/links-canvas.html
2024-04-12 14:35:37 +08:00

76 lines
2.0 KiB
HTML

<th:block th:fragment="links-canvas(groups)" th:if="${theme.config.link.linksCanvas && not #lists.isEmpty(groups)}" >
<style>
#iframe {
border: var(--style-border);
border-radius: 12px;
}
.addBtn {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
.addBtn button {
transition: .2s;
display: flex;
margin: 31px auto 0px;
color: var(--heo-white);
padding: 15px;
border-radius: 12px;
background: var(--search-result-title);
align-items: center;
}
button {
padding: 0;
outline: 0;
border: none;
background: 0 0;
cursor: pointer;
touch-action: manipulation;
}
.fa-solid,
.fas {
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.addBtn i {
font-size: 1.3rem;
margin-right: 10px;
}
.addBtn button:hover {
background: #4b7aff;
color: #fff;
}
</style>
<div class="flink">
<iframe id="iframe" scrolling="auto" src="/themes/theme-hao/assets/html/link-canvas.html" frameborder="0"
height="450px" width="100%"></iframe>
<div class="addBtn">
<button onclick="javascript:refreshFrame();">
<i class="fas fa-shuffle"></i>
换个头像试试
</button>
</div>
</div>
<script th:inline="javascript">
function refreshFrame() {
document.getElementById('iframe').contentWindow.location.reload(true);
}
const group = [[${ groups }]]
const logos = group.flatMap((item) => {
return item.links
}).flatMap((item) => {
return item.spec.logo
})
localStorage.setItem('logos', JSON.stringify(logos))
</script>
</th:block>