[Joe3] 利用Halo后台注入功能定制Joe3主题页脚内容

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>
         &nbsp;&nbsp;
         <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>&nbsp;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>
           &nbsp;&nbsp;
           <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>&nbsp;RSS</a>
           <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer">站点地图</a>
         </div>
       </div>
     </div>
   `;
 ​
   // 替换原有内容
   originalJoeFooter.innerHTML = newContent;
 });
 </script>

5. 结语

通过上述步骤，不仅能够保持Joe3主题页脚的优雅外观，还能确保信息的及时更新，减少维护成本，让网站管理更加高效便捷。这样一来，无论是版权信息的更改还是其他细节的调整，都可以轻松实现，而无需担心影响到整体的设计美感。也没有改变系统的配置文件，丝毫不用担心后续主题文件的更新。这种方法不仅提高了代码的灵活性，对于看不明白项目代码的非开发类博主还增加了可操作性。希望本文对你有所帮助！