在 Streamlit 上集成 js 脚本

Question

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

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>''')

输出：

在 Streamlit 上集成 js 脚本

Integrate js scripts on Streamlit

javascript

python

html

streamlit