Halo博客主题开发之页面变量调用示范整理

ssr

撰写于 2022年 02月 26 日

今天老蒋再分享一篇Halo轻量博客相关的文章，也是关于主题开发的。一般我们在使用WP或者ZBP博客程序的时候开发主题，是不是有需要页面调用变量的。同样在Halo博客主题的时候也是如此。在前面，我们也有介绍到"Halo博客主题开发之全局变量模板标签调用整理"。这里我们将页面的变量调用实际以实际的案例使用整理。

同样，文档参考来自Halo官方，如果有需要最新标准的可以访问官方文档。
1、首页（index.ftl）
遍历输出首页的文章：

<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

输出：

<a href="http://localhost:8090/archives/url1">title1</a>
<a href="http://localhost:8090/archives/url2">title2</a>
<a href="http://localhost:8090/archives/url3">title3</a>

2、文章页面（post.ftl）
获取文章标题：

<span>${post.title!}</span>

输出：

<span>示例文章</span>

获取上一篇文章的信息：

<#if prevPost??>
    <a href="${prevPost.fullPath!}">上一篇：${prevPost.title!}</a>
</#if>

输出：

<a href="http://localhost:8090/archives/url1">上一篇：title1</a>

获取下一篇文章的信息：

<#if nextPost??>
    <a href="${nextPost.fullPath!}">上一篇：${nextPost.title!}</a>
</#if>

输出：

<a href="http://localhost:8090/archives/url3">上一篇：title3</a>

获取文章的分类列表：

<#list categories as category>
    <a href="${category.fullPath!}">${category.name!}</a>
</#list>

输出：

<a href="http://localhost:8090/categories/url1">name1</a>
<a href="http://localhost:8090/categories/url2">name2</a>

获取文章的标签列表：

<#list tags as tag>
    <a href="${tag.fullPath!}">${tag.name!}</a>
</#list>

输出：

<a href="http://localhost:8090/tags/url1">name1</a>
<a href="http://localhost:8090/tags/url2">name2</a>

获取用户设置的音乐链接：

<audio src="${metas.music_url}" controls="controls"></audio>

输出：

<audio src="/music.mp3" controls="controls"></audio>

3、自定义页面（sheet.ftl）
获取页面标题：

<span>${sheet.title!}</span>

输出：

<span>示例页面</span>

获取用户设置的音乐链接：

<audio src="${metas.music_url}" controls="controls"></audio>

输出：

<audio src="/music.mp3" controls="controls"></audio>

4、文章归档页面（archives.ftl）
遍历输出归档页面的文章（无年份分组）：

<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

输出：

<a href="http://localhost:8090/archives/url1">title1</a>
<a href="http://localhost:8090/archives/url2">title2</a>
<a href="http://localhost:8090/archives/url3">title3</a>

遍历输出归档页面的文章（有年份分组）：

<#list archives.content as archive>
  <h1>${archive.year?c}</h1>
  <#list archive.posts as post>
    <a href="${post.fullPath!}">${post.title!}</a>
  </#list>
</#list>

输出：

<h1>2021</h1>
<a href="http://localhost:8090/archives/url1">title1</a>
<a href="http://localhost:8090/archives/url2">title2</a>
<a href="http://localhost:8090/archives/url3">title3</a>
<h1>2020</h1>
<a href="http://localhost:8090/archives/url4">title4</a>
<a href="http://localhost:8090/archives/url5">title5</a>
<a href="http://localhost:8090/archives/url6">title6</a>

4、单个分类所属文章页面（category.ftl）
遍历输出某个分类的文章：

<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

输出：

<a href="http://localhost:8090/archives/url1">title1</a>
<a href="http://localhost:8090/archives/url2">title2</a>
<a href="http://localhost:8090/archives/url3">title3</a>

分类：

<a href="${category.fullPath!}">分类：${category.name!}</a>

5、标签页面（tags.ftl）
单个标签所属文章页面（tag.ftl）
遍历输出某个标签的文章：

<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

标签：

<a href="${tag.fullPath!}">标签：${tag.name!}</a>

6、文章搜索结果页面（search.ftl）

搜索关键字为：${keyword!}

遍历输出某个搜索结果的文章：

<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

7、图库页面（photos.ftl）

<#list photos.content as photo>
    <img alt="${photo.description!}" src="${photo.url!}"/>
</#list>

8、日志页面（journals.ftl）

<ul>
  <#list journals.content as journal>
    <li>
      ${journal.createTime?string('yyyy年MM月dd日')}：${journal.content!}
    </li>
  </#list>
</ul>

这里只是针对页面变量的。具体到页面的标签还有单独的整理。