前置阅读: 自定义变量和方法 中与 CMS 共用的
site、
page 等对象(文中标注「同 cms 站点」的部分)。
本教程介绍 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
对page列表进行排序,排序规则:
| 参数 |
解释 |
| created_at |
按照创建时间排列 |
| edited_at |
按照修改时间排列 |
| visits_count |
按照访问量排列 |
在参数前添加-,代表倒序排列
示例:
{% assign tag_pages = tag.pages | order_by: '-created_at' %}
where
对page列表进行筛选,筛选参数
示例:
{% 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
comment列表一级评论
示例:
{{ post.comments | roots | size }}
</url>