如何在docker安装的superset中编写自定义javascript？

Question

我已经在

superset

中安装了

docker

，并且我想在超集中嵌入一个简单的

Javascript

代码。有

templates/superset/basic.html

文件，其代码如下：


    <!DOCTYPE html>
    {% import 'appbuilder/general/lib.html' as lib %}
    {% from 'superset/partials/asset_bundle.html' import css_bundle, js_bundle with context %}
    
    {% set favicons = appbuilder.app.config['FAVICONS'] %}
    <html>
      <head>
       
        <title>
          {% block title %}
            {% if title %}
              {{ title }}
            {% elif appbuilder and appbuilder.app_name %}
              {{ appbuilder.app_name }}
            {% endif %}
          {% endblock %}
        </title>
        {% block head_meta %}{% endblock %}
        {% block head_css %}
          {% for favicon in favicons %}
            <link
              rel="{{favicon.rel if favicon.rel else "icon"}}"
              type="{{favicon.type if favicon.type else "image/png"}}"
              {% if favicon.sizes %}sizes={{favicon.sizes}}{% endif %}
              href="{{ "" if favicon.href.startswith("http") else assets_prefix }}{{favicon.href}}"
            >
          {% endfor %}
          <link rel="stylesheet" type="text/css" href="{{ assets_prefix }}/static/appbuilder/css/flags/flags16.css" />
          <link rel="stylesheet" type="text/css" href="{{ assets_prefix }}/static/appbuilder/css/font-awesome.min.css">
    
          {{ css_bundle("theme") }}
    
          {% if entry %}
            {{ css_bundle(entry) }}
          {% endif %}
    
        {% endblock %}
    
        {{ js_bundle("theme") }}
    
       <!-- Start of HubSpot Embed Code -->
       
    <!-- End of HubSpot Embed Code -->
      </head>
    
        <input
          type="hidden"
          name="csrf_token"
          id="csrf_token"
          value="{{ csrf_token() if csrf_token else '' }}"
        >
      
    
      <body {% if standalone_mode %}class="standalone"{% endif %}>
        {% block navbar %}
          {% if not standalone_mode %}
            {% include 'appbuilder/navbar.html' %}
          {% endif %}
        {% endblock %}
    
        {% block body %}
          <div id="app" data-bootstrap="{{ bootstrap_data }}">
            <img src="{{ assets_prefix }}/static/assets/images/loading.gif" style="width: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)">
          </div>
        {% endblock %}
    
        <!-- Modal for misc messages / alerts  -->
        <div class="misc-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content" data-test="modal-content">
              <div class="modal-header" data-test="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-test="modal-header-close-button">
                  <span aria-hidden="true">&times;</span>
                </button>
                <h4 data-test="modal-title" class="modal-title"></h4>
              </div>
              <div data-test="modal-body" class="modal-body">
              </div>
              <div data-test="modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
    
        {% block tail_js %}
          {% if not standalone_mode %}
            {{ js_bundle('menu') }}
          {% endif %}
          {% if entry %}
            {{ js_bundle(entry) }}
          {% endif %}
          {% include "tail_js_custom_extra.html" %}
        {% endblock %}
      </body>
      <script type="text/javascript">
        alert("This alert box was called with the onload event");
      </script>
    </html>

<html>....</html>

前端的所有代码都在这里，所以我把我的代码放在这里，但它不起作用。我刚刚添加并想检查的部分是：

       <script type="text/javascript">
            alert("This alert box was called with the onload event");
          </script>

但是警报事件没有发生。我应该将 javascript 代码放在哪个文件中？我在哪里可以在超集

中编写自定义

javascript

Answer 1

我如何进行一些定制。

将您的代码放入一个文件中，例如customize.js


window.sayHello = function(message) {
  alert(message);
}

在 superset-frontend/src/views/App.tsx 中导入脚本

import './customize.js';

在需要的地方调用该函数。
重建超集

Answer 2

好吧，经过一百万次搜索，我发现没有任何有用的东西。

直接将脚本添加到此模板

tail_js_custom_extra.html

https://github.com/apache/superset/blob/2.0.0/superset/templates/tail_js_custom_extra.html

然后将其读入烧瓶中的基本模板中。

我还将其添加到 Talisman 的

config.py

文件中（尽管我不确定它是否有影响：

TALISMAN_CONFIG = {
    "content_security_policy": {
        "default-src": ["'self'"],
        "img-src": ["'self'", "data:", "https:"],
        "script-src": ["self", "unsafe-inline", "unsafe-eval"],
        "style-src": ["self", "unsafe-inline"],
    },
    "content_security_policy_nonce_in": ['script-src']
}

如何在docker安装的superset中编写自定义javascript？

问题描述投票：0回答：2

2个回答

最新问题

如何在docker安装的superset中编写自定义javascript？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2