未命名标题

Baklib 模板开发中心

👋 Baklib 开发人员技术手册，前端低代码开发指南！

新手指南 0 篇文章

模板安装 0 篇文章

热门话题

阅读对象：Baklib模板开发人员， IT部门前端开发人员阅读场景：1）新开发一个站点模板；2）定制化修改已有站点模板。模板介绍在工作台中要创建一个站点，都需要在「市场」中选择一个模板，模板是呈现网站前端的框架，基于 Liquid 模板语言开发，前端人员可以自主定制。模板安装作为私有化独立部署用户，可以从零新创建一个模板。SaaS 平台用户，可以对每个站点的模板进行在线低代码开发。我们提供了一个 UI 组件库供开发人员交流学习： UIbak.com模板编程模板有一个标准的文件夹结构，不同的文件存放着不同的地方。需要遵守一定的规定进行开发。模板结构
阅读更多
本地模板开发流程📌适用于私有化独立部署的用户。初始创建模板整体文件都放在本地的themes目录下，有三种模板类型： cms，wiki 和 community。选择要创建的模板类型，在类型目录下创建一个文件夹，如取名为：guide ，这新模板的路径为 themes/cms/guide。编辑模板内容根据模板开发规范修改/创建文件（模板文件机构参考：目录结构）上传更新模板方式一：前往http://lvh.me:3000/manage/themes地址中，点击 “执行更新公共模板” 执行模板导入更新方式二：本地执行 rails r db/seeds/theme.rb 命令也可执行模板导入更新--force 参数强制更新(忽略版本号要求)--upload 参数编译/上传静态资源到CDN, 不填写就是忽略--dir= 仅上传指定目录的主题（不使用则全部目录）在线模板开发/使用流程📌适用于 SaaS 用户在线编辑模板。fork模板，即获取模板至本组织在组织市场/模板中心中，选择需要修改的公共模板（如已存在使用此模板的应用则可以跳过）进入模板修改页面，根据提示点击fork按钮，即可将模板fork至本组织community类型应用：应用设置/主题设置点击‘进入主题开发’site类型应用：应用设置/主题设置点击‘进入主题开发’模板中分为 ‘分支’ 与 ‘固定版本’分支：基于某个分支/版本当前时刻的修改创建新分支，修改后的内容不会影响到原分支/版本固定版本：基于某个分支/版本当前时刻的修改发布一个新版本，发布后的内容再也不可修改编辑模板内容根据模板开发规范修改/创建文件至此模板目录下（具体文档：目录结构 Liquid语法）应用切换模板版本进入模板修改页面community类型应用：应用设置/主题设置点击‘进入主题开发’site类型应用：应用设置/主题设置点击‘进入主题开发’选择需要切换的模板，点击‘使用此模板’按钮进行更换应用使用的模板在已切换的模板卡片中，点击选择版本按钮进行版本切换注意：1. 应用切换模板仅适用于同源的模板间进行切换；2. 版本间可能修改了不同的模板配置，切换版本时请注意配置的变化；
阅读更多
主题模板决定了用户站点的布局、功能和样式。模板主题是使用Liquid以及HTML，CSS，JavaScript和JSON构建的，使用这些语言，开发人员可以创建客户想要的任何外观。同时提供了多种工具和最佳实践来加速开发过程。作为开发人员，您可以为特定客户构建自定义主题模板以满足客户的需求，或构建要在模板商店中销售的模板。概述主题模板决定了用户站点的布局、功能和样式。主题代码需要按照主题的标准目录结构组织，同时还包括配套资源，如images，stylesheets和scripts。内容主题文件分为以下一般类别：标记和功能 - 这些文件控制主题的布局和功能。他们使用Liquid生成站点页面的HTML标记。配套资源 - 这些文件是主题中其他文件调用或使用的资产、脚本或本地化文件。配置文件 - 这些文件使用JSON存储配置数据，用户可以通过主题编辑器进行自定义设置。资源文件您可以向主题中添加配套资源文件，以控制组件和功能的呈现方式，或者存储可在多个组件中重复使用的代码片段。例如，您需要添加资源来为主题添加样式。这些资源通过定义样式来阐述客户的品牌和风格。主题的样式由应用于布局、模板和部分文件的 CSS 和 JavaScript 定义。您可以将希望在主题中重复使用的 Liquid 和 HTML 存储在snippets目录中。将主题的 CSS 和 JavaScript 存储在主题的assets目录中。此外，您可以使用本地化文件将主题翻译为不同的语言。本地化文件包含用于主题中各处使用的文本字符串的翻译集合。将本地化文件存储在主题的locales目录中。目录结构和组件类型baklib主题必须使用以下目录结构：. ├── assets └── images └── css └── javascripts └── ... ├── config └── settings_schema.json ├── layout └── theme.liquid ├── locales ├── src ├── snippets └── templates完整示例一个名为 docs 的模板的目录结构如下所示：themes/cms/docs/一级目录二级目录备注assets/css/存放从 src 中编译后的 css 文件javascripts/存放从 src 中编译后的 js 文件images/存放本地引用的资源config/settings_schema.json存放模板的配置信息layout/theme.liquid模板框架布局文件，其他模板文件都locales/多语言版本翻译文件src/原始 css/js 资源文件snippets/存放模板页面片段statics/存放静态模板文件templates/存放模板文件，必须有一个 index.liquid.gitignoregit 忽略文件package-lock.jsonjs 库打包文件package.jsonjs 库打包文件README.md模板教程tailwind.config.jsTailwindCss 框架引用文件yarn.lockyarn 打包文件目录结构示例：完整的模板目录结构themes/cms/docs/ assets/ css images javascripts config/ settings_schema.json layout/ theme.liquid locales/ en.json zh-CN.json zh-CN.schema.json snippets/ _breadcrumb.liquid _footer.liquid _header.liquid src/ main.css main.js statics/ about.liquid templates/ index.docs.liquid index.liquid index.list.liquid page.liquid search.liquid tag.liquid .gitignore package-lock.json package.json README.md tailwind.config.js yarn.lock
阅读更多
Baklib 的主题模板是通过 Liquid 模板语言开发的，在熟悉主题模板开发之前，需要了解 Liquid 基本语法。👋Liquid 是由 Shopify 创建并用 Ruby 编写的开源模板语言。它是 Shopify（全球最大的独立电商平台）主题的支柱，用于在店面加载动态内容。Liquid 自 2006 年起就在 Shopify 投入生产，现在也被许多其他托管 Web 应用程序使用。教程：https://shopify.github.io/liquid/请直接参考官方教程，若没有特殊说明，Baklib 遵循 Liquid 官方教程版本同步。
阅读更多
本教程介绍 Liquid 模板开发中的变量和方法使用。Object（对象）类型名称解释site当前cms站点信息page页面的详细信息tag标签author作者plugins.feedback用户反馈插件site（当前站点）属性/方法类型解释示例namestring站点名称开心农场favicon_urlstring站点图标<url>time_zonestring站点时区Beijianglanguagestring站点语言zh-CN | en<html lang="{{ site.language }}">urlstring网站地址https://help.baklib.com/password_login_enabledboolean是否开启密码登录true | falsesso_login_enabledboolean是否开启 SSO 登录true | falsebaklib_login_enabledboolean是否开启 Baklib 登录true | falsenav_tree_path树状导航地址/-/nav_treepagespage[]通过 PATH 查找页面, 返回query关系. 支持 created_at/edited_at/visit_count 排序site.pages['/'] => 获取首页site.pages['/blogs']pages_in_listpage[]获取全站的页面列表site.pages_in_listtagstag[]站点所有标签列表，返回query关系*-可选项，通过settings.tags自定义tags['tag_name'] => 获取指定名称的标签site.tags（见下面 Tags 介绍）pluginsjson插件配置信息见 plugins.feedbacksettingsjson站点模板定义的变量信息theme_colors_cssstring当前站点的主题颜色--theme-color-primary: 3 169 244page（页面）属性/方法类型使用方法返回值说明idstringpage.id 9g5hkd页面的ID唯一标识slugstringpage.slug guide页面path/url的唯一标识link_textstringpage.link_text 操作教程页面标题pathstringpage.path /guide页面相对路径urlstringpage.url http://abc.example.com/guide页面绝对路径visits_countintegerpage.visits_count 0页面访问量edited_atdatetimepage.edited_at <待开放>published_atdatetimepage.published_at 2024-03-21 19:23:59 +0800{ page.published_at | time_ago }}{{ page.published_at | date: "%Y-%m-%d" }}seo_titlestringpage.seo_title SEO 标题seo_keywordsstringpage.seo_keywords SEO 关键词seo_descriptionstringpage.seo_description SEO 描述settingsjson{}page.settings {"title"=>"操作教程", "description"=>nil, "tags"=>[]}page.settings.titlepage.settings.tagsauthorauthorpage.author 本页面作者page.author.namepage.author.avatar_urlparentpagepage.parent 本页面的父页面childrenpage[]page.children 子页面集合children_in_listpage[]page.children_in_list 子页面集合，排除不在列表中显示的。children_in_nav_menupage[]page.children_in_nav_menu 子页面集合，排除不在菜单中显示的。pagespage[]page.pages 子孙页面集合pages_in_listpage[]page.pages_in_list 子孙页面集合，排除不在列表中显示的。prev_pagepagepage.prev_page 上一个页面next_pagepagepage.next_page 下一个页面breadcrumbjsonpage.breadcrumb {"link_text"=>"首页", "path"=>"/"}{"link_text"=>"操作教程", "path"=>"/guide"}页面面包屑visitor_posted_feedbackbooleanpage.visitor_posted_feedback false是否已提交反馈last_feedback_emojistringpage.last_feedback_emoji 反馈的项versionspage[]page.versions 版本页面集合version（版本）返回当前 page 页面的前 50 个版本信息。属性/方法类型解释示例namestring版本名称v1.0urlstring版本 URLurl用法{% assign version_count = page.versions | size %} {% if version_count > 0 %} <ul class="flex space-x-1"> <li class="px-2"><a href="{{ page.url }}">当前版本</a></li> {% for version_page in page.versions %} <li class="px-2"><a href="{{ version_page.url }}">{{ version_page.name }}</a></li> {% endfor %} </ul> {% endif %}tag（标签）属性/方法类型解释示例pathstring标签页面的路径/-/tags/AxdEfnamestring名称测试标签colorstring字体颜色#42445Abg_colorstring背景颜色#42445Acolor_hlsstring颜色计算background-color: hsl({{ tag.color_hls[0] }}, {{ tag.color_hls[1] }}%, 90%);pages_countinteger含有该标签的页面数量<待开放>pagespage[]含有该标签的页面列表页面的标签通过在 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（作者）属性/方法类型解释示例namestring作者名称张三avatar_urlstring作者头像操作示例：{% 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 （用户反馈配置信息）属性/方法类型解释示例helpful_typesArray(JSON)用户可选择的表情列表plugins.feedback.helpful_typeshelpful_types[0].emojistring表情符😊helpful_types[0].labelstring表情符对应的意思有用helpful_labelstring提示用户选择表情您的反馈是对我们的产品极其重要message_enabledboolean是否启用反馈留言message_requiredboolean当开启反馈留言，反馈留言是否必填login_requiredboolean反馈是否必须登录Filter（函数）名称解释order_by排序order_by对page列表进行排序，排序规则：参数解释created_at按照创建时间排列edited_at按照修改时间排列visits_count按照访问量排列在参数前添加-，代表倒序排列示例：{% assign tag_pages = tag.pages | order_by: '-created_at' %}meta_tags<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% meta_tags %} </head>这个标签会在 head 中自动添加如下内容参考： meta-tags gemcharset=utf-8title SEO 标题theme-name 模板代号theme-version 模板版本theme-scope 模板类型模板配色变量favicon/image-src/share 都在mate_tag实现了<link rel="icon" href="{{ site.settings.favicon_url}}"> 删掉，集成到了 meta_tagspaginate_tag这个可以对数组或数据库查询分页，在这个标记内，会自动生成一个 paginate 变量，可获取如下属性：engines/theme_engine/lib/theme_engine/liquid/drops/pagy_drop.rb:26{ 'total_count' => @pagy.count, # 总数量 'total_pages' => @pagy.pages, # 总页数 'per_page' => @pagy.items, # 每页数量 'current_page' => @pagy.page, # 当前页码 'prev_page' => @pagy.prev, # 上一页页码 'next_page' => @pagy.next, # 下一页页码 'last_page' => @pagy.last, # 最后一页页码 'from' => @pagy.from, # 当前页码的第一条记录的序号 'to' => @pagy.to, # 当前页码的最后一条记录的序号 'series' => @pagy.series, # 页码序列 'page_param' => @pagy.vars[:page_param], # 页码参数名称 'url_for' => UrlFor.new(@pagy) } 分页不需要传 page 参数{% paginate_tag products, per: 5, page: params.page %} => {% paginate_tag products, per: 5 %}其中 url_for 是一个自定义函数，可以通过 paginate.url_for[2] 生成第二页的链接，生成分页链接的例子。前端用法：themes/cms/test/snippets/_paginate.liquid{% assign pages = site.pages['/'].pages_in_list %} {% paginate_tag pages, per: 4 %} {% for page in pages %} {% render "card", page: page %} {% else %} {% assign empty_i18n = "empty.name" | t %} {% render 'empty', message: empty_i18n %} {% endfor %} {% render 'paginate', paginate: paginate %} {% endpaginate_tag %}search - 搜索表单可以通过关键字或者标签搜索，搜索页面的可使用的变量包含：site - 全站通用变量search - 搜索页变量，其属性如下：pages - 搜索结果keywords - 搜索的关键字tag - 搜索的标签app/drops/search_result_drop.rb{% form_tag 'search' %} <input type="hidden" name="q" value="{{ params.q | escape }}"> <button>搜一搜</button> {% endform_tag %} 2024.1.27 提交新代码，以上代码已废弃搜索表单，可通过 form.keywords_field_name 获取搜索输入框的 name 值{% form_tag 'search' %} <div class="relative flex items-center"> <input type="text" name="{{form.keywords_field_name}}" value="{{ search.keywords | escape }}" class="block w-full outline-none border-0 bg-white rounded pl-2 pr-8 text-[#424242] py-3 placeholder:text-gray-400 text-sm" placeholder="{{ "search.placeholder" | t }}"> </div> {% endform_tag %}结果返回：{% paginate_tag search.pages, as: 'items' %} {% for page in items %} <li class="group hover:bg-primary/10 rounded px-2 space-x-2 py-2 flex items-center"> <div class="w-0 flex-grow">搜索判断（新增）{% if search.tag or search.keywords %} <p class="mt-3 text-xs"> {{ "search.result.t1" | t }} {% if search.tag %} <i class="px-2 py-1 rounded" style="background-color: {{ search.tag.bg_color }}">{{ search.tag.name }}</i> {% endif %} {% if search.keywords %} <i>{{ search.keywords }}</i> {% endif %} {{ "search.result.t2" | t }} </p> {% endif %}Breadcrumb用户可以通过 page.breadcrumb 输出的 JSON 数组，自己循环生成，如：themes/cms/test/snippets/_breadcrumb.liquid{% comment %} @params breadcrumb array of objects with keys: link_text: string path: string {% endcomment %}#引用: page.liquid {% render 'breadcrumb', breadcrumb: page.breadcrumb %}#实现： snippets/_breadcrumb.liquid <ul class="list-none text-gray-400 text-xs hidden sm:flex items-center space-x-1"> {% for crumb in breadcrumb %} <li> <div class="flex items-center"> {% if forloop.index0 > 0 %} <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"> <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" /> </svg> {% endif %} <a href="{{ crumb.path }}">{{ crumb.link_text }}</a> </div> </li> {% endfor %} </ul># 前端最佳实践一个优秀的面包屑导航需要满足：1）移动端不会因为面包屑太长而被挤压；超出的部分可自动水平滚动；2）文本不会因为被挤压而截断。前端生成的代码： <div class="overflow-x-auto"> <ol class="p-0 ml-4 bg-transparent breadcrumb"> <li class="breadcrumb-item flex break-keep"><a href="/">首页</a></li> <li class="breadcrumb-item flex break-keep"><a href="/70891d/b53f30">工作区</a></li> <li class="breadcrumb-item flex break-keep"><a href="/70891d/b53f30/da5e2e">工作区基础操作</a></li> </ol> </div>解析：overflow-x-auto 实现了溢出部分水平滚动breadcrumb 必须；为面包屑自定义cssbreadcrumb-item 必须；为面包屑自定义cssflex 使“/”和文本在一行（不被挤压）break-keep 使文本在一行（不被挤压）feedback - 用户反馈表单{% form_tag 'feedback' %}<input type="hidden" name="helpful_type" value="😊"> <button>😊</button> {% endform_tag %}password - 密码登录{% form_tag 'sign_in_with_password' %} <input name="sign_in[username]"> <input name="sign_in[password]"> <button>登录</button> {% endform_tag %}ssb - Baklib 账号一键登录{% form_tag 'sign_in_with_ssb' %} <button>Baklib 账号登录</button> {% endform_tag %}sso - 企业 SSO 账号一键登录{% form_tag 'sign_in_with_sso' %} <button>SSO 一键登录</button> {% endform_tag %}I18n翻译模板设置翻译："t:setings_schema.beian.title"页面翻译：_("备案号")模板翻译：{{ 'setings_schema.beian.title' | t : '默认值' }}颜色选项卡站点主题设置默认添加的颜色选项卡，共6种色卡可定制，如图所示：在站点设置页面定制好色卡颜色后，可在代码中使用，具体方法：text-primary text-primary-lighten text-primary-darken text-primary-50 text-primary-600/50
阅读更多

热门话题

最近更新