为Halo博客添加新年灯笼效果
前言
新年将至，为您的博客增添节日氛围。本文将介绍如何在Halo博客中添加精美的灯笼效果，为访客带来浓厚的年味。
一、配置主题设置
首先，我们需要在Halo后台添加一个开关选项，用于控制灯笼的显示。
- 登录Halo后台，进入"外观" > "主题编辑"
- 滚动到页面底部，点击"复制一份"创建新配置
- 将配置重命名为便于识别的名称（例如：lantern_control）
在配置文件中添加以下内容：
festival_lantern:
name: festival_lantern
label: 新年灯笼
type: switch
data-type: bool
default: false
description: "是否显示新年灯笼装饰"
options:
- value: true
label: 开启
- value: false
label: 关闭
二、灯笼效果实现
接下来，我们需要添加灯笼的HTML结构和CSS样式。
HTML结构代码
在主题模板的适当位置添加以下代码：
<#if settings.festival_lantern == true>
<div class="lantern-container desktop">
<div class="lantern-wrapper left-lantern">
<div class="lantern">
<div class="lantern-top"></div>
<div class="lantern-middle">
<div class="lantern-text">春</div>
</div>
<div class="lantern-bottom"></div>
<div class="lantern-cord"></div>
</div>
</div>
<div class="lantern-wrapper right-lantern">
<div class="lantern">
<div class="lantern-top"></div>
<div class="lantern-middle">
<div class="lantern-text">节</div>
</div>
<div class="lantern-bottom"></div>
<div class="lantern-cord"></div>
</div>
</div>
</div>
<div class="lantern-container mobile">
<div class="lantern-wrapper center-lantern">
<div class="lantern">
<div class="lantern-top"></div>
<div class="lantern-middle">
<div class="lantern-text">春节</div>
</div>
<div class="lantern-bottom"></div>
<div class="lantern-cord"></div>
</div>
</div>
</div>
CSS样式代码
在主题的自定义CSS样式中添加以下代码：
.lantern-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1000; }
.lantern-wrapper { position:absolute; }
.lantern { position:relative; width:120px; height:160px; margin:50px auto; background:#d8000f; background:rgba(216,0,15,0.8); border-radius:50% 50%; animation:swing 5s infinite ease-in-out; transform-origin:50% -100px; -webkit-transform-origin:50% -100px; -webkit-animation:swing 5s infinite ease-in-out; box-shadow:-5px 5px 50px 4px rgba(250,108,0,1); }
.lantern-top { position:absolute; top:-10px; left:20px; height:20px; width:80px; content:" "; display:block; border-radius:10px 10px 0 0; border:solid 1px #dc8f03; background:#ffa500; background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03); }
.lantern-middle { width:100px; height:120px; background:#d8000f; background:rgba(216,0,15,0.1); margin:10px auto; border-radius:50% 50%; border:2px solid #dc8f03; display:flex; justify-content:center; align-items:center; }
.lantern-bottom { position:absolute; bottom:-10px; left:20px; height:20px; width:80px; content:" "; display:block; border-radius:0 0 10px 10px; border:solid 1px #dc8f03; background:#ffa500; background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03); }
.lantern-text { font-family:Arial,Lucida Grande,Tahoma,sans-serif; font-size:3.2rem; color:#dc8f03; font-weight:bold; line-height:120px; text-align:center; }
.lantern-cord { position:absolute; top:-30px; left:60px; width:2px; height:30px; background:#dc8f03; }
@keyframes swing {
0% { transform:rotate(-8deg); -ms-transform:rotate(-8deg); }
50% { transform:rotate(8deg); -ms-transform:rotate(8deg); }
100% { transform:rotate(-8deg); -ms-transform:rotate(-8deg); }
}
@-webkit-keyframes swing {
0% { -webkit-transform:rotate(-8deg) }
50% { -webkit-transform:rotate(8deg) }
100% { -webkit-transform:rotate(-8deg) }
}
/* 移动端适配 */
@media screen and (max-width:768px) {
.desktop { display:none !important; }
.mobile { display:block !important; }
.lantern { width:80px; height:120px; }
.lantern-text { font-size:2.5rem; line-height:100px; }
.lantern-top, .lantern-bottom { width:60px; left:30px; }
}
/* 桌面端适配 */
@media screen and (min-width:769px) {
.desktop { display:block !important; }
.mobile { display:none !important; }
.left-lantern { left:50px; top:100px; }
.right-lantern { right:50px; top:100px; }
}
三、启用灯笼效果
完成以上设置后，进入主题设置页面，找到"新年灯笼"选项，将其设置为"开启"，然后保存设置。刷新您的博客页面，即可看到精美的灯笼效果。
通过简单的配置，您的博客在新年期间就能展现出浓厚的节日氛围，为访客带来温馨的视觉体验。
