0
301
VistasAgregar un widget de Javascript a una sola publicación de Tumblr
Solo hago programación científica, por lo que no estoy muy familiarizado con javascript. Estoy tratando de agregar un widget a una sola publicación de Tumblr. El sitio web del que obtuve el widget lo hace específicamente para tumblr y es:
<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>Si esto se agrega al tema real en Tumblr, funciona muy bien. Sin embargo, estoy tratando de poner esto en una sola publicación en tumblr. Cuando intente hacer la publicación, iré al html y lo agregaré allí, pero en realidad no aparecerá en el sitio. ¿Algún consejo sobre cómo resolver esto? Gracias de antemano.
1 Respuestas
Responde la pregunta0
Tienes dos opciones disponibles para ti.
Primero: si puede alojar el archivo javascript en algún lugar de forma remota, puede vincularlo en la parte inferior de la publicación a través del editor. La belleza de esto es que puede actualizar js sin tener que actualizar su plantilla principal.
Para las ediciones posteriores, puede seleccionar la configuración y elegir el marcado HTML 
luego agregue un enlace al script en la parte inferior de la página. 
O para una edición de página, es el mismo concepto que puede cambiar al marcado HTML y agregarlo allí. 
Segundo: puede crear una función en su plantilla y luego activarla solo en la publicación o página relevante.
La forma en que lo hice en el pasado es obtener el nombre de la publicación/página de la ruta del archivo, dividir la ruta del archivo en una matriz y agregarlos a los nombres de clase para el elemento html. Ejemplo aquí:
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); } }Ahora podemos orientar nuestra función para que se ejecute solo si encuentra el selector correcto
if (document.querySelector('.yourClassName').length) { // run your function here } Para .yourClassName , debe pasar la página o el nombre de la publicación. De forma predeterminada, Tumblr creará una identificación de publicación única (entero) y la agregará a la ruta del archivo. Pero también puede usar nombres de archivos de texto/detallados.
La belleza de este método es que los nombres de clase se agregarán a cada página, pero puede optar por apuntar solo a ciertas publicaciones/páginas con su función js.
Alternativamente, puede usar este método y agregar el selector html solo al contenido de su publicación/página. Así que envuelva su contenido en un div y asígnele una identificación o nombre de clase único, pero el método es el mismo.
Aquí hay un ejemplo de una página donde estoy haciendo esto (aunque estoy concatenando los nombres de clase de forma ligeramente diferente). 
Espero que esto tenga sentido.