halo butterfly主题修改

由于butterfly主题几年都没有更新和维护，随着halo服务端的升级该主题有些地方会出现不兼容的问题，以及我对该主题有些自定义的需求，所以这里记录下对该主题的临时修改。

这里只修改halo部署后的主题文件，主题更新后将会被覆盖，如果有时间可以拉取源码进行修改自己维护。

一、菜单跳转异常

问题背景

在 Halo Butterfly 主题中，菜单链接的<a>标签通过th:target="${menuItem.spec.target}"动态设置 target 属性，但后台配置的menuItem.spec.target值为SELF（非 HTML 标准值），导致链接默认在新标签页打开，不符合预期。

解决方案

通过 Thymeleaf 的字符串判断 + 三元表达式，将非标准值映射为 HTML 合法的 target 属性值，核心代码修改如下：

<a class="menu-link relative inline-block" 
   th:href="${menuItem.status.href}"
   <!-- 核心转换逻辑：兼容SELF/BLANK等非标准值 -->
   th:target="@{
     ${#strings.equalsIgnoreCase(menuItem.spec.target, 'SELF') ? '_self' : 
       #strings.equalsIgnoreCase(menuItem.spec.target, 'BLANK') ? '_blank' : 
       #strings.equalsIgnoreCase(menuItem.spec.target, 'PARENT') ? '_parent' : 
       #strings.equalsIgnoreCase(menuItem.spec.target, 'TOP') ? '_top' : 
       menuItem.spec.target
     }
   }" 
   data-pjax>
  <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(menuItem, 'icon', ''))}"
     th:class="${#annotations.getOrDefault(menuItem, 'icon', '')}"></i>
  <span class="menu-name" th:text="${menuItem.status.displayName}"> </span>
</a>

关键说明

HTML 标准 target 值：_self（当前页）、_blank（新标签页）、_parent（父框架）、_top（顶层框架），区分大小写且需带下划线；
代码中使用#strings.equalsIgnoreCase()忽略大小写，兼容SELF/self等不同配置形式；
若仅需处理SELF场景，可简化为：th:target="${#strings.equalsIgnoreCase(menuItem.spec.target, 'SELF') ? '_self' : menuItem.spec.target}"；

空值优化：若menuItem.spec.target可能为空，补充空值判断默认用_self：

th:target="${#strings.isEmpty(menuItem.spec.target) ? '_self' : 
             #strings.equalsIgnoreCase(menuItem.spec.target, 'SELF') ? '_self' : 
             menuItem.spec.target
           }"

生效步骤

重启halo → 刷新页面验证

docker-compose up -d

二、侧边栏头像移除操作

问题背景

需要隐藏 Halo Butterfly 主题侧边栏的头像展示，需定位并注释对应代码。

操作步骤

定位文件：主题目录下的/home/halo/themes/theme-butterfly/templates/modules/public.html；
查找代码：在文件中搜索关键词avatar，找到渲染头像的 HTML 片段（通常是<img>标签或包含avatar类的容器）；

注释代码：用包裹头像相关代码，示例：

<!-- 注释侧边栏头像 start -->
<!-- 
     <img class="avatar block margin-0-auto overflow-hidden"
     th:src="${theme.config.loading.preload}"
     th:attr="onerror='this.src='+${'`'+theme.config.loading.err+'`'}"
     th:data-lazy-src="${contributor.avatar}"
     th:alt="${contributor.displayName}" alt="">
-->
<!-- 注释侧边栏头像 end -->

生效验证：清除 Halo 缓存后刷新页面，确认侧边栏头像不再显示。

三、单页面（SinglePage）添加评论功能

问题背景

在 Halo Butterfly 主题的单页面（page.html）中不支持评论功能，如果想增加留言板则无法实现。

解决方案

在单页面page.html的 content 片段中添加评论组件代码，适配单页面的singlePage对象和SinglePage类型标识，核心代码如下：

<th:block th:fragment="content">
  <section class="container card">
    <article th:utext="${singlePage.content.content}"
             th:class="'render-html animated fadeIn single_code_select '+${ theme.config.code.enable_line ? 'line-numbers' : ''} + ${ !theme.config.single.enable_h_title ? ' enable_h_title' : ''}"></article>
    <!-- 新增内容：单页面评论组件 -->
    <div class="post-comment" th:if="${pluginFinder.available('PluginCommentWidget')}">
      <halo:comment colorScheme="window.dataTheme" 
                    group="content.halo.run" 
                    kind="singlePage"
                    th:attr="name=${singlePage.metadata.name}"/>
    </div>
  </section>
  <th:block th:replace="~{modules/public:: aside}"></th:block>
</th:block>

关键说明

核心适配点：
- 单页面核心对象为${singlePage}；
- 评论组件kind属性值为SinglePage ；
- name属性使用单页面唯一标识${singlePage.metadata.name}（必填，对应单页面数据结构的metadata.name字段）；
- group属性固定为content.halo.run，匹配 Halo 内置内容分组。

四、增加网站访问记录

解决方案

在halo管理端-设置-代码注入-全局head标签引入https://oss.vvhz.com/theme/plugins/butterfly/assets/js/route-logger.js，或者修改/home/halo/themes/theme-butterfly/templates/modules/layout.html ，在html中引入js文件，js文件目录/home/halo/themes/theme-butterfly/templates/assets/js/route-logger.js

<script type="text/javascript" th:src="${assets_link+'/js/route-logger.js'}"></script>

对应的文件：route-logger-kauiwtmg.js

该js文件会发起请求到服务器，服务器负责记录请求日志，例如：https://v.api.vvhz.com/api/log?route=https%3A%2F%2Fvvhz.com%2F

关键说明

核心修改：

引入js文件发起http请求；
服务端增加接口保存请求；

注意事项

这些都是修改的编译后的文件，没有修改源代码，更新主题后这些修改将失效。

通用注意事项

所有模板修改后均需清除 Halo 缓存，确保代码生效；
修改文件时注意路径正确性，需操作当前启用的主题目录；