参加云服务商的活动,要求在博客添加外链,在后台主题设置的代码注入中添加代码没有正常显示,于是直接去修改主题文件了。
添加文字链接
<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
以下是我让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:replace
或 th: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/*.html
、modules/*.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.html
、moment.html
- 友链:
friends.html
、page_links.html
、link.html - 404 页面:
error/404.html
- 页脚、博主栏等公共组件:footer.html、blogger.html
- 导航栏:navbar.html
评论区