表单示例

Baklib

发布于:2024-10-14

选择的模板 user_creatable 设置为true表示前端可以创建此种类型的模板,user_editable设置为true表示前端可以编辑此种类型的模板,user_deletable设置为true表示前端可以删除此种类型的模板, 未设置的情况下创建编辑修改此种类型的模板页面会抛出错误。

创建编辑时会检查提交的template_variables模板变量是不是支持修改,例如模板变量里面title、content 需要修改则 "user_permitted_attributes": ["title", "content"]

page- 页面表单

  1. 创建帖子

    {% 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

    修改成功返回页面,默认跳转详情页

  2. 编辑帖子

    {% 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

    修改成功返回页面,默认跳转详情页

  3. 删除帖子

    {% form_tag 'delete_page' %}
      <button class="inline px-4 py-2 text-gray-700"> 删除 </button>
    {% endform_tag %}

Feedback- 反馈表单

  1. 添加反馈

    {% 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

    反馈具体信息

  2. 删除对应表情反馈

    {% 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

提交反馈