1

我只做科学编程，所以我对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 并将其添加到那里，但它实际上不会显示在网站上。关于如何解决这个问题的任何提示？先感谢您。

4

1 回答 1

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 或类名，但方法是一样的。

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

我希望这是有道理的。

于 2021-12-24T13:24:07.620 回答