چرتک بلاگ

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

پیش نمایش قالب

(البته نمایش کامل و صحیح پیشنمایش نیاز به کمی صبر هستش)

اگر بر روی دکمه بالا کلیک کنین میبینین یک پنجره جدید تو تب یا صفحه جدید میاد که یک صفحه رو برای ما نشون میده و این صفحه ربطی به وبلاگ Bismuth.blog.ir نداره یعنی تو پنجره جدید وبلاگ رو باز نکردم! باور ندارین به اون یکی وبلاگ سر بزنین و متوجه میشین قالبش متفاوت از این هست. جا داره از دوستانمون فاطمه خانم و نویسنده آشنا بابت این قالب مخوف و زیبا تشکر کنم! خب بریم سر آموزش:

در گام اول شما قالب مدنظرتون رو در یک وبلاگ دیگه فعال میکنین (سعی کنین تعداد مطالب اون وبلاگ کم باشه تا کد html قالبتون زیاد نباشه) و به صفحه اصلی وبلاگتون میرین.

در صفحه اصلی صفحه با کلیک راست روی صفحه و انتخاب view page source کد html اون صفحه رو تو تب جدید میبینین (میتونین از کلید میانبر cntrl + u استفاده کنین.)

کل کد نمایش داده شده رو تو یک ویرایشگر مثل notepad کپی کنین تا تغییراتی رو توش اعمال کنیم.

در بین دو تگ head تمامی چیز ها بغیر از کد های مشابه کد های پایین رو حذف کنین:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>چرتک بلاگ</title>
<link href="//blog.ir/media/css/sharedrtl.css?uMV-Qp" rel="stylesheet" type="text/css">
<link href="/static/Z0eOfmRbk84/2501204661/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="//bayanbox.ir/download/2438018307215110639/favicon.ico" rel="shortcut icon">
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

کد های بالایی برای نمایش صحیح صفحه مهم هستن و نبودشون ممکنه مشکل ایجاد کنه. آهان راستی حتما فایل CSS قالبتون رو در جایی مثل بیان باکس یا پیکوفایل آپلود کنین و لینکش رو خودتون به صورت دستی وارد این فایل html کنین چون در غیر اینصورت احتمالش هست که پیش نمایشتون اصلا کار نکنه!

خوب در مرحله بعدی باید یک سری لینک ها که به صورت Relative هستن رو به حالت معمولی برگردونیم.

به صورت خلاصه اگر توی اول لینک // دیدین یعنی پروتکل سایت هر چی بود تو هم از اون استفاده کن.

و اگر دیدین در ابتدای لینک سایتی از / استفاده شده یعنی آدرس اصلی سایت هر چی بود تو هم از اون استفاده کن.

چون این موارد میتونن باعث بشن مثلا عکس یا حتی فایل CSS ما لود نشه باید این آدرس دهی رو تغییر بدیم.

از منوی بالای نت پد بر روی edit و سپس Replace کلیک کنین.

در قسمت find what عبارت "// و در قسمت replace with عبارت "http:/ رو مطابق عکس زیر وارد کنین و تیک گزینه Match case رو هم حتما فعال کنین.

(البته میتونین بجای http از https هم استفاده کنین. دومی رو توصیه میکنم!)

روی Replace All کلیک کنین.

قسمت بعدی برای این هست که لینک های موجود در صفحتون کار کنه و کاملا اختیاری هستش.

باز از همون صفحه در قسمت find what عبارت "/ و در قسمت replace with عبارت "http://weblogshoma.blog.ir/ رو وارد کنین و تیک گزینه Match case رو هم حتما فعال کنین. در قسمت Replace with باید آدرس وبلاگ خودتون رو بنویسین.

روی Replace All کلیک کنین.

برای امتحان اینکه آیا همه چیز رو درست انجام دادیم یا نه فایل رو با فرمت html و با انکودینگ UTF-8 طبق عکس زیر ذخیره کنین و اون رو با مرورگرتون باز کنین. اگر دسترسی اینترنت داشته باشین، باید اون فایلی که ساختین بدون مشکلی لود بشه.

خوب الان کد html پیشنمایش قالبمون رو داریم. میریم به سراغ کار اصلی! توی فایل html کاراکتر های غیرمجاز مثل " / وجود دارن که موجب مشکل میشن و ما نمیتونیم با وجود اونها کل کد html مون رو در یک متغیر ذخیره کنیم. یک روش برای حل این مشکل استفاده از escape charachter ها هستش یعنی مثلا به جای کاراکتر خط جدید از \n استفاده میکنن. میتونین تو گوگل عبارت " javascript string escape tool" رو جست و جو کنین تا به سایت هایی که خودکار این کار رو برای ما انجام میده برسین! تو این مثال من از این سایت استفاده میکنم. کد html تون رو در این صفحه وارد کنین و بر روی ESCAPE بزنین و کدی که بهتون میده رو کپی کنین. بعدا از این کد استفاده میکنیم.

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

<noscript>مرورگر شما از امکان جاوا اسکریپت پشتیبانی نمی کند!</noscript>
<button onclick="theme1()">پیش نمایش قالب</button>
<script>
function theme1() {
var newpage = "Code Shome dar inja";
var mywindows = window.open("","_blank","");
mywindows.document.open() ;
mywindows.document.write(newpage);
mywindows.document.close() ;
};
</script>

کدی که escape شده رو در قسمتی که گفتم پیست کنین و پست رو ذخیره کنین. اگر مراحل رو خوب و دقیق انجام داده باشین نباید مشکلی داشته باشین :)

توجه کنین کد بالا فقط مربوط به یک پیش نمایش هستش و اگر میخواین پیش نمایش های بیشتری بسازین فقط کافیه کد های بالا رو مجددا کپی کنین و به جای theme1 از عبارت دیگه مثل theme2 استفاده کنین.

البته میتونین قسمت اسکریپت رو در یک فایل جدا بنویسین و به فایل html تون لینک کنین. به نظرم این کار بهتر هستش و فایل html تون رو کمتر شلوغ میکنه. برای اینکار کل عبارت های بین دو تگ script رو کپی کنین و اون ها رو در یک فایل با پسوند JS ذخیره کنین و در جایی مثل بیان باکس آپلود کنین. لینک دانلود فایلی که آپلود کردین رو به صورت زیر در فایل html استفاده کنین:

<script src="LinkFileShoma.js"></script>

و البته اگر CSS بلد باشین میتونین ظاهر دکمه رو به هر صورتی که میخواین تغییر بدین (در قسمت های قبلی وبلاگ زدایان کمی در این مورد توضیحاتی دادم)

اگر مشکلی بود حتما در قسمت نظرات اعلام کنین تا بتونم کمکتون کنم.

این هم از آموزش مخصوص برای طراحان قالب. امیدوارم به دردتون خورده باشه!