变量和方法

巴克励步

发布于：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	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 }}

提交反馈

表单示例