👯 🧑🏾‍🤝‍🧑🏽 🙆🏾 साइट तक पहुंच के बिना एक उत्तरदायी साइट बनाने के लिए उपकरण 🤺 🥜 🛌🏻

एक साइट है जिसमें मोबाइल संस्करण नहीं है, और आपको कम से कम समय के साथ उपयोग करने के लिए मोबाइल उपयोगकर्ताओं को अधिक सुखद बनाने की आवश्यकता है।

मैं इस बारे में बात करूंगा कि साइट में बदलाव करने की गति कैसे हो, और इसे संपादित करने के लिए बिना किसी लाइव साइट पर त्वरित टाइपिंग के लिए उपकरणों पर विचार करें।

आप सामान्य तरीके से जा सकते हैं - साइट की प्रतिलिपि बनाएँ और इसे अपनी मशीन पर संशोधित करें, या सीधे काम करने वाली साइट पर सब कुछ लिखें (यह ऐसा नहीं करना सबसे अच्छा है)।

यहां उपयोगकर्ता स्क्रिप्ट, लिवरेलॉड, एसएएस या अन्य प्रीप्रोसेसर बचाव के लिए आते हैं। इस सेट के साथ, साइट को अनुकूलित करने का समय कई बार कम हो जाता है।

1. उपयोगकर्ता स्क्रिप्ट

मैं उपयोगकर्ता स्क्रिप्ट के साथ शुरू करूँगा - इसके लिए आप क्रोमियम, फ़ायरफ़ॉक्स पर आधारित किसी भी ब्राउज़र प्लग-इन का उपयोग कर सकते हैं।

क्रोम टेम्परॉन्की के लिए उपयुक्त है, मैं इसके उदाहरण पर दिखाता हूं।

सीएसएस और व्यूपोर्ट जोड़ना

मैं पीड़ित की साइट पर जाता हूं और देखता हूं कि हेड टैग में क्या है, ज्यादातर मामलों में आपको मेटा टैग, व्यूपोर्ट टैग और शैलियों को जोड़ना होगा जो मैं हेड टैग के अंत में लिखूंगा।

छेड़छाड़ के लिए उपयोगकर्ता स्क्रिप्ट

// ==UserScript== // @name https://habr.com/ // @namespace http://tampermonkey.net/ // @version 0.1 // @description Minimal append link tag to head, enjoy css // @author You // @match https://habr.com/* // ==/UserScript== (function() { 'use strict'; let filename = 'http://localhost:5500/common.css'; let link = document.createElement('link'); link.rel = "stylesheet"; link.href = filename; document.head.appendChild(link); //      head let metaViewport = document.createElement('meta'); metaViewport.name = "viewport"; metaViewport.content = "width=device-width, initial-scale=1.0"; document.head.appendChild(metaViewport); })();

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

सीएसएस वितरण के लिए सर्वर

अपना सर्वर शुरू करने के लिए, आप कई में से एक का उपयोग कर सकते हैं या अपने संपादक में प्लग-इन का उपयोग कर सकते हैं।

यदि आपके पास npm स्थापित है, तो स्थैतिक पैकेज का उपयोग करें, अगर यह php है तो आप इसके सर्वर और इतने पर उपयोग कर सकते हैं।

एक तरीका और भी आसान है: इसके लिए दृश्य स्टूडियो कोड और प्लगइन्स का उपयोग करें, उदाहरण के लिए, लोकप्रिय लाइव सर्वर।

Vscode में css फाइलों के साथ डायरेक्टरी खोलें और बार में गो लाइव बटन पर क्लिक करें - लोकलहोस्ट: 5500 सर्वर शुरू हो जाएगा, इसलिए लिंक टैग में मैं सिर्फ लोकलहोस्ट निर्दिष्ट करता हूं: 5500 / common.css

preprocessors

मैं नंगे सीएसएस नहीं लिखना चाहता हूं और sass का उपयोग करना चाहता हूं, इसलिए मैं vscode में लाइव sass कंपाइलर भी नहीं रखूंगा। यदि आप किसी भिन्न सर्वर का उपयोग कर रहे हैं, तो आप उस निर्देशिका में कंसोल पर इंगित करके आधिकारिक sass प्रोग्राम का उपयोग कर सकते हैं, जो कि sass सामान्य देखता है। sass सर्वर वितरित करता है
अब मेरे पास इस साइट के कोड तक पहुंच के बिना किसी भी साइट के लिए अनुकूली लिखने के उपकरण हैं।

ऑटो अपडेट

सीएसएस फ़ाइल को बदलते समय एक अतिरिक्त सुविधा पृष्ठ का ऑटो-रिफ्रेश होती है। ऑटो-अपडेट के लिए, मैं लिवरेलैड का उपयोग करता हूं, क्रोमियम और फ़ायरफ़ॉक्स पर आधारित अधिकांश लोकप्रिय संपादकों और ब्राउज़रों के लिए लिवरेलड प्लगइन्स उपलब्ध हैं।

मैंने क्रोम में एक्सटेंशन और vscode में एक्सटेंशन डाल दिया। मैं vscode ctrl + shift + p> लिवरेलॉड स्टार्ट कमांड लाइन में कमांड के साथ लिवरेलड सर्वर शुरू करता हूं।

उसके बाद, ब्राउज़र में, मैं उस बटन पर क्लिक करता हूं जो एक्सटेंशन इंस्टॉल करने के बाद दिखाई देता है। सब कुछ, जब आप सीएसएस शैली बदलते हैं, तो साइट पर परिवर्तन तुरंत दिखाई देते हैं।

2. दूसरा तरीका सभी में एक है, ब्राउज़र-सिंक

एनपीएम और ब्राउज़र-सिंक। यदि आप इन 2 शब्दों को जानते हैं, तो इस तरह से जाना बेहतर है।

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

निर्देश मैनुअल

नोडज स्थापित करें (यदि आपने इसे अभी तक स्थापित नहीं किया है)
प्रोजेक्ट फ़ोल्डर में, npm init कंसोल में प्रोजेक्ट को इनिशियलाइज़ करें (जब इनिशियलाइज़ करते हैं, तो प्रोजेक्ट का नाम दर्ज करें)
ब्राउज़र-सिंक स्थापित करें: कंसोल में npm i ब्राउज़र-सिंक - save-dev टाइप करें
नीचे दिए गए कॉन्फ़िगरेशन को कॉपी करें और किसी भी नाम के साथ एक .js फ़ाइल बनाएं (उदाहरण के लिए प्रॉक्सी.जेएस) और उस यूआरएल को बदलना न भूलें जिसके साथ आप कॉन्फ़िगरेशन में काम करेंगे
कंसोल में नोड प्रॉक्सी चलाएँ
हो गया, सर्वर चल रहा है। जब आप स्थिर फ़ोल्डर में रखी गई फ़ाइलों को बदलते हैं तो ब्राउज़र-सिंक स्वचालित रूप से पृष्ठ को फिर से लोड कर देगा।

हैबरूसर @monochromer को कॉन्फ़िगर करता है

 let browserSync = require('browser-sync').create(); browserSync.init({ proxy: 'http://site.com', serveStatic: ['static'], files: ['static/**/*.*'], rewriteRules: [ { match: /<\/head>/i, fn: (req, res, match) => `<link rel="stylesheet" href="/custom.css" />` }, { match: /<\/body>/i, fn: (req, res, match) => `<script async src="/scripts.js"></script>` } ] });

इस दृष्टिकोण के लाभ:

आप अपने पसंदीदा संपादक में काम करते हैं और ब्राउज़र एक्सटेंशन की कार्यक्षमता से सीमित नहीं हैं
जीआईटी के साथ संस्करण

परिणाम

अब, यदि आपके पास पहले से ही अनुकूली लेआउट में पर्याप्त कौशल है, तो आप साइट को मोबाइल दर्शकों के लिए अनुकूलित कर सकते हैं जो अब औसतन 50 प्रतिशत हैं और खोज इंजन सीधे लिखते हैं कि मोबाइल संस्करण की आवश्यकता है और इसकी उपलब्धता की जांच करें।

आपके द्वारा किए जाने के बाद, आपको बस साइट पर शैलियों को अपलोड करना होगा और सिर पर कुछ टैग जोड़ना होगा।

जोड़: ivan386 के नीचे टिप्पणी में लिखा है कि शैलियों का एक उदाहरण देना अच्छा होगा। इस मामले में, आपको एक नया लेख लिखने की आवश्यकता होगी जिसमें मैं एक पीड़ित के रूप में कुछ राज्य की वेबसाइट ले जाऊंगा और इसे अनुकूलित करूंगा, जिसमें मोबाइल मेनू भी शामिल होगा।

साइट तक पहुंच के बिना एक उत्तरदायी साइट बनाने के लिए उपकरण