حقن HTML في صفحة واحدة فقط

مطور
1

لديّ شيء ما شابه هذا في علامة التبويب الخاصة بـ JavaScript في قالب موضوعي:

import { apiInitializer } from "discourse/lib/api";


export default apiInitializer("0.11.1", (api) => { 
    api.renderInOutlet("above-main-container",
        <template>
            <div>
              html stuff
            </div>
        </template>
     );
});

لقد قمت بنسخ ولصق هذا الكود، ويعمل (وهو مجرد مثال)

كيف يمكنني جعل هذا الكود يُعرض فقط في الصفحة الرئيسية أو فقط في صفحة التصنيفات؟

عذراً إذا لم تكن هذه أسئلة جيدة

2

هذا سؤال جيد، لا تقلق بشأنه! سيعمل هذا:

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { apiInitializer } from "discourse/lib/api";
import { defaultHomepage } from "discourse/lib/utilities";

class HomepageOnly extends Component {
  @service router;

  get shouldShow() {
    return this.router.currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.shouldShow}}
      <div>
        html stuff
      </div>
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", HomepageOnly);
});

يؤدي هذا إلى إنشاء مكون جديد، يستخدم خدمة router وأداة defaultHomepage للتحقق مما إذا كنت على الصفحة الرئيسية. ثم يتم عرض المكون في منفذ الإخراج.

هناك المزيد من التفاصيل هنا: Add custom content that only appears on your homepage

3

شكراً لك يا كريس، لقد عملت بشكل مثالي. شكراً أيضاً على الرابط، أحاول التعلم.

4

لديّ سؤال متابعة لأي شخص

الجزء الصغير من كود HTML المُحقَن لديّ يعرض شريطاً إعلانياً جميلاً في الصفحة الرئيسية، ويتم تحميله ويعمل بشكل صحيح. لقد وضعت الكود التالي في علامة <head> في قالب الموقع:

document.addEventListener('DOMContentLoaded', loadMyWidget);

يعمل الكود، ولكن عندما أنتقل إلى صفحة أخرى ثم أعود إلى الصفحة الرئيسية، لا يتم تحميل我的小部件 مرة أخرى. حاولت إضافة:

window.addEventListener('focus', loadMyWidget);

ولكن ذلك لم يُجدِ نفعاً، هل يمكن لأي شخص مساعدتي؟ هل يجب أن أبدأ موضوعاً جديداً لطرح هذا السؤال؟

تعديل:

أعتقد أنني توصلت إلى الحل

أضفت هذا إلى `export default apiInitializer((api) => {

api.onPageChange(() => {
  const myWidget = document.querySelector("#widget-container");
  if (myWidget) {
    window.loadMyWidget();
  }
 });

وقد أعاد تحميل我的小部件 الخاص بي عند العودة إلى الصفحة الرئيسية