博客使用教程

1、底部动物条，优化后版本，不会遮挡住其他内容，并且留有充足空间。

 <style>
/* 底部元素布局 */
#footer-banner {
    order: 999;
}

.footer-perch {
    height: 130px;
    display: flex;
    flex-direction: column;
    order: 1;
}

#footer-animal {
    position: relative;
    width: 100%;
    margin-top: auto;
    top: 1rem;
}

#footer-animal .animal-wall {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: #bcb0a4 url(/upload/footer1.webp) repeat center;
    background-size: auto 100%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
}

@media screen and (max-width: 1023px) {
    #footer-animal .animal-wall {
        height: min(36px, 4vw);
    }
}

#footer-animal img.animal {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(974px, 100vw);
    display: block;
}

/* 去除多余的 !important */
#footer-bar {
    margin-top: 0;
}
</style>
<div class="footer-perch">
  <div id="footer-animal">
    <div class="animal-wall"></div>
    <img class="animal entered loaded" src="/upload/footer.png" alt="动物" data-ll-status="loaded">
  </div>
</div>

2、60s世界

新增页面，插入html页面

api：https://www.dhkk.cn/today/ 或https://60s.lylme.com/ 都可以

高度设置为4600即可

3、修改字体

在设置中全局注入代码

<style type="text/css">
    /* 修改字体 */ 
  @font-face {
    font-family: 'CustomFont'; /* 自定义字体名称 */
    src: url('/upload/Nunito-Bold.ttf') format('woff2'), /* WOFF2 优先加载 */
         url('/upload/Nunito-Bold.ttf') format('truetype'); /* 如果不支持 WOFF2，则加载 TTF */
    font-weight: normal;
    font-style: normal;
}
    *{
     font-family: "CustomFont" !important; 
	} 
</style>

4、评论组件表情被遮挡的BUG（存在评论后依然被遮挡的情况）

已经尽可能的优化了，在第一次点击了表情按钮后，会移除按键事件，增加监听表情框的样式变化，当样式产生变化时，主动修改top值。

注意：目前因为未增加document.addEventListener('DOMContentLoaded', () => {});所以需要在页脚增加。

 <script>
document.querySelector('#content-inner').addEventListener('click', function handleClick(event) {
    if (event.target.tagName.toLowerCase() === 'comment-widget') { 
        // 获取表情面板的元素
        const commentWidget = document.querySelector('comment-widget');
        if (commentWidget && commentWidget.shadowRoot) {
            const emojiButton = commentWidget.shadowRoot
                .querySelector('comment-form')
                .shadowRoot.querySelector('base-form')
                .shadowRoot.querySelector('.form__actions')
                .querySelector('emoji-button');
            
            if (emojiButton && emojiButton.shadowRoot) {
                const emojiPanel = emojiButton.shadowRoot.querySelector('.form__emoji-panel');
                
                if (emojiPanel) {
                    // 移除点击事件监听器，避免重复设置观察器
                    document.querySelector('#content-inner').removeEventListener('click', handleClick);

                    // 创建 MutationObserver 监听 style 属性的变化
                    const observer = new MutationObserver((mutations) => { 
                        const mutation = mutations[0]; // 只需第一个 mutation
                        if (mutation.attributeName === 'style' && emojiPanel.style.display !== 'none' && emojiPanel.style.top !== '-22em') { 
                            // 检查是否显示并且 top 需要调整 
                                emojiPanel.style.top = '-22em';  
                        }
                    });

                    // 监听 emojiPanel 的 style 属性变化
                    observer.observe(emojiPanel, {
                        attributes: true, // 监听属性的变化
                        attributeFilter: ['style'], // 仅监听 style 属性
                    });

                    // 初次设置 top 样式
                    if (emojiPanel.style.display !== 'none') {
                        emojiPanel.style.top = '-22em'; 
                    }
                }
            }
        }
    } 
});

</script>

5、评论组件表情被遮挡（完善版）

引用群友的，实现思路为将父级组件增加滚动条并且在弹出表情框时内容页高度有变化时，主动移至底部。

Css样式如下：

<style>
.layout > div:first-child:not(.recent-posts) {
    overflow: scroll;/*滚动条*/
}
.layout > div:first-child:not(.recent-posts)::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}
</style>

js如下：

 <script>
document.addEventListener('click', function(event) {
    const commentWidget = event.target.closest('comment-widget');
    if (commentWidget) {
        const postElement = document.getElementById('post');
        if (postElement) {
            // 延迟执行，等待内容更新
            setTimeout(function() {
                if (postElement.scrollHeight > postElement.clientHeight) {
                    postElement.scrollTop = postElement.scrollHeight;
                }
            }, 100); 
        }
    }
});

</script>

6、关于标签页、分类页页脚的问题。（主题BUG）

/*将页面始终占满页面高度*/
#body-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/*将内容页始终占满剩余的空间*/
#content-inner {
    flex: 1 ;
    width: 100%; /* 确保内容宽度为100% */ 
}

7、隐藏留言板的信封

  /*隐藏留言板的信封*/
  #form-wrap{
    display: none;
  }