前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Halo博客主题开发之页面变量调用示范整理

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

作者头像
老蒋
发布2021-12-22 19:27:12
4080
发布2021-12-22 19:27:12
举报
文章被收录于专栏:老蒋专栏老蒋专栏

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

同样,文档参考来自Halo官方,如果有需要最新标准的可以访问官方文档。

1、首页(index.ftl)

遍历输出首页的文章:

代码语言:javascript
复制
<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

输出:

代码语言:javascript
复制
<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)

获取文章标题:

代码语言:javascript
复制
<span>${post.title!}</span>

输出:

代码语言:javascript
复制
<span>示例文章</span>

获取上一篇文章的信息:

代码语言:javascript
复制
<#if prevPost??>
    <a href="${prevPost.fullPath!}">上一篇:${prevPost.title!}</a>
</#if>

输出:

代码语言:javascript
复制
<a href="http://localhost:8090/archives/url1">上一篇:title1</a>

获取下一篇文章的信息:

代码语言:javascript
复制
<#if nextPost??>
    <a href="${nextPost.fullPath!}">上一篇:${nextPost.title!}</a>
</#if>

输出:

代码语言:javascript
复制
<a href="http://localhost:8090/archives/url3">上一篇:title3</a>

获取文章的分类列表:

代码语言:javascript
复制
<#list categories as category>
    <a href="${category.fullPath!}">${category.name!}</a>
</#list>

输出:

代码语言:javascript
复制
<a href="http://localhost:8090/categories/url1">name1</a>
<a href="http://localhost:8090/categories/url2">name2</a>

获取文章的标签列表:

代码语言:javascript
复制
<#list tags as tag>
    <a href="${tag.fullPath!}">${tag.name!}</a>
</#list>

输出:

代码语言:javascript
复制
<a href="http://localhost:8090/tags/url1">name1</a>
<a href="http://localhost:8090/tags/url2">name2</a>

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

代码语言:javascript
复制
<audio src="${metas.music_url}" controls="controls"></audio>

输出:

代码语言:javascript
复制
<audio src="/music.mp3" controls="controls"></audio>

3、自定义页面(sheet.ftl)

获取页面标题:

代码语言:javascript
复制
<span>${sheet.title!}</span>

输出:

代码语言:javascript
复制
<span>示例页面</span>

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

代码语言:javascript
复制
<audio src="${metas.music_url}" controls="controls"></audio>

输出:

代码语言:javascript
复制
<audio src="/music.mp3" controls="controls"></audio>

4、文章归档页面(archives.ftl)

遍历输出归档页面的文章(无年份分组):

代码语言:javascript
复制
<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

输出:

代码语言:javascript
复制
<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>

遍历输出归档页面的文章(有年份分组):

代码语言:javascript
复制
<#list archives.content as archive>
  <h1>${archive.year?c}</h1>
  <#list archive.posts as post>
    <a href="${post.fullPath!}">${post.title!}</a>
  </#list>
</#list>

输出:

代码语言:javascript
复制
<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)

遍历输出某个分类的文章:

代码语言:javascript
复制
<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

输出:

代码语言:javascript
复制
<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>

分类:

代码语言:javascript
复制
<a href="${category.fullPath!}">分类:${category.name!}</a>

5、标签页面(tags.ftl)

单个标签所属文章页面(tag.ftl)

遍历输出某个标签的文章:

代码语言:javascript
复制
<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

标签:

代码语言:javascript
复制
<a href="${tag.fullPath!}">标签:${tag.name!}</a>

6、文章搜索结果页面(search.ftl)

代码语言:javascript
复制
搜索关键字为:${keyword!}

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

代码语言:javascript
复制
<#list posts.content as post>
    <a href="${post.fullPath!}">${post.title!}</a>
</#list>

7、图库页面(photos.ftl)

代码语言:javascript
复制
<#list photos.content as photo>
    <img alt="${photo.description!}" src="${photo.url!}"/>
</#list>

8、日志页面(journals.ftl)

代码语言:javascript
复制
<ul>
  <#list journals.content as journal>
    <li>
      ${journal.createTime?string('yyyy年MM月dd日')}:${journal.content!}
    </li>
  </#list>
</ul>

这里只是针对页面变量的。具体到页面的标签还有单独的整理,这个后面老蒋再单独整理。

本文出处:老蒋部落 » Halo博客主题开发之页面变量调用示范整理

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-09-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档