Templates Configuration File

Description of the Configuration File: Config.json

What is a configuration file?

The 4EVERLAND Template Center is a codeless website building tool provided for all users. By simply selecting a desired template from the dashboard and filling in the specified parameters, users can easily construct their own website with the configuration file of the template serving as the defining document for these parameters.

For example:

The web3 page serves as a convenient template for aggregating user's social information. When creating the template, users need only input their social media links, such as Twitter, Medium, YouTube, etc, in order to establish their own customized web3 page website. This website will display the user's activity on these social media platforms.Consequently, the template code submitted by web3 page developers must include a configuration file that specifies the user's required input social media links, and preserves the user's inputted results for use in the code at the appropriate locations.

How do I write a configuration file?

In order to write a configuration file that allows users to fill in reserved parameters in a visual form when utilizing the template in the dashboard, it is necessary to refer to the configuration file writing standards provided in this document.Only configuration files that adhere to these standards will be approved for use.

Standards

Naming

The configuration file should be named config.json, as follows (we recommend placing it in the root or public directory).

Configurable items

All configurable items will be displayed in the dashboard in the order in which they were written in the JSON file. Currently, only three types of configurable items are supported: text input boxes, tables, and sliding selectors.All configuration items are written in sequence in a "config" array in JSON format.

{
  "config":[]
}

Text input box

{
   "name": "Name of configuration item",
   "options": [
       {
          "type": "text",
          "key": "",//For locating in code
          "value": "", //User input values
          "placeholder": ""//Default placeholder
        }
      ],
}

Example: Configurable item banner

 { 
   "config":[ 
   {
      "name": "Banner",
      "options": [
        {
          "type": "text",
          "key": "banner",
          "value": "",
          "placeholder": "https://(1440*220)"
        }
      ],
    }
   ]
}

The results are presented in the dashboard as follows

Textarea

Textarea can be used when there is a lot of text to be entered.

    {
          "name": "Name of configuration item",
          "options": [
            {
              "type": "textarea",
              "key": "",
              "value": "",
              "placeholder": ""
            }
          ]
    }

Example

{
  "config":[
    {
      "name": "Textarea Control",
      "options": [
        {
          "type": "textarea",
          "key": "textareaControlGroup",
          "value": "",
          "placeholder": "https://"
        }
      ] 
    }
  ]
}

The results are presented in the dashboard as follows

Tables

The table configuration option supports any number of columns, and you may also limit the maximum number of rows that the template user can add.

 {
       "name": "Name of configuration item",
       "options": [
          {
              "type":"table",
              "key":"",
              "headers": [
                {
                  "text": "lable1", //Name of the table header displayed in the dashboard
                  "value": "value1" //The field will be marked with a value in the following items
                },
                {
                  "text": "lable2",
                  "value": "value2"
                },
                {...},
                {...} //Multiple columns can be added freely
              ],
              "items": [
                {"value1": "",
                 "value2": "",
                 ...,
                 ...}
              ],  //Value entered by the user
              "maxLength":  //Maximum number of items that can be added by the user
          }
       ],
 }

Example: a table with two columns

{
  "config":[
    {
       "name": "IPNS Resources",
       "options": [
          {
              "type":"table",
              "key":"ipnsResourceTable",
              "headers": [
                {
                  "text": "Resource name",
                  "value": "name"
                },
                {
                  "text": "IPNS",
                  "value": "ipns"
                }
              ],
              "items": [
                {"name": "ipns1-26", "ipns": "k51qzi5uqu5dkeq7o4lll1oo8gilnujbx2vhnta6xvxlf21ralvul6lkht59hi"}
              ],
              "maxLength": 100
          }
       ],
    },  
  ]
}

The results are presented in the dashboard as follows

Drop-down selector

 {
       "name": "Name of configuration item",
       "options": [
          {
            "type":"select",
            "key":"",
            "select": 1, //The value of the selected option
            "items": [
              {"text": "item1", "value": 1}, //text represents the text of the options displayed
              {"text": "item2", "value": 2},
              .... //Freely add the number of options
            ],
            "placeholder":""
          }
        ]
   }

Example

{
  "config":[
  {
       "name": "Select Control",
       "options": [
          {
            "type":"select",
            "key":"selectControlGroup",
            "select": 1,
            "items": [
              {"text": "dog", "value": 1},
              {"text": "cat", "value": 2},
              {"text": "rabbit", "value": 3},
              {"text": "monkey", "value": 4}
            ],
            "placeholder":"https://"
          }
        ]
    }
  ]
}

The results are presented in the dashboard as follows

Sliding selectors

  {
      "name": "Name of configuration item",
       "options": [
          {
              "type":"switch",
              "key":"",
              "value":true, //Default state
              "text": "" //Button text description
          }
       ],
    }

Example:

{
  "config":[
        "name": "Display IPNS Input",
        "options": [
          {
              "type":"switch",
              "key":"displaySwitch",
              "value":true,
              "text": "Display the IPNS input field and allow users to enter other IPNS?"
          }
       ]
  ]
}

The results are presented in the dashboard as follows

Configuration Item Classification:

If you have a large number of configuration items, it is recommended to categorize them according to different scenarios. This can improve the user's reading experience when filling in parameters. You only need to add a "tag" item to the configuration options.Example:

{
  "config": [
    {
       "name": "Website name",
       "options": [
          {
              "type":"text",
              "key":"websiteName",
              "value":"IPNS LinkShare",
              "placeholder":"please enter Website name"
          }
       ],
       "tag": "Website Basic Info"
    },
     {
       "name": "Avatar",
       "options": [
          {
              "type":"text",
              "key":"avatar",
              "value":"https://4evernodelete.4everland.store/271686120104_.pic.jpg",
              "placeholder":"please enter Avatar"
          }
       ],
       "tag": "Website Basic Info"
    }，
    {...}, //Configuration item for NAME
    {...} //Configuration item for Bio
   ]
  }

The results are presented in the dashboard as follows