搜点什么?

积木-JPress网站主题动态配置(开发者)

发布时间:2020-12-04 00:59

本文作者:

前言

此篇文章主要针对主题开发者 大致功能和@争鸣大佬开发的JPressOper插件类似

JPressOper主要功能
所有页面采用组件化架构
页面动态文本自动生成后台设置项
页面动态图片自动生成后台设置项
页面所需的文章分类自动生成后台设置项
以配置方式控制文本设置项名称、提示语
以配置方式控制图片的设置项名称、建议像素
页面组件可视化控制显示、隐藏以及显示顺序
有限的组件,可组合配置出无限的页面

参考JPressOper开发了这款插件,在此感谢@争鸣大佬

------------------------------------进入正题------------------------------------

准备

在主题文件夹下有一个"component"文件夹

enter description here

component下的aside、cate、index即分组的文件夹,名称可以随意设置

aside下为该分组下所有的模块,每个模块都有一个同名的.png

setting.yaml为所有模块的声明文件,名称固定

一、定义模块

我们来举例一个最简单的标签云模块,一般在网站的侧边栏用到

1、html文件使用

enter description here

基本上为固定写法,所有的模块数据为一个map,通过#define 指令来使用

#if(data)
#@lonecpt(data.text_t,data.text_n)
#end

#define lonecpt(text_t,text_n)

#end

2、setting.yaml文件模块定义

enter description here

格式如下:

settings.yaml

# Tab 节点
group1:
  label: 第一个 Tab 名称
  # 表单项
  items:
    # 省略
group2:
  label: 第二个 Tab 名称
  # 表单项
  items:
    # 省略

settings.yaml#items

settings.yaml 的 items 下即为所有表单元素

items:

    # 普通文本框
    item1:
      name: item1               // 设置项的 name 值
      label: item1              // 表单项的 label
      type: text                // 表单项类型:普通文本框
      placeholder: ''           // 表单项的 placeholder,一般给用户提示
      default: ''               // 表单项的默认值
      description: ''           // 描述,一般用于说明该设置的具体用途
      
    # 颜色选择框
    item1:
      name: item1               // 设置项的 name 值
      label: item1              // 表单项的 label
      type: color               // 表单项类型:颜色选择框
      placeholder: ''           // 表单项的 placeholder,一般给用户提示
      default: ''               // 表单项的默认值
      description: ''           // 描述,一般用于说明该设置的具体用途
    
    # 附件选择框
    item1:
      name: item1               // 设置项的 name 值
      label: item1              // 表单项的 label
      type: attachment               // 表单项类型:颜色选择框
      placeholder: ''           // 表单项的 placeholder,一般给用户提示
      default: ''               // 表单项的默认值
      description: ''           // 描述,一般用于说明该设置的具体用途
      
    # 多行文本框
    item2:                      // 设置项的 name 值
      name: item2
      label: item2              // 同上
      type: textarea            // 表单项类型:多行文本框
      placeholder: ''           // 同上
      default: ''               // 同上
      description: ''           // 描述,一般用于说明该设置的具体用途

    # 单选框
    item3:
      name: item3               // 同上
      label: item3_label        // 同上
      type: radio               // 表单项类型:单选框
      data-type: bool           // 数据类型:bool,string,long,double
      default: value1           // 同上
      description: ''           // 描述,一般用于说明该设置的具体用途
      options:                  // 选项
        - value: value1         // 值
          label: label1         // 说明
        - value: value2
          label: label2

    # 下拉框
    item4:
      name: item4               // 同上
      label: item4              // 同上
      type: select              // 表单项类型:下拉框
      data-type: bool           // 数据类型:bool,string,long,double
      default: value1           // 同上
      description: ''           // 描述,一般用于说明该设置的具体用途
      options:                  // 选项
        - value: value1         // 值
          label: label1         // 说明
        - value: value2
          label: label2

item所支持的表单元素如下

名称 解释 用途
TEXT 文本框
NUMBER 数字文本框
COLOR 颜色选择器
TEXTAREA 文本域
ATTACHMENT 附件选择器 用于选择logo之类的
SWITCH 单选开关
SELECT 下拉框
RADIO 单选按钮
CATEGORY 文章分类选择 传递分类的id,用于模块展示指定分类数据

注意⚠️:radio、select是有options属性的,具体示例参考后面

二、模块配置

在积木下、模块配置就可以看到我们所有的模块 点击旁边的图片按钮,可以预览模块效果图,可以缩放旋转

enter description here

根据主题的需要,创建对应的页面,

在演示的这一款主题中,我创建一个slug为indexcategory的页面

enter description here

  • 在模块管理页面,上方下拉框选择我们刚刚创建的页面
  • 把控件仓库列里面的模块,拖动到布局列当中来,可以任意拖放顺序
  • 同样布局列当中的模块也可以随便移动顺序,不要的模块,还可以删除
  • 点击布局列当中的模块,控件设置列就会出现模块的设置属性,
  • 进行各种设置提交保存即可

enter description here enter description here

三、页面使用

我是首页指定读取indexcategory的页面模块

使用自定义标签autoPage,参数slug等于页面的slug 这里有个注意⚠️的点,因为我的不是在index页面写的这一段代码,所以有些页面会提示模块文件找不到,所以使用了TPATH

#autoPage(slug='indexcategory')
#for(pgcom : pageComponent)
#set(path=TPATH+'/'+pgcom.componentPath)
#render(path,data=pgcom.optionData)
#end
#end

效果图-文章首页推荐内容

enter description here

效果图-文章侧边栏 enter description here

四、模块定义补充

一个例子

节点说明,下面属性用了那些类型

  • text_title文本框
  • selectArcticleCategoryId文章分类选择
  • text_sort下拉框
  • img_url附件选择
  • text_date单选框(开关形式)
  • page_title_tere文本域
  • music_enabled单选框(点选形式)
  • background_color颜色选择器
  • index_number数字文本框
cat-topic-section-left:
  label: 首页文章推荐 样式一
  dirname: cate
  items:
    text_title:
      name: text_title
      label: 标题
      type: text
      placeholder: '不填写则以分类名称'
      default: ''
      description: '不填写则以分类名称'
    selectArcticleCategoryId:
      name: selectArcticleCategoryId
      label: 分类文章
      type: category
      placeholder: '提示'
      description: '选择分类文章'
    text_sort:
      name: text_sort
      label: 排序方式
      type: select
      default: 'view_count desc'
      description: '默认阅读量倒序'
      options:
        - value: 'view_count desc'
          label: 阅读量倒序
        - value: 'view_count asc'
          label: 阅读量升序
        - value: 'created desc'
          label: 创建时间倒序
        - value: 'created asc'
          label: 创建时间升序
        - value: 'comment_count desc'
          label: 评论量倒序
        - value: 'comment_count asc'
          label: 评论量升序
    img_url:
      name: img_url
      label: 图像
      type: attachment
      default: '/casper/assets/images/blog-cover.jpg'
      placeholder: '提示'
      description: '建议尺寸 200*200'
    text_date:
      name: text_date
      label: 是否显示文章日期
      type: switch
      data-type: bool
    page_title_tere:
      name: page_title_tere
      label: 文本域
      type: textarea
      data-type: string
      placeholder: '提示'
      description: '设置首页的背景图,你可以点击右边的选择按钮选择图片。'
    music_enabled:
      name: music_enabled
      label: 单选框
      type: radio
      data-type: bool
      default: false
      description: '是否开启背景音乐,默认为 false'
      placeholder: '提示'
      options:
        - value: true
          label: 开启
        - value: false
          label: 关闭
    background_color:
      name: background_color
      label: 颜色选择
      type: color
      default: '#fff'
      placeholder: '提示'
      description: '设置首页的背景图,你可以点击右边的选择按钮选择图片。'
    index_number:
      name: index_number
      label: 数字文本框
      type: number
      placeholder: '提示'
      default: '/casper/assets/images/blog-cover.jpg'
      description: '前端卡片圆角'

建议使用专门的编辑器,方便折叠、高亮、缩进

全家福 enter description here

其他的可以自己尝试,有疑问可以交流

相关文章

加入我们!

如果你想系统学习JPress涉及到的知识点,或者希望有人解答你在深度使用JPress时遇到问题,
加入QQ群是个很不错的选择