在 Streamlit 上集成 js 脚本

Question

我正在尝试使用以下代码片段将我的 Medium 配置文件集成到 Streamlit 应用程序上（通过https://medium-widget.pixelpoint.io/生成）

import streamlit as st
st.markdown('''
<div id="medium-widget"></div>
<script src="https://medium-widget.pixelpoint.io/widget.js"></script>
<script>MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/@mehulgupta_7991","postsPerLine":3,"limit":9,"picture":"small","fields":["description","author","claps","publishAt"],"ratio":"landscape"}})</script>''')

但看起来标签被忽略了。知道我哪里出错了吗？

Answer 1

您可以使用 Streamlit 组件 html。

代码：

import streamlit as st
import streamlit.components.v1 as components

components.html('''
<div id="medium-widget"></div>
<script src="https://medium-widget.pixelpoint.io/widget.js"></script>
<script>MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/@mehulgupta_7991","postsPerLine":3,"limit":9,"picture":"small","fields":["description","author","claps","publishAt"],"ratio":"landscape"}})</script>''')

输出：