🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## **一、管理入口** **操作路径**:网站后台--内容管理--文章管理--自定义字段; ![1692698859770741.png](https://www.ecoxiu.com/images/202308/1692698859770741.png) ## **二、新增自定义字段** 点击列表页添加 ![1692698892466783.png](https://www.ecoxiu.com/images/202308/1692698892466783.png) 弹出新增自定义字段弹窗,如果需要增加多个,只需要点击弹窗下的添加,会自动在弹出框列表页新增一行,然后填写相关信息就行,填写完直接按保存就行; ![1692698953452313.png](https://www.ecoxiu.com/images/202308/1692698953452313.png) ### **2.1、名称** 必填,自定义字段名称; ![1692699015492754.png](https://www.ecoxiu.com/images/202308/1692699015492754.png) ### **2.2、字段名** 选填,可以自己填写,也可以系统自动生成; ![1692699015118779.png](https://www.ecoxiu.com/images/202308/1692699015118779.png) ### **2.3、字段类型** 下拉选择字段类型,系统内置了单选按钮(radio)、多媒体 (ecmedia)、多选框(checkboxes)、整数(integer)、文件上传 (ecupfile)、文本域 (textarea)、文本框(text)、日期(calendar)、编辑器 (editor)、链接地址 (url)等类型的参数;当字段类型选择下拉、多选、单选时,所在行右侧的字段类型配置会出现“选项列表”,点击按钮可添加设置; ![1692699015186871.png](https://www.ecoxiu.com/images/202308/1692699015186871.png) #### **2.3.1、单选按钮(radio)** 内容添加编辑设置页面以单选的形式填写内容值,一般用于参数内容值固定的参数,便于管理员快速添加内容,如产品颜色、款式等; 单选按钮时,字段类型配置会出现选项列表,可以添加选项,比如设置单选为颜色时,这里可以设置红色、黄色、蓝色等; > 点击`+`号可以新增选项列表; > > 点击`-`号可以删除选项列表; > > 按最后`拖动按钮`可以上下拖动排序; ![1692714116285990.png](https://www.ecoxiu.com/images/202308/1692714116285990.png) 后台新增或者修改文章时效果如图: ![1692714429941335.png](https://www.ecoxiu.com/images/202308/1692714429941335.png) 前台展示效果如图; ![1692714460761431.png](https://www.ecoxiu.com/images/202308/1692714460761431.png) #### **2.3.2、多媒体 (ecmedia)** 内容添加编辑设置页面以上传组件的显示,可以上传图片; ![1692751318455356.png](https://www.ecoxiu.com/images/202308/1692751318455356.png "1692751318455356.png") 后台新增或者修改文章时效果如图: ![1692751340363052.png](https://www.ecoxiu.com/images/202308/1692751340363052.png "1692751340363052.png") 前台文章详情页显示效果如下,也可以根据需求单独订制模板 ![1692751763625360.png](https://www.ecoxiu.com/images/202308/1692751763625360.png "1692751763625360.png") #### **2.3.3、多选框 (checkboxes)** 内容添加编辑设置页面以多选框的形式填写内容值,一般用于参数内容值固定且同一条内容可选多个内容值的参数,便于管理员快速添加内容; 多选框 (checkboxes)时,字段类型配置会出现添加选项,可以添加选项,比如设置多选框为产品款式时,这里可以设置潮流、运动、休闲等; > 点击`+`号可以新增选项列表; > > 点击`-`号可以删除选项列表; > > 按最后`拖动按钮`可以上下拖动排序; ![1692752198579387.png](https://www.ecoxiu.com/images/202308/1692752198579387.png "1692752198579387.png") 后台新增或者修改文章时效果如图: ![1692752397901917.png](https://www.ecoxiu.com/images/202308/1692752397901917.png "1692752397901917.png") 前台展示效果如图; ![1692752407555835.png](https://www.ecoxiu.com/images/202308/1692752407555835.png "1692752407555835.png") #### **2.3.4、整数 (integer)** 内容添加编辑设置页面以出现一个整数下拉选择框; ![1692752723147514.png](https://www.ecoxiu.com/images/202308/1692752723147514.png "1692752723147514.png") **字段项类型**: **最小整数**:可以选择的最小的整数; **最大整数**:可以选择的最大的整数; 后台新增或者修改文章时效果如图: ![1692752823916367.png](https://www.ecoxiu.com/images/202308/1692752823916367.png "1692752823916367.png") 前台展示效果如图; ![1692752842805764.png](https://www.ecoxiu.com/images/202308/1692752842805764.png "1692752842805764.png") #### **2.3.5、文件上传(ecupfile)** 内容添加编辑设置页面以上传组件的形式添加参数内容值 ![1692753352382687.png](https://www.ecoxiu.com/images/202308/1692753352382687.png "1692753352382687.png") 后台新增或者修改文章时效果如图: ![1692753363252582.png](https://www.ecoxiu.com/images/202308/1692753363252582.png "1692753363252582.png") 前台展示效果如图: ![1692753376853652.png](https://www.ecoxiu.com/images/202308/1692753376853652.png "1692753376853652.png") #### **2.3.6、文本域(textarea)** 内容添加编辑设置页面以多文本输入框的形式填写内容值,一般用于内容文字较多的参数,支持html语言; ![1692753789382846.png](https://www.ecoxiu.com/images/202308/1692753789382846.png "1692753789382846.png") **字段类型配置** **文本域行数**:不用理会,默认就行; **文本域列数**:不用理会,默认就行; **最大字符数**:可以输入的最大字符数目,不设置就不限制; **筛选**:不用理会,默认就行; 后台新增或者修改文章时效果如图: ![1692753886100122.png](https://www.ecoxiu.com/images/202308/1692753886100122.png "1692753886100122.png") 前台展示效果如图: ![1692753897600682.png](https://www.ecoxiu.com/images/202308/1692753897600682.png "1692753897600682.png") #### **2.3.7、文本框(text)** 内容添加编辑设置页面以单行文本输入框的形式填写内容值,一般用于内容文字较少的参数; ![1692753910974171.png](https://www.ecoxiu.com/images/202308/1692753910974171.png "1692753910974171.png") **字段类型配置** **标签过滤**:不用理会,默认就行; **最大字符数**:可以输入的最大字符数目,不设置就不限制; 后台新增或者修改文章时效果如图: ![1692753955779476.png](https://www.ecoxiu.com/images/202308/1692753955779476.png "1692753955779476.png") 前台展示效果如图: ![1692753967776382.png](https://www.ecoxiu.com/images/202308/1692753967776382.png "1692753967776382.png") #### **2.3.8、日期(calendar)** 内容添加编辑设置页面以日期选择组件形式出现; ![1692754291347281.png](https://www.ecoxiu.com/images/202308/1692754291347281.png "1692754291347281.png") **字段类型配置** **显示时间**:如果启用此项,日期选择器显示日期同时也显示时间,可以同时选择日期和时间,显示格式使用中文语言翻译中的设置。 后台新增或者修改文章时效果如图: ![1692754308830046.png](https://www.ecoxiu.com/images/202308/1692754308830046.png "1692754308830046.png") 前台展示效果如图: ![1692754322345075.png](https://www.ecoxiu.com/images/202308/1692754322345075.png "1692754322345075.png") #### **2.3.9、编辑器 (editor)** 内容添加编辑设置页面以编辑器形式出现,可以编辑复制的内容; ![1692754768667712.png](https://www.ecoxiu.com/images/202308/1692754768667712.png "1692754768667712.png") **字段类型配置**:保持默认就行; 后台新增或者修改文章时效果如图: ![1692754781494457.png](https://www.ecoxiu.com/images/202308/1692754781494457.png "1692754781494457.png") 前台展示效果如图: ![1692754793750476.png](https://www.ecoxiu.com/images/202308/1692754793750476.png "1692754793750476.png") #### **2.3.10、链接地址 (url)** 内容添加编辑设置页面以单行文本输入框的形式填写内容值,直接添加链接地址即可; ![1692754703765552.png](https://www.ecoxiu.com/images/202308/1692754703765552.png "1692754703765552.png") **字段类型配置**:保持默认就行; 后台新增或者修改文章时效果如图: ![1692754716958615.png](https://www.ecoxiu.com/images/202308/1692754716958615.png "1692754716958615.png") 前台展示效果如图: ![1692754728515231.png](https://www.ecoxiu.com/images/202308/1692754728515231.png "1692754728515231.png") ### **2.4、字段类型配置** 会根据字段类型不同,出现不同的配置数据; ![1692700447501499.png](https://www.ecoxiu.com/images/202308/1692700447501499.png) ### **2.5、字段组** 选择字段所属字段组; ![1692699016582044.png](https://www.ecoxiu.com/images/202308/1692699016582044.png) ### **2.6、分类** 选择字段属于哪个分类下,默认为全部; ![1692699015784123.png](https://www.ecoxiu.com/images/202308/1692699015784123.png) 添加完成后点击保存就行 ![1692700616659281.png](https://www.ecoxiu.com/images/202308/1692700616659281.png) ## **三、编辑自定义字段** ### **3.1.快速编辑自定义字段** 如果只是对名称、字段名做简单设置直接对列表进行编辑,编辑后按保存就可以 ![1692700696343323.png](https://www.ecoxiu.com/images/202308/1692700696343323.png) ### **3.2.详细编辑自定义字段** 点击对应自定义字段后面的编辑按钮,直接打开编辑页。 ![1692700759530308.png](https://www.ecoxiu.com/images/202308/1692700759530308.png) 打开后对相应参数做修改就行,修改后点击保存就行 ![1692712521492516.png](https://www.ecoxiu.com/images/202308/1692712521492516.png) #### **3.2.1.综合设置** **说明**:不能修改; **字段名**:默认就行,无需修改; **标签**:无需修改; **说明**:做一些说明文字,便于后期区分; **必选(填)字段**:是否必填; **默认值**:默认填充显示的内容; **状态**:下拉可选择已发布、未发布、已归档、回收站,一般情况默认已发布; **字段组**:选择字段所属字段组; **分类**:选择字段属于哪个分类下,默认为全部; **访问级别**:指定哪些级别的会员可以访问,默认public公用的; **语言**:保持当前默认语言就好,不需要去单独选择; **备注**:做一些标注; #### **3.2.2.其它设置** 表单选项、渲染(Render)选项保持默认就行,发布选项参考添加文章时的其它设置; ![1692712929562662.png](https://www.ecoxiu.com/images/202308/1692712929562662.png) #### **3.2.3.权限设置** 可以设置哪些会员组可以进行编辑、删除、访问等权限;一般保持默认就行; ![1692712941676523.png](https://www.ecoxiu.com/images/202308/1692712941676523.png) ## **四、将自定义字段放入回收站** 点击对应自定义字段后面的删除就可以进行删除单个自定义字段,或者选中需要删除的自定义字段,然后点击:操作>放入回收站; ![1692713048711347.png](https://www.ecoxiu.com/images/202308/1692713048711347.png) **注意**:此操作是暂时将自定义字段放入回收站,如果要彻底删除,可进入回收站彻底删除; ## **五、将自定义字段彻底删除** 首先状态筛选框选择回收站,可以点击对应自定义字段后面的【X】删掉单个自定义字段,也可以勾选需要删除的自定义字段,然后点击【彻底删除】按钮彻底删除对应的自定义字段。 ![1692713117923899.png](https://www.ecoxiu.com/images/202308/1692713117923899.png) ## **六、排序** 首先将排序规则切换为按升序排列或者按降序排列,然后点击表格每行左侧小三点区域上下拖曳后即可改变排序; ![1692713176488561.png](https://www.ecoxiu.com/images/202308/1692713176488561.png) ## **七、其它设置** 发布、取消发布、归档、签入、批处理(复制和移动)等参考文章管理里相对应操作; ## **八、后台显示位置** 添加完后会在添加或者编辑文章时候的页面显示,显示演示如下图 ![1692713256878944.png](https://www.ecoxiu.com/images/202308/1692713256878944.png)