Baklib的Liquid语法文档


Baklib的语法文档主要是针对五个文件的应用场景

变量

  • site 站点信息

    • name
    • site_logo
    • site_color
    • site_header_image (* 废弃)
    • site_header_mask (* 废弃)
    • site_icon
    • site_slogan (* 废弃)
    • site_title
    • domain
    • root_channels 顶级栏目
    • icp_info
    • created_at
    • customized_menus 自定义菜单,值为 Hash 组成的数组,其 Hash 键包括:
      • title 文字
      • url 链接
      • target 打开目标窗口
      • children 子菜单,数组,与 customized_menus 输出的格式一样
  • layout 主题信息

    • variables # 获取主题变量值 layout.variables.<变量名>, 如: layout.variables.header_mask
  • channel 当前栏目信息

    • name
    • description
    • path
    • thumbs 缩略图
    • icon_name 栏目图标名称
    • variables 变量, 他的类型与 Hashie 相识, 可直接用属性的方式获取哈希值
    • template_key 模版标识符
    • created_at
    • updated_at
  • article 当前页面信息

    • name
    • description 用户填写的文章描述
    • aggressive_description 如果用户没有填写的文章描述,就从文章正文中提取前250个文字
    • path
    • thumbs 缩略图
    • created_at
    • updated_at
    • creator 创建者
      • name
      • image
    • editor 最有修改者
      • name
      • image
    • editors 数组,所有参与修改的人,每条记录的格式与 editor 输出的字段一致
    • tags 页面的标签列表 liquid {% for tag in article.tags %} {{ tag }} {% endfor %}
    • visits_count
    • html
    • variables 变量, 他的类型与 Hashie 相识, 可直接用属性的方式获取哈希值
    • template_key 模版标识符
  • search 搜索相关的信息

    • path 搜索的 URL 地址
    • keywords 搜索的关键字
    • result 搜索的结果,类型为文章的分页结果,用法见过滤器的 articles
  • params 获取网页参数

    如: {{ params.page }} 获取当前翻页的页码,{{ params.keywords }} 获取当前搜索参数

  • content_for_layout 当前 Layout 布局的内容,类似 Rails app/views/layouts/application.html.erb 中的 <%= yield %>

  • has_breadcrumb 是否有面包屑导航

过滤器

基础类过滤器

  • excerpt 基于关键字为半径,省掉两头的文字,通常在搜索结果中会用到。

    {{ "This is an example" | excerpt: "an", radius: 5 }}
    => ...s is an exam...
    
  • highlight 高亮显示关键字,通常在搜索结果中会用到。

    {{ "You searched for: rails" | highlight: "rails", highlighter: '<a href="search?q=\1">\1</a>' }}
    
  • escape 转义 HTML 标签,输出存文本

  • shuffle 随机打乱数组

  • sample 数组中随机取一个元素

  • rand 生成随机数

  • distance_of_time_in_words 把时间转换为“N天”

  • time_ago_in_words 把时间转换为“N天之前”

  • inspect 在前端页面中可以直观的看到变量类型和值

功能类过滤器

  • browser 判断浏览器类型和版本号

    {{ 'chrome' | browser }} 是否为 Google 浏览器
    {{ 'ie' | browser: 9 }} 是否为 IE 9
    
  • browser_device 判断设备类型

    {{ 'iphone' | browser_device }} 是否为 iPhone
    
  • browser 判断操作系统和版本号

    {{ 'android' | browser_platform: 7.0 }} 判断操作系统是否为 Android 7.0
    
  • browser 判断是否是移动端

    {% assign mobile_device =  'mobile' | browser_device %}
    {% if mobile_device %}
    {% endif %}
    

browser 滤器是基于 Gem browser 实现的,更多参数的使用方法,见 https://github.com/fnando/browser/

资源类过滤器

  • find_channel 查找栏目
  {% assign ch = '/projects/p1' | find_channel %}
  • subchannels 获取子栏目
  {% assign chs = channel | subchannels %}
  {% assign chs = '/projects' | subchannels %}
  • channels 获取旗下子孙栏目(非必要情况下,不建议使用。请用 subchannels 获取子栏目)
  {{ assign list = channel | channels }}
  {{ assign list = '/projects/p1' | channels }}
  {{ assign list = '/projects/p1' | channels: 'channel.default' }} 获取使用 channel.default 模版的栏目
  {{ assign list = '/projects/p1' | channels: 'channel.default', nested: true }} 获取使用 channel.default 模版的子孙栏目
  参数:
  - 第一位: String 模版标识,可以通过这个找到旗下使用相同模版的栏目,默认 nil
  - nested: (true|false) 获取子孙栏目,默认 false
  • find_article 查找页面
  {% assign article1 = '/projects/p1/a1' | find_article %}
  • articles 获栏目下的文章列表
  {% assign list = site | articles %} 获取站点的文章
  {% assign list = channel | articles %} 获取指定栏目下的文章
  {% assign list = '/projects/p1' | articles %}
  {% assign list = '/projects/p1' | articles: 1 %} 第一页
  {% assign list = '/projects/p1' | articles: 2, per_page: 10 %} 第二页,每页 10 个
  {% assign list = '/projects/p1' | articles: 1, hot: true %} 获取头条文章
  参数:
  - 第一位:页码
  - per_pages: 每页显示数量
  - hot: (true|false) 获取头条文章, 默认 false
  - recommend: (true|false) 获取推荐文章, 默认 false
  - slider: (true|false) 获取幻灯文章, 默认 false
  - bottom: (true|false) 获取底部文章, 默认 false
  - scroll: (true|false) 获取滚动文章, 默认 false
  - image: (true|false) 获取图片文章, 默认 false
  - tags: String 通过标签标过滤文章,各标签用竖线 "|" 隔开,默认匹配任意一个标签,都会返回记录, 默认空值
  - tags_match_all: (true|false) 是否匹配有所有标签的记录, 默认 false
  - tags_exclude: (true|false) 是否匹配没有指定标签的记录, 默认 false
  - nested: (true|false) 获取当前栏目和其子孙栏目下的文章,默认 false
  - template: String 模版标识,可以通过这个找到使用相同模版的文章,默认 nil

  返回结果:
  - total_count    总记录数
  - total_pages    总页数
  - current_page   当前页码
  - next_page      下一页页吗
  - prev_page      上一页页吗
  - first_page?    第一页?
  - last_page?     最后一页?
  - out_of_range?  超出范围?
  - items          返回的记录集
  • assets_path 获取模版资源的地址
  {{ 'images/logo.png' | assets_path }}
  {{ 'styles/index.css' | assets_path }}
  • paginate 生成分页链接,前面必须是 articles 的结果
  • page_entries_info 生成分页信息,前面必须是 articles 的结果
  {% assign query = channel | articles %}
  {{ query | page_entries_info: '小说' }}
  参数:
  - 第一位:记录的名称,默认为“文章“
  • tags 获取站点的标签云列表,支持 limit 限制

    过滤的主体必须是 site

    参数:

    • 第一位:总数限制,默认为 10

    返回值:

    数组格式,每个元素是一个哈希,包含键:

    • name: 标签文字
    • count: 标签被使用的总数

    例子:

    site | tags 默认获取前10个标签
    site | tags: 5 获取前5个标签

   {% assign tags = site | tags:100 %}
   <ul>
   {% for tag in tags %}
     <li>{{tag['name']}} => {{tag['count']}}</li>
   {% endfor %}
   </ul>

标签

  • active_link 输出 a 链接,如果是当前页面,会给链接的 class 加上 active
  {% active_link_to url: ch.path, class: 'nav-link px0 text-center' %}
    {{ ch.name }}
  {% endactive_link_to %}
  • breadcrumb 输出面包屑导航
  {% if has_breadcrumb %}
    <nav aria-label="breadcrumb">
      <ol class='breadcrumb bg-transparent p-0 m-0 mb-5'>
        {% breadcrumb %}
      </ol>
    </nav>
  {% endif %}
  • content_for 为指定内容块赋值,类似 Rails 的 content_for :head
  {% content_for 'head' %}
    <style>body{ font-size: 1.5em; }</style>
  {% endcontent_for %}
  • customized_navbar_menu 输出自定义菜单 (即将废弃,请使用 site.customized_menus 自行生成导航菜单)

  • layout 生成 CMS 全局定义的布局框架, 可通过 content_for_layout 可以输出使用这个模版的页面的内容

  {% layout %}
    {% content_for 'head' %}
      <style>body{ font-size: 1.5em; }</style>
    {% endcontent_for %}
    <nav>导航栏</nav>
    <main>{{ content_for_layout }}</main>
  {% endlayout %}
  • yield 输出 content_for 中指定的内容,类似 Rails 的 yield :head
  {% yield 'head' %}

常用代码

输出文章的发布时间

{{ article.created_at | date: '%Y-%m-%d'}}

获取全站的5篇幻灯片文章

<ul>
  {% assign query = site | articles: 1, per_page: 5, slider: true %}
  {% for article in query.items %}
    <li>
      <a href="{{article.path}}">{{article.name}}</a> <span class="float-right">{{ article.created_at | date: '%Y-%m-%d'}}  </span>
    </li>
  {% endfor %}
</ul>

展示当前栏目的5篇头条文章

<ul>
  {% assign query = channel | articles: 1, per_page: 5, hot: true %}
  {% for article in query.items %}
    <li>
      <a href="{{article.path}}">{{article.name}}</a> <span class="float-right">{{ article.created_at | date: '%Y-%m-%d'}}  </span>
    </li>
  {% endfor %}
</ul>
song song
4 个月前
72

扫描下方二维码手机阅读文章

3 1