🎽 👧🏾 🏇🏿 أدوات لإنشاء موقع استجابة دون الوصول إلى الموقع 🐪 📏 👋🏻

يوجد موقع ليس به إصدار للجوال ، وتحتاج إلى جعل مستخدمي الجوال أكثر متعة في الاستخدام مع أقل وقت ممكن.

سأتحدث عن كيفية الإسراع بإجراء تغييرات على الموقع ، وسأبحث عن أدوات لضبط التنضيد السريع على الموقع المباشر دون الوصول إلى تحريره.

يمكنك اتباع الطريقة المعتادة - نسخ الموقع وتعديله على جهازك ، أو كتابة كل شيء مباشرةً إلى موقع العمل (من الأفضل عدم القيام بذلك).

هنا تأتي نصوص المستخدم أو تحميل الكبد أو ساس أو أي معالجات مسبقة أخرى. مع هذه المجموعة ، يتم تقليل وقت تكييف الموقع عدة مرات.

1. النصي المستخدم

سأبدأ بنصوص المستخدم - لهذا يمكنك استخدام أي مكون إضافي للمتصفح يعتمد على chromium ، فايرفوكس.

ل chrome tampermonkey مناسب ، أنا تظهر في مثاله.

مضيفا المغلق و viewport

أذهب إلى موقع الضحية وأرى ما هو في علامة الرأس ، وفي معظم الحالات تحتاج إلى إضافة علامة التعريف وعلامة منفذ العرض والأنماط التي سأكتبها في نهاية علامة الرأس.

النصي المستخدم ل tampermonkey

// ==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 متصلاً على الموقع ، فسنستخدمه ، إن لم يكن ، فإننا نستخدم JavaScript العادي.
القيام به. الآن ، عند المشاهدة ، يمكنك أن ترى أنه قد تمت إضافة العلامات ويمكنك العمل بالفعل عن طريق تحديد المسار المباشر للملف على القرص. سأذهب أبعد من ذلك عن طريق تشغيل الخادم.

خادم لتوزيع المغلق

من أجل بدء تشغيل الخادم الخاص بك ، يمكنك استخدام واحد أو العديد من المكونات الإضافية في المحرر الخاص بك.

إذا قمت بتثبيت npm ، فاستخدم الحزمة الثابتة ، وإذا كان php ، فيمكنك استخدام الخادم الخاص به وما إلى ذلك.

هناك طريقة أسهل: استخدام رمز الاستوديو المرئي والإضافات الخاصة به ، على سبيل المثال ، الخادم المباشر الشهير.

افتح الدليل الذي يحتوي على ملفات css في vscode وانقر فقط على زر go live في الشريط - المضيف المحلي: 5500 server سيبدأ ، لذلك في علامة الارتباط ، أقوم بتحديد localhost : 5500 / common.css

preprocessors

لا أريد أن أكتب css العارية وأريد استخدام sass ، لذلك سأضع مترجم sass المباشر في vscode. إذا كنت تستخدم خادمًا مختلفًا ، فيمكنك استخدام برنامج sass الرسمي من خلال الإشارة إلى وحدة التحكم في الدليل التي يوزعها خادم sass watch common.sass
لدي الآن أدوات للكتابة على أي موقع للتكيف دون الوصول إلى رمز هذا الموقع.

التحديث التلقائي

الراحة الإضافية هي التحديث التلقائي للصفحة عند تغيير ملف css. بالنسبة للتحديث التلقائي ، أستخدم livereload ، وتتوفر إضافات livereload لمعظم المحررين والمتصفحات الشائعة بناءً على chromium وفايرفوكس .

أضع التمديد في الكروم والامتداد في vscode. أبدأ تشغيل خادم livereload بالأمر في vscode ctrl + shift + p> livereload start سطر الأوامر.

بعد ذلك ، في المتصفح ، انقر فوق الزر الذي يظهر بعد تثبيت الامتداد. كل شيء ، عند تغيير نمط css ، تكون التغييرات على الموقع مرئية على الفور.

2. الطريقة الثانية هي الكل في واحد ، متزامن المتصفح

NPM ومتزامن المتصفح. إذا كنت تعرف هاتين الكلمتين ، فمن الأفضل أن تسير بهذه الطريقة.

إضافة: جربت هذا النهج ، اتضح أنه مناسب جدًا والأهم من ذلك - بسيط جدًا! في وقت لاحق ، سأكتب مقالة مفصلة حول هذا النهج في مثال إنشاء أنماط سريعة الاستجابة لأي موقع.
شكرا مرة أخرى على أحادي اللون Habraiser

دليل التعليمات

تثبيت nodejs (إذا لم تقم بتثبيته بعد)
في مجلد المشروع ، قم بتهيئة المشروع في وحدة تحكم بدء تشغيل npm (عند التهيئة ، ما عليك سوى إدخال اسم المشروع)
تثبيت Browser-sync: اكتب npm i browser-sync - حفظ ديف في وحدة التحكم
انسخ التكوين أدناه وقم بإنشاء ملف .js بأي اسم (على سبيل المثال proxy.js) ولا تنسَ تغيير عنوان url الذي ستعمل به في التكوين
تشغيل العقدة proxy.js في وحدة التحكم
تم ، الخادم قيد التشغيل. المتصفح - مزامنة عند تغيير الملفات التي تضعها في مجلد ثابت ، سيتم تلقائيا إعادة تحميل الصفحة.

Habrauser configmonochromer

 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>` } ] });

مزايا هذا النهج:

أنت تعمل في محررك المفضل ولا تقتصر على وظيفة امتداد المتصفح
الإصدار باستخدام git على سبيل المثال

يؤدي

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

بعد الانتهاء ، عليك فقط تحميل الأنماط على الموقع وإضافة بضع علامات إلى الرأس.

إضافة: في التعليقات أدناه كتب ivan386 أنه سيكون من الجميل إعطاء مثال على الأنماط. في هذه الحالة ، ستحتاج إلى كتابة مقال جديد سآخذ فيه بعض مواقع الويب الخاصة بالولاية كضحية وتكييفها ، مع إضافة قائمة الهاتف المحمول.

أدوات لإنشاء موقع استجابة دون الوصول إلى الموقع