变量和方法
本教程介绍 Liquid 模板 Community 社区开发中的变量和方法使用。
Object(对象)
| 类型名称 | 解释 |
|---|---|
| site | 当前cms站点信息 |
| page | 页面的详细信息 |
| tag | 标签 |
| author | 作者 |
| comment | 评论 |
| current_user | 当前登录用户 |
| plugins.feedback | 用户反馈插件 |
site(当前站点)(同cms站点)
| 属性/方法 | 类型 | 解释 | 示例 |
|---|---|---|---|
| name | string | 站点名称 | 开心农场 |
| favicon_url | string | 站点图标 | |
| time_zone | string | 站点时区 | Beijiang |
page(页面)(同cms站点)
| 属性/方法 | 类型 | 使用方法 | 返回值 | 说明 |
|---|---|---|---|---|
| id | string | page.id |
9g5hkd | 页面的ID唯一标识 |
| slug | string | page.slug | guide | 页面path/url的唯一标识 |
| link_text | string | page.link_text |
操作教程 | 页面标题 |
Comment(页面)同cms站点)
| 属性/方法 | 类型 | 使用方法 | 返回值 | 说明 |
|---|---|---|---|---|
| id | string | comment.id | 9g5hkd | 评论的ID唯一标识 |
| body | string | comment.body | guide | 评论的内容 |
| created_at | datetime | comment.created_at | 评论创建时间 { page.created_at | time_ago }} {{ page.created_at | date: “%Y-%m-%d” }} | |
| author | author | comment.author | 评论作者 | |
| reply_to_user | author | comment.reply_to_user | 回复内容作者 | |
| target | page | comment.target | 评论主题 | |
| parent | comment | comment.parent | 回复的评论 | |
| root | comment | comment.root | 评论所属一级评论 | |
| replies | comment[] | comment.replies | 评论回复集合 |
current_user(当前登录用户)同cms站点)
| uid | string | current_user.uid | 10001 | 用户的ID唯一标识 |
|---|---|---|---|---|
| name | string | current_user.name | 张三 | 用户名称 |
| image | string | current_user.image | http://site-5zw8rxj1.free.lvh.me:3000/-/avatars/ey…CJ9fQ==--f3bb19439273b4e1f05ffbdbd9ce7108485c7f75 |
用户头像地址 |
| member_id | integer | current_user.member_id | 用户成员的ID唯一标识 | |
| profile_url | string | current_user.profile_url | http://tanmer.lvh.me:3000/my/profile |
个人中心链接 |
| pages | page[] | current_user.pages | 当前用户创建的页面集合 |
tag(标签)同cms站点)
| 属性/方法 | 类型 | 解释 | 示例 |
|---|---|---|---|
| path | string | 标签页面的路径 | /-/tags/AxdEf |
| name | string | 名称 | 测试标签 |
| color | string | 字体颜色 | #42445A |
| bg_color | string | 背景颜色 | #42445A |
| color_hls | string | 颜色计算 | background-color: hsl({{ tag.color_hls[0] }}, {{ tag.color_hls[1] }}%, 90%); |
| pages_count | integer | 含有该标签的页面数量 | <待开放> |
| pages | page[] | 含有该标签的页面列表 |
页面的标签通过在
settings 中动态定义,通过 page.settings.tags 方法调用。{% schema %}
{
"settings": [
{
"id": "tags",
"type": "tag_picker",
"multiple": true,
"label": "标签"
}
]
}
{% schemaend %}
- 页面中的调用示例:
{% for tag in page.settings.tags %}
<span style="background-color: {{ tag.color }}" class="px-2 py-1 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2">
{{ tag.name }}
</span>
{% endfor %}
site.tags 则返回当前站点的 Tag 标签集合
<ul role="list" class="flex flex-col space-y-1">
{% for tag in site.tags %}
<li>
<a href="{{ tag.path }}" class="flex items-center px-2 py-2 space-x-2 transition-all duration-300 ease-in-out hover:bg-gray-500/5">
<span class="w-2 h-2 rounded-full shrink-0" style="
background-color: hsl({{ tag.color_hls[0] }}, {{ tag.color_hls[1] }}%, 90%);
color: {{ tag.color }};"></span>
<span class="flex-grow w-0 break-words" style="color: {{ tag.color }};">
{{ tag.name }}
</span>
</a>
</li>
{% endfor %}
</ul>
author(作者)
| 属性/方法 | 类型 | 解释 | 示例 |
|---|---|---|---|
| name | string | 作者名称 | 张三 |
| avatar_url | string | 作者头像 |
操作示例:
{% assign avatar_url = 'images/icons/icon.svg' | asset_url %}
<img src="{{ page.author.avatar_url | default: avatar_url }}" class="w-10 h-10 rounded-full" />
{{ page.author.name }}
plugins.feedback (用户反馈配置信息)(同cms站点)
| 属性/方法 | 类型 | 解释 | 示例 |
|---|---|---|---|
| helpful_types | Array(JSON) | 用户可选择的表情列表 | plugins.feedback.helpful_types |
| helpful_types[0].emoji | string | 表情符 | 😊 |
| helpful_types[0].label | string | 表情符对应的意思 | 有用 |
| helpful_label | string | 提示用户选择表情 | 您的反馈是对我们的产品极其重要 |
| message_enabled | boolean | 是否启用反馈留言 | |
| message_required | boolean | 当开启反馈留言,反馈留言是否必填 | |
| login_required | boolean | 反馈是否必须登录 |
Filter(函数)
| 名称 | 解释 |
|---|---|
| order_by | 排序 |
order_by
对
page列表进行排序,排序规则:| 参数 | 解释 |
|---|---|
| created_at | 按照创建时间排列 |
| edited_at | 按照修改时间排列 |
| visits_count | 按照访问量排列 |
在参数前添加-,代表倒序排列
示例:
{% assign tag_pages = tag.pages | order_by: '-created_at' %}
| 名称 | 解释 |
|---|---|
| where | 筛选 |
where
对
page列表进行筛选,筛选参数| 参数 | 解释 |
|---|---|
| template_name | 模板名称 |
示例:
{% assign pages = search.pages | where: 'template_name', 'post' %}
| 名称 | 解释 |
|---|---|
| feedback_count | 反馈数量 |
| feedback_type_count(page, useful_type) | 某个反馈类型的反馈数量 |
feedback_count、feedback_type_count
获取
page的反馈数量示例:
{{ page | feedback_type_count: '😊' }} //😊表情的反馈数量
{{ page | feedback_count }} //页面总反馈数
| roots | 一级评论 |
roots
comment列表一级评论示例:
{{ post.comments | roots | size }}
</url>