配置

v2版对配置进行了升级，新增了handler代替原来的expression，并使用 json-editor 使配置可视化。

deeru默认提供了4个配置，”博客配置”，”顶部图标栏配置”，”顶部导航栏配置”，”通用配置”。最后一个 通用配置 是key-value的配置，用于给不想写复杂配置的开发者提供一个简单的进行配置的地方。

如何添加新的可视化配置

配置的model

首先你需要了解下配置的model，其代码在 app.app_models.config_model 下，有下面几个字段：

  • class Config
    • name

    • 中文名字

    • v2_config

    • 配置的原始数据

    • v2_real_config

    • 经过handler处理后的配置数据，v2_config中的配置有的需要经过handler解析后才能使用，保存配置时会自动处理v2_config并把结果保存到这

    • v2_schema

    • json-editor用的参数，这里面的js代码而不是python，如果你对js不熟悉，那就写json结构的数据

    • v2_script

    • js代码，会添加到创建json-editor之后，用于修改json-editor的展示效果

编写可视化配置的schema

目前所使用的json-editor是v2.0.0版本，默认使用spectre主题，fontawesome5图标库，swig模板引擎，虽然你可以自由替换json-editor所使用的主题，图标库，模板引擎，但并不建议你更换。

你可以查看json-editor的文档，学习如何编写配置。自带的4个配置的schema在 app.consts.V2_Config_Schema 下，你可以参考他们编写。

下面是一个schema的样例：

  1. {
  2.  "theme": "spectre",
  3.  "iconlib": "fontawesome5",
  4.  "template": "swig",
  5.  "schema": {
  6.      "type": "object",
  7.      "title": "博客配置",
  8.      "properties": {
  9.          "host": {
  10.              "type": "string",
  11.              "title": "博客域名或ip",
  12.              "format": "url"
  13.          }
  14.      }
  15.  }
  16. }

注解

需要注意的是，内部的schema并不是Config model中的v2_schema，v2_schema是这个结构整体。

另外，你自定义的配置中不要使用 _ 开头的key，如示例中的 “host”，不要用 “_host”。

如果你想快速实验你编写的schema效果，可以使用下面代码，把 o 替换为你的代码。

点击输出结果后会显示保存到 v2_config 的数据，以及格式化后的schema；建议直接复制这个格式化好的schema到Config model中。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>Basic JSON Editor Example</title>
  6.     <link rel='stylesheet' href='https://cdn.staticfile.org/spectre.css/0.5.8/spectre.min.css'>
  7.     <link rel='stylesheet' href='http://cdn.staticfile.org/font-awesome/5.11.2/css/all.min.css'>
  8.     <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@v2.0.0/dist/jsoneditor.min.js"></script>
  9.     <script src="https://cdn.staticfile.org/swig/1.4.2/swig.min.js"></script>
  10. </head>
  11. <body>
  12. <h1>Basic JSON Editor Example</h1>
  13. <div id='editor_holder'></div>
  14. <hr>
  15. <div style="margin-left: 20px;margin-top: 20px">
  16.     <button class="btn " id='submit'>输出结果</button>
  17.     <div style="margin-top: 20px">
  18.         <textarea id="json" style="padding: 5px" cols="50" rows="40"></textarea>
  19.         <textarea id="options" style="padding: 5px;margin-left: 20px" cols="50" rows="40"></textarea>
  20.     </div>
  21. </div>
  22. <script>
  23.     // 把 o 替换为你的代码
  24.     var o = {
  25.         theme: 'spectre',
  26.         iconlib: 'fontawesome5',
  27.         template: 'swig',
  28.         schema: {
  29.             type: "object",
  30.             properties: {
  31.                 title:{
  32.                     type:'string'
  33.                 }
  34.             },
  35.         }
  36.     };
  37.  
  38.     var oS = JSON.stringify(o);
  39.     var editor = new JSONEditor(document.getElementById('editor_holder'), o);
  40.     document.getElementById('submit').addEventListener('click', function () {
  41.         document.getElementById('json').innerText = JSON.stringify(editor.getValue(), null, 3);
  42.         document.getElementById('options').innerText = oS;
  43.     });
  44. </script>
  45. </body>
  46. </html>

编写v2_script

v2_script是一段js代码，会添加到创建json-editor之后，用于自定义修改json-editor的展示效果。

如果你需要用python代码向model中插入v2_script，建议用 r 前缀的字符串，否则需要处理转义字符。如：

js = r'console.log(11)'

配置的handler

有时候还需要对保存的配置进行进一步处理，以获得最终需要的配置，因此引入了handler的概念，关于handler的更多内容查看： 配置handler

在html中使用配置

如果你新建了一个新的配置，并希望在前端代码中读取它，那你需要两步操作：

（示例是直接修改app中的代码，实际操作时建议新建一个django的app，然后在新的app中操作）

  • 在apps.py中修改/添加 deeru_config_context 的值，如app/apps.py文件：
class MAppConfig(AppConfig):

    deeru_config_context = 'app.consts.app_config_context'
  • 编辑 deeru_config_context 指向的对象（app/consts.py中的app_config_context）
app_config_context = {
 'top_ico': '顶部图标栏',
 'top_menu': '顶部导航栏',
}

它是一个字典，key为在前端代码中使用的名字，value为数据库中的名字。

  • 在前端代码中这样使用它：
{{ config.top_ico.xxx }}