1. 前言
如果你正使用Halo博客系统并选择了Joe3主题，你会发现其主题页脚设计非常丰富，也非常美观，可能也是我们选择Joe3的原因吧。但是每个人实际的需求是不同的，默认模板肯定不能都满足，你肯定也希望在页脚部分能有更多的自定义内容。相较于传统方法——直接在模板文件中修改这些信息，这种方法虽然简单，但每次信息更新时都需要手动编辑代码，显得既繁琐又缺乏灵活性。为了最简便的实现符合自身需求的功能，可以充分利用Halo系统的后台注入功能来动态生成页脚内容，这样既无需修改配置文件，也不影响主题文件后续的更新。
2. 优化前后对比
 |  |
演示站点：Dangks' Blog （欢迎访问我的个人博客）
3. 实现步骤
3.1 确保 DOM 完全加载
首先，我们需要确保在 DOM 完全加载后再执行 JavaScript 代码。这可以通过监听 DOMContentLoaded 事件来实现：
document.addEventListener('DOMContentLoaded', function () {
// 在这里编写你的 JavaScript 代码
});3.2 获取原始的 .joe_footer 元素
接下来，我们需要通过querySelector方法获取页面中现有的 .joe_footer 元素。这个元素是我们要替换内容的目标：
var originalJoeFooter = document.querySelector('.joe_footer');
if (!originalJoeFooter) {
console.error('Original .joe_footer element not found');
return;
}3.3 创建新的 HTML 内容
然后，我们定义一个新的 HTML 内容字符串，包含所有需要显示的信息。这里是一个简化的内容结构（实操可以直接复制Joe3的页脚内容进行修改，也可以完全自己写一个内容样式）：
var newContent = `
<div class="joe_container">
<div class="item">
<p>
© 2022 - 2024 <a href="http://example.com" target="_blank" rel="noopener noreferrer">Your Blog Name</a>
<br>
<a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow">备案号</a>
<a href="https://icp.gov.moe/?keyword=your_icp_number" target="_blank">萌ICP备号</a>
</p>
<p class="site_powered">
Powered by <a href="https://halo.run/" target="_blank" rel="noopener noreferrer">Halo</a>
</p>
<p class="site_driven">
本站点由 <a href="https://cloud.tencent.com" target="_blank" rel="noopener noreferrer nofollow">腾讯云</a> 提供云服务
</p>
<div class="site_life">
已运行 <strong class="joe_run__day">0</strong> 天 <strong class="joe_run__hour">0</strong> 时 <strong class="joe_run__minute">0</strong> 分 <strong class="joe_run__second">0</strong> 秒
</div>
<p class="site_police">
<a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" rel="noopener noreferrer nofollow">公安备案号</a>
</p>
</div>
<div class="side-col">
<div class="item">
<a class="rss" href="/rss.xml" target="_blank" rel="noopener noreferrer"><i class="joe-font joe-icon-rss-fill"></i> RSS</a>
<a href="/sitemap.xml" target="_blank" rel="noopener noreferrer">站点地图</a>
</div>
</div>
</div>
`;3.4 替换原有内容
最后，我们将新的内容注入到现有的 .joe_footer 元素中：
originalJoeFooter.innerHTML = newContent;4. 完整代码示例
将上述代码片段组合起来，完整的 JavaScript 代码如下：
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取原始的 .joe_footer 元素
var originalJoeFooter = document.querySelector('.joe_footer');
if (!originalJoeFooter) {
console.error('Original .joe_footer element not found');
return;
}
// 创建新的 HTML 内容
var newContent = `
<div class="joe_container">
<div class="item">
<p>
© 2022 - 2024 <a href="http://example.com" target="_blank" rel="noopener noreferrer">Your Blog Name</a>
<br>
<a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow">备案号</a>
<a href="https://icp.gov.moe/?keyword=your_icp_number" target="_blank">萌ICP备号</a>
</p>
<p class="site_powered">
Powered by <a href="https://halo.run/" target="_blank" rel="noopener noreferrer">Halo</a>
</p>
<p class="site_driven">
本站点由 <a href="https://cloud.tencent.com" target="_blank" rel="noopener noreferrer nofollow">腾讯云</a> 提供云服务
</p>
<div class="site_life">
已运行 <strong class="joe_run__day">0</strong> 天 <strong class="joe_run__hour">0</strong> 时 <strong class="joe_run__minute">0</strong> 分 <strong class="joe_run__second">0</strong> 秒
</div>
<p class="site_police">
<a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" rel="noopener noreferrer nofollow">公安备案号</a>
</p>
</div>
<div class="side-col">
<div class="item">
<a class="rss" href="/rss.xml" target="_blank" rel="noopener noreferrer"><i class="joe-font joe-icon-rss-fill"></i> RSS</a>
<a href="/sitemap.xml" target="_blank" rel="noopener noreferrer">站点地图</a>
</div>
</div>
</div>
`;
// 替换原有内容
originalJoeFooter.innerHTML = newContent;
});
</script>5. 结语
通过上述步骤，不仅能够保持Joe3主题页脚的优雅外观，还能确保信息的及时更新，减少维护成本，让网站管理更加高效便捷。这样一来，无论是版权信息的更改还是其他细节的调整，都可以轻松实现，而无需担心影响到整体的设计美感。也没有改变系统的配置文件，丝毫不用担心后续主题文件的更新。这种方法不仅提高了代码的灵活性，对于看不明白项目代码的非开发类博主还增加了可操作性。希望本文对你有所帮助！
