13  साइट्स अनुकूलित करें

13.1 लक्ष्य

उन्नत साइट कॉन्फ़िगरेशन में स्क्रिप्ट का उपयोग करें, या साइट प्लगइन्स के तहत स्क्रिप्ट का उपयोग करके, एक साइट के अंदर पेज, डेटा, और इंटरफेस को छुपाने, हटाने, और रीराइट करने के लिए।

13.2 1. उन्नत साइट कॉन्फ़िगरेशन

इस पर जाएँ:

साइट प्रबंधन > साइट सूची > कॉन्फ़िगरेशन

स्क्रिप्ट-संबंधी कॉन्फ़िगरेशन और शर्तों में शामिल हैं:

कॉन्फ़िगरेशन	उद्देश्य
अनुरोध हेडर / प्रतिक्रिया हेडर	स्क्रिप्ट को निर्दिष्ट हेडर पढ़ने की अनुमति देता है
पेज स्क्रिप्ट	पेज स्क्रिप्ट चुनें जब स्क्रिप्ट पेज सामग्री पर काम करती है, जैसे DOM, फॉर्म, बटन, रीडायरेक्ट, और पेज एन्हांसमेंट
SSE स्क्रिप्ट	SSE स्क्रिप्ट चुनें जब स्क्रिप्ट सर्वर-सेंट इवेंट स्ट्रीम को रीराइट करती है
मानक इंटरफ़ेस इंटरसेप्शन	जब उपरोक्त दो विकल्पों में से कोई भी चयनित नहीं होता है, तो स्क्रिप्ट मानक गैर-SSE इंटरफ़ेस प्रतिक्रिया बॉडी को रीराइट करती है

13.3 2. स्क्रिप्ट और प्लगइन्स

ऑपरेशन पथ:

1. साइट सूची में प्लगइन्स प्रबंधित करें पर क्लिक करें।
2. एक प्लगइन बनाएं।
3. नाम, संस्करण, टिप्पणी, और संबद्ध साइट भरें।
4. प्लगइन अपलोड करें या कॉन्फ़िगरेशन दर्ज करें।
5. एक स्क्रिप्ट जोड़ें।
6. मिलान URL, स्क्रिप्ट प्रकार, सेलेक्टर, और सामग्री सेट करें।
7. टेस्ट अकाउंट से सत्यापित करें।

स्क्रिप्ट का उपयोग अकाउंट प्रकार, वर्कस्पेस, और आंतरिक साइट्स के लिए भी किया जा सकता है।

13.4 3. संवेदनशील पेज सामग्री नियंत्रण

उपयुक्त लिए:

• कीमतें छुपाना।
• ग्राहक गोपनीयता फ़ील्ड छुपाना।
• उन बटनों और क्षेत्रों को हटाना जिन्हें कर्मचारियों को संचालित करने की अनुमति नहीं है।
• विशिष्ट URL के लिए पेज क्षेत्र छुपाना।
• पेज क्षेत्र रीराइट करना।

लक्ष्य साइट बदलने के बाद सेलेक्टर अमान्य हो सकते हैं, इसलिए रिग्रेशन परीक्षण आवश्यक है।

13.5 पेज स्क्रिप्ट टूल

वेब पेज पर सीधे स्क्रिप्ट लिखना और परीक्षण करना सुविधाजनक नहीं है। आप GitHub से आधिकारिक स्क्रिप्ट एडिटर डाउनलोड कर सकते हैं: https://github.com/sa2web/sa2web-script-editor.

इंस्टॉलेशन फ़ाइलें डाउनलोड और निकालने के बाद, स्क्रिप्ट एडिटर शुरू करने के लिए sa2web.exe पर क्लिक करें, जैसा कि Figure 13.1 में दिखाया गया है।

चित्र 13.1: Sa2web स्क्रिप्ट एडिटर

निम्न दो उदाहरण सुविधा को प्रदर्शित करते हैं।

13.6 उदाहरण 1: आधिकारिक वेबसाइट हेडर बैकग्राउंड को कोरल में बदलें

1. URL फ़ील्ड में https://www.sa2web.com दर्ज करें।
2. पेज स्क्रिप्ट चुनें, जिसका अर्थ है कि स्क्रिप्ट पेज सामग्री पर काम करती है।
3. CSS/XPath सेलेक्टर में * दर्ज करें, जिसका अर्थ है कि नीचे दिया गया स्क्रिप्ट तब चलता है जब एक मिलान तत्व पेज पर दिखाई देता है।
4. स्क्रिप्ट बॉक्स में निम्न जावास्क्रिप्ट कोड दर्ज करें, जैसा कि Figure 13.2 में दिखाया गया है:

// कृपया यहां अपना कोड लिखें...
// जब हेडर तत्व पेज पर दिखाई देता है तो इवेंट लिस्टनर फ़ंक्शन निष्पादित करें।
api.dom.addConnectListener("header", () => {
  // पेज पर हेडर तत्व ढूंढें।
  const header = api.dom.querySelector(document, "header");
  // हेडर तत्व का बैकग्राउंड रंग lightcoral में बदलें।
  header.style.backgroundColor = 'lightcoral';
});

चित्र 13.2: Sa2web बैकग्राउंड-कलर स्क्रिप्ट

स्क्रिप्ट का परीक्षण करने के लिए स्क्रिप्ट चलाएं पर क्लिक करें। बाईं ओर की वेबसाइट खुलती है और स्क्रिप्ट चलती है, जैसा कि Figure 13.3 में दिखाया गया है।

चित्र 13.3: Sa2web स्क्रिप्ट टेस्ट परिणाम

परिणाम अपेक्षाओं को पूरा करने के बाद, उपरोक्त सामग्री को पेज में कॉपी करें, जैसा कि Figure 13.4 में दिखाया गया है।

चित्र 13.4: Sa2web उन्नत साइट कॉन्फ़िगरेशन में स्क्रिप्ट भरें

जोड़ें पर क्लिक करें, फिर कॉन्फ़िगरेशन सेव करें पर क्लिक करें। जब उपयोगकर्ता फ्रंटएंड से लॉग इन करते हैं और साइट तक पहुँचते हैं, तो नेविगेशन बार कोरल हो जाता है, जैसा कि Figure 13.5 में दिखाया गया है।

चित्र 13.5: Sa2web फ्रंटएंड एक्सेस परिणाम

13.7 उदाहरण 2: आधिकारिक वेबसाइट के बीच में पेज व्यू दिखाएं

यह उदाहरण मुख्य रूप से डेटा को स्टोर और प्रदर्शित करने के लिए api.user का उपयोग करता है, जिसमें डेटाबेस में लगातार स्टोरेज होता है। यहां इसका उपयोग आधिकारिक वेबसाइट पेज पर पेज-व्यू काउंटर दिखाने के लिए किया जाता है, जैसा कि Figure 13.6 में दिखाया गया है।

api.dom.addConnectListener('body', async (con) => {
  if (window != window.top) return;
  if (window.isCounted) {
    return;
  }
  window.isCounted = true;
  // केवल वर्तमान साइट द्वारा पेज व्यू गिनें।
  await api.user.incr('counter', 1, true, false, false);
  // केवल वर्तमान साइट द्वारा पेज व्यू प्राप्त करें।
  const ret = await api.user.get('counter', true, false, false);
  document.body.insertAdjacentHTML('beforeend', `<div style='position: fixed;background-color:red;color:white;left:50%;top:50%;width:100px;height:100px;line-height:100px;text-align:center;font-size:50px'>
  ${ret.value}</div>`);
});

चित्र 13.6: Sa2web पेज-व्यू काउंटर स्क्रिप्ट जोड़ें

जोड़ें और सेव करें पर क्लिक करने के लगभग एक मिनट बाद, Sa2web फ्रंटएंड से साइट तक पहुँचें। पेज के बीच में एक लाल बॉक्स दिखाई देता है, जो पेज-व्यू काउंट दिखाता है। प्रत्येक विज़िट या रीफ्रेश काउंट को 1 से बढ़ाता है, जैसा कि Figure 13.7 में दिखाया गया है।

चित्र 13.7: Sa2web पेज काउंटर प्रभाव

बेशक, api.user इनसे अधिक API प्रदान करता है। यह अकाउंट और डिवाइस द्वारा डेटा स्टोर और पुनर्प्राप्त भी कर सकता है। पूर्ण API के लिए Chapter 14 देखें।

ये दो उदाहरण केवल सबसे बुनियादी साइट अनुकूलन सुविधाओं में से कुछ को प्रदर्शित करते हैं। आप api.http जैसे अन्य API के माध्यम से एंटरप्राइज़ सिस्टम के साथ गहराई से एकीकृत कर सकते हैं, ताकि बेहतर अनुभव प्रदान किया जा सके।

13.8 4. window.api

पेज स्क्रिप्ट और मानक इंटरफ़ेस इंटरसेप्शन स्क्रिप्ट उपयोग कर सकती हैं:

window.api

इसमें मुख्य रूप से user, dom, utils, config, और header() से संबंधित API शामिल हैं।

पूर्ण इंटरफ़ेस के लिए, Chapter 14 देखें।