آموزش استخراج کد

[mahdi6 1]

سلام به همگی. در این سایت یک لوگو هست از حرف G که با حرکات موس تغییرات میکند و با کلیک کردن پخش می شود . لینک ها تنها برای اعضای سایت قابل نمایش است.  اشتباه نکنم جزو کدهای جاوا هست.

میخواستم آموزش استخراج همچین کدهایی از بین کدهای html صفحه رو بهم بدید و بگید چجوری میتونم کد این حرف همراه با افکتشو در بیارم و شخصی سازیش کنم؟!

 

چطور میشه در المنتور از این کد استفاده کرد و ممنون میشم اگر کدخام رو استخراج کنید و بفرستید همینجا تا بتونم تشخیص بدم دقیقا کدوم بخش ها رو استخراج کردید

[Masih 6,279]

درود؛

آدرس سایت رو ندادید

[mahdi6 1]

در 13 دقیقه قبل، Masih گفته است :

درود؛

آدرس سایت رو ندادید

ویرایش شد :  لینک ها تنها برای اعضای سایت قابل نمایش است.

در 12 ساعت قبل، Masih گفته است :

درود؛

آدرس سایت رو ندادید

مسیح عزیز آموزشی برای اینکار نداری؟ 

چون خیلی وقته دنبال استخراج کد هستم اما هیچ جا نتونستم درست و اصولیشو پیدا کنم و عمدتا با یه نرم افزار میان کل سایت رو دانلود میکنن و توی اون همه فایل دنبال کد مورد نظر میگردن

[Masih 6,279]

کد HTML

<div class="slogan-left hidden-xs col-md-6 col-lg-6 col-sm-6">
        <img id="logo" data-init-position="random" data-init-direction="random" data-fade-position="random" data-fade-direction="random" data-particle-gap="2" data-noise="40" class=" next-particle  img-responsive" src="https://rayvarz.com/sites/default/files/2018-10/620.png" style="display: none;">
    <canvas width="744" height="630"></canvas></div>

کد جاوا اسکریپت

$(document).ready(function () {
        //Next Particle Canvas
        var nextParticle = document.all.logo.nextParticle;
        var generateCanvase=function(){
            var sloganWidth=$(".slogan").find(".slogan-left").innerWidth();
            var sloganHeight=$(".slogan").find(".slogan-left").innerHeight();
            nextParticle.width =   Math.floor(sloganWidth);
            nextParticle.height =   Math.floor(sloganHeight);
        };
        generateCanvase();
        window.onclick = function() {
            document.all.logo.nextParticle.stop();
        };
        document.all.logo.nextParticle.on('stopped', function() {
            document.all.logo.nextParticle.start();
        });
        window.onresize = function() {
            generateCanvase();
            nextParticle.start();
        };
    if ($(window).width() <1400 && $(window).width() >= 1024){
    }
});

استایل

.slogan-left canvas{
        left: 0;
    }

و استفاده از کتابخانه های جی کوئری برای اجرای کدها

 

 

در 14 ساعت قبل، mahdi6 گفته است :

چون خیلی وقته دنبال استخراج کد هستم اما هیچ جا نتونستم درست و اصولیشو پیدا کنم و عمدتا با یه نرم افزار میان کل سایت رو دانلود میکنن و توی اون همه فایل دنبال کد مورد نظر میگردن

آموزش خاصی که نداره یعنی ابزاری نیست برای استخراج یک تکه کد مشخص. باید دانش کدنویسی HTML و JS داشته باشه تا بدونی کدوم کد برای چه قسمتی استفاده شده.

برای مثال همین سایتی که گفتید، شما باید با ابزار Inspect مرورگر اون قسمت HTML رو پیدا کنید، بعد چک کنید اگه دستورات JS مثل onclick یا onhover یا امثال اون داخل یک بخش استفاده شده باشه، نشون میده که یک کد جاوا اسکریپت تابع برای اون وجود داره. و اگر اون کد html دارای ID یا Class باشه، احتمال اینکه از اون آی دی یا کلس برای کد جاوا اسکریپت استفاده شده باشه هم هست.

درباره همین سایتی که گفتید، ما یک کلس یا آی دی رو از محدوده کد موردنظرمون انتخاب می کنیم و کپی می کنیم:

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

بعد از اون بالای پنجره روی Sources کلیک کنید و روی آدرس سایت کلیک راست کنید و گزینه Search in all files رو بزنید

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

داخل کادر جستجویی که باز میشه، اون کلس یا آی دی یا کد موردنظرتون رو وارد کنید و کلید اینتر رو بزنید تا توی کل فایل های اون صفحه شامل استایل و جاوا اسکریپت و کدهای درون خطی بگرده و تمامی کدهای مرتبط با اون کلمه رو براتون لیست می کنه

لینک ها تنها برای اعضای سایت قابل نمایش است.

[mahdi6 1]

دم شما گرم آموزش کامل بود حالا راحت میشه توی کدنویسی استفاده کرد ازش. 

فقط امکان آموزش اضافه کردن کامل این کد در المنتور پرو در این تاپیک هست؟ یا در بخش دیگری باید این موضوع رو مطرح کنم؟ چون برخی سایت ها وردپرسی هستند و خواهان ادد کردن یکسری کدهای html جاوا و css از طریق صفحه سازهایی همچون المنتور هستند

[Masih 6,279]

در 34 دقیقه قبل، mahdi6 گفته است :

فقط امکان آموزش اضافه کردن کامل این کد در المنتور پرو در این تاپیک هست؟ یا در بخش دیگری باید این موضوع رو مطرح کنم؟ چون برخی سایت ها وردپرسی هستند و خواهان ادد کردن یکسری کدهای html جاوا و css از طریق صفحه سازهایی همچون المنتور هستند

آموزش خاصی نیاز نداره، برای کدهای HTML که باید از بلوک کدهای HTML استفاده کنید و برای کدهای استایل و جاوا یک فایل دلخواه داخل پوشه قالب بسازید و کدها رو داخلش قرار بدید. بعد اون فایل ها رو به قالب معرفی کنید تا داخل سایت لود کنه. 

یک فایل برای جاوا و یک فایل برای استایل بسازید و کدهای دلخواهتون رو داخل اونها اضافه کنید تا داخل سایت اعمال بشن و نخواهید فایل های قالب رو ویرایش کنید که با آپدیت تغییراتتون ازبین بره