mirror of
https://github.com/halo-dev/docs.git
synced 2026-01-16 03:06:06 +08:00
aee974185e
完善 Halo 2.0 主题开发的文档。 /kind documentation Fixes https://github.com/halo-dev/docs/issues/109 TODO list: - [x] 准备工作 - 提供从搭建 Halo 开发环境到成功应用一个新的主题的过程。 - [x] 目录结构 - 详细解释一个主题的目录构成，包括每一个目录和文件的作用。 - [x] 配置文件 - 提供 `theme.yaml` 的各个配置的解释。 - [x] 设置选项 - 讲解如何在主题模板中使用主题定义的 `settings.yaml` 配置项。**注意：关于 settings.yaml 或许可以单独出一篇文档，因为插件也需要用到。主题和插件的文档只需要单独讲解如何使用** - [x] 静态资源 - 讲解静态资源的引用。 - [x] 核心路由 - 列出 Halo 核心提供的路由以及模板，其中需要包括 `文章/自定义页面/分类的自定义模板` 的讲解 - [x] 模板变量 - 讲解系统内提供的路由对应模板中包含的变量。 - [x] Finder APIs - 讲解数据获取 API 的使用。 - [x] 常用代码片段 - 提供一些在主题开发中常用的代码片段，比如如何定义一个 `layout.html`，如何结构化渲染一个菜单或者文章分类等。 ```release-note None ```
1.8 KiB
1.8 KiB
title, description
| title | description |
|---|---|
| 静态资源 | 本文档介绍主题的静态资源的引用方法。 |
通过 目录结构 的讲解我们可以知道，目前主题的静态资源统一托管在 /templates/assets/ 目录下，下面讲解一下如何在模板中使用，大致会分为两种引入方式。
模板标签引用
<link rel="stylesheet" th:href="@{/assets/dist/style.css}" />
<script th:src="@{/assets/dist/main.iife.js}"></script>
<img th:src="@{/assets/images/logo.png}" />
其中 @{/assets/dist/style.css} 表示引用 /templates/assets/dist/style.css 文件。最终会被渲染为：
<link rel="stylesheet" href="/themes/my-theme/assets/dist/style.css" />
API 引用
以上方式仅支持在 HTML 标签中使用，且必须使用 @{} 包裹才能渲染为正确的路径。如果需要在非 HTML 标签中得到正确的路径，我们提供了 #theme.assets() API。
:::info 注意
需要注意的是，调用 #theme.assets() 的时候，资源地址不需要添加 /assets/。
:::
比如我们需要在 JavaScript 中异步获取一些资源：
<script th:inline="javascript">
loadScript('[(${#theme.assets("/dist/main.iife.js")})]');
// loadScript('/themes/my-theme/assets/dist/main.iife.js');
function loadScript(url) {
return new Promise(function (resolve, reject) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
</script>
:::info 提示 关于在 JavaScript 中使用 Thymeleaf 语法可以参考 Thymeleaf 官方文档：JavaScript inlining :::