Post

halo-theme-joe2.0主题修改记录

/ 技术教程

本文总结了Halo主题的五个实用修改技巧：首先需修改journals.ftl文件中的日志跳转地址，将默认admin路径改为自定义路径；参考指定链接可实现在文章标题中嵌入个人网站标题；同样通过参考链接可为文章页面添加上一篇下一篇标题显示功能；在post_operate_aside.ftl模板中添加代码可生成侧边悬浮小程序码按钮；最后通过修改aside.ftl和tags.ftl文件，为侧边栏标签云和标签页标题添加彩色显示功能，通过style属性设置color:${tag.color!}实现个性化标签样式。这些修改能有效提升博客用户体验和个性化程度。

1、halo后台修改之后，需要修改主题日志页面，右上角跳转日志新增地址

修改模板journals.ftl 代码位置16行左右，如下代码 admin 改成自定义的路径

<a class="joe_journal_add" href="${blog_url+'/admin/index.html#/sheets/journals'}" target="_blank" rel="nofollow"><i class="joe-font joe-icon-edit"></i></a>

2、修改文章标题能带上个人网站的标题

参考http://www.sammery.com/archives/69.html

3、修改文章页面上一篇下一篇可以显示文章标题功能

参考http://www.sammery.com/archives/57.html

4、文章页面侧边悬浮按钮，增加当前文章小程序码，实现在小程序端浏览

修改模板post_operate_aside.ftl ，在最后一个图标后面添加如下代码：

  <#if settings.enable_share_weixin>
    <li class="post-operate-donate">
      <i class="joe-font joe-icon-qrcode2"></i>
          <div class="joe_donate">
              <p>微信扫一扫，小程序浏览！</p>
              <ol class="joe_donate_list${(settings.qrcode_zfb?? && settings.qrcode_wx??)?string(' two','')}">
                <#if settings.qrcode_zfb??><li><img src="https://www.muyin.site/weChat/qrcode.php?type=image&isHyaline=false&articleId=${post.id!}" onerror="Joe.errorImg(this)" alt="微信扫一扫，小程序浏览！"/></li></#if>
              </ol>
          </div>  
    </li>
  </#if>

5、彩色标签

（1）修改侧边栏标签云颜色根据标签设置显示，修改模板文件/template/common/aside.ftl 代码位置104行，添加代码 style=“color:${tag.color!}” 完整代码如下：

<a data-url="${tag.fullPath!}" data-label="${tag.name!}" href="${tag.fullPath!}" title="${tag.name!}" style="color:${tag.color!}">${tag.name!}</a>

（2）修改标签页面标签标题颜色，修改模板文件tags.ftl 代码位置32行，修改如下：

<figcaption class="title" style="color:${tag.color!}">${tag.name!}</figcaption>

#Halo#主题美化

评论