javascript - 在自己的网站上制作 DuckDuckHack 即时回答

问题描述

我正在尝试查看是否可以在DuckDuckGo主网站的上下文之外使用来自DuckDuckHack Instant Answers 的代码。毕竟，Instant Answer 主要是一个独立的组件，由一些 HTML、CSS 和 Javascript 组成，应该是相对独立且可重用的。

由于 DuckDuckHack 项目处于维护模式，获取信息似乎有点困难：开发者指南中提到的 Slack 和 Forum已被禁用。我试图找出其他人是否试图让 Instant Answers 在其他情况下工作，但我找不到任何东西。有关于编写即时答案的教程，例如使用Perl 和 DuckPAN 工具的教程。我试图让现有的即时答案使用这些工具来工作，但我未能让它正常工作（不确定它们是否仍在维护）。

由于这些工具似乎有点重量级，我认为可以完全绕过它们并尝试直接使用 Instant Answer 中的 HTML、CSS 和 JS。

我已经给了计算器第一枪。我在duckduckgo/zeroclickinfo-goodies存储库的目录share/ goodie/calculator中确定了相关的源代码。HTML 似乎在content.handlebars，然后是calculator.css和calculator.js。我创建了一个纯 HTML 文件，将 HTML 从content.handlebars那里放入并包含对 CSS 文件和 JS 文件的引用。起初，CSS 不起作用，因为如果不添加更多包装器 div，CSS 规则将不适用，当检查 DuckDuckGo 站点时可以很容易地找到这些包装器 div，并且计算器 Instant Answer 可见。添加这些包装器 div 后，计算器 UI看起来或多或少完好无损. 但是，UI 的按钮根本不起作用。

查看 Javascript 控制台，我收到此错误：

Uncaught ReferenceError: DDH is not defined
    at calculator.js:1

显然calculator.jsDDH需要一个对象，但是我不知道该对象应该是什么以及如何创建它。

有谁知道这个DDH变量通常是如何初始化的，或者更一般地说是如何使它工作的？任何对从 DuckDuckHack 为自己的站点重用代码的项目的引用也将受到高度赞赏。

标签： javascripthtmlcssduckduckgo

解决方案

我认为DDH对象如何组合在一起的细节可能不会通过 DDG 的开源部分公开。

我还尝试重新利用一些内置的 DDG IA 功能（例如，通过他们的API以编程方式访问许多有用的即时答案）。

在这个过程中，我克隆了goodie repo并四处寻找。模式似乎是，对于大多数好东西，要显示的有效负载是DDH.<goodie>.content. 在我的本地仓库副本中goodie：

$ grep -rE 'DDH' ./lib/

./lib/DDG/Goodie/Conversions.pm:                    content => 'DDH.conversions.content'
./lib/DDG/Goodie/Conversions.pm:                content => 'DDH.conversions.content'
./lib/DDG/Goodie/Game2048.pm:                content => 'DDH.game2048.content'
./lib/DDG/Goodie/PublicDNS.pm:                list_content => 'DDH.public_dns.content',
./lib/DDG/Goodie/JsBeautifier.pm:                    content => 'DDH.js_beautifier.content'
./lib/DDG/Goodie/SassToCss.pm:                    content => 'DDH.sass_to_css.content'
./lib/DDG/Goodie/Constants.pm:                title_content => 'DDH.constants.title_content'
...

在 javascript 方面，您会.js在目录中找到相应的文件share/goodie，就像您对计算器好东西所做的那样。

这些<goodie>.js文件似乎引入了DDH.<goodie>命名空间（通常位于文件顶部）并定义了DDH.<goodie>.build函数。goodie-display 文档中引用了此过程（请参阅其中标题为在前端设置 Goodie 显示选项的部分）。

但是，文档中没有任何地方记录了的content属性DDH.<goodie>是如何组合在一起的。我克隆了docs repo并 grepped for DDH，没有发现任何结果。

但是， goodie repo.js文件share/goodie夹中的所有文件似乎都没有提供有关如何组装的线索。事实上，其中一些文件甚至不包含字符串。对于包含 string的所有文件的列表，我做了（在repo 的本地副本中）：DDH.<goodie>.content.jscontentshare*.jscontentgoodie

$ find ./share -name "*.js" |xargs grep -l 'content'

./share/goodie/countdown/countdown.js
./share/goodie/text_converter/text_converter.js

其他.js文件根本不包含该字符串..

编辑

但另一方面，我看到您确实设法让计算器对.js 文件进行了一些修改（例如，通过插入缺少的DDH命名空间）。

javascript - 在自己的网站上制作 DuckDuckHack 即时回答

问题描述

解决方案

推荐阅读