将 Javascript 小部件添加到单个 Tumblr 帖子

Posted 2023-02-22

【中文标题】将 Javascript 小部件添加到单个 Tumblr 帖子

【英文标题】：Adding Javascript Widget to a Single Tumblr Post

【发布时间】：2022-01-24 02:52:27

【问题描述】：

我只做科学编程，所以我对javascript不太熟悉。我正在尝试将一个小部件添加到一个 tumblr 帖子中。我从中获得小部件的网站专门用于 tumblr，它是：

<div class="shopthepost-widget" data-widget-id="4665345"><script type="text/javascript">!function(w,i,d,g,e,t)d.getElementById(i)||(element=d.createElement(t),element.id=i,element.src="https://widgets.rewardstyle.com"+e,d.body.appendChild(element)),w.hasOwnProperty(g)===!0&&"complete"===d.readyState&&w[g].init()(window,"shopthepost-script",document,"__stp","/js/shopthepost.js","script")</script><div class="rs-adblock"><img src="https://assets.rewardstyle.com/production/424ab6aff12fe31b5b93d8f5ce7cc70d2953e565/images/search/350.gif" onerror='this.parentNode.innerhtml="Disable your ad blocking software to view this content."' style="width: 15px; height: 15px"><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

如果将其添加到 tumblr 上的实际主题中，效果会很好。然而，我试图把它放在 tumblr 上的一篇文章中。当我尝试发帖时，我会转到 html 并将其添加到那里，但它实际上不会显示在网站上。关于如何解决这个问题的任何提示？提前谢谢你。

【参考方案1】：

您有两种选择。

首先：如果您可以远程托管 javascript 文件，您可以通过编辑器将其链接到帖子底部。这样做的好处是你可以更新 js 而无需更新你的主模板。

对于帖子编辑，您可以选择设置并选择 HTML 标记

然后在页面底部添加指向脚本的链接。

或者对于页面编辑，它是相同的概念，您可以切换到 HTML 标记并将其添加到那里。

第二：您可以在模板中创建一个函数，然后只在相关的帖子或页面上触发它。

我过去这样做的方法是从文件路径中获取帖子/页面名称，将文件路径拆分为一个数组并将它们添加到 html 元素的类名中。此处示例：

const dom = document.querySelector('html');
const path = document.location.pathname.split('/');
const primaryDir = path[1]; // get the primary folder
const secondaryDir = path[2]; // get secondary folder
const tertiaryDir = path[3]; // get the tertiary folder

const setIndexPage = () => 
    if (!primaryDir)  // if there is no primaryDir we should assume we are on the home/index page
        dom.classList.add('index');
     else if (tertiaryDir) 
        dom.classList.add(primaryDir + ' ' + secondaryDir + ' ' + tertiaryDir);
     else if (secondaryDir) 
        dom.classList.add(primaryDir + ' ' + secondaryDir);
     else 
        dom.classList.add(primaryDir);
    

现在我们可以让我们的函数只在找到正确的选择器时才运行

if (document.querySelector('.yourClassName').length) 
    // run your function here

对于.yourClassName，您需要传入页面或帖子名称。默认情况下，Tumblr 将创建一个唯一的帖子 ID（整数）并将其添加到文件路径中。但您也可以另外使用文本/详细文件名。

这种方法的美妙之处在于，类名将添加到每个页面，但您可以选择使用您的 js 函数仅针对某些帖子/页面。

或者，您可以使用此方法并将 html 选择器仅添加到您的帖子/页面内容中。所以将你的内容包装在一个 div 中，并给它一个唯一的 id 或类名，但方法是一样的。

这是我正在执行此操作的页面示例（尽管我将类名连接起来略有不同）。

我希望这是有道理的。