在 anheyu-app 给页脚添加动物装饰

最近不少人在问，anheyu-app 能不能像一些别的主题那样，在页脚底栏上方加一个“动物站在栏杆上”的装饰效果。答案是可以，而且这类效果其实有两种常见做法：一种是直接走后台的自定义代码注入，另一种是直接改主题源码，把它固化进页脚组件里。这篇文章会把这两条路都整理出来。

来源说明

这篇挂件教程不是完全从零凭空写出来的。它的装饰思路参考了青桔气球的一篇相关文章，但本文并不是原样照搬，而是针对当前 anheyu-app 的结构做了重新整理和适配。

更具体地说，这篇文章主要做了下面这些改写：

把原本更偏旧主题思路的实现，改成适合 anheyu-app 当前页脚结构的写法
补上后台自定义代码方案，方便普通读者不用改源码也能实现
额外整理出源码修改方案，方便维护者长期固化为主题内置效果

这篇教程适合谁

如果你现在用的是 anheyu-app，并且后台里能看到：

系统设置 -> 外观配置 -> 页面样式 -> 自定义代码注入

那么这篇教程基本就可以直接照着做。

图片链接不要直接盗链

本文不会把装饰图片写死成“拿来就用的别人图床直链”方案。

更推荐的做法是：

先把需要的动物图和底部栏杆图下载下来
上传到你自己的图床、对象存储或站点文件目录
再把教程里的占位链接替换成你自己的直链

这样更稳，也更适合长期使用。

效果预览

先看一下这套页脚装饰的大概效果：

素材下载

如果你暂时还没有准备好自己的动物图和栏杆底图，可以先从下面这个素材包开始：

页脚动物装饰素材包

网盘地址：
提取码：Rc6d
说明：素材包里包含本篇教程提到的两类图片，下载后请自行上传到你自己的图床、对象存储或站点文件目录，再把文章里的占位链接替换成你的实际直链

参考说明

为了避免读者误会这是一篇“完全独立于前人经验”的文章，这里把参考关系单独列出来：

本文和参考教程的区别

如果你直接照着别的主题教程原样抄代码，放到 anheyu-app 里大概率并不会得到完全一致的结果。原因不是思路错了，而是主题结构不同。

所以这篇文章真正提供的价值，不只是“告诉你有这个效果”，而是把这类挂件思路改写成了：

适合 anheyu-app 当前结构的后台方案
适合 anheyu-app 当前组件结构的源码方案

这篇文章提供两种方法

为了方便不同读者选择，这篇文章会分成两部分：

方法一：后台自定义代码适合不想改仓库文件、想在后台快速开关和调整的人
方法二：修改主题源码适合已经在本地部署源码、希望长期固定这个效果的人

如果你只是想先把效果做出来，优先看方法一；如果你本身就在维护自己的 anheyu-app 前端仓库，想把它作为主题内置效果长期保留，再看方法二。

方法一：后台自定义代码

这一套不需要改主题源码，适合大多数普通用户。

为什么后台能做

这不是“理论上能行”，而是当前 anheyu-app-main 的后台本来就有这几项能力：

头部 HTML
底部 HTML
自定义 CSS
自定义 JavaScript

并且它们是全站生效的。对这种页脚装饰效果来说，最适合的组合不是去改组件源码，而是：

用 自定义 JavaScript 负责把装饰节点插入到页脚底栏上方
用 自定义 CSS 负责控制图片、底部横条和暗色模式样式

先说一个关键区别

如果你参考过其他主题的旧教程，可能会看到类似这样的写法：

const footerBar = document.querySelector('#footer-bar');
document.addEventListener('pjax:success', initFooterAnimal);

但在当前这套 anheyu-app 里，有两个现实差异：

这套前台不是 PJAX 主题结构，不需要按旧教程去监听 pjax:success
当前主题的页脚底栏也不是稳定暴露成 #footer-bar 这种老式固定 ID

所以这篇教程会把脚本改造成更适合 anheyu-app 当前结构的版本。

这也是为什么本文要特别说明“基于青桔气球教程思路修改”。因为真正需要修改的，不只是图片链接，而是挂载位置和选择器策略本身。

效果大概是什么

做完后，页面底部会多出一段装饰区域：

上方是一张动物图
下方是一条重复铺开的栏杆底图
原本的页脚底栏会紧贴这段装饰，不再留多余间距
暗色模式下会自动稍微压暗一点，避免显得太突兀

操作路径

登录后台后，按下面路径进入：

打开 你的域名/admin
进入 系统设置
打开 外观配置
点击 页面样式
找到 自定义代码注入

接下来我们只会用到其中两个框：

自定义 JavaScript
自定义 CSS

这两个输入框怎么填

自定义 JavaScript 里直接填 JS 代码，不要再包 <script> 标签
自定义 CSS 里直接填 CSS 代码，不要再包 <style> 标签

第一步：准备两张图片

你至少要准备下面两张图：

类型	作用	建议格式
动物主图	显示在页脚装饰上方	`webp` / `png`
栏杆底图	重复平铺在底部，形成横条装饰	`webp` / `png`

如果你不想自己从零找素材，可以直接用上面的素材包先试效果，再替换成你自己的图片。

图片准备建议

动物图建议做成透明背景
栏杆底图建议本身就是横向可平铺的素材
图片文件名尽量用英文，少用空格和中文括号
上传后请确认链接可以直接在浏览器里打开，而不是需要登录才可见

第二步：在 `自定义 JavaScript` 中粘贴代码

把下面这段代码粘贴进后台的 自定义 JavaScript：

自定义 JavaScriptjs

(function initFooterAnimalDecorator() {
  const DECOR_ID = "anheyu-footer-animal";
  const FOOTER_BAR_CLASS = "anheyu-footer-bar-with-animal";
  const FLOOR_VAR = "--footer-animal-floor";

  const ANIMAL_IMAGE_URL = "https://your-cdn.example.com/footer-animal.webp";
  const FLOOR_IMAGE_URL = "https://your-cdn.example.com/footer-floor.webp";

  function ensureFooterAnimal() {
    const footer = document.querySelector("footer");
    if (!(footer instanceof HTMLElement)) return false;

    const footerBar = footer.querySelector(":scope > div:last-child");
    if (!(footerBar instanceof HTMLElement)) return false;

    let wrapper = document.getElementById(DECOR_ID);
    if (!(wrapper instanceof HTMLDivElement)) {
      wrapper = document.createElement("div");
      wrapper.id = DECOR_ID;
      wrapper.innerHTML = `
        <img
          class="animal entered loaded"
          src="${ANIMAL_IMAGE_URL}"
          alt="页脚动物装饰"
        />
      `;
    }

    wrapper.style.setProperty(FLOOR_VAR, `url("${FLOOR_IMAGE_URL}")`);

    if (wrapper.nextElementSibling !== footerBar) {
      footerBar.insertAdjacentElement("beforebegin", wrapper);
    }

    footerBar.classList.add(FOOTER_BAR_CLASS);
    return true;
  }

  let tries = 0;
  const maxTries = 60;

  const timer = window.setInterval(() => {
    tries += 1;
    if (ensureFooterAnimal() || tries >= maxTries) {
      window.clearInterval(timer);
    }
  }, 500);

  window.addEventListener("load", ensureFooterAnimal, { once: true });
})();

这里你必须改的内容

上面代码里有两个必须手动替换的链接：

ANIMAL_IMAGE_URL 这里换成你自己的动物图直链
FLOOR_IMAGE_URL 这里换成你自己的栏杆底图直链

第三步：在 `自定义 CSS` 中粘贴样式

把下面这段代码粘贴进后台的 自定义 CSS：

自定义 CSScss

#anheyu-footer-animal {
  position: relative;
  width: 100%;
}

#anheyu-footer-animal::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36px;
  background: var(--footer-animal-floor) repeat center / auto 100%;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
}

#anheyu-footer-animal .animal {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(974px, 100vw);
  margin: 0 auto;
}

.anheyu-footer-bar-with-animal {
  margin-top: 0 !important;
}

html.dark #anheyu-footer-animal,
.dark #anheyu-footer-animal {
  filter: brightness(0.8);
}

@media screen and (max-width: 1023px) {
  #anheyu-footer-animal::before {
    height: 4vw;
  }
}

第四步：保存并刷新前台

代码填完后：

点击后台 保存设置
回到前台页面刷新
下滑到页脚查看效果

如果你的缓存比较强，建议顺手按一次 Ctrl + F5 强制刷新。

为什么这里推荐 `自定义 JavaScript + 自定义 CSS`

很多人第一反应会问：既然后台也有 底部 HTML，为什么不直接把整段 HTML 往那里一塞？

原因很简单：这次效果不是单纯在页面末尾输出一块静态内容，而是要精确插到页脚底栏上方，并且顺手把那个底栏的间距一起改掉。

所以更适合的方案是：

JavaScript 负责“找位置并插进去”
CSS 负责“长什么样”

比起单纯贴一段底部 HTML，这样更稳，也更接近你真正想要的效果。

方法二：直接修改主题源码

如果你是自己部署 anheyu-app，而且本来就在维护前端仓库，那么把这个效果直接写进源码也完全可行。这样做的特点是：

效果直接跟着主题走
不依赖后台再写一段 JS 去运行时插入
后面换图时只需要改源码里的图片链接

但也要注意，这种方式更适合“你就是维护者”的场景，不适合只想在后台快速试效果的普通读者。

适合源码方案的人

如果你满足下面任意一种情况，就可以直接考虑源码方案：

你已经在本地跑 anheyu-app-main
你本来就会改 React / Next.js
你想把页脚动物效果做成主题内置，而不是后台注入脚本

需要改哪两个文件

当前这套主题里，最核心的就是下面两个文件：

frontend/src/components/layout/Footer/index.tsx
frontend/src/components/layout/Footer/Footer.module.css

前者负责页脚结构，后者负责样式。

第一步：在 `Footer/index.tsx` 里加入动物区域

你可以在页脚底栏渲染前，插入一段动物装饰结构。思路大致如下：

Footer/index.tsxtsx

const FOOTER_ANIMAL_IMAGE_URL = "https://your-cdn.example.com/footer-animal.webp";

{footerConfig.bar && (
  <>
    <div className={styles.footerAnimal} aria-hidden="true">
      <img className={styles.footerAnimalImage} src={FOOTER_ANIMAL_IMAGE_URL} alt="" />
    </div>
    <div className={`${styles.footerBottomBar} ${styles.footerBottomBarWithAnimal}`}>
      <div className={styles.barContent}>
        {/* 原本的页脚底栏内容继续保留 */}
      </div>
    </div>
  </>
)}

这里的关键点有两个：

动物装饰区域要放在底栏前面
原来的 footerBottomBar 需要额外补一个去间距类名

第二步：在 `Footer.module.css` 里加入装饰样式

接着在样式文件里补上对应的动物图、栏杆底图、暗色模式和移动端处理：

Footer.module.csscss

.footerAnimal {
  position: relative;
  width: 100%;
}

.footerAnimal::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36px;
  background: url("https://your-cdn.example.com/footer-floor.webp") repeat center / auto 100%;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
}

.footerAnimalImage {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(974px, 100vw);
  margin: 0 auto;
}

.footerBottomBarWithAnimal {
  margin-top: 0;
}

:global(html.dark) .footerAnimal,
:global(.dark) .footerAnimal {
  filter: brightness(0.8);
}

@media screen and (max-width: 1023px) {
  .footerAnimal::before {
    height: 4vw;
  }
}

这里你必须替换的内容

源码方案同样也有两个图片地址需要自己替换：

footer-animal.webp 替换成你自己的动物图
footer-floor.webp 替换成你自己的栏杆底图

第三步：保存后重新启动前端

如果你改的是源码文件，那么保存后要重新让前端生效。

开发环境一般是：

powershell

cd frontend
.\node_modules\.bin\next.cmd dev

如果你走的是完整后端入口，就按你自己的部署方式重新启动或重新构建。

源码方案和后台方案怎么选

方案	适合谁	优点	缺点
后台自定义代码	普通站长	快速、灵活、不用改仓库	运行时插入，结构上没那么“原生”
修改主题源码	源码维护者	更内置、更稳定、更像主题原生功能	需要会改代码、更新主题时要自己留意冲突

什么时候更推荐源码方案

如果你已经确定这套效果会长期保留，而且你还打算继续做更多同类美化，例如：

页脚其它挂件
首页顶部装饰
自定义页脚波浪、底图、遮罩
暗色模式下的整体视觉联动

那么源码方案通常会更顺手。因为这时候你不是“临时挂一个效果”，而是在真正维护自己的主题。

常见问题

1. 我保存了，但前台什么都没显示

优先检查下面几个点：

你的动物图和栏杆图链接能不能直接打开
后台的 页脚底栏 本身有没有开启
自定义 JavaScript 里是不是还保留了占位链接
浏览器控制台里有没有图片 404

因为这篇不是写给旧 PJAX 主题的。

当前 anheyu-app 的前台结构和很多旧博客主题不一样，直接照抄旧教程里的 #footer-bar 选择器，并不稳。与其在文章里继续沿用一个并不可靠的旧选择器，不如一开始就改成适合当前结构的写法。

3. 暗色模式下感觉太亮了怎么办

本文已经加了：

css

html.dark #anheyu-footer-animal,
.dark #anheyu-footer-animal {
  filter: brightness(0.8);
}

如果你还想再暗一点，可以把 0.8 改成 0.7 或 0.75。

4. 我可以换成自己的别的装饰图吗

当然可以。

这篇教程本质上只是提供了一种“把一段装饰层精准插到页脚底栏上方”的方法。只要你的图片尺寸和风格合适，不管是小动物、人物挂件，还是别的节日装饰，思路都一样。

5. 后台方案和源码方案能不能同时用

可以，但一般不建议。

因为如果你同时开了后台注入，又在源码里直接写了一份，最终很可能会出现：

两层动物装饰同时存在
间距重复被改
你以为在改后台那份，实际前台显示的是源码那份

更推荐二选一。

可继续自定义的方向

如果你想继续微调，可以改这些地方

想让动物更大或更小，可以改 .animal 的 max-width
想让底部栏杆更高，可以改 #anheyu-footer-animal::before 的 height
想让阴影更明显，可以调 box-shadow
想在移动端更紧凑一点，可以继续细调媒体查询里的 4vw

总结

如果你用的是当前这套 anheyu-app，那么给页脚加动物装饰，其实有两条路：

想省事、想快、想在后台直接调，就走： 系统设置 -> 外观配置 -> 页面样式 -> 自定义代码注入
想长期固化进主题、想当成原生效果维护，就直接改： frontend/src/components/layout/Footer/index.tsxfrontend/src/components/layout/Footer/Footer.module.css

整套思路可以概括成一句话：

图片自己下载、自己上传、自己替换链接
后台方案用 自定义 JavaScript + 自定义 CSS
源码方案用 Footer 结构 + Footer 样式

你现在已经可以把素材包作为下载入口放给读者，然后继续保持文章里的代码示例使用占位链接。这样既能让别人快速拿到素材，也能避免把最终站点效果绑定到固定的第三方图片直链上。

另外，文章里也已经明确说明：这套挂件方案是基于青桔气球的相关教程思路进行修改和适配。这样既把参考来源交代清楚了，也更方便读者理解为什么本文里的最终实现和别的主题教程看起来不完全一样。

在 anheyu-app 给页脚添加动物装饰

在 anheyu-app 给页脚添加动物装饰

效果预览

素材下载

参考说明

这篇文章提供两种方法

方法一：后台自定义代码

为什么后台能做

先说一个关键区别

效果大概是什么

操作路径

第一步：准备两张图片

第二步：在 `自定义 JavaScript` 中粘贴代码

这里你必须改的内容

第三步：在 `自定义 CSS` 中粘贴样式

第四步：保存并刷新前台

为什么这里推荐 `自定义 JavaScript + 自定义 CSS`

方法二：直接修改主题源码

需要改哪两个文件

第一步：在 `Footer/index.tsx` 里加入动物区域

第二步：在 `Footer.module.css` 里加入装饰样式

这里你必须替换的内容

第三步：保存后重新启动前端

源码方案和后台方案怎么选

什么时候更推荐源码方案

常见问题

1. 我保存了，但前台什么都没显示

2. 为什么这篇教程没有继续用 `#footer-bar`

3. 暗色模式下感觉太亮了怎么办

4. 我可以换成自己的别的装饰图吗

5. 后台方案和源码方案能不能同时用

可继续自定义的方向

总结

评论区