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>

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

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

今天老蒋再分享一篇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>

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

赞 (0)

猜您想看

评论区(1条评论)

我要评论


刘同学
LV1

请问怎么找到halo的ftl文件呢?