登录 注册

如何在思源笔记中嵌入类似 tradeview widge 的小组件？

本贴最后更新于 750 天前，其中的信息可能已经事过景迁

RT，楼主金融行业，IT 小白，想通过思源笔记做投资笔记，希望在笔记中能够嵌入实时更新的股票图。

Tradeview 的插件功能（技术分析的免费金融图表插件 — TradingView）解决了我代码的问题，但我通过 html 嵌入 tradeview 代码时，却无法显示图片。

百度谷歌了好久，似乎是不支持 JS？（真的小白。。。）

不知道有没有大神能够帮忙看看，如何实现这样的功能。

嵌入的代码如下（直接 copy 过来的）

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_2da3c"></div>
  <div class="tradingview-widget-copyright"><a href="https://cn.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL图表</span></a>由TradingView提供</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "zh_CN",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_2da3c"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

应该实现的效果如下：

image.png

而文档中的效果如下：

image.png

就啥也没有。

感谢各位大佬 🙏 🙏 🙏

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22351 引用 • 89433 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8118 引用 • 37026 回帖 • 160 关注
秦皇岛 位置 6 回帖
3
583 120 83 136 1 11 39 193

相关帖子

被采纳的回答
  • RenaEmiya •
    订阅者

    嗯，你在 data 目录同级的 widget 里，新建一个文件夹，在文件夹里新建一个 index.html，把你这堆东西放进去

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
    <div class="tradingview-widget-container">
        <div id="tradingview_2da3c"></div>
        <div class="tradingview-widget-copyright"><a href="https://cn.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL图表</span></a>由TradingView提供</div>
    </div>
</body>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
    new TradingView.widget(
    {
    "autosize": true,
    "symbol": "NASDAQ:AAPL",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "zh_CN",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_2da3c"
    }
    );
</script>
</html>

    然后就可以在思源笔记里插入这个挂件了

    这个网页不一定能被正确渲染，你可能需要有合适的上网工具，并在思源笔记的设置中设置网络代理

    在思源笔记中效果如下：

    image.png

6 回帖
如何在思源笔记中嵌入类似 tradeview widge 的小组件？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • qibin961014 •
    付费者 作者

    感谢感谢，太详细了，我仔细研究下 🙏

    1 引用
  • 其他回帖
  • RenaEmiya •
    订阅者

    嗯，你在 data 目录同级的 widget 里，新建一个文件夹，在文件夹里新建一个 index.html，把你这堆东西放进去

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
    <div class="tradingview-widget-container">
        <div id="tradingview_2da3c"></div>
        <div class="tradingview-widget-copyright"><a href="https://cn.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL图表</span></a>由TradingView提供</div>
    </div>
</body>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
    new TradingView.widget(
    {
    "autosize": true,
    "symbol": "NASDAQ:AAPL",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "zh_CN",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tradingview_2da3c"
    }
    );
</script>
</html>

    然后就可以在思源笔记里插入这个挂件了

    这个网页不一定能被正确渲染，你可能需要有合适的上网工具，并在思源笔记的设置中设置网络代理

    在思源笔记中效果如下：

    image.png

    1 回复
  • qibin961014 •
    付费者 作者

    的确，我试了下我开了代理，在网页下可以显示~谢谢

  • qibin961014 •
    付费者 作者

    感谢感谢，有点难度，我先学习下~

  • 查看全部回帖
qibin961014
前门种棵黄瓜秧 秦皇岛
回帖
8
 帖子
3
 积分
4877

近期热议

推荐标签 标签

  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • OnlyOffice
    4 引用 • 3 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 113 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3453 回帖 • 203 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 155 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 596 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 3 关注
  • 音乐

    你听到信仰的声音了么？

    60 引用 • 511 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 114 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 57 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    176 引用 • 815 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    27 引用 • 225 回帖 • 169 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 2 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 437 关注
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1792 回帖 • 1 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    132 引用 • 189 回帖

最新标签