تم تحديث أيقونة رأس مخصص: إرسال بيانات المشاركة عبر URL

مطور
1

تم إهمال api.decorateWidget مؤخرًا بواسطة Discourse، والذي استخدمته لإدراج أيقونات رأس مخصصة ونشر اسم المستخدم للمستخدم الحالي عبر عنوان URL.

كنت أتساءل كيف يمكنني نشر اسم المستخدم الحالي للمستخدم عبر HTTP باستخدام واجهة برمجة التطبيقات headerIcons الجديدة. لم أتمكن من العثور على أي وثائق أو أمثلة حول كيفية تنفيذ ذلك. لم أتمكن من العثور على طريقة للقيام بذلك عبر المكون الإضافي روابط رأس مخصصة أيضًا.

أقدر مساعدتك! فيما يلي الكود الحالي الخاص بي باستخدام واجهة برمجة التطبيقات decorateWidget لنشر اسم المستخدم:

<script type="text/discourse-plugin" version="0.12">
    const { iconNode } = require("discourse-common/lib/icon-library");

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });


</script>
2

أهلاً،

سأساعدك، ولكن هل يمكنك شرح ما تحاول فعله قبل ذلك؟

هل هو لعرض قائمة تحتوي على نموذج بداخلها؟

مثل على سبيل المثال:

This image appears to be a screenshot of a webpage, showcasing a chat function named "Chat Sidebar Preferences." (Captioned by AI)
This image appears to be a screenshot of a webpage, showcasing a chat function named "Chat Sidebar Preferences." (Captioned by AI)414×260 9.01 KB

أم أنها مجرد زر يحمل اسم المستخدم كعنوان، ويعيد التوجيه إلى عنوان URL معين؟

3

انقر فوق أيقونة الرأس >> لنشر اسم المستخدم الخاص بالمستخدم على عنوان URL محدد.

لا يتم عرض أي نموذج في الواقع. يتم عرض أيقونة الرأس فقط. يتم تنفيذ إجراء النشر خلف الكواليس. آسف للإرباك. سأقوم بإزالة “نموذج” من عنوان مشاركتي.

4

حسنًا، إعادة توجيه إلى عنوان URL خارجي يحتوي على اسم المستخدم.

إليك مثال أساسي حول كيفية القيام بذلك، باستخدام واجهة برمجة التطبيقات الجديدة:

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = `<template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>`;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
  • calculator هو اسم فريد
  • iconComponent يشير إلى قالب تضمين داخلي template كما ترى هنا، ولكنه يمكن أن يشير أيضًا إلى مكون قالب فئة تقوم بإنشائه في دليل components.
  • يمكنك اختيار مكان وضع أيقونتك باستخدام before أو after متبوعًا بالاسم الفريد لأيقونة الرأس.

NVIDIA_Share_rvsjetCtUy

لا تتردد في التعديل!

ملاحظة:

  • صيغة القالب template لن تعمل باستخدام واجهة المستخدم.

    ستحتاج إلى إنشاء مكون سمة بملفات منفصلة. لتوليد مكون سمة بسرعة، يمكنك استخدام Discourse CLI والتطوير معه بسهولة باستخدام محرر التعليمات البرمجية الخاص بك. أوصي به بشدة

    يمكنك أيضًا استخدام القالب على Github: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes.

    • لاستخدام مكون قالب، يجب أن يكون امتداد الملف .gjs.

أخبرني إذا كنت بحاجة إلى مزيد من المساعدة!

3 إعجابات
5

مرحباً @Arkshine،

شكراً جزيلاً لك على الشرح المفصل. لقد حاولت حقن الكود في <head> ولكنني لا أرى الأيقونة تظهر. ماذا فعلت بشكل خاطئ؟

<script type="text/discourse-plugin">
    import { apiInitializer } from "discourse/lib/api";
    import DButton from "discourse/components/d-button";
    
    export default apiInitializer("1.8.0", (api) => {
      const currentUser = api.getCurrentUser();
    
      if (!currentUser) {
        return;
      }
    
      const url =
        "https://example.com/?u=" + encodeURIComponent(currentUser.username);
      console.log("url: " + url)
      const iconComponent = <template>
        <li class="calculator">
          <DButton
            @href={{url}}
            @icon="calculator"
            class="icon btn-flat"
            title="Calculator"
            target="_blank"
          />
        </li>
      </template>;
    
      api.headerIcons.add("calculator", iconComponent, { before: "search" });
    });    
</script>
إعجاب واحد (1)
6

@littleviolette مرحبًا، لا يمكن تشغيله في واجهة المسؤول هنا.

باستخدام Theme CLI، يمكنك بسهولة إنشاء مكون سمة على جهاز الكمبيوتر الخاص بك.

ثم، يمكنك تحرير الملف باستخدام محرر نصوص من اختيارك (مثل vscode) وإضافة الكود في المُهيئ. يمكنك إنشاء ملف في /javascripts/discourse/api-initializers/my-header-icon.gjs ولصق الكود فيه. يمكنك أيضًا تغيير القيم الافتراضية في about.json.

image

الخطوة التالية لتثبيت المكون على منتدى الإنتاج الخاص بك:

  • يمكنك إما وضع المكون على Github وفي واجهة المسؤول، استخدام رابط المستودع للتثبيت؛
  • أو يمكنك ضغط الدليل على جهاز الكمبيوتر الخاص بك، وفي واجهة المسؤول، تثبيته من الجهاز.

جرب ذلك وأخبرني إذا واجهت أي مشاكل!

3 إعجابات