أولاً

في هذا الموقع أستعمل Hightlight.js لجعل رمز shoneppits جانب العميل. أحب هذا كما أنه يبقي رمزي الجانبي للخادم نظيفاً وبسيطاً. على أية حال، أردت إضافة زر نسخ لكل رمز snippet بحيث يمكن للمستخدمين نسخ الرمز بسهولة إلى الحافظة الخاصة بهم. هذه مهمة بسيطة ولكن فكرت في توثيقها هنا لأي شخص آخر قد يرغب في فعل نفس الشيء.

الهدف:

نقطة النهاية هي أن لدينا نُسخة زر مثل هذا على الموقع:

ملاحظة: جميع الأرصدة الدائنة لهذه المادة تذهب إلى: الطرّاسر الذي هو المقال الذي استخدمته لصنع هذا واحد. أردت فقط أن أوثق التغييرات التي أدخلتها عليها هنا من أجل إشارتي الخاصة وأن أشارك الآخرين.

& خيارات

هناك عدة طرق للقيام بذلك، على سبيل المثال هناك لكن قررت أنني أريد المزيد من التحكم بالزر و المخطوطات لذا جئت عبرت المادة 3 من هذه المادة لـ a نُسخ زر.

ولئن كانت تلك المادة نهجاً عظيماً، فقد كان لديها بعض المسائل التي حالت دون أن تكون مثالية بالنسبة لي:

1. يستخدم خطاً لا أستخدمه في موقعي (لكن بعد ذلك يدويًا لديه SVG أيضًا، ليس متأكدًا لماذا).

  // Lucide copy icon
    copyButton.innerHTML = `<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;

بينما هذا يعمل، أنا بالفعل أستخدم مربع أيقونات في هذا الموقع الذي يحتوي على انسخ أي شيء في هذا الأمر.

2. إنه يستخدم المكتبة المحمصة التي لا أملكها في هذا الموقع

  // Notify user that the content has been copied
      toast.success("Copied to clipboard", {
        description: "The code block content has been copied to the clipboard.",
      });

3. إنه يزيل تدفق y على كتلة الأكواد ويضع الأيقونة في الأسفل التي لم أكن أريدها. إذاً اللغم هو الأعلى لليمين.

مكيفات مكيفاتي

المهم الرئيسي

هذا الملحق يوصل إلى after:highlightElement حدث وإضافة زر إلى كتلة الرمز.

لذا قمت أولاً بحذف شفرة (فاراز) ومن ثم قمت بالتغييرات التالية:

1. بدلاً من إضافتها إلى نهاية كود كتلة أنا أعِدّه إلى البداية.
2. بدلاً من الـ SVG text-xl.
3. لقد أزلت مذكرة النخبة و استبدلتها ببساطه showToast في موقعي (انظر لاحقاً)
4. أضفت ما يلي: aria-label وقد عقد مؤتمراً بشأن title لـ زر لـ وصول و لـ a لطيف تأثير.

hljs.addPlugin({
    "after:highlightElement": ({ el, text }) => {
        const wrapper = el.parentElement;
        if (wrapper == null) {
            return;
        }

        /**
         * Make the parent relative so we can absolutely
         * position the copy button
         */
        wrapper.classList.add("relative");
        const copyButton = document.createElement("button");
        copyButton.classList.add(
            "absolute",
            "top-2",
            "right-1",
            "p-2",
            "text-gray-500",
            "hover:text-gray-700",
            "bx",
            "bx-copy",
            "text-xl",
            "cursor-pointer"
        );
        copyButton.setAttribute("aria-label", "Copy code to clipboard");
        copyButton.setAttribute("title", "Copy code to clipboard");

        copyButton.onclick = () => {
            navigator.clipboard.writeText(text);

            // Notify user that the content has been copied
            showToast("The code block content has been copied to the clipboard.", 3000, "success");

        };
        // Append the copy button to the wrapper
        wrapper.prepend(copyButton);
    },
});

showToast الوظيفة

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

<div id="toast" class="toast toast-bottom fixed z-50 hidden overflow-y-hidden">
    <div id="toast-message" class="alert">
        <div>
            <span id="toast-text">Notification message</span>
        </div>
    </div>
    <p class="hidden right-1 bx-copy  cursor-pointer alert-success alert-warning alert-error alert-info"></p>
</div>

أنت سَتُلاحظُ هذا أيضاً عِنْدَهُ a غريب مخفي p علامة عند الأسفل، هذا هو فقط لـ تايل ويند إلى إعراب هذه الفئات عندما يبني الموقع CSS.

الدالة جافاكورت بسيطة، تظهر فقط رسالة الترميز لوقت معين ثم تخبئها مرة أخرى.

window.showToast = function(message, duration = 3000, type = 'success') {
    const toast = document.getElementById('toast');
    const toastText = document.getElementById('toast-text');
    const toastMessage = document.getElementById('toast-message');

    // Set message and type
    toastText.innerText = message;
    toastMessage.className = `alert alert-${type}`; // Change alert type (success, warning, error)

    // Show the toast
    toast.classList.remove('hidden');

    // Hide the toast after specified duration
    setTimeout(() => {
        toast.classList.add('hidden');
    }, duration);
}

ثم يمكننا ان نطلق هذا باستخدام showToast copyButton.onclick حدث حدث.

showToast("The code block content has been copied to the clipboard.", 3000, "success");

أضفت هذا الحق الجزئي في أعلى _Layout.cshtml لذا فهي متاحة في كل صفحة.

<partial name="_Toast"  />``

الآن عندما نعرض المدوّنات، فإنّ كتل الشفرات تحتوي على:

في الإستنتاج

هذا هو عليه، مجرد تغيير بسيط إلى رمز فاراز لجعله يعمل بالنسبة لي. أَتمنّى هذا يُساعدُ شخص آخر هناك.