最近使用的Halo博客系统Joe3.0主题，手机端侧边栏显示的博主名称、头像、背景图和每日一句和电脑端不一致，我做了一些个性化的调整，记录一下修改过程，方便以后查阅，也希望能给使用这个主题的朋友提供一些参考。

在进行任何文件修改前，强烈建议备份原主题文件，避免操作失误导致页面异常；修改完成后，若页面未及时生效，可通过Ctrl+F5强制刷新浏览器清除缓存，部分服务器端修改需重启容器生效。本次所有操作均基于 Halo 2.23.0版本+Joe3.0主题。

Halo官网：https://www.halo.run/

安装指南：https://docs.halo.run/category/%E5%AE%89%E8%A3%85%E6%8C%87%E5%8D%97

Joe3.0主题：https://github.com/jiewenhuang/halo-theme-joe3.0

博主背景图替换

背景图位于主题目录下的图片文件夹中，直接替换即可：

• 文件路径：themes/theme-Joe3/templates/assets/img

• 文件名：author_bg.jpg

将你喜欢的背景图命名为 author_bg.jpg，覆盖原文件。

博主头像替换

头像同样存放在同一目录下：

• 文件路径：themes/theme-Joe3/templates/assets/img

• 文件名：peeps-avatar.png

替换为自己的头像图片即可。

手机端博主名称显示为网站标题

在手机端，博主名称默认可能显示为空或者网站标题，需要对源文件做一些调整：

• 文件路径：themes/theme-Joe3/modules/macro

• 文件名：navbar.html

原代码：

[[${theme.config.blogger.name ?: site.title}]]

替换为：

[[${theme.config.blogger.nickname ?: site.title}]]

这样在手机端会优先显示博主昵称，未设置时仍默认显示网站标题。

手机端每日一句显示

在手机端导航栏中，默认显示博主签名，但如果没有设置签名，页面会显得空。可以增加一个“每日一句”功能作为补充。

• 文件路径：themes/theme-Joe3/modules/macro/navbar.html

• 文件名：navbar.html

原代码：

<p class="motto joe_motto">[[${theme.config.blogger.motto}]]</p>

替换为：

<!-- 个性签名 + 每日一句 -->
<th:block th:if="${theme.config.blogger.motto != ''}">
    <p class="motto joe_motto">[[${theme.config.blogger.motto}]]</p>
</th:block>
<th:block th:if="${theme.config.blogger.motto == ''}">
    <img class="motto_day_words" style="height:14px;" src="https://v2.jinrishici.com/one.svg?font-size=14&spacing=2&color=grey" />
</th:block>

这里如果出现文字溢出或显示不全，可以调整为更适配移动端的样式：

<img 
      class="motto_day_words" 
      style="height:14px; width:100%; object-fit:fill; object-fit:contain;" 
      src="https://v2.jinrishici.com/one.svg?font-size=12&spacing=0.5&color=grey" 
 />

这样可以确保每日一句自适应宽度，铺满一行，显示更自然。

修改登录页Logo（适用于容器部署）

如果使用Docker或其他容器方式部署Halo，修改主题文件后重建容器可能会导致修改丢失。此时可以通过终端命令直接替换登录页的Logo文件：

curl -o /application/BOOT-INF/classes/static/images/wordmark.svg "https://你的logo图片链接"

执行命令后重启容器，通过Ctrl+F5强制刷新浏览器清除缓存生效，重建容器会失效，若重建容器重复该操作即可。

以上是我在使用 Joe3.0主题过程中记录的一些小改动，希望对你有帮助。如果你也在使用joe3.0主题，欢迎交流分享。