表单示例
Baklib
发布于:2024-10-14
选择的模板 user_creatable 设置为true表示前端可以创建此种类型的模板,user_editable设置为true表示前端可以编辑此种类型的模板,user_deletable设置为true表示前端可以删除此种类型的模板, 未设置的情况下创建编辑修改此种类型的模板页面会抛出错误。
创建编辑时会检查提交的template_variables模板变量是不是支持修改,例如模板变量里面title、content 需要修改则 "user_permitted_attributes": ["title", "content"]
page- 页面表单
创建帖子
{% form_tag 'page' %} <input value="page" autocomplete="off" type="hidden" name="page[template_name]"> <input value="" autocomplete="off" type="hidden" name="page[template_style]"> <label for="title" class="block mb-1">标题</label> <input type="text" name="page[template_variables][title]" value="{% if page.id %}{{ page.link_text }}{% endif %}" class="form-input mt-1.5 w-full rounded-lg border " placeholder="请输入内容标题" /> <textarea name="page[template_variables][content]" rows="8" class="w-full form-textarea placeholder:italic" placeholder="问题详情"> {{ content }}</textarea> <button type="submit" class="py-2 rounded cursor-pointer bg-primary">{{ submit_value | default: '创建帖 子' }}</button> {% endform_tag %}
支持的参数:
属性/方法
类型
解释
page[parent_full_path]
string
父页面full_path,可以指定创建页面的父级
page[name]
string
页面名称
page[template_name]
string
页面模板名称
page[template_style]
string
页面模板风格, 同一个模板页面可以有不同风格并切换,例如index.doc.liquid index.list.liquid, 页面使用模板template_name.template_style
page[published]
string
true false页面发布状态
page[template_variables]
string
模板变量
page[template_variables][title]
string
{ "id": "title", "type": "text", "placeholder": "", "label": "标题", "info": "显示在正文上方的文章标题" } , 模板setting里可以设置的变量
page[template_variables][content]
html
{ "id": "content", "type": "richtext", "label": "问题内容" }
return_template_name
修改成功返回页面,默认跳转详情页
编辑帖子
{% form_tag 'edit_page', page %} <input value="post" autocomplete="off" type="hidden" name="page[template_name]"> <input value="" autocomplete="off" type="hidden" name="page[template_style]"> <label for="title" class="block mb-1">标题</label> <input type="text" name="page[template_variables][title]" value="{% if page.id %}{{ page.link_text }}{% endif %}" class="form-input mt-1.5 w-full rounded-lg border " placeholder="请输入内容标题" /> <textarea name="page[template_variables][content]" rows="8" class="w-full form-textarea placeholder:italic" placeholder="问题详情"> {{ content }}</textarea> <button type="submit" class="py-2 rounded cursor-pointer bg-primary">{{ submit_value | default: '创建帖 子' }}</button> {% endform_tag %}/
支持的参数:
属性/方法
类型
解释
page[published]
string
true false页面发布状态
page[template_variables]
string
模板变量
page[template_variables][title]
string
{ "id": "title", "type": "text", "placeholder": "", "label": "标题", "info": "显示在正文上方的文章标题" } , 模板setting里可以设置的变量
page[template_variables][content]
richtext
{ "id": "content", "type": "richtext", "label": "问题内容" }
return_template_name
修改成功返回页面,默认跳转详情页
删除帖子
{% form_tag 'delete_page' %} <button class="inline px-4 py-2 text-gray-700"> 删除 </button> {% endform_tag %}
Feedback- 反馈表单
添加反馈
{% form_tag 'feedback', page: page %} <div class="shrink-0"> <button name="feedback[useful_type]" value="{{ site.settings.feedback_useful_type }}" class="sticky flex flex-col items-center px-1 py-3 text-center transition duration-150 ease-in-out border rounded top-6 w-14 h-14 border-slate-700 hover:bg-blue-300"> <svg class="inline-flex mb-1 fill-indigo-400" width="11" height="7" xmlns="http://www.w3.org/2000/svg"> <path d="M1.664 6.747.336 5.253 5.5.662l5.164 4.591-1.328 1.494L5.5 3.338z" /></svg> </button> </div> {% endform_tag %}
支持的参数:
属性/方法
类型
解释
feedback[useful_type]
string
😊 😞, 反馈表情
feedback[message]
string
反馈具体信息
删除对应表情反馈
{% form_tag 'delete_feedback', page: page, useful_type: site.settings.feedback_useful_type %} <div class="shrink-0"> <button name="feedback[useful_type]" value="{{ site.settings.feedback_useful_type }}" :class="{ 'bg-slate-800': '{{ site.settings.feedback_useful_type }}' === '{{ page.last_feedback_emoji }}' }" class="sticky flex flex-col items-center px-1 py-3 text-center transition duration-150 ease-in-out border rounded top-6 w-14 h-14 border-slate-700 bg-gradient-to-tr dark:from-slate-800/20 dark:via-slate-800/50 dark:to-slate-800/20 from-blue-100 via-blue-200 to-blue-100 hover:bg-slate-800"> <svg class="inline-flex mb-1 fill-indigo-400" width="11" height="7" xmlns="http://www.w3.org/2000/svg"><path d="M1.664 6.747.336 5.253 5.5.662l5.164 4.591-1.328 1.494L5.5 3.338z" /></svg> </button> </div> {% endform_tag %}
reply- 页面表单
//创建评论
{% form_tag 'reply' %}
<input value="{{ root.target.path }}" autocomplete="off" type="hidden" name="target_full_path">
<input value="create_answer_reply_success" autocomplete="off" type="hidden" name="return_template_name">
<input value="true" autocomplete="off" type="hidden" name="reply[published]">
<input value="{{ root.id }}" autocomplete="off" type="hidden" name="reply[root_id]">
<input value="{{ parent.id }}" autocomplete="off" type="hidden" name="reply[parent_id]">
<textarea name="reply[body]" rows="4" class="w-full form-textarea placeholder:italic"
placeholder="回复{{ parent.author.name }}..." ></textarea>
<input type="submit" value="提交" @click="open = false;name=content.substring(0, 50)" class="inline-flex items-center justify-center px-4 py-1 mt-2 text-xs font-medium leading-5 transition duration-150 ease-in-out rounded-full bg-primary whitespace-nowrap" />
{% endform_tag %}//删除评论
{% form_tag 'reply', reply, method: 'delete' %}
<input value="destroy_reply_success" autocomplete="off" type="hidden" name="return_template_name">
<button class="inline"> 删除 </button>
{% endform_tag %}
支持的参数:
属性/方法 | 类型 | 解释 | |
---|---|---|---|
target_full_path | string | 评论页面full_path | |
reply[published] | string | true, false评论发布状态 | |
reply[root_id] | string | 一级评论id | |
reply[parent_id] | string | 回复评论id | |
reply[body] | richtext | 回复内容 | |
return_template_name | string | 修改成功返回处理页面 |
richtext_field_tag-富文本内容输入框
{% richtext_field_tag 'page[template_variables][content]', content, toolbar: 'full' %}
支持的参数:
属性/方法 | 类型 | 解释 | |
---|---|---|---|
name | string | 输入框name,page[template_variables][content] | |
content | richtext | 编辑器内容,content | |
toolbar | string | 工具栏,例如toolbar、simple |