变量和方法
Baklib
发布于:2024-10-16
本教程介绍 Liquid 模板 Community 社区开发中的变量和方法使用。
Object(对象)
类型名称 | 解释 |
---|---|
site | 当前cms站点信息 |
page | 页面的详细信息 |
tag | 标签 |
author | 作者 |
comment | 评论 |
current_user | 当前登录用户 |
plugins.feedback | 用户反馈插件 |
site(当前站点)(同cms站点)
属性/方法 | 类型 | 解释 | 示例 |
---|---|---|---|
name | string | 站点名称 | 开心农场 |
favicon_url | string | 站点图标 | <url> |
time_zone | string | 站点时区 | Beijiang |
page(页面)(同cms站点)
属性/方法 | 类型 | 使用方法 | 返回值 | 说明 |
---|---|---|---|---|
id | string | 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 | 个人中心链接 | |
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 }}