登录 注册

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

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

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

就啥也没有。

感谢各位大佬 🙏 🙏 🙏

  • 思源笔记

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

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

    20156 引用 • 77717 回帖
  • Q&A

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

    7017 引用 • 31714 回帖 • 220 关注
秦皇岛 位置 6 回帖
3
522 115 83 86 1 5 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 的小组件？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • zxhd86 •
    订阅者 先知

    这个插件的网址貌似得翻墙才能看……建议换一个。

    1 回复
  • 其他回帖
  • qibin961014 •
    付费者 作者

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

  • 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
前门种棵黄瓜秧 秦皇岛
回帖
8
 帖子
3
 积分
4877

近期热议

推荐标签 标签

  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    45 引用 • 25 回帖 • 1 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    28 引用 • 66 回帖 • 7 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 609 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 7 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    163 引用 • 473 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 321 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖 • 1 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 607 关注
  • JRebel

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

    26 引用 • 78 回帖 • 624 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • App

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

    90 引用 • 383 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 529 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • 锤子科技

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

    4 引用 • 31 回帖 • 8 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    386 引用 • 1226 回帖 • 593 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 30 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 646 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    324 引用 • 1395 回帖 • 1 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 135 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    285 引用 • 4482 回帖 • 658 关注
  • 生活

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

    230 引用 • 1454 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 16 关注
  • 分享

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

    245 引用 • 1776 回帖 • 1 关注
  • jQuery

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

    63 引用 • 134 回帖 • 724 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注

最新标签