Ghost

Question

我在博客中使用 d3js 时遇到问题 post。

我这样安装成功了

copy d3.min.js to /content/themes/[theme name]/assets/js/

并添加

<script  src="{{asset "js/d3.min.js"}}"   charset="utf-8"></script>

进入

/content/themes/[theme name]/default.hbs

顺便说一句：将其添加到 <head> 部分很重要！

如果我将 <script> 添加到我的 Markdown 博客 post，我没有得到任何预期的 result/action

<script>
var svg = d3.select("#animviz")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
// some additional code you can find below
</script>
<div id="animviz">
</div>

我也尝试围绕这个 JS 编写自执行函数：

(function(){  
 // the hole code  
})();

没有成功。

唯一有效的方法是在 Ghost-Settings->Code Injection->Blog Footer 中包含 the hole code：

<script src="https://gist.githubusercontent.com/blablarnab/7621762/raw/0fc10237392911e12c4641c44cdd63066573430b/caterpillar.js"></script>

如果我将目标 <div id="animviz"></div> 添加到博客 posts Markdown 中，这会起作用。

有什么想法吗？我认为这是降价解析器问题。一个可能的解决方案是有一种方法可以将代码附加到博客 post 之外的 DOM（博客页脚）并刷新代码。但是怎么办？ location.reload(); 我想也会像 d3js 一样死掉吗？

Answer 1

解析器尝试在博客 post 本身中执行代码。所以它会一步一步。因为 JS 部分在您的 post 中排在第一位，所以没有有效的目标并且什么也没有发生。如果您将 console.log() 添加到您的代码中，您会看到它已执行 - 但未进入目标，因为此时它不存在。

因此，您需要将目标 <div id="animviz"> </div> 放在 <script>// your JS</script> 之前，如下所示：

<div id="animviz">
</div>
<script>
var svg = d3.select("#animviz")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
// some additional code you can find below
</script>

Ghost - 嵌入式 JavaScript 不会触发 d3js

Ghost - Embedded JavaScript doesn't trigger d3js

javascript

d3.js

ghost-blog