<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>