大红灯笼左右对称布局教程

本教程记录了如何将 Hexo 博客的春节主题大红灯笼从右侧单边布局改为左右对称布局。

---

问题背景

原来的春节主题中，两个大红灯笼都固定在页面右侧（right: -20px 和 right: 10px），视觉上不够对称。

布局结构（themes/hexo-theme-matery/layout/layout.ejs 第244-264行）：

<!--大红灯笼-->
<div class="denglong">
    <div class="deng-box">
        <!-- 第一个灯笼："过节" -->
    </div>
    <div class="deng-box1">
        <!-- 第二个灯笼："福到" -->
    </div>
</div>

• .deng-box：第一个灯笼
• .deng-box1：第二个灯笼

---

修改方案

修改文件：themes/hexo-theme-matery/source/css/matery.css（第1486行）

修改前

.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;    /* 右侧 */
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 10px;     /* 右侧 */
    z-index: 999;
}

修改后

.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;    /* 右侧（不变） */
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: -30px;
    left: 10px;      /* ← 改为左侧 */
    z-index: 999;
}

核心改动：只改了一行，将 .deng-box1 的 right: 10px 改为 left: 10px。

---

效果对比

位置	修改前	修改后
.deng-box（”过节”灯笼）	右侧 right: -20px	右侧 right: -20px（不变）
.deng-box1（”福到”灯笼）	右侧 right: 10px	左侧 left: 10px

修改后效果：

• ✅ 页面左上角悬挂一个灯笼（”福到”）
• ✅ 页面右上角悬挂一个灯笼（”过节”）
• ✅ 左右对称，视觉更协调
• ✅ 移动端和桌面端都生效（灯笼仅在春节主题模式 themespring 下显示）

---

相关 CSS 说明

类名	用途
.denglong	灯笼容器，display: none 默认隐藏，body.themespring .denglong { display: block } 激活
.deng-box / .deng-box1	两个灯笼的定位容器，position: fixed 固定在视窗上
.deng	灯笼主体，圆角红色 + 摇摆动画 swing
.deng-a / .deng-b	灯笼内部装饰线条
.deng-t	灯笼上的文字（”过节”、”福到”）
.xian	灯笼上方的悬挂线

---

生效方法

hexo clean && hexo g && hexo s

开启春节主题模式后（点击页面上的节日图标），即可看到左右对称的大红灯笼。