"वह व्यक्ति जो भेड़ या भेड़ के झुंड की रक्षा, मार्गदर्शन या निगरानी करता है, उसे चरवाहा कहा जाता है"। लेकिन देवता चरवाहा कैसे कर सकते हैं?? शेफर्ड जेएस, आपके उपयोगकर्ताओं का मार्गदर्शन करने और उन्हें आपके एप्लिकेशन या आपके एप्लिकेशन के एक विशिष्ट भाग को विस्तृत और वर्णनात्मक तरीके से समझने में सक्षम करने के लिए सबसे अच्छे ओएस टूल में से एक है।
 

चरवाहा क्या है?? ?

शेफर्ड आपके ऐप के माध्यम से उपयोगकर्ताओं का मार्गदर्शन करने के लिए एक जावास्क्रिप्ट लाइब्रेरी है। यह प्रत्येक टूर "चरण" के लिए संवाद प्रस्तुत करने के लिए फ़्लोटिंग यूआई, एक अन्य ओपन-सोर्स लाइब्रेरी का उपयोग करता है।

संक्षेप में, अपने उपयोगकर्ताओं को अपने ऐप के भ्रमण के माध्यम से मार्गदर्शन करें।

आप उपयोगकर्ता को अपनाने के लिए कस्टम उपयोगकर्ता ऑनबोर्डिंग टूर, प्रशिक्षण और घोषणाएं बना सकते हैं।

चरवाहा कैसे करें? ??

शेफर्ड आपको अपने ऐप या वेबसाइट के भीतर कस्टम टूर या यात्रा के माध्यम से उपयोगकर्ताओं का मार्गदर्शन करने में सक्षम बनाता है। न्यूनतम शैलियों के साथ अत्यधिक अनुकूलन योग्य, शेफर्ड उपयोग में आसान होने के साथ-साथ शक्तिशाली अनुकूलन की अनुमति देता है। रिएक्ट, एम्बर, एंगुलर, Vue.js, ES मॉड्यूल या सादे जावास्क्रिप्ट सहित विभिन्न ढाँचे समर्थित हैं।

शेफर्ड स्थापित करने के चरण ?️:

1. आप नीचे दिए गए आदेश का उपयोग करके सीधे एनपीएम, यार्न, पीएनपीएम और बन का उपयोग करके शेफर्ड स्थापित कर सकते हैं:

   • एनपीएम इंस्टॉल: एनपीएम इंस्टॉल शेफर्ड.जेएस
   • यार्न इंस्टाल: यार्न ऐड शेफर्ड.जेएस
   • pnpm इंस्टाल: pnpm add shepherd.js
   • बन इंस्टॉल: बन ऐड शेफर्ड.जेएस

2. शेफर्ड का उपयोग करने के लिए आप सीधे jsDelivr cdn का भी उपयोग कर सकते हैं।
   

चरण कैसे बनाएं? ?

शेफर्ड टूर बनाना बहुत आसान है, बस नीचे दिए गए कोड का पालन करें:

const tour = new Shepherd.Tour({
        defaultStepOptions: {
            cancelIcon: {
                enabled: true
            },
            classes: 'class-1 class-2',
            scrollTo: { behavior: 'smooth', block: 'center' }
        }
    });

    tour.addStep({
        title: 'Creating a Shepherd Tour',
        text: 'Creating a Shepherd tour is easy.
               Just create a "Tour" instance, and add as many
               steps as you want.',
        attachTo: {
            element: '.hero-example',
            on: 'bottom'
        },
        buttons: [
            {
                action() {
                    return this.back();
                },
                classes: 'shepherd-button-secondary',
                text: 'Back'
            },
            {
                action() {
                    return this.next();
                },
                text: 'Next'
            }
        ],
        id: 'creating'
    });

    tour.start(); //starts the tour

स्टाइल कैसे बदलें? ?

शेफर्डजेएस लाइब्रेरी द्वारा पेज में इंजेक्ट किया गया HTML कुछ इस तरह दिखता है:

&&&] पूर्ण; इनसेट: 0px ऑटो ऑटो 0px; मार्जिन: 0px; ट्रांसफ़ॉर्म (393px, 302px);" डेटा-पॉपर-प्लेसमेंट='नीचे'>

   

   

      
Users seem to be down by 12.4%. Is that bad?
      
   

इसलिए, नीचे दिए गए कुछ के साथ तत्वों (उदाहरण के लिए तीर) को लक्षित करना आसान बना दिया गया है..

.चरवाहा-तीर { /* यहां कुछ शैलियाँ... */ }

   

   

      
Users seem to be down by 12.4%. Is that bad?
      
   

साथ ही, यदि आपने ध्यान दिया हो, जब आप चरण जोड़ते हैं, तो आईडी का उपयोग किया जाता है। इसलिए, इसका उपयोग किसी विशेष चरण के विवरण को लक्षित करने के लिए भी किया जा सकता है।

 
उपरोक्त कुछ बुनियादी गुण हैं। यदि कोई
दौरे की प्रगति दिखाना चाहता है, तो वह ऐसा भी कर सकता है! कोड की नीचे दी गई पंक्तियों का पालन करें:

कब: { दिखाओ() { const currentStep = Shepherd.activeTour?.getCurrentStep(); स्थिरांक currentStepElement = currentStep?.getElement(); स्थिरांक शीर्षलेख = currentStepElement?.querySelector('.shepherd-header'); स्थिरांक प्रगति = document.createElement('span'); प्रगति.शैली['मार्जिन-दाएं'] = '315पीएक्स'; प्रगति.इनरटेक्स्ट = `${Shepherd.activeTour?.steps.indexOf(currentStep) 1}/${Shepherd.activeTour?.steps.length}`; हेडर?.insertBefore(प्रगति, currentStepElement.querySelector('.shepherd-cancel-icon')); } }

   

   

      
Users seem to be down by 12.4%. Is that bad?
      
   

आप सभी विवरण
शेफर्ड के आधिकारिक दस्तावेज़ पृष्ठ में प्राप्त कर सकते हैं, यहां दिए गए लिंक: https://docs.shepherdpro.com/  

शेफर्ड जेएस का उपयोग कर शानदार परियोजनाएं ?‍?

1️⃣ टिक-टैक-टो ⭕❌

या तो एक उबाऊ व्याख्यान में भाग लेना, या अपने सबसे अच्छे दोस्त के साथ गंभीर बातचीत करना, या जीवन के किसी भी क्षण में, हमने यह खेल खेला है, टिक-टैक-टो।

इस खेल को समर्थन देने और पुनः जीवंत करने के लिए एक अद्भुत परियोजना
सुशील थापा द्वारा बनाई गई है। प्रोजेक्ट ओएस है. यह प्रोजेक्ट शेफर्ड के सर्वोत्तम उपयोगों में से एक को दर्शाता है।

लाइव डेमो: https://tictactoe.susheelthapa.com.np/
जीथब लिंक: https://github.com/SusheelThapa/Tic-Tac-Toe
शेफर्ड कार्यान्वयन: https://github.com/SusheelThapa/Tic-Tac-Toe/tree/main/src/components/Shepherd

शेफर्ड जेएस का उपयोग करके खेल का निर्देशित दौरा

2️⃣ अध्ययन साथी ?

स्टडीमेट एक अभिनव वेब एप्लिकेशन है जिसे पीडीएफ के पृष्ठवार सारांश प्रदान करके और इंटरैक्टिव फ्लैशकार्ड तैयार करके सीखने के अनुभव को बढ़ाने के लिए डिज़ाइन किया गया है। शेफर्ड.जेएस के एकीकरण के साथ, स्टडीमेट उपयोगकर्ताओं को एप्लिकेशन की कार्यात्मकताओं के माध्यम से सहजता से नेविगेट करने में मदद करने के लिए एक निर्देशित टूर सुविधा प्रदान करता है। स्टडीमेट इसे अंतिम समय के पुनरीक्षण सत्रों के लिए विशेष रूप से उपयोगी बनाता है, जिससे उपयोगकर्ता संरचित तरीके से प्रमुख अवधारणाओं और सूचनाओं की त्वरित समीक्षा कर सकते हैं।

यह प्रोजेक्ट

सुबाश लामिछाने द्वारा बनाया गया है।

जीथब लिंक: https://github.com/Subash-Lamichane/StudyMate
शेफर्ड कार्यान्वयन: https://github.com/Subash-Lamichane/StudyMate/blob/main/frontend/src/pages/LandingPage.jsx

शेफर्ड जेएस का उपयोग करके एनीमेशन के साथ स्टडी मेट का निर्देशित दौरा

3️⃣ सीडलिंक ?

सीडलिंक एक फ्रंटएंड वेब एप्लिकेशन है जो आपको आस-पास की नर्सरी और बगीचों में उपलब्ध पौधों की विविध रेंज का पता लगाने की सुविधा देता है। आप इसे खरीद सकते हैं, या इसके बारे में शोध कर सकते हैं। इतना ही?? नहीं, अधिक जानने के लिए ऐप देखें! ?

यह प्रोजेक्ट

रोहन शर्मा द्वारा बनाया गया है (हां, मैं वह निर्माता हूं)

जीथब लिंक: https://github.com/RS-labhub/SeedLink-Shepherd
शेफर्ड कार्यान्वयन: https://github.com/RS-labhub/SeedLink-Shepherd/blob/main/src/shepherd.js

शेफर्ड जेएस का उपयोग करके दृश्यात्मक और आकर्षक थीम के साथ सीडलिंक का निर्देशित दौरा

ख़त्म होने की ओर बढ़ रहे हैं...?

शेफर्ड एक ओपन-सोर्स, पूरी तरह से फीचर्ड, डिजिटल एडॉप्शन प्लेटफॉर्म (डीएपी) और यूजर ऑनबोर्डिंग सेवा है।

शेफर्ड भी प्रो संस्करण में विकसित हुआ है जो एक

भुगतान सेवा है। शेफर्ड-प्रो द्वारा प्रदान की गई सुविधाओं की सूची यहां दी गई है:

अनुकूलन योग्य टूर टेम्पलेट्स
एनालिटिक्स एकीकरण
बहु-भाषा समर्थन
उपयोगकर्ता व्यवहार ट्रैकिंग
एकीकरण क्षमताएं
उत्तरदायी आकार
प्रतिक्रिया तंत्र
उन्नत शाखा तर्क

यदि आपने अभी तक इसका उपयोग नहीं किया है, तो कम से कम एक बार इसे देखें! मैं वादा करता हूं, आपको पछतावा नहीं होगा?

जीथूब पर स्टार शेफर्ड ⭐