ΣΗΜΕΙΩΣΗ: Όλες οι πιστώσεις για αυτό το άρθρο πηγαίνει σε Faraz Patankar Ποιος είναι το άρθρο που συνήθιζα να το φτιάχνω αυτό; Απλά ήθελα να καταγράψω τις αλλαγές που έκανα εδώ για τη δική μου αναφορά και να μοιραστώ με άλλους.

Εισαγωγή

Σε αυτό το site χρησιμοποιώ το Hightlight.js για να μετατρέψω την πλευρά του πελάτη με κώδικα snippets. Μου αρέσει αυτό καθώς κρατάει τον κωδικό μου καθαρό και απλό. Ωστόσο, ήθελα να προσθέσω ένα κουμπί αντιγραφής σε κάθε κώδικα ώστε οι χρήστες να μπορούν εύκολα να αντιγράψουν τον κώδικα στο πρόχειρό τους. Αυτό είναι ένα απλό έργο, αλλά σκέφτηκα να το καταγράψω εδώ για οποιονδήποτε άλλο που θα ήθελε να κάνει το ίδιο.

Και όλα αυτά περιμένουν να προσθέσω τη λειτουργία του newsletter για να εμφανιστεί πραγματικά στο site. Μόλις πάρω την ενέργεια να το κάνω, θα προσθέσω αυτό.

Το τελικό σημείο είναι ότι έχουμε ένα κουμπί αντιγραφής όπως αυτό στο site:

Οι Επιλογές

Υπάρχουν πολλοί τρόποι για να το κάνουμε αυτό, για παράδειγμα υπάρχει ένα πρόσθετο κουμπί αντιγραφήςName για Higlight.js αλλά αποφάσισα ότι ήθελα περισσότερο έλεγχο πάνω στο κουμπί και το styling. Οπότε συνάντησα τον εαυτό μου. το παρόν άρθρο για την προσθήκη ενός αντιτύπου.

Τα Προβλήματα

Ενώ αυτό το άρθρο είναι μια μεγάλη προσέγγιση είχε ένα ζευγάρι των ζητημάτων που σταμάτησε να είναι τέλειο για μένα:

1. Χρησιμοποιεί μια γραμματοσειρά που δεν χρησιμοποιώ στο site μου (αλλά στη συνέχεια έχει και το 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>`;

Ενώ αυτό λειτουργεί, χρησιμοποιώ ήδη BoxIcons σε αυτό το site που έχει Αντιγραφή εικονιδίου ήδη εκεί μέσα.

2. Χρησιμοποιεί ένα τοστ βιβλιοθήκη που δεν έχω σε αυτό το site.

  // 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. Καταστρέφει την υπερχείλιση του κώδικα και βάζει το εικονίδιο στο κάτω μέρος που δεν ήθελα. Οπότε το δικό μου είναι πάνω δεξιά.

Οι Απατεώνες μου

Η κύρια λειτουργία

Αυτό το plugin αγκυροβολεί στο after:highlightElement event και προσθέτει ένα κουμπί στο μπλοκ κώδικα.

Έτσι, πρώτα αντέγραψα τον κώδικα του Faraz και στη συνέχεια έκανα τις ακόλουθες αλλαγές:

1. Αντί να το προσθέτω μέχρι το τέλος του μπλοκ κώδικα το προετοίμασα στην αρχή.
2. Αντί για το SVG Χρησιμοποίησα την έκδοση BoxIcons προσθέτοντας απλώς αυτές τις κατηγορίες στο πλήκτρο & θέτοντας το κείμενο στο text-xl.
3. Αφαίρεσα την κοινοποίηση της πρόποσης και την αντικατέστησα με μια απλή showToast λειτουργία που έχω στο site μου (δείτε αργότερα)
4. Πρόσθεσα ένα aria-label και title στο κουμπί για την προσβασιμότητα (και να δώσει ένα ωραίο hover εφέ).

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 Λειτουργία

Αυτό βασίζεται σε ένα μερικό ξυράφι που πρόσθεσα στο έργο μου. Αυτή η μερική χρήση του Συστατικό τοστ DaisyUI για να δείξετε ένα μήνυμα στον χρήστη. Μου αρέσει αυτή η προσέγγιση καθώς διατηρεί το Javascript καθαρό και απλό και μου επιτρέπει να στυλ το μήνυμα πρόποση με τον ίδιο τρόπο με το υπόλοιπο site.

<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>

Θα παρατηρήσετε ότι αυτό έχει επίσης ένα περίεργο κρυμμένο p ετικέτα στο κάτω μέρος, αυτό είναι μόνο για Tailwind να αναλύσετε αυτές τις τάξεις όταν χτίζει το CSS της ιστοσελίδας.

Η λειτουργία Javascript είναι απλή, απλά δείχνει το τοστ μήνυμα για ένα καθορισμένο χρόνο και στη συνέχεια το κρύβει και πάλι.

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"  />``

Τώρα όταν δείχνουμε αναρτήσεις στο blog οι μπλοκ κωδικών έχουν:

Συμπέρασμα

Αυτό ήταν, μια απλή αλλαγή στον κώδικα του Φαράζ για να δουλέψει για μένα. Ελπίζω αυτό να βοηθάει κάποιον άλλο εκεί έξω.