
آشنایی با کدها و بلاکهای بلاگفا
در وبسایت بلاگفا این امکان برای کاربران وجود دارد که کدهای قالب را ویرایش کنند ، برای همین یکسری بلاک مخصوص درنظر گرفته شده است برای ویرایش و طراحی قالب بلاگفا اول باید با این بلاکها آشنایی کامل پیدا کنیم
بلاک چیست ؟
منظور از بلاک یکسری کدها با ساختار خاص هستند که در هر وبلاگ یا وبسایتی با توجه به برنامه نویسی سایت متفاوت است ، در بلاگفا هم کدهای خاصی وجود دارد که هر کدام مسئول انجام یک کاری هستند .
در اصل صفحه وبلاگی که میبینیم شامل کدهایی هستند که از قبل توسط بلاگفا جایگذاری شدن ، ما عنوان وبلاگمون رو در بخش مدیریت عوض میکنیم بدون اینکه بریم سراغ برگه html ، درواقع بخش مدیریت بلاگفا همون رابط ما هستش که کار مارو راحت کرده ، چطور این کار رو میکنه ؟ با استفاده از بلاک
بلاک مخصوص عنوان وبلاگ <-BlogTitle->
هست وقتی این بلاک رو برگه html داشته باشیم هروقت که ما عنوان وبلاگ رو عوض کنیم این بلاک عوض میشه و شکل اصلی خودش نشون داده نمیشه
لیست کدها و بلاکهای بلاگفا
این تگها را میتوان در هرجایی از برگه قرار داد ، فقط به کوچک یا بزرگ بودن حروف دقت کنید درصورت اشتباه پاسخی دریافت نمیکنید یا باعث به هم ریختگی قالب خواهد شد
<-BlogId->
کد معرفی کننده نام کاربری وبلاگ
<-BlogUrl->
آدرس اینترنتی وبلاگ ، مانند http://demo.blogfa.com
<-BlogAuthor->
نام مدیر و نویسنده اصلی وبلاگ . مانند پریسا
<-BlogEmail->
آدرس ایمیل نویسنده وبلاگ
<-BlogDescription->
توضیحات وبلاگ
<-BlogTitle->
عنوان وبلاگ
<-BlogAndPostTitle->
عنوان وبلاگ / در لینک مستقیم مطالب عنوان وبلاگ به همراه عنوان مطلب
<-BlogArchiveLink->
نام صفحه آرشیو وبلاگ
<-BlogTimeZone->
فاصله زمانی از وقت گرینویچ
<-BlogCustomHtml->
کدهای وبلاگ مانند کد موزیک ، کدابزار
کدهای BLOGFA مربوط به پست هستش و بلاکهای زیر فقط باید در تگ(بلاک)BLOGFA استفاده بشه
<-PostTitle->
عنوان مطلب ارسال شده
<-PostContent->
متن کامل مطلب ارسال شده
<-PostDate->
تاریخ ارسال مطلب
<-PostTime->
زمان ارسال مطلب
<-PostId->
شماره شناسایی و مشخص هر مطلب
<-PostLink->
لینک هر مطلب که شامل اسم صفحه آرشیو ماه یا هفته و شماره شناسایی مطلب میباشد.
<-PostAuthorId->
کد یا شماره نویسنده مطلب ارسال شده
<-PostAuthor->
عنوان نویسنده مطلب ارسال شده
<-PostAuthorEmail->
ایمیل نویسنده مطلب ارسال شده
<-PostAuthorLink->
لینک به صفحه آخرین مطالب نوشته شده توسط نویسنده مطلب
<-PostCategoryId->
کد یا شماره اولین موضوع مرتبط با مطلب ارسال شده
<-PostCategory->
عنوان موضوع اولین موضوع مرتبط با مطلب ارسال شده
<BlogComment>
بلاک مربوط به بخش نظر
بلاک برای نمایش لینک ادامه مطلب
<BlogPostTagsBlock>
این بلاک برای نمایش برچسبهای مرتبط با یک مطلب میباشد. در صورتی که مطلبی دارای برچسب باشد محتویات این بلاک نمایش داده خواهد شد
<BlogPostTags>
این بلاک چگونگی نمایش برچسبهای مرتبط با یک مطلب را مشخص میکند. در صورتی که مطالبی دارای برچسب باشد محتوایت این بلاک نمایش داده خواهد شد.این بلاک زیرمجموعه بلاک BlogPostTagsBlock میباشد . همچنین این بلاک دارای یک پارامتر اختیاری است که جداکننده برچسبها را مشخص میکند و میتواند یک کاراکتر خاص(مانند ویرگول)، فاصله یا تگهای HTML باشد. این بلاک برای هر مطلب و به تعداد برچسبهای مرتبط تکرار می شود.
<-TagName->
عنوان برچسب
<-TagLink->
لینک به صفحه ای که پستهای مرتبط با این برچسب را نشان میدهد.
<BlogPostCategoriesBlock>
این بلاک برای نمایش موضوعات مرتبط با یک مطلب میباشد
<BlogPostCategories>
این بلاک چگونگی نمایش موضوعات مرتبط با یک مطلب را مشخص میکند. در صورتی که مطلبی دارای برچسب باشد محتوایت این بلاک نمایش داده خواهد شد.این بلاک زیرمجموعه بلاک BlogPostCategoriesBlock میباشد . همچنین این بلاک دارای یک پارامتر اختیاری است که جداکننده عنوان موضوعات را مشخص میکند و میتواند یک کاراکتر خاص(مانند ویرگول)، فاصله یا تگهای HTML باشد. این بلاک برای هر مطلب و به تعداد موضوعات مرتبط تکرار می شود.
<-CategoryName->
عنوان موضوع
<-CategoryLink->
لینک به صفحه ای که مطالب مرتبط با این موضوع را نشان میدهد
<-CategoryId->
کد یا شماره موضوع
نمونهای از ساختار یک بلاک پست بلاگفا
<BLOGFA> <h2><a href="<-PostLink->"><-PostTitle-></a></h2> <-PostContent-> <BlogPostCategoriesBlock><BlogPostCategories separator="، " ><a href="<-CategoryLink->"><-CategoryName-></a></BlogPostCategories></BlogPostCategoriesBlock> <BlogPostTagsBlock><BlogPostTags separator="، " ><a href="<-TagLink->"><-TagName-></a></BlogPostTags></BlogPostTagsBlock> <BlogComment><span dir="rtl" comment-for="<-PostId->"></span><BlogComment> <BlogExtendedPost><a href="<-PostLink->">ادامه مطلب</a></BlogExtendedPost> <-PostDate-> | <-PostTime-> | <-PostAuthor-> </BLOGFA>
برای صفحه بندی از بلاک <BlogNextAndPreviousBlock> استفاده میکنیم
<BlogNextAndPreviousBlock>
نحوه نمایش لینکهای صفحات دیگر (مطالب قدیمیتر یا جدیدتر) را تعیین میکند
<BlogPreviousPageBlock>
یک بلاک زیرمجموعه برای نمایش صفحه قبلی (مطالب جدیدتر)
<BlogNextPageBlock>
یک بلاک زیرمجموعه برای نمایش صفحه بعدی (مطالب قدیمیتر)
<-BlogPreviousPageLink->
لینک صفحه قبلی (نمایش دهنده مطالب جدیدتر)
<-BlogNextPageLink->
لینک صفحه بعدی (نمایش دهنده مطالب قدیمیتر)
نمونهای از ساختار یک بلاک صفحه بندی ( قبل / بعد)
<BlogNextAndPreviousBlock> <div style="width:100%"> <BlogPreviousPageBlock> <div style="width:49%;float:right;text-align:right"><a href="<-BlogPreviousPageLink->">مطالب جدیدتر</a></div> </BlogPreviousPageBlock> <BlogNextPageBlock> <div style="width:49%;float:left;text-align:left"><a href="<-BlogNextPageLink->">مطالب قدیمیتر</a></div> </BlogNextPageBlock> </div> </BlogNextAndPreviousBlock>
برای نمایش دادن لیست آرشیو از بلاک <BlogArchiveBlock> استفاده میکنیم
نگهدارنده لیست آرشیو
تکرار کننده آیتمهای لیست آرشیو ( ماهانه / هفتگی)
لینک آرشیو
عنوان آرشیو
نمونهای از ساختار یک لیست آرشیو
<BlogArchiveBlock> <BlogArchive> <a href="<-ArchiveLink->"><-ArchiveTitle-></a> </BlogArchive> </BlogArchiveBlock>
برای نمایش دادن بخش درباره وبلاگ یا نویسنده و عکس وبلاگ از بلاک <BlogProfile> استفاده میکنیم
بلاک نمایش دهنده درباره وبلاگ که عکس وبلاگ رو هم درون این بلاک قرار میدیم
بلاک نمایش دهنده عکس وبلاگ
بلاک مشخص کننده آدرس عکس وبلاگ
بلاک درباره وبلاگ / درباره نویسنده
نمونهای از ساختار یک بیوگرافی وبلاگ
<BlogProfile> <BlogPhoto><img src="<-BlogPhotoLink->" ></BlogPhoto> <-BlogAbout-> </BlogProfile>
برای نمایش دادن بخش پیوندهای روزانه از بلاک <BlogLinkDumpBlock> استفاده میکنیم
بلاک نگهدارنده لیست پیوندهای روزانه
بلاک تکرارشونده آیتم پیوندهای روزانه
لینک پیوند روزانه
توضیحات مربوط به پیوند روزانه
نمونهای از ساختار یک لیست پیوند روزانه
<BlogLinkDumpBlock> <BlogLinkDump> <a href="<-LinkUrl->" target="_blank" title="<-LinkDescription->"><-LinkTitle-></a> </BlogLinkDump> <a href="/links" onclick="return openlinks();">آرشیو پیوندهای روزانه</a> </BlogLinkDumpBlock>
برای نمایش دادن بخش دسته بندی موضوعات از بلاک <BlogCategoriesBlock> استفاده میکنیم
بلاک دستهبندی موضوعات
آیتم تکرارشونده موضوعات
لینک موضوع
نمونهای از ساختار یک لیست موضوعات
<BlogCategoriesBlock> <BlogCategories> <a href="<-CategoryLink->"><-CategoryName-></a> </BlogCategories> </BlogCategoriesBlock>
برای نمایش دادن بخش لیست برچسبها از بلاک <BlogTagsBlock> استفاده میکنیم
آیتم تکرارشونده لیست برچسبها
نمونهای از ساختار یک لیست برچسب
<BlogTagsBlock> <BlogTags> <a href="<-TagLink->"><-TagName-></a> <i>(<-TagCount->)</i> </BlogTags> </BlogTagsBlock>
برای نمایش دادن بخش نویسندگان از بلاک <BlogAuthorsBlock> استفاده میکنیم
نمونهای از ساختار یک لیست نویسنده
<BlogAuthorsBlock> <BlogAuthors> <a href="<-AuthorLink->"><-AuthorName-></a> </BlogAuthors> </BlogAuthorsBlock>
برای نمایش دادن بخش پیوندها از بلاک <BlogLinksBlock> استفاده میکنیم
نمونهای از ساختار یک لیست پیوند
<BlogLinksBlock> <BlogLinks> <a href="<-LinkUrl->" target="_blank"><-LinkTitle-> </BlogLinks> </BlogLinksBlock>
برای نمایش دادن بخش اخرین مطالب ارسالی از بلاک <BlogPreviousItemsBlock> استفاده میکنیم
نمونهای از ساختار یک لیست آخرین مطالب ارسالی
<BlogPreviousItemsBlock> <BlogPreviousItems items=”۱۵″> <a href="<-PostLink->"><-PostTitle-> <-PostDate-> <-PostTime-></a> </BlogPreviousItems> </BlogPreviousItemsBlock>
برای نمایش دادن بخش لینک پروفایل مدیر وبلاگ از بلاک <BlogProfileLinkBlock> استفاده میکنیم
نمونهای از ساختار یک لینک پروفایل
<BlogProfileLinkBlock><a href="<-BlogProfileLink->">پروفایل مدیر وبلاگ</a></BlogProfileLinkBlock>
برای بهتر متوجه شدن قالب اصلی بلاگفا ( قالب پیشفرض آبی رنگ ) رو تجزیه میکنیم

هربخش رو داخل یک کادر قرمز رنگ قرار دادیم و کنارش کدی قرار دادیم
A-01 ، خط ۱۶ دراین بخش بلاک <-BlogUrl->
آدرس وبلاگ که در href لینک میگذاریم و بلاک <-BlogTitle->
نمایش دهنده عنوان وبلاگ است
A-02 ، خط ۱۷ دراین بخش بلاک <-BlogDescription->
مربوط به شرح خلاصه وبلاگ هستش که بین تگ h2 قرار داده شده
B-01 ، خط ۲۳ تا ۴۵ دراین بخش بلاک <BLOGFA> </BLOGFA>
قرار داره که یک بلاک تکرار شونده هستش یعنی به تعداد هر پستی که ارسال میکنید یکبار این بلاک تکرار میشه اگر ۲ پست داشته باشید این بلاک ۲ بار با تمام محتویات داخلش تکرار میشن و هر پست رو با شکل و محتوای خودشون به نمایش میذاره
B-02 ، خط ۲۵ دراین بخش بلاک <-PostLink->
که لینک هر پست رو مشخص میکنه در href لینک قرار میگیره و بلاک بعدی مربوط میشه به عنوان پست <-PostTitle->
B-03 ، خط ۲۸ دراین بخش بلاک <-PostContent->
قرار گرفته ، این بلاک هرچی رو که مینویسید ( نوشته ، عکس ، کد و … ) رو در نمایش میده
B-04 ، خط ۳۰ تا ۳۵ دراین بخش <BlogPostTagsBlock> ... </BlogPostTagsBlock>
که بلاک نگهدارنده برچسبهای پست هست قرار داره ، کارش اینه اگر برچسبی وجود داشته باشه بخش برچسبها رو به نمایش بگذاره اما اگر برچسبی وجود نداشته باشه برچسبهای درون پست رو به نشون نمیده
B-05 ، خط ۳۳ دراین بخش <BlogPostTags separator=", ">...</BlogPostTags>
بلاک تکرارشونده برچسب درون پست قرار داره separator=", "
یعنی برچسبها با ,
از هم جدابشن ، <-TagLink->
بلاک لینک برچسب که در href قرار میگیره و بلاک <-TagName->
که نمایش دهنده عنوان برچسب است
B-06 ، خط ۴۰ دراین بخش <-PostDate->
بلاک مربوط به تاریخ ارسال پست قرار گرفته
B-07 ، خط ۴۰ دراین بخش <-PostTime->
بلاک مربوط به زمان ارسال پست قرار گرفته
B-08 ، خط ۴۰ دراین بخش <-PostAuthor->
بلاک مربوط به نام نویسنده پست نوشته شده قرار گرفته
B-09 ، خط ۴۱ دراین بخش <BlogComment> ... </BlogComment>
بلاک نگهدارنده مربوط به بخش نظر قرار گرفته ، اگر بخش نظرات پست بسته باشه این قسمت نمایش داده نمیشه ، بلاک درون این بخش <-PostId->
که شماره پست رو نشون میده و به کد جاوا اسکریپتی که خود بلاگفا قرار داده ارجاع داده میشه تا نظرات رو برای هر پست تنظیم کنه
C-01 ، از خط ۴۷ تا ۵۶ دراین بخش <BlogNextAndPreviousBlock> ... </BlogNextAndPreviousBlock>
بلاک نگهدارنده بخش صفحهبندی قرار داره ، که صفحه بعد و قبل رو به نمایش میذاره ، اگر وبلاگ صفحه قبل و بعد نداشته باشه این بخش نمایش داده نمیشه
C-02 ، از خط ۵۲ تا ۵۴ ، در این بخش بلاک <BlogNextPageBlock> ... </BlogNextPageBlock>
مربوط به صفحات بعد یا مطالب قدیمیتر قرار داره ، این بلاک نگهدارنده مشخص میکنه لینک صفحه بعد وجود داشته باشه یا نه ، بلاک لینک صفحه بعد<-BlogNextPageLink->
C-03 ، از خط ۴۹ تا ۵۱، در این بخش بلاک <BlogPreviousPageBlock> ... </BlogPreviousPageBlock>
مربوط به صفحات قبل یا مطالب جدیدتر قرار داره ، این بلاک نگهدارنده مشخص میکنه که لینک صفحه قبل وجود داشته باشه یا نه ، بلاک لینک صفحه قبل <-BlogPreviousPageLink->
D-01 ، از خط ۶۲ تا ۶۷ ، در این بخش بلاک نگهدارنده <BlogProfile> ... </BlogProfile>
قرار گرفته ، این بلاک مشخص میکنه که بخش بیوگرافی یا پروفایل وبلاگ نمایش داده بشه یا نه
D-02 ، خط ۶۴ ، این بخش مربوط میشه به قسمت تصویر وبلاگ ، که بلاک نگهدانده <BlogPhoto> ... </BlogPhoto>
تصویر هستش ، و بلاک دیگهای که داریم بلاک آدرس تصویر وبلاگ هستش <-BlogPhotoLink->
D-03 ، خط ۶۵ ، <-BlogAbout->
این بلاک قسمت درباره وبلاگ رو به نمایش میذاره
E-01 ، خط ۷۲ تا ۷۴ ، این بلاک مشخص میکنه که لینک پروفایل وبلاگ به نمایش در بیاد یا نه <BlogProfileLinkBlock> ... </BlogProfileLinkBlock>
، بلاک دیگهای که درون بلاک نگهدارنده قرار میگیره بلاک لینک پروفایل هسش <-BlogProfileLink->
F-01 ، خط ۸۰ تا ۹۱ ، این بلاک مشخص کننده نمایش پیوندهای روزانه هستش ، بلاک نگهدارنده به این صورت هست <BlogLinkDumpBlock> ... </BlogLinkDumpBlock>
F-02 ، خط ۸۴ تا ۸۸ ، این بلاک تکرار شونده هر پیوند را به نمایش میزاره <BlogLinkDump> ... </BlogLinkDump>
، به فرض ۵ پیوند روزانه داشته باشیم این بلاک ۵ بار تکرار میشه ، بلاک <-LinkUrl->
مشخص کننده لینک پیوند روزانه و بلاک <-LinkTitle->
مشخص کننده عنوان پیوند روزانه هست و بلاک <-LinkDescription->
مشخص کننده بلاک توضیحات درباره لینک روزانه است
سایر بلاکهای نگهدارنده و تکرارشونده به همین صورت خواهند بود .
نمونهای از کد قالب بلاگفا ( کد قالب زیر تکمیل نیست )
<!DOCTYPE html> <html> <head> <title> <-BlogAndPostTitle-> </title> </head> <body> <div id="wrapper"> <div id="headerbox"> <div id="header"> <h1><a href="<-BlogUrl->"><-BlogTitle-></a></h1> <h2><-BlogDescription-></h2> </div> </div> <div id="container"> <div id="content"> <BLOGFA> <div class="post"> <h2><a href="<-PostLink->"><-PostTitle-></a></h2> <div class="postbody"> <div class="postcontent"><-PostContent-></div> <BlogPostTagsBlock> <div class="posttags"> <span>برچسبها: </span> <BlogPostTags separator=", "><a href="<-TagLink->"><-TagName-></a></BlogPostTags> </div> </BlogPostTagsBlock> </div> <div class="postinfo"> <a href="<-PostLink->">+</a> نوشته شده در <-PostDate-> ساعت <-PostTime-> توسط <-PostAuthor-> <BlogComment> | <span dir="rtl" comment-for="<-PostId->"></span></BlogComment> </div> </div> </BLOGFA> <BlogNextAndPreviousBlock> <div class="nextandprevious"> <BlogPreviousPageBlock> <a href="<-BlogPreviousPageLink->" class="previouslink">مطالب جدیدتر</a> </BlogPreviousPageBlock> <BlogNextPageBlock> <a href="<-BlogNextPageLink->" class="nextlink">مطالب قدیمیتر</a> </BlogNextPageBlock> </div> </BlogNextAndPreviousBlock> </div> <div id="sidebar"> <BlogProfile> <div class="profile"> <BlogPhoto><img src="<-BlogPhotoLink->"></BlogPhoto> <-BlogAbout-> </div> </BlogProfile> <div class="menu"> <ul> <li><a href="/">خانه</a></li> <BlogProfileLinkBlock> <li><a href="<-BlogProfileLink->">پروفایل مدیر وبلاگ</a></li> </BlogProfileLinkBlock> <li><a href="<-BlogArchiveLink->">آرشیو وبلاگ</a></li> <li><a href="/posts/">عناوین نوشته ها</a></li> </ul> </div> <BlogLinkDumpBlock> <div class="box"> <h6>پیوندهای روزانه</h6> <ul> <BlogLinkDump> <li><a href="<-LinkUrl->" target="_blank" title="<-LinkDescription->"> <-LinkTitle-> </a></li> </BlogLinkDump> </ul> </div> </BlogLinkDumpBlock> </div> </div> </div> </body> </html>
خب تا اینجا با لیست بلاکها و کد بلاگفا آشنا شدیم ، در آموزشهای بعدی قراره با تگهای html آشنا بشیم که کم کم بریم سراغ طراحی قالب وبلاگ بلاگفا
+ برای طراحی میتونید از قالب اصلی بلاگفا به عنوان راهنما استفاده کنید هم سریعتره هم اینکه مرتب کدهاشو گذاشته شما فقط کپی میکنید و وقتتون رو هم نمیگیره و به طراحیتون سرعت میبخشه 🙂
جمع بندی
بلاک به یکسری کد خاص میگن که هر کدوم یک وظیفهی خاصی دارن ، و در بلاگفا اصول خاصی وجود داره که باید براساس اون بلاک ها یا کدهارو استفاده کنیم .
به نظرم برای textarea نظراتت همینجا که دیدگاه رو مینویسیم یک کد سی اس اس بزار براش که این خط گوشه نمایش داده نشه که بشه بزرگ و کوچیکش کرد
resize:none
این رو بزار فقط یادت نره آخرش ; رو بزاری
🙂 بزار دوستان تا جایی که دوس دارن کشش بیارن همیشه از کش آوردن خوشم میومد ..
سلام، ساختار قالب های بلاگیکس هم همینه فکر کنم، ولی نمیدونم چجوری لایک و کامنت متنشو عوض کنم میشه بخش بلاگیکس رو هم بذارین؟😊😍
سلام ، برای بلاگیکس طراحی انجام ندادم تابحال و با کدهاش آشنایی ندارم ، ولی سعی میکنم کدهای آموزشی بلاگیکس رو آماده کنم و در قالب یک پست بذارم 😊
سلام چرا نمیذارین؟ ❤
فعلا چند پروژه دیگر در حال اماده شدن هست بخاطر این وقت نمیشه .
سلام من میخوام یه جایی تو قالب های شما بزارم که کاربر به تونه ثبت نام کنه و پروفایل هم داشته باشه ممنون میشم اگه راهنمایی کنید که چطور این کار رو کنم
سلام ، اگر میخواید روی بلاگفا اینکار رو انجام بدین شدنی نیست ، چون همچین دسترسی رو برای کاربرها قرار ندادن.
دوست عزیز عالی بود خیلی خوب آموزش دادی انصافا فقز اگه تونستی هرچه زود تر ادامه اموزش ها رو بزار