侧边栏壁纸
博主头像
静水流深

静水流深,沧笙踏歌

  • 累计撰写 49 篇文章
  • 累计创建 0 个标签
  • 累计收到 23 条评论

目 录CONTENT

文章目录

Halo—Joe3主题添加页脚信息

唐韵
2025-06-07 / 0 评论 / 0 点赞 / 3 阅读 / 0 字

参加云服务商的活动,要求在博客添加外链,在后台主题设置的代码注入中添加代码没有正常显示,于是直接去修改主题文件了。

添加文字链接

<a target="_blank" href="https://langlangy.cn/">浪浪云</a>

添加图片链接

<a target="_blank" href="https://langlangy.cn/"><img src="https://langlangy.cn//https://langlangy.cn/home/img/logo.png"></a>

对前端开发并不了解,也不知道去哪里修改,问了AI也没找到,于是根据页脚的页面元素的字符,直接在VSCode中搜索整个主题工程,然后就找到了相关字符所在的位置,此时再问AI,它就能写出合适的代码并告诉你如何修改。

与页脚有关的代码路径如下:

\Joe3\theme-Joe3\templates\modules\common/footer.html

主题页脚代码修改.jpg

主题页脚效果.jpg


以下是我让AI根据工程生成的文件层级结构树和功能介绍

theme-Joe3/
├── annotation-setting.yaml
├── settings.yaml
├── theme.yaml
├── templates/
│   ├── archives.html
│   ├── author.html
│   ├── categories.html
│   ├── category.html
│   ├── friends.html
│   ├── index.html
│   ├── layout.html
│   ├── links.html
│   ├── moment.html
│   ├── moments.html
│   ├── page.html
│   ├── page_leaving.html
│   ├── page_links.html
│   ├── photos.html
│   ├── post.html
│   ├── tag.html
│   ├── tags.html
│   ├── error/
│   │   └── 404.html
│   ├── modules/
│   │   ├── config.html
│   │   ├── donate.html
│   │   ├── key_css.html
│   │   ├── layout.html
│   │   ├── link.html
│   │   ├── themeSettingVariable.html
│   │   ├── common/
│   │   │   ├── blogger.html
│   │   │   ├── footer.html
│   │   │   └── ...
│   │   └── macro/
│   │       ├── navbar.html
│   │       └── ...
│   └── ...
├── assets/
│   ├── css/
│   ├── cursor/
│   ├── effect/
│   ├── font/
│   ├── frame/
│   ├── img/
│   ├── js/
│   ├── lib/
│   │   ├── font-awesome/
│   │   ├── prism/
│   │   ├── pdfjs/
│   │   └── ...
│   ├── svg/
│   ├── utils/
│   └── widget/
└── ...

根目录文件

  • annotation-setting.yaml
    主题的注解配置文件,通常用于 Halo 主题市场的元数据描述。

  • settings.yaml
    主题的设置项定义文件,决定了后台可配置的主题选项,比如自定义 CSS、JS、主题色等。

  • theme.yaml
    主题的核心描述文件,包含主题名称、作者、版本、依赖、模板映射等,是 Halo 识别主题的关键文件。


templates/ 目录

主题的主要模板文件夹,所有页面结构、组件、静态资源都在这里。

页面模板(HTML)

  • archives.html
    归档页模板,展示所有文章的归档列表。

  • author.html
    作者页模板,展示作者信息和相关内容。

  • categories.html / category.html
    分类列表页和单个分类页模板。

  • friends.html
    友链页面模板,展示友情链接。

  • index.html
    首页模板,博客的主页面。

  • layout.html
    通用布局模板,通常包含头部、底部、侧边栏等公共结构。

  • links.html
    友链相关页面模板。

  • moment.html / moments.html
    瞬间(类似说说、动态)页面模板。

  • page_leaving.html
    留言板页面模板。

  • page_links.html
    友链页面的另一种模板。

  • page.html
    通用单页模板。

  • photos.html
    相册页面模板。

  • post.html
    文章详情页模板。

  • tag.html / tags.html
    标签页模板。


assets/ 目录

静态资源文件夹,包含主题用到的所有前端资源。

  • css/
    样式表文件(CSS/LESS/SCSS),控制页面的样式和布局。

  • cursor/
    鼠标指针特效相关资源。

  • effect/
    页面特效相关资源。

  • font/
    字体文件。

  • frame/
    头像挂件、相框等图片资源。

  • img/
    主题用到的图片资源。

  • js/
    主题自定义的 JavaScript 文件。

  • lib/
    第三方库(如 font-awesome、prism、pdfjs 等),用于图标、代码高亮、PDF 预览等功能。

  • svg/
    SVG 图标资源。

  • utils/
    工具类脚本或样式。

  • widget/
    小部件相关资源。


error/ 目录

  • 404.html
    404 页面模板,访问不存在页面时显示。

modules/ 目录

主题的可复用模块(组件),通过 th:replaceth:fragment 引入到各页面。

  • config.html
    主题配置相关的 JS 逻辑和变量注入。

  • donate.html
    打赏组件模板。

  • key_css.html
    主题关键 CSS 变量、字体、暗色模式等全局样式设置。

  • layout.html
    公共布局片段。

  • link.html
    友链相关的片段。

  • common/
    公共组件,如页脚(footer.html)、博主栏(blogger.html)等。

  • macro/
    宏组件,如导航栏(navbar.html)等。

  • themeSettingVariable.html
    主题 JS 配置变量注入模板。


主题功能与文件对应关系

  • 主题设置项:settings.yaml、theme.yaml、annotation-setting.yaml
  • 页面结构与内容templates/*.htmlmodules/*.html
  • 页面样式与特效assets/css/assets/effect/、key_css.html
  • 图标与字体assets/lib/font-awesome/assets/font/
  • 代码高亮assets/lib/prism/
  • PDF 预览assets/lib/pdfjs/
  • 图片与相册assets/img/assets/frame/assets/photos.html
  • 动态与说说moments.htmlmoment.html
  • 友链friends.htmlpage_links.html、link.html
  • 404 页面error/404.html
  • 页脚、博主栏等公共组件:footer.html、blogger.html
  • 导航栏:navbar.html
0

评论区